Пользовательский вид с кнопками

Question

Мне нужно построить следующий вид:

Где кнопки могут быть обычные кнопки, которые доступны из кода Java с использованием findViewById() метода.

Я не уверен, могу ли я это сделать с помощью LayerList или если мне нужно реализовать пользовательский вид с нуля? Может ли кто-нибудь предложить какой-то путь, которым я могу следовать, чтобы достичь этого?

Update

Сейчас у меня есть это:

Что мне нужно сделать сейчас это: - скрыть то, что находится за пределами круга; - только части кнопок, находящиеся внутри cicle, должны запускать событие onClick.

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

Вот мой код:

main_layout.xml

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

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:orientation="vertical" > 

     <include layout="@layout/custom_layout" /> 
    </LinearLayout> 

</RelativeLayout> 

custom_layou.xml

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content"> 

    <LinearLayout 
     android:id="@+id/buttons_layout" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:paddingTop="14dp" 
     android:paddingBottom="10dp" 
     android:background="#CC0000FF" 
     android:orientation="vertical"> 

     <Button 
      android:id="@+id/button1" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:text="Button1" /> 

     <Button 
      android:id="@+id/button2" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:text="Button2" /> 

     <Button 
      android:id="@+id/button3" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:text="Button3" /> 

     <Button 
      android:id="@+id/button4" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:text="Button4" /> 
    </LinearLayout> 

    <ImageView 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:layout_alignTop="@+id/buttons_layout" 
     android:layout_alignLeft="@+id/buttons_layout" 
     android:layout_alignBottom="@+id/buttons_layout" 
     android:src="@drawable/circle_foreground" /> 

</RelativeLayout> 

circle_foreground.xml

<?xml version="1.0" encoding="utf-8"?> 
<shape 
xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape="ring" 
android:innerRadius="100dp" 
android:thickness="0dp" 
android:useLevel="false" > 

<solid android:color="@android:color/transparent" /> 

<stroke android:width="4dp" 
    android:color="#000000"/> 

</shape> 

Answer 1

Две вещи, которые вы должны объединить:

1. построить макет, накладывая свои кнопки (нижний слой) с ImageView (верхним слоем), который имеет отверстие в нем. See here, how to do that. Два слоя можно определить с помощью FrameLayout

2. Теперь вы должны делегировать все касания по кругу до кнопок. Это должно быть возможно, установив TouchListener на ImageView. Этот Touchlistener возвращает true, если прикосновение было вне круга, в противном случае - false. При возврате false Android должен передать прикосновение к следующему уровню, который является слоем с кнопками.

В целом, я надеюсь, что исходящий эффект стоит того, чтобы работать, поскольку это, похоже, много работы и усилий по тестированию.

Answer 2

Вы можете использовать 6 разных ImageView и объединить в один круг ImageView в RelativeLayout, в каждом ImageView установить их onclicklistener, так что вы можете сделать то, что вы хотите