text Android的学习搜索栏的使用和自定义样式

Posted 2021-04-30

android学习SeekBar的使用和自定义样式
2018年08月16日 16:17:50 dalaoty 阅读数：1050
SeekBar的主要属性和方法

（1）setMax — 设置SeekBar的最大数值 
（2）setProgress — 设置SeekBar的当前数值 
（3）setSecondProgress—设置SeekBar的第二数值

SeekBar的事件

由于拖动条可以诶用户控制。所以需要对其事件监听，这就需要实现SeekBar.OnSeekBarChangeListner接口，此接口共需监听。

三个事件分别是： 
数值改变—-onProgressChanged 
开始拖动—-onStartTrackingTouch 
停止拖动—-onStopTrackingTouch

这里写图片描述

   <SeekBar
        android:id="@+id/seekbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:max="100"
        android:progress="50" />
1
2
3
4
5
6
7
   mSeekBar = (SeekBar) findViewById(R.id.seekbar);

        mSeekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                Log.e("xyh", "onProgressChanged: " + progress + "");
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {
                Log.e("xyh", "onStartTrackingTouch: " + "开始拖动");
            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
                Log.e("xyh", "onStartTrackingTouch: " + "结束拖动");
            }
        });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
自定义SeekBar的进度条样式

改变进度条的样式 
android：ProgressDrawable = “@drawable/seekBar_img”

改变滑块的样式 
android：thumb = @drawable/selector_thumb_bar

进入SeekBar 的样式文件看一看

<style name="Widget.SeekBar">
        <item name="android:indeterminateOnly">false</item>
        <item name="android:progressDrawable">@android:drawable/progress_horizontal</item>
        <item name="android:indeterminateDrawable">@android:drawable/progress_horizontal</item>
        <item name="android:minHeight">20dip</item>
        <item name="android:maxHeight">20dip</item>
        <item name="android:thumb">@android:drawable/seek_thumb</item>
        <item name="android:thumbOffset">8dip</item>
        <item name="android:focusable">true</item>
        <item name="android:mirrorForRtl">true</item>
    </style>
1
2
3
4
5
6
7
8
9
10
11
　我们可以看到他的滑块是这个样式@android:drawable/seek_thumb，继续我们可以在\data\res\drawable下找到seek_thumb.xml这个文件，他就是滑块的样式

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true"
          android:state_window_focused="true"
          android:drawable="@drawable/seek_thumb_pressed" />

    <item android:state_focused="true"
          android:state_window_focused="true"
          android:drawable="@drawable/seek_thumb_selected" />

    <item android:state_selected="true"
          android:state_window_focused="true"
          android:drawable="@drawable/seek_thumb_selected" />

    <item android:drawable="@drawable/seek_thumb_normal" />

</selector>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
　可以看到他是一个选择器，这样，我们想要改变滑块的样式，只需要修改这个选择器即可。

滑块样式选择器：selector_thumb_bar.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 按下状态 -->
    <item android:drawable="@drawable/shape_seekbar_btn" android:state_pressed="true" />

    <!-- 焦点状态 -->
    <item android:drawable="@drawable/shape_seekbar_btn" android:state_focused="true" />

    <!-- 选择状态 -->
    <item android:drawable="@drawable/shape_seekbar_btn" android:state_selected="true" />

    <!-- 默认状态 -->
    <item android:drawable="@drawable/shape_seekbar_btn" />
</selector>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
滑块:shape_seekbar_btn

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <solid android:color="#ffffff" />

    <size
        android:width="26dp"
        android:height="26dp" />

    <stroke
        android:width="1dp"
        android:color="#33000000" />

</shape>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
进度条样式

进度条总共需要设置三个属性的颜色：

@android:id/background：进度条的整体背景颜色。 
@android:id/secondaryProgress：二级进度条的颜色 
@android:id/progress：一级进度条的颜色，即进度条当前已经滑过面积的颜色。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="5dp" />
            <solid android:color="#C9C7C7" />  
        </shape>
    </item>

    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="5dp" />
                <solid android:color="@color/colorAccent" />
            </shape>
        </clip>
    </item>

    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="5dp" />
                <solid android:color="#11ce33" />
            </shape>
        </clip>
    </item>
</layer-list>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
使用

 <SeekBar
        android:id="@+id/seekbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:max="100"
        android:maxHeight="3dp"
        android:minHeight="3dp"
        android:progress="30"
        android:progressDrawable="@drawable/seekbar_shape"
        android:secondaryProgress="70"
        android:thumb="@drawable/selector_thumb_bar" />
1
2
3
4
5
6
7
8
9
10
11
12
这里写图片描述