Android仿酷狗音乐SeekBar——样式篇
16lz
2021-01-26
Android仿酷狗音乐SeekBar
需求:仿酷狗音乐SeekBar
直接上图,上代码
1903148-676fcbf2e5048392.png
1903148-d3e5ab81fa2acd42.png
** 难点:用户点击或者移动是SeekBar滑块是改变滑块的图案 **
先画两种不同状态的滑块Thumb
平时状态:一个直径为10dp大小的白色的圆
slider_thumb_normal.xml
<?xml version="1.0" encoding="utf-8"?>
按下状态:一个直径为10dp大小的白色的圆,背景是半透明的直径为40dp的圆
slider_thumb_pressed.xml
<?xml version="1.0" encoding="utf-8"?> -
-
画进度条
(不设置高度,由SeekBar自身控制,SeekBar控件android:layout_height="wrap_content")
play_seekbar_bg.xml
<?xml version="1.0" encoding="utf-8"?> -
-
-
SeekBar样式xml片段
** SeekBar样式关键点 **
- android:maxHeight="2dp"——控制进度条高度
- 设置SeekBar控件边际,以便在滑块变大是可覆盖左右两边的控件,而不会被遮住
android:layout_marginStart="-20dp"android:layout_marginEnd="-20dp"android:paddingStart="28dp"android:paddingEnd="28dp"
- android:splitTrack="false"——控制滑块覆盖在进度条的上面
- android:background="@android:color/transparent"——设置背景透明,去掉滑块变大时的周边光晕
- android:progressDrawable="@drawable/play_seekbar_bg"——默认进度条
- android:thumb="@drawable/slider_thumb_normal"——默认滑块
最关键的地方
使用SeekBar的setThumb方法动态设置滑块
代码
seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() { @Override public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) { if(fromUser){ Seekbar_slider_time.setText(updateCurrentTimeText(progress)); } tx_currentTime.setText(updateCurrentTimeText(progress)); if(progress == seekBar.getMax()){ pauseIcon.setLayoutParams(miss); playIcon.setLayoutParams(show); } } @Override public void onStartTrackingTouch(SeekBar seekBar) { Log.d(TAG,"onStartTrackingTouch"); isUserPressThumb = true; Seekbar_slider_time.setVisibility(View.VISIBLE); //设置seekbarThumb相对位置可大于进度条15,保证thumb在变成40dp直径后可以滑动到进度条最末尾 seekBar.setThumbOffset(15); seekBar.setThumb(Thumb_pressed); } @Override public void onStopTrackingTouch(SeekBar seekBar) { Log.d(TAG,"onStopTrackingTouch"); mi.seekTo(seekBar.getProgress()); seekBar.setThumbOffset(0); seekBar.setThumb(Thumb_normal); Seekbar_slider_time.setVisibility(View.INVISIBLE); isUserPressThumb = false; } });
在用户开始按下滑块时onStartTrackingTouch
//设置seekbarThumb相对位置可大于进度条15,保证thumb在变成40dp直径后可以滑动到进度条最末尾
seekBar.setThumbOffset(15);
//改变滑块图案
seekBar.setThumb(Thumb_pressed);
在用户按下滑块结束后onStopTrackingTouch,恢复滑块及seekbar高度
seekBar.setThumbOffset(0);
seekBar.setThumb(Thumb_normal);
* 踩坑过程 *
- 使用selector的xml文件设置SeekBar的android:thumb属性设置滑块 *
play_seekbar_thumb.xml
<?xml version="1.0" encoding="UTF-8"?>
** 坑:有些手机上按下或者移动滑块,滑块是变大了,但是由于SeekBar高度还是原来的,导致滑块被压扁成椭圆 **
更多相关文章
- Android程序如何全屏显示
- ImageButton的使用,如何设置背景图占满整个ImageButton
- Android(安卓)EditText 下换线颜色变换
- Android(安卓)通知栏——Notification
- Android的ListView简单使用的实例(附Demo)
- Android(安卓)PopupWindow 仿微信弹出效果
- Android(安卓)ViewPager2实现无限轮播
- Android(安卓)Dialog 设置圆角无效
- android bluedroid调试