2个半圆圈围绕一个按钮

Question

我正在尝试制作一个看起来像这样的布局.

我正在使用github的 TriggerTrap/SeekArc .这是我的xml.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:seekarc="http://schemas.android.com/apk/res/com.triggertrap.sample"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@android:color/black"
    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" >

    <FrameLayout
        android:id="@+id/seekArcContainer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1" >

        <com.triggertrap.seekarc.SeekArc
            android:id="@+id/seekArc1"
            android:layout_width="300dp"
            android:layout_height="300dp"
            android:layout_gravity="center"
            android:padding="20dp"
            seekarc:arcColor="#808080"
            seekarc:clockwise="true"
            seekarc:max="500"
            seekarc:progressColor="@android:color/white"
            seekarc:rotation="275"
            seekarc:startAngle="0"
            seekarc:sweepAngle="175"
            seekarc:thumb="@drawable/custom_seek_arc_control_selector"
            seekarc:touchInside="false" />


        <com.triggertrap.seekarc.SeekArc
            android:id="@+id/seekArc2"
            android:layout_width="300dp"
            android:layout_height="300dp"
            android:layout_gravity="center"
            android:layout_marginTop="10dp"
            android:padding="20dp"
            seekarc:arcColor="#808080"
            seekarc:clockwise="true"
            seekarc:max="500"
            seekarc:progressColor="@android:color/white"
            seekarc:rotation="95"
            seekarc:startAngle="0"
            seekarc:sweepAngle="175"
            seekarc:thumb="@drawable/custom_seek_arc_control_selector"
            seekarc:touchInside="false" />

        <Button 
            android:id="@+id/btn"
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:layout_gravity="center"
            android:background="@drawable/scrubber_pressed"/>
    </FrameLayout>

</LinearLayout>

现在,问题是,因为我使用的是框架布局,所以只能点击一个seekarc. 如果我将seekarc更改为线性布局,整个布局会像这样扭曲.

现在一切都是可点击的,但设计已经完成.任何人都可以告诉我如何让它工作,使按钮以及两个seekarc都是可触摸的,而且设计仍然不受影响.

Answer 1

作为@matiash方法的替代方法,您还可以将SeekArcs包装在新的FrameLayout容器中,以避免弧首先重叠.

缺点是这会增加您的视图嵌套层次结构,但从好的方面来说,您不必进行任何代码更改或触摸库代码.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:seekarc="http://schemas.android.com/apk/res/com.triggertrap.sample"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@android:color/black"
    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" >

    <RelativeLayout
        android:id="@+id/seekArcContainer"
        android:layout_width="match_parent"
        android:layout_height="300dp" >

        <FrameLayout
            android:layout_width="300dp"
            android:layout_height="150dp"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="150dp">

            <com.triggertrap.seekarc.SeekArc
                android:id="@+id/seekArc1"
                android:layout_width="300dp"
                android:layout_height="300dp"
                android:padding="20dp"
                seekarc:arcColor="#808080"
                seekarc:clockwise="true"
                seekarc:max="500"
                seekarc:progressColor="@android:color/white"
                seekarc:rotation="275"
                seekarc:startAngle="0"
                seekarc:sweepAngle="175"
                seekarc:thumb="@drawable/custom_seek_arc_control_selector"
                seekarc:touchInside="false" />

        </FrameLayout>

        <FrameLayout
            android:layout_width="300dp"
            android:layout_height="150dp"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true">

            <com.triggertrap.seekarc.SeekArc
                android:id="@+id/seekArc2"
                android:layout_width="300dp"
                android:layout_height="300dp"
                android:layout_gravity="bottom"
                android:padding="20dp"
                seekarc:arcColor="#808080"
                seekarc:clockwise="true"
                seekarc:max="500"
                seekarc:progressColor="@android:color/white"
                seekarc:rotation="95"
                seekarc:startAngle="0"
                seekarc:sweepAngle="175"
                seekarc:thumb="@drawable/custom_seek_arc_control_selector"
                seekarc:touchInside="false" />

        </FrameLayout>

        <Button 
            android:id="@+id/btn"
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:layout_centerInParent="true"
            android:background="@drawable/scrubber_pressed"/>
    </RelativeLayout>

</LinearLayout>