Android仿酷狗音乐SeekBar——样式篇

Android仿酷狗音乐SeekBar

需求：仿酷狗音乐SeekBar

直接上图，上代码

1903148-676fcbf2e5048392.png

1903148-d3e5ab81fa2acd42.png

** 难点：用户点击或者移动是SeekBar滑块是改变滑块的图案 **

先画两种不同状态的滑块Thumb

平时状态：一个直径为10dp大小的白色的圆

slider_thumb_normal.xml

按下状态：一个直径为10dp大小的白色的圆，背景是半透明的直径为40dp的圆

slider_thumb_pressed.xml

画进度条

(不设置高度,由SeekBar自身控制,SeekBar控件android:layout_height="wrap_content")
play_seekbar_bg.xml

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

** 坑：有些手机上按下或者移动滑块，滑块是变大了，但是由于SeekBar高度还是原来的，导致滑块被压扁成椭圆 **