Android complex shape button

问题:

Hello android developers,

My UI designer wants a complex shape button, but I don't know how do that, please help me.

This is the design she wants image

回答1:

There are many ways to do this, the easiest would probably be to create an xml selector for each button that will abide by the states you want (normal, pressed, disabled, etc.). For example:

Create the drawable hex_button_one.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Pressed -->
    <item android:state_pressed="true" >
       <bitmap android:antialias="true" 
               android:dither="true" 
               android:src="@drawable/myButtonPressed" />
    </item>

    <!-- normal -->
    <item>
        <bitmap android:antialias="true" 
               android:dither="true" 
               android:src="@drawable/myButtonNormal" />
    </item>
</selector>

Then with your layout xml file you can set the background for the button

 <Button android:id="@+id/hexButtonOne"
        android:layout_height="26dp"
        android:layout_width="26dp"
        android:layout_centerHorizontal="true"
        android:background="@drawable/hex_button_one"/>

The main issue with this is you will get a rectangle area that responds to you touches, and if you have the buttons organized as they were in the image then clicking one may actually be selecting another.

You may be able to solve this issue with overriding the onTouchEvent of the Button class (meaning you will have to extend it) and return false if it isn't in the area you want it to be in.

Overall, the best --and most complete-- way of doing this would be to extend the View class using the onMeasure, onDraw, etc. methods to perform exactly what you want. However if you are new to Android or haven't done this before I would recommend trying what I have said above first.