关于android:Android之SeekBar

44次阅读

共计 4577 个字符,预计需要花费 12 分钟才能阅读完成。

Android 之 SeekBar

一、简介

SeekBar 意思为拖动条,是 ProgressBar 的一个子类。

在咱们安卓的开发中也是利用十分的宽泛。如音乐播放、音量条、播放进度条,等等。Android 零碎只提供了程度的,默认的款式,咱们也能够依据本人需要自定义款式。

二、罕用属性和办法

seekBar 继承了 ProgressBar,ProgressBar 所反对的 xml 属性和办法都实用于 seekBar,ProgressBar 的应用能够看这篇博客 Android 之 ProgressBar 的简略应用

这里介绍下最罕用属性和办法:

属性名 含意
max 设置该进度条的最大值
progress 设置该进度条的已实现进度值
progressDrawable 自定义 drawable 显示
secondaryProgress 定义二级进度值,值介于 0 到 max。该进度在主进度和背景之间。比方用于网络播放视频时,二级进度用于示意缓冲进度,主进度用于示意播放进度。
thumb 设置进度条的滑块图片
splitTrack 滑块底部 背景款式(false 为通明)
getMax() // 返回这个进度条的范畴的下限 getProgress(): 返回进度
getsecondaryProgress() // 返回二级进度
incrementProgressBy(int diff) // 指定减少的进度
isIndeterminate() // 批示进度条是否在不确定模式下
setIndeterminate(boolean indeterminate) // 设置不确定模式下

三、简略应用

实现一个简略 seekbar 监听事件,扭转图片的透明度

  1. 编写布局代码

因为图片的透明度分为 256 阶(0-255),所以咱们的 max 属性要设置为 255,初始值 progress 属性也设置为 255,使照片不通明可见。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="拖动条"
        android:layout_gravity="center"
        android:layout_marginTop="50dp"/>

    <ImageView
        android:id="@+id/iv_zhuyin"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:src="@drawable/zhuyin"/>
        <SeekBar
            android:id="@+id/seek_bar"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:splitTrack="false"
            android:max="255"
            android:progress="255"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:thumb="@drawable/seekbar01"/>

        <TextView
            android:id="@+id/tv_progress"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:layout_gravity="center"
            android:text="以后透明度:255/255"/>


</LinearLayout>
  1. 编写 MainActivity 里的 java 代码

次要是实现一个 seek 的监听事件,OnSeekBarChangeListener() 能够为拖动条增加监听事件,该监听事件重写三个办法。

办法 作用
onStartTrackingTouch 当开始滑动滑块时,会执行该办法下的代码
onStopTrackingTouch 当完结滑动滑块时,会执行该办法下的代码
onProgressChanged 当滑块进度扭转时,会执行该办法下的代码

public class MainActivity extends AppCompatActivity {

    private SeekBar mSeekBar;
    private TextView mTextView;
    private ImageView mImageView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mSeekBar=findViewById(R.id.seek_bar);
        mTextView=findViewById(R.id.tv_progress);
        mImageView=findViewById(R.id.iv_zhuyin);

        mSeekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override  // 当滑块进度扭转时,会执行该办法下的代码
            public void onProgressChanged(SeekBar seekBar, int i, boolean b) {mImageView.setAlpha(i);// 设置以后的透明度
                mTextView.setText("以后透明度:" +i+"/255");
            }

            @Override  // 当开始滑动滑块时,会执行该办法下的代码
            public void onStartTrackingTouch(SeekBar seekBar) {Toast.makeText(MainActivity.this,"我 seekbar 开始滑动了",Toast.LENGTH_SHORT).show();}

            @Override   // 当完结滑动滑块时,会执行该办法下的代码
            public void onStopTrackingTouch(SeekBar seekBar) {Toast.makeText(MainActivity.this,"我 seekbar 完结滑动了",Toast.LENGTH_SHORT).show();}
        });

    }
}

最初实现成果:

四、自定义 SeekBar

有时候零碎的款式不难看,不足以满足开发好看需要,这个时候就须要自定义款式,应用 xml 资源文件进行款式的编辑。最初在布局文件中通过属性 progressDrawable 援用。
如果要实现非常复杂的款式就须要应用到 View 的自定义了,能够本人去理解学习下,自定义 View 能够实现简直所有你想的到的款式。

上面放几个我感觉还挺难看的。

上图 xml 为:

<?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="60dp" />

            <gradient
                android:angle="0"
                android:centerColor="#F39801"
                android:centerY="0.20"
                android:endColor="#F39801"
                android:startColor="#F39801" />
        </shape>
    </item>
</layer-list>

上图 xml 为:

<?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>
            <solid android:color="#22DDDD" />
        </shape>
    </item>
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <solid android:color="#3CC4C4" />
            </shape>
        </clip>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <solid android:color="#70CC33" />
            </shape>
        </clip>
    </item>
</layer-list>

上图 xml 为:

<?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"/>
        </shape>
        <!--    背景色彩 -->
        <color android:color="#CCCCCC"/>
    </item>

    <item android:id="@android:id/progress">
        <clip
            android:clipOrientation="horizontal"
            android:gravity="left">
            <shape>
                <corners android:radius="5dp"/>
                <!--  开始色彩,中途色彩,最初色彩 -->
                <gradient
                    android:startColor="#00FF00"
                    android:centerColor="#FFFF00"
                    android:endColor="#FF0000"/>
            </shape>
        </clip>
    </item>
</layer-list>

通过 thumb 援用图片就能够自定义本人喜爱的图标了。

这里举荐一个很好用的矢量图标网站。iconfont- 阿里巴巴矢量图标


明天的分享就到此为止了吧,加油。海绵宝宝!

正文完
 0