自定义视图与按钮

时间:2013-12-26 00:25:04

标签: android android-custom-view layer-list

我需要构建以下视图:

enter image description here

按钮可以是使用findViewById()方法从java代码访问的常规按钮。

我不确定我是否可以使用LayerList或者我是否需要从头开始实现自定义视图?任何人都可以提出一些我可以遵循的路径来实现这个目标吗?

更新

现在我有这个:

enter image description here

我现在需要做的是:   - 隐藏圈外的内容;   - 只有在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>

2 个答案:

答案 0 :(得分:1)

你必须要结合两件事:

  1. 通过将按钮(下层)与ImageView(上层)重叠来构建布局,其中有一个洞。 See here, how to do that。可以使用FrameLayout

  2. 定义这两个图层
  3. 现在,您必须将圆圈上的所有触摸委托给按钮。这应该可以通过在TouchListener上设置ImageView来实现。如果触摸在圆圈之外,则此Touchlistener返回true,否则返回false。当返回false时,Android应该将触摸传递到下一级,即带有按钮的图层。

  4. 总而言之,我希望即将产生的影响是值得的,因为它似乎是很多工作和测试工作。

答案 1 :(得分:0)

您可以使用6种不同的图像视图并在relativelayout中组合成一个圆形图像视图, 在每个imageview中设置他们的onclicklistener,以便你可以做你想做的事情