java - 如何在垂直搜索栏顶部画线?
问题描述
我正在构建一个音乐播放器应用程序。对于均衡器设计,我使用了五个垂直搜索条。现在我想在这些搜索栏上添加一条线,如图所示。这条线将从一个进度点连接到另一个进度点。我怎样才能画出这种线?我还没有添加功能,现在我只是在做它的设计。
<?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>
解决方案
这是您可以使用贝塞尔曲线存档的内容。请参考这个。另外,看看这里的开源项目
最有趣的部分是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);
}
推荐阅读
- azure-devops - 用户故事状态更改以更新工作项
- r - 获取两个矩阵之间的公共元素并分配其余 NA。我尝试了以下代码但无法获得解决方案
- json - 无法获取 Wordpress JSON
- java - 没有 ARCore 的 Sceneform 示例项目?
- php - 如何通过security.yaml中的路由名称动态指定路由?
- python - pandas dataframe 的具体聚合
- yadcf - 希望 yadcf 根据另一个过滤器值过滤多选选项
- javascript - 单击时更改单元格背景
- perl - 如何将从 get_p 返回的承诺分配给变量?
- c# - 如何将post请求的响应转换为c#中的bool?