共计 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 监听事件,扭转图片的透明度
- 编写布局代码
因为图片的透明度分为 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>
- 编写 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- 阿里巴巴矢量图标
明天的分享就到此为止了吧,加油。海绵宝宝!
正文完