Кнопки в круговом формировании

Есть ли кто-нибудь, кто может помочь создать макет, подобный этому (я имею в виду, как я могу выбрать область изображения и преобразовать ее в кнопку?)? Что-то, что я хочу создать

Как я (упрощаю) это делаю, используя RelativeLayout
Это идея:

Введите описание изображения здесь

Зеленая область прямоугольника – это просто пространство TextView. Это два раза больше, чем у 8 TextViews (вам нужно всего 8, а не 12!), Которые разумно смещены вокруг него.

Вы можете легко выровнять их, используя атрибуты выше, ниже, toRightOf, … доступные в контейнере RelativeLayout.

Они кликабельны (а не центральные) и требуют, чтобы вы подготовили 8 «значков», вы можете оставить все остальное в качестве фона (просто сотрите с некоторыми белыми места, где должны быть размещены ваши значки).

Просто используйте dp в качестве единицы измерения, для масштабируемости.

Этот дизайн ОЧЕНЬ ПРОСТОЙ, и он работает достаточно хорошо.

Вам не потребуется гораздо больше кода, чем прослушиватель кликов, который запускает некоторые действия.

Как вы думаете?

Я опубликовал аналогичный ответ в прошлом: см. Здесь . Рисунок был выполнен с помощью кода, но кнопки были смещены в xml.

Так что макет xml действительно похож на то, что вам нужно:

<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> 

Не используйте ImageButtons вместо TextViews (более уместно, в вашем случае).

Для более четкого представления 8 кнопок вам действительно нужно будет работать:

Введите описание изображения здесь

Зеленый – DUMMY

Это, вероятно, было бы лучше всего реализовать в виде единого пользовательского представления.

Вы можете использовать atan2, чтобы получить степень от центра обзора до того, где пользователь прикасается – если расстояние между событием касания и центром обзора больше, чем радиус внутреннего круга (вокруг крикетчика), но не Больше, чем внешний круг, тогда вы можете рассчитать, какую кнопку щелкнули на основе угла (что еще проще, потому что они имеют одинаковый размер).

У вас только один белый фон с серой линией с одной стороны, затем нарисуйте 8 из них, повернутых вокруг центра. Затем поместите ваши 8 значков сверху, их позиции рассчитаны на основе расстояния и угла. Переключите активы для нажатых / нажатых состояний, когда пользователь коснется одного из фрагментов.