Android仿酷狗音樂SeekBar
需求：仿酷狗音樂SeekBar
直接上圖四啰，上代碼
1903148-676fcbf2e5048392.png
1903148-d3e5ab81fa2acd42.png
** 難點(diǎn)：用戶點(diǎn)擊或者移動(dòng)是SeekBar滑塊是改變滑塊的圖案 **
先畫兩種不同狀態(tài)的滑塊Thumb
平時(shí)狀態(tài)：一個(gè)直徑為10dp大小的白色的圓
slider_thumb_normal.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<size
android:width="10dp"
android:height="10dp" />
<solid android:color="#ffffffff" />
</shape>
按下狀態(tài)：一個(gè)直徑為10dp大小的白色的圓，背景是半透明的直徑為40dp的圓
slider_thumb_pressed.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 白色前景 -->
<item android:id="@android:id/secondaryProgress"
android:gravity="center"
android:bottom="15dp"
android:top="15dp"
android:right="15dp"
android:left="15dp">
<shape
android:shape="oval">
<size
android:width="10dp"
android:height="10dp" />
<solid android:color="#ffffffff" />
</shape>
</item>
<!-- 透明陰影 -->
<item android:id="@android:id/background"
android:gravity="center">
<shape
android:shape="oval">
<size
android:height="40dp"
android:width="40dp" />
<solid android:color="#96ffffff" />
</shape>
</item>
</layer-list>
畫進(jìn)度條
(不設(shè)置高度,由SeekBar自身控制,SeekBar控件android:layout_height="wrap_content")
play_seekbar_bg.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>
<size
android:height="2dp" />
<corners android:radius="5dp"/>
<solid android:color="#88ffffff" />
</shape>
</item>
<item
android:id="@android:id/secondaryProgress">
<clip>
<shape>
<size
android:height="2dp" />
<corners android:radius="5dp"/>
<solid android:color="#88ffffff" />
</shape>
</clip>
</item>
<item android:id="@android:id/progress">
<clip>
<shape>
<size
android:height="2dp"/>
<corners android:radius="5dp"/>
<solid android:color="#ffffffff" />
</shape>
</clip>
</item>
</layer-list>
SeekBar樣式xml片段
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp">
<TextView
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:id="@+id/seekbar_slider_time"
android:textColor="@color/color_white"
android:textAppearance="?android:attr/textAppearanceMedium"
android:visibility="invisible" />
</LinearLayout>
<LinearLayout
android:id="@+id/seekBar_layout"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:gravity="center_vertical"
android:orientation="horizontal">
<TextView
android:id="@+id/tx_currentTime"
android:layout_width="40dp"
android:layout_height="wrap_content"
android:gravity="center"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="@color/color_white"/>
<SeekBar
android:id="@+id/seedBar"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="-20dp"
android:layout_marginEnd="-20dp"
android:paddingStart="28dp"
android:paddingEnd="28dp"
android:background="@android:color/transparent"
android:gravity="center"
android:layout_weight="1"
android:splitTrack="false"
android:maxHeight="2dp"
android:progressDrawable="@drawable/play_seekbar_bg"
android:thumb="@drawable/slider_thumb_normal" />
<TextView
android:id="@+id/tx_maxTime"
android:layout_width="40dp"
android:layout_height="wrap_content"
android:gravity="center"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="@color/color_white"/>
</LinearLayout>
** SeekBar樣式關(guān)鍵點(diǎn) **
- android:maxHeight="2dp"——控制進(jìn)度條高度
- 設(shè)置SeekBar控件邊際瓤狐，以便在滑塊變大是可覆蓋左右兩邊的控件，而不會(huì)被遮住
android:layout_marginStart="-20dp"
android:layout_marginEnd="-20dp"
android:paddingStart="28dp"
android:paddingEnd="28dp"
- android:splitTrack="false"——控制滑塊覆蓋在進(jìn)度條的上面
- android:background="@android:color/transparent"——設(shè)置背景透明，去掉滑塊變大時(shí)的周邊光暈
- android:progressDrawable="@drawable/play_seekbar_bg"——默認(rèn)進(jìn)度條
- android:thumb="@drawable/slider_thumb_normal"——默認(rèn)滑塊
最關(guān)鍵的地方
使用SeekBar的setThumb方法動(dòng)態(tài)設(shè)置滑塊
代碼
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);
//設(shè)置seekbarThumb相對(duì)位置可大于進(jìn)度條15仪壮，保證thumb在變成40dp直徑后可以滑動(dòng)到進(jìn)度條最末尾
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;
}
});
在用戶開始按下滑塊時(shí)onStartTrackingTouch
//設(shè)置seekbarThumb相對(duì)位置可大于進(jìn)度條15，保證thumb在變成40dp直徑后可以滑動(dòng)到進(jìn)度條最末尾
seekBar.setThumbOffset(15);
//改變滑塊圖案
seekBar.setThumb(Thumb_pressed);
在用戶按下滑塊結(jié)束后onStopTrackingTouch胳徽，恢復(fù)滑塊及seekbar高度
seekBar.setThumbOffset(0);
seekBar.setThumb(Thumb_normal);
* 踩坑過程 *
- 使用selector的xml文件設(shè)置SeekBar的android:thumb屬性設(shè)置滑塊 *
play_seekbar_thumb.xml
<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
android:constantSize="false"
android:variablePadding="false">
<item android:state_focused="true" android:state_pressed="false" android:drawable="@drawable/slider_thumb_normal" />
<item android:state_focused="true" android:state_pressed="true" android:drawable="@drawable/slider_thumb_pressed" />
<item android:state_focused="false" android:state_pressed="true" android:drawable="@drawable/slider_thumb_pressed" />
<item android:drawable="@drawable/slider_thumb_normal" />
</selector>
** 坑：有些手機(jī)上按下或者移動(dòng)滑塊积锅，滑塊是變大了，但是由于SeekBar高度還是原來的膜廊，導(dǎo)致滑塊被壓扁成橢圓 **
