Question

我正在构建音乐播放器应用。对于均衡器设计，我使用了五个垂直搜寻杆。现在，我想在这些搜索栏的顶部添加一条线，如图所示。该线将从一个进度点连接到另一个。我怎样画这种线？我仍然没有添加功能，现在我只是在设计它。

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

    <android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:cardCornerRadius="10dp"
        app:cardUseCompatPadding="true">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <RelativeLayout
                android:id="@+id/header"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="@color/bg">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerHorizontal="true"
                    android:layout_centerVertical="true"
                    android:fontFamily="sans-serif-medium"
                    android:text="@string/equalizer"
                    android:textColor="@color/headerTextColor"
                    android:textSize="18sp" />
            </RelativeLayout>

            <View
                android:id="@+id/border"
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:layout_below="@id/header"

                android:background="#CCCCCC" />


            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/border">

                <LinearLayout
                    android:id="@+id/head"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal"
                    android:paddingBottom="12dp"
                    android:paddingLeft="12dp"
                    android:paddingRight="12dp"
                    android:paddingTop="12dp">

                    <TextView
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1.5"
                        android:text="Equalizer" />

                    <Switch
                        android:id="@+id/equalizer_switch"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight=".5"
                        android:checked="true" />
                </LinearLayout>

                <View
                    android:id="@+id/border2"
                    android:layout_width="match_parent"
                    android:layout_height="1dp"
                    android:layout_below="@+id/head"
                    android:layout_marginLeft="12dp"
                    android:layout_marginRight="12dp"
                    android:background="#CCCCCC" />

                <LinearLayout
                    android:id="@+id/equalizer_layout"
                    android:layout_width="match_parent"
                    android:layout_height="200dp"
                    android:layout_below="@id/border2"
                    android:layout_marginBottom="24dp"
                    android:layout_marginTop="16dp"
                    android:orientation="vertical"
                    android:paddingLeft="12dp"
                    android:paddingRight="12dp">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="180dp"
                        android:orientation="horizontal">

                        <RelativeLayout
                            android:layout_width="0dp"
                            android:layout_height="150dp"
                            android:layout_gravity="center"
                            android:layout_weight="1">

                            <TextView
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_alignParentTop="true"

                                android:text="+15 dB" />

                            <TextView
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_centerVertical="true"
                                android:text="0 dB"

                                />

                            <TextView
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_alignParentBottom="true"
                                android:text="-15 dB" />

                        </RelativeLayout>

                        <com.example.user.musicstreamingapp.CustomView.VerticalSeekBarWrapper
                            android:layout_width="0dp"
                            android:layout_height="match_parent"
                            android:layout_gravity="center"
                            android:layout_weight="1">

                            <com.example.user.musicstreamingapp.CustomView.VerticalSeekBar
                                android:id="@+id/mySeekBar"
                                android:layout_width="0dp"
                                android:layout_height="0dp"
                                android:focusable="false"
                                android:splitTrack="false"
                                app:seekBarRotation="CW270" />
                        </com.example.user.musicstreamingapp.CustomView.VerticalSeekBarWrapper>

                        <com.example.user.musicstreamingapp.CustomView.VerticalSeekBarWrapper
                            android:layout_width="0dp"
                            android:layout_height="match_parent"
                            android:layout_gravity="center"
                            android:layout_weight="1">

                            <com.example.user.musicstreamingapp.CustomView.VerticalSeekBar
                                android:id="@+id/mySeekBar2"
                                android:layout_width="0dp"
                                android:layout_height="0dp"
                                android:focusable="false"
                                android:splitTrack="false"
                                app:seekBarRotation="CW270" />
                        </com.example.user.musicstreamingapp.CustomView.VerticalSeekBarWrapper>

                        <com.example.user.musicstreamingapp.CustomView.VerticalSeekBarWrapper
                            android:layout_width="0dp"
                            android:layout_height="match_parent"
                            android:layout_gravity="center"
                            android:layout_weight="1">

                            <com.example.user.musicstreamingapp.CustomView.VerticalSeekBar
                                android:id="@+id/mySeekBar3"
                                android:layout_width="0dp"
                                android:layout_height="0dp"
                                android:focusable="false"
                                android:splitTrack="false"
                                app:seekBarRotation="CW270" />
                        </com.example.user.musicstreamingapp.CustomView.VerticalSeekBarWrapper>

                        <com.example.user.musicstreamingapp.CustomView.VerticalSeekBarWrapper
                            android:layout_width="0dp"
                            android:layout_height="match_parent"
                            android:layout_gravity="center"
                            android:layout_weight="1">

                            <com.example.user.musicstreamingapp.CustomView.VerticalSeekBar
                                android:id="@+id/mySeekBar4"
                                android:layout_width="0dp"
                                android:layout_height="0dp"
                                android:focusable="false"
                                android:splitTrack="false"
                                app:seekBarRotation="CW270" />
                        </com.example.user.musicstreamingapp.CustomView.VerticalSeekBarWrapper>

                        <com.example.user.musicstreamingapp.CustomView.VerticalSeekBarWrapper
                            android:layout_width="0dp"
                            android:layout_height="match_parent"
                            android:layout_gravity="center"
                            android:layout_weight="1">

                            <com.example.user.musicstreamingapp.CustomView.VerticalSeekBar
                                android:id="@+id/mySeekBar5"
                                android:layout_width="0dp"
                                android:layout_height="0dp"
                                android:focusable="false"
                                android:splitTrack="false"
                                app:seekBarRotation="CW270" />
                        </com.example.user.musicstreamingapp.CustomView.VerticalSeekBarWrapper>

                    </LinearLayout>

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

                        <View
                            android:layout_width="0dp"
                            android:layout_height="wrap_content"
                            android:layout_weight="1" />

                        <TextView
                            android:layout_width="0dp"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"
                            android:text="60Hz"
                            android:textAlignment="center" />

                        <TextView
                            android:layout_width="0dp"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"
                            android:text="230Hz"
                            android:textAlignment="center" />

                        <TextView
                            android:layout_width="0dp"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"
                            android:text="910Hz"
                            android:textAlignment="center" />

                        <TextView
                            android:layout_width="0dp"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"
                            android:text="4k"
                            android:textAlignment="center" />

                        <TextView
                            android:layout_width="0dp"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"
                            android:text="14k"
                            android:textAlignment="center" />
                    </LinearLayout>
                </LinearLayout>


                <LinearLayout
                    android:id="@+id/categories"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/equalizer_layout"
                    android:layout_marginBottom="12dp"
                    android:background="@color/bg"
                    android:paddingBottom="12dp"
                    android:paddingLeft="12dp"
                    android:paddingRight="12dp"
                    android:paddingTop="12dp">

                    <android.support.v7.widget.RecyclerView
                        android:id="@+id/effect_type_rv"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:nestedScrollingEnabled="false" />
                </LinearLayout>

                <View
                    android:id="@+id/border3"
                    android:layout_width="match_parent"
                    android:layout_height="1dp"
                    android:layout_below="@id/categories"
                    android:layout_marginLeft="8dp"
                    android:layout_marginRight="8dp"
                    android:background="#CCCCCC" />

                <LinearLayout
                    android:id="@+id/base_layout"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/border3"
                    android:orientation="horizontal"
                    android:paddingBottom="12dp"
                    android:paddingLeft="12dp"
                    android:paddingRight="12dp"
                    android:paddingTop="12dp">

                    <TextView
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1.5"

                        android:text="Bass Boost" />

                    <Switch
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight=".5"
                        android:checked="true" />
                </LinearLayout>

                <View
                    android:id="@+id/border4"
                    android:layout_width="match_parent"
                    android:layout_height="1dp"
                    android:layout_below="@id/base_layout"
                    android:layout_marginLeft="12dp"
                    android:layout_marginRight="12dp"
                    android:background="#CCCCCC" />

                <LinearLayout
                    android:id="@+id/surround_sound_layout"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/border4"
                    android:orientation="horizontal"
                    android:paddingBottom="12dp"
                    android:paddingLeft="12dp"
                    android:paddingRight="12dp"
                    android:paddingTop="12dp">

                    <TextView
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"

                        android:text="Surround sound" />

                    <SeekBar
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1" />
                </LinearLayout>

                <View
                    android:id="@+id/border5"
                    android:layout_width="match_parent"
                    android:layout_height="1dp"
                    android:layout_below="@id/surround_sound_layout"
                    android:background="#CCCCCC" />

                <LinearLayout
                    android:id="@+id/reverb_layout"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/border5"
                    android:orientation="horizontal"
                    android:paddingBottom="12dp"
                    android:paddingLeft="12dp"
                    android:paddingRight="12dp"
                    android:paddingTop="12dp">

                    <TextView
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"

                        android:text="Reverb" />

                    <Spinner
                        android:id="@+id/reverb_selector"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:gravity="end" />
                </LinearLayout>
            </RelativeLayout>
        </RelativeLayout>
    </android.support.v7.widget.CardView>
</android.support.v4.widget.NestedScrollView>

Answer 1

您可以使用Bezier曲线将其存档。请参阅this。另外，看看开源项目here

最有趣的部分是buildPath方法：

private void buildPath(Path path) {
    //Important!
    path.reset();

    path.moveTo(adjustedPoints[0].x, adjustedPoints[0].y);
    int pointSize = adjustedPoints.length;

    for (int i = 0; i < adjustedPoints.length - 1; i++) {
        float pointX = (adjustedPoints[i].x + adjustedPoints[i + 1].x) / 2;
        float pointY = (adjustedPoints[i].y + adjustedPoints[i + 1].y) / 2;

        float controlX = adjustedPoints[i].x;
        float controlY = adjustedPoints[i].y;

        path.quadTo(controlX, controlY, pointX, pointY);
    }
    path.quadTo(adjustedPoints[pointSize - 1].x, adjustedPoints[pointSize - 1].y, adjustedPoints[pointSize - 1].x,
            adjustedPoints[pointSize - 1].y);
}

如何在垂直搜寻杆上方画线？

1 个答案: