Buttons in a circle formation

问题:

Is there anybody who can help creating layout like this(I mean, how can I select area of the image and convert it to a button?)?

回答1:

How I would (much simplifying) do that by only using a RelativeLayout
This is the idea:

The green rectangle area is just a spacewasting TextView. It's big twice the other 8 TextViews (you only need 8, not 12!), which are wisely displaced around it.

You can easily align these ones by using the attributes above, below, toRightOf, ... available in a RelativeLayout container.

They are clickable (not the central one) and just require you to prepare 8 "icons", you can leave all the rest as a background (just erase with some white the places where your icons are supposed to be placed).

Just use dp as a measuring unit, for scalability.

This design is VERY SIMPLE to do, and works fairly well.

You won't need much more code than a click listener which starts some activities.

What do you think?

I posted a similar answer in the past: see here. The drawing was was done by code, but the buttons were displaced in xml.

So that xml layout is really similar to what you need:

<RelativeLayout     xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools"     android:background="#f000"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:paddingBottom="@dimen/activity_vertical_margin"     android:paddingLeft="@dimen/activity_horizontal_margin"     android:paddingRight="@dimen/activity_horizontal_margin"     android:paddingTop="@dimen/activity_vertical_margin"     tools:context=".MainActivity"     >     <TextView         android:id="@+id/txt9"         android:layout_width="160dp"         android:layout_height="160dp"         android:layout_centerInParent="true"         android:gravity="center"         android:text="9"         android:textSize="40sp"         android:textStyle="bold"         android:textColor="#ffff"     />     <TextView         android:id="@+id/txt1"         android:layout_width="80dp"         android:layout_height="80dp"         android:layout_above="@id/txt9"         android:layout_alignLeft="@id/txt9"         android:gravity="center"         android:text="1"         android:textSize="40sp"         android:textStyle="bold"         android:textColor="#ffff"     />     <TextView         android:id="@+id/txt8"         android:layout_width="80dp"         android:layout_height="80dp"         android:layout_alignTop="@id/txt1"         android:layout_toRightOf="@id/txt1"         android:gravity="center"         android:text="8"         android:textSize="40sp"         android:textStyle="bold"         android:textColor="#ffff"     />     <TextView         android:id="@+id/txt2"         android:layout_width="80dp"         android:layout_height="80dp"         android:layout_alignTop="@id/txt9"         android:layout_toLeftOf="@id/txt9"         android:gravity="center"         android:text="2"         android:textSize="40sp"         android:textStyle="bold"         android:textColor="#ffff"     />     <TextView         android:id="@+id/txt3"         android:layout_width="80dp"         android:layout_height="80dp"         android:layout_below="@id/txt2"         android:layout_toLeftOf="@id/txt9"         android:gravity="center"         android:text="3"         android:textSize="40sp"         android:textStyle="bold"         android:textColor="#ffff"     />     <TextView         android:id="@+id/txt4"         android:layout_width="80dp"         android:layout_height="80dp"         android:layout_below="@id/txt9"         android:layout_alignLeft="@id/txt9"         android:gravity="center"         android:text="4"         android:textSize="40sp"         android:textStyle="bold"         android:textColor="#ffff"     />     <TextView         android:id="@+id/txt5"         android:layout_width="80dp"         android:layout_height="80dp"         android:layout_alignTop="@id/txt4"         android:layout_toRightOf="@id/txt4"         android:gravity="center"         android:text="5"         android:textSize="40sp"         android:textStyle="bold"         android:textColor="#ffff"     />     <TextView         android:id="@+id/txt7"         android:layout_width="80dp"         android:layout_height="80dp"         android:layout_alignTop="@id/txt9"         android:layout_toRightOf="@id/txt9"         android:gravity="center"         android:text="7"         android:textSize="40sp"         android:textStyle="bold"         android:textColor="#ffff"     />     <TextView         android:id="@+id/txt6"         android:layout_width="80dp"         android:layout_height="80dp"         android:layout_below="@id/txt7"         android:layout_toRightOf="@id/txt9"         android:gravity="center"         android:text="6"         android:textSize="40sp"         android:textStyle="bold"         android:textColor="#ffff"     /> </RelativeLayout> 

Feel free to use ImageButtons instead of TextViews (more appropriate, in your case).

For a much clearer view of the 8 buttons you'll really need to be working:

The green one is DUMMY

回答2:

This would probably be best to implement as a single custom view.

You can use atan2 to get the degree from the centre of the view to where the user touches - if the distance between the touch event and the centre of the view is greater than the radius of the inner circle (around the cricketer), but not greater than the outer circle, then you can calculate which button was clicked based on the angle (which is even easier because they're all the same size).

You just have one white background asset with a grey line on one side, then draw 8 of them rotated around the centre of the view. Then place your 8 icons on top, their positions calculated based on distance and angle. Switch the assets for the pressed / clicked states when the user touches inside one of the slices.

文章来源: Buttons in a circle formation