如何在 android 中的搜索栏上方添加垂直线

Question

我是 android 的新人，我有一个小目标要实现。

我想创建一个完全一样的搜索栏，我知道如何使用普通搜索栏，但不知道如何在搜索栏上方添加垂直线。

你能为我提供解决方案吗？提前致谢。

Answer 1

xml 文件

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

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center">

            <View
                android:id="@+id/view1"
                android:layout_width="3dp"
                android:layout_height="match_parent"
                android:background="#000000" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center">

            <View
                android:id="@+id/view2"
                android:layout_width="3dp"
                android:layout_height="match_parent"
                android:background="#000000" />

        </LinearLayout>


        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center">

            <View
                android:id="@+id/view3"
                android:layout_width="3dp"
                android:layout_height="match_parent"
                android:background="#000000" />

        </LinearLayout>


        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center">

            <View
                android:id="@+id/view4"
                android:layout_width="3dp"
                android:layout_height="match_parent"
                android:background="#000000" />

        </LinearLayout>


        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center">

            <View
                android:id="@+id/view5"
                android:layout_width="3dp"
                android:layout_height="match_parent"
                android:background="#000000" />

        </LinearLayout>




    </LinearLayout>

    <SeekBar
        android:id="@+id/seekbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp" />


</LinearLayout>

Java 文件

public class SampleActivity extends AppCompatActivity {

    private SeekBar seekBar;
    private View view1;
    private View view2;
    private View view3;
    private View view4;
    private View view5;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.sample);
        initView();
    }

    private void initView() {
        seekBar = (SeekBar) findViewById(R.id.seekbar);
        view1 = findViewById(R.id.view1);
        view2 = findViewById(R.id.view2);
        view3 = findViewById(R.id.view3);
        view4 = findViewById(R.id.view4);
        view5 = findViewById(R.id.view5);


        seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int i, boolean b) {
                changeColor(i);
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

            }
        });
    }

    private void changeColor(final int i) {
        if (i == 0) {
            view1.setBackgroundColor(ContextCompat.getColor(this, R.color.black));
            view2.setBackgroundColor(ContextCompat.getColor(this, R.color.black));
            view3.setBackgroundColor(ContextCompat.getColor(this, R.color.black));
            view4.setBackgroundColor(ContextCompat.getColor(this, R.color.black));
            view5.setBackgroundColor(ContextCompat.getColor(this, R.color.black));

        } else if (i > 0 && i <= 20) {
            view1.setBackgroundColor(ContextCompat.getColor(this, R.color.green));
            view2.setBackgroundColor(ContextCompat.getColor(this, R.color.black));
            view3.setBackgroundColor(ContextCompat.getColor(this, R.color.black));
            view4.setBackgroundColor(ContextCompat.getColor(this, R.color.black));
            view5.setBackgroundColor(ContextCompat.getColor(this, R.color.black));
        } else if (i > 20 && i <= 40) {
            view1.setBackgroundColor(ContextCompat.getColor(this, R.color.green));
            view2.setBackgroundColor(ContextCompat.getColor(this, R.color.green));
            view3.setBackgroundColor(ContextCompat.getColor(this, R.color.black));
            view4.setBackgroundColor(ContextCompat.getColor(this, R.color.black));
            view5.setBackgroundColor(ContextCompat.getColor(this, R.color.black));
        } else if (i > 40 && i <= 60) {
            view1.setBackgroundColor(ContextCompat.getColor(this, R.color.green));
            view2.setBackgroundColor(ContextCompat.getColor(this, R.color.green));
            view3.setBackgroundColor(ContextCompat.getColor(this, R.color.green));
            view4.setBackgroundColor(ContextCompat.getColor(this, R.color.black));
            view5.setBackgroundColor(ContextCompat.getColor(this, R.color.black));
        } else if (i > 60 && i <= 80) {
            view1.setBackgroundColor(ContextCompat.getColor(this, R.color.green));
            view2.setBackgroundColor(ContextCompat.getColor(this, R.color.green));
            view3.setBackgroundColor(ContextCompat.getColor(this, R.color.green));
            view4.setBackgroundColor(ContextCompat.getColor(this, R.color.green));
            view5.setBackgroundColor(ContextCompat.getColor(this, R.color.black));
        } else if (i > 80 && i <= 100) {
            view1.setBackgroundColor(ContextCompat.getColor(this, R.color.green));
            view2.setBackgroundColor(ContextCompat.getColor(this, R.color.green));
            view3.setBackgroundColor(ContextCompat.getColor(this, R.color.green));
            view4.setBackgroundColor(ContextCompat.getColor(this, R.color.green));
            view5.setBackgroundColor(ContextCompat.getColor(this, R.color.green));
        }
    }
}

color.xml

 <color name="green">#29BC4F</color>
    <color name="black">#000000</color>

Answer 2

查看这个第三方库https://github.com/edmodo/range-bar/wiki

通过一些自定义，您将获得那些（垂直线）刻度线。

也参考这个答案

https://www.informaticscentre.co.uk/blog/implementing-a-seekbar-with-stepped-intervals-in-android

您可以使用此样式 style="@style/Widget.AppCompat.SeekBar.Discrete" 根据您的要求创建搜索栏：

代码可以是这样的：

<SeekBar
    android:id="@+id/seekBar"
    style="@style/Widget.AppCompat.SeekBar.Discrete"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:max="10"
    />

或者通过设置 tickMark 可绘制对象手动添加它们：

<SeekBar
    android:id="@+id/seekBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:max="10"
    android:tickMark="@drawable/tickmark"
    />

tickmark.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="oval">
    <size android:width="4dp"
          android:height="4dp"/>
    <solid android:color="@android:color/white"/>
</shape>

Answer 3

在layout.xml文件中添加，

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="10dp"
    android:layout_alignTop="@+id/seek_bar"
    android:layout_marginTop="-20dp"
    android:weightSum="10">

    <TextView
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:id="@+id/line1"
        android:background="@drawable/line_selected" />

    <TextView
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:id="@+id/line2"
        android:background="@drawable/line_selected" />

    <TextView
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:id="@+id/line3"
        android:background="@drawable/line_selected" />

    <TextView
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:id="@+id/line4"
        android:background="@drawable/line_selected" />

    <TextView
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:id="@+id/line5"
        android:background="@drawable/line_selected" />

    <TextView
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:id="@+id/line6"
        android:background="@drawable/lines" />

    <TextView
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:id="@+id/line7"
        android:background="@drawable/lines" />

    <TextView
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:id="@+id/line8"
        android:background="@drawable/lines" />

    <TextView
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:id="@+id/line9"
        android:background="@drawable/lines" />

    <TextView
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:id="@+id/line10"
        android:background="@drawable/lines" />

</LinearLayout>

<SeekBar
    android:id="@+id/seek_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

像这样在 drawable 文件夹中添加 lines.xml，

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:bottom="-3dp"
        android:left="-3dp"
        android:top="-3dp">

        <shape android:shape="rectangle">
            <solid android:color="@color/transparent" />
            <stroke
                android:width="2dp"
                android:color="#bebebe" />
        </shape>
    </item>
</layer-list>

像这样在 drawable 文件夹中添加 line_selected.xml，

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:bottom="-3dp"
        android:left="-3dp"
        android:top="-3dp">

        <shape android:shape="rectangle">
            <solid android:color="@color/transparent" />
            <stroke
                android:width="2dp"
                android:color="#1fc78c" />
        </shape>
    </item>
</layer-list>

您可以通过更改文本视图背景以编程方式更改线条颜色。

如何在 android 中的搜索栏上方添加垂直线

How to add vertical lines above seekbar in android

android

seekbar

android-seekbar

android-vertical-seekbar