2 半圆形 seekarc 围绕一个按钮答案

【问题标题】：2 semi circle seekarc around a button2 半圆形 seekarc 围绕一个按钮
【发布时间】：2015-02-25 15:43:16
【问题描述】：

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

我正在使用来自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 都是可触摸的，并且设计不受影响。

【问题讨论】：

哇，提供你 51.5% 的声誉。你肯定想得到答案
是的！我需要答案。
@Akshat Android 中除了 LinearLayout 和 FrameLayout 之外还有其他的布局。您应该在您的情况下使用 RelativeLayout 并将两个搜索栏定位为@，使它们中的两个垂直放置（在其中一个搜索栏上使用 layout_below 或 layout_above）。
由于SeekArc 视图似乎占用了整个圆的空间，而不管可见弧线如何，您可能需要扩展FrameLayout 并覆盖触摸调度程序以将事件调度到正确的孩子。

标签： java android xml android-layout

【解决方案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>

【讨论】：

有趣 - 我不知道布局类允许他们的孩子被画出他们的界限。整洁的解决方案。
我看到的另一个缺点是这个解决方案是为特定的屏幕布局设计的。另一个“按原样”工作，无论弧线如何排列（甚至对于任意数量的弧线而不是两条弧线）。
@matiash：理想情况下，通用解决方案应该处理更改SeekArc 视图中的测量逻辑，以使其适应内容的界限。即使您的解决方案仍然需要FrameLayout 或其他自定义布局来重叠视图，尽管将其用作通用解决方案会更容易。

【解决方案2】：

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

在这种特殊情况下，问题在于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);
}

【讨论】：

不错的答案 - 在View 级别覆盖触摸处理逻辑肯定更容易/更好。但是，这些似乎是您正在调用的私有方法，因此库源本身需要为此进行修补。另一方面，它似乎没有任何最近的发展，似乎也没有作为 AAR 发布，所以这应该不会造成太大问题。
@corsair992 是的，该库是“Eclipse 格式”，因此您需要包含源代码并将其编译为库项目。而且我认为这实际上是对库本身的改进/错误修复，无论特定用例如何。 :)
无论该区域是否可点击，我都不会将其称为 touch-interactiveView 处理其触摸事件的错误。真正的问题是SeekArc 似乎没有将其大小限制为半圆的选项。 jmols 提供了一个有趣的解决方法。