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都可触摸，设计仍然不受影响。

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>

Answer 2

@ corsair992的建议非常好。但是，在onTouchEvent()后代中重新实现FrameLayout并不是那么容易听起来，因为它是一种非常复杂的方法，具有许多特殊条件。

在这种特殊情况下，问题是FrameLayout包含两个SeekArc视图，而前景中的视图正在消耗所有触摸事件。因此，改变SeekArc本身以忽略不属于它的事件似乎是一个更简单的替代方案。如果SeekArc.ounTouchEvent()对于这些“不需要的”触摸返回false，则其FrameLayout父级将尝试将事件传递给其他子级 - 正是我们想要的。

因此，解决方案是改变它：

@Override
public boolean onTouchEvent(MotionEvent event) {

    if (isUnwantedTouch(event))
        return false;

    switch (event.getAction()) {
    // ... same as before
}

isUnwantedTouch()方法的位置：

protected boolean isUnwantedTouch(MotionEvent event)
{
    return (ignoreTouch(event.getX(), event.getY()) ||
            getProgressForAngle(getTouchDegrees(event.getX(), event.getY())) == INVALID_PROGRESS_VALUE);
}