Android仿酷狗音樂SeekBar——樣式篇

CasBlackbur 8年前發布 | 12K 次閱讀安卓開發 Android開發移動開發

Android仿酷狗音樂SeekBar

需求：仿酷狗音樂SeekBar

直接上圖，上代碼

1903148-676fcbf2e5048392.png

1903148-d3e5ab81fa2acd42.png

難點：用戶點擊或者移動是SeekBar滑塊是改變滑塊的圖案

先畫兩種不同狀態的滑塊Thumb

平時狀態：一個直徑為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>

按下狀態：一個直徑為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>

畫進度條

(不設置高度,由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樣式關鍵點

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);
                //設置seekbar高度，解決第一次按下后Thumb被遮蓋的問題
                ViewGroup.LayoutParams  lp = seekBar.getLayoutParams();
                lp.height *=4;
                seekBar.setLayoutParams(lp);
                //設置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

//設置seekbar高度，解決部分手機第一次按下后Thumb因seekbar高度被遮蓋的問題

ViewGroup.LayoutParams lp = seekBar.getLayoutParams();

lp.height *=4; //原先是10dp，需要增大至40dp，因為改變后的圖案直徑大小為40dp

seekBar.setLayoutParams(lp);

//設置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"?>
<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>

坑：有些手機上按下或者移動滑塊，滑塊是變大了，但是由于SeekBar高度還是原來的，導致滑塊被壓扁成橢圓

來自：http://www.jianshu.com/p/7f00c5361094

本文由用戶 CasBlackbur 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1476774350601.html

安卓開發 Android開發移動開發

Android仿酷狗音樂SeekBar——樣式篇