Android 可拖動的seekbar自定義進度值

更新時間：2016年04月19日 10:51:29 作者：showCar

這篇文章主要介紹了Android 可拖動的seekbar自定義進度值的相關(guān)資料，有需要的朋友參考下

最近接了個項目其中有需要要實現(xiàn)此功能：seekbar需要顯示最左和最右值，進度要跟隨進度塊移動。下面通過此圖給大家展示下效果，可能比文字描述要更清晰。

這里寫圖片描述

其實實現(xiàn)起來很簡單，主要是思路。自定義控件的話也不難，之前我的博客也有專門介紹，這里就不再多說。

實現(xiàn)方案

這里是通過繼承seekbar來自定義控件，這樣的方式最快。主要難點在于進度的顯示，其實我很的是最笨的方法，就是用了一個popwindow顯示在進度條的上方，然后在移動滑塊的時候?qū)崟r的改變它顯示的橫坐標(biāo)?？催M度顯示的核心代碼：

private void initHintPopup(){ 
String popupText = null;
if (mProgressChangeListener!=null){
popupText = mProgressChangeListener.onHintTextChanged(this, cuclaProcess(leftText));
}
LayoutInflater inflater = (LayoutInflater)getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
final View undoView = inflater.inflate(R.layout.popup, null);
mPopupTextView = (TextView)undoView.findViewById(R.id.text);
mPopupTextView.setText(popupText!=null? popupText : String.valueOf(cuclaProcess(leftText)));
// mPopup.dismiss();
if(mPopup == null)
mPopup = new PopupWindow(undoView, mPopupWidth, ViewGroup.LayoutParams.WRAP_CONTENT, false);
else{
mPopup.dismiss();
mPopup = new PopupWindow(undoView, mPopupWidth, ViewGroup.LayoutParams.WRAP_CONTENT, false);
}
}

布局很簡單，就一個TextView。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#0fff"
android:gravity="center">
<TextView android:id="@+id/text"
android:padding="8dp"
android:textSize="16sp"
android:singleLine="true"
android:ellipsize="end"
android:textColor="@color/green"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>

左右的顯示值原理也是一樣的，看以下代碼：

private void initRightText(){
LayoutInflater inflater = (LayoutInflater)getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
final View undoView = inflater.inflate(R.layout.rightpop, null);
mPopupRightView = (TextView)undoView.findViewById(R.id.righttext);
mPopupRightView.setText(rightText+"");
mRightPopup = new PopupWindow(undoView, mPopupWidth, ViewGroup.LayoutParams.WRAP_CONTENT, false);
mRightPopup.setAnimationStyle(R.style.fade_animation);
}

那么如何讓滑塊上方的文字跟著滑動。只要重寫onProgressChanged就可以了。

public void onProgressChanged(SeekBar seekBar, int progress, boolean b) {
String popupText = null;
if (mProgressChangeListener!=null){
popupText = mProgressChangeListener.onHintTextChanged(this, cuclaProcess(leftText));
}
if(mExternalListener !=null){
mExternalListener.onProgressChanged(seekBar, progress, b);
}
step = cuclaProcess(leftText);
mPopupTextView.setText(popupText!=null? popupText : String.valueOf(step));
if(mPopupStyle==POPUP_FOLLOW){
mPopup.update((int) (this.getX()+(int) getXPosition(seekBar)), (int) (this.getY()+2*mYLocationOffset+this.getHeight()), -1, -1);
}
}

其實最主要的就是算出x的位置getXPosition?？匆陨洗a:

private float getXPosition(SeekBar seekBar){
float val = (((float)seekBar.getProgress() * (float)(seekBar.getWidth() - 2 * seekBar.getThumbOffset())) / seekBar.getMax());
float offset = seekBar.getThumbOffset()*2;
int textWidth = mPopupWidth;
float textCenter = (textWidth/2.0f);
float newX = val+offset - textCenter;
return newX;
}

通過getProgress獲得進度來計算x移動的距離。這樣就實現(xiàn)了文字的移動。最后會給出源碼下載。

如何使用呢，跟普通自定義的控件一樣，如下：

<com.canmou.cm4restaurant.tools.SeekBarHint
android:id="@+id/seekbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_marginTop="40dp"
android:progress="5"
hint:popupWidth="40dp"
hint:yOffset="10dp"
hint:popupStyle="fixed"/>

當(dāng)然目前實現(xiàn)了原生的樣式，下面來說說如何自定義seekbar的樣式。

自定義樣式

seekbar要改樣式得準(zhǔn)備三張圖片，左邊己選擇的滑動條圖片，右邊未選擇的滑動條圖片和滑塊圖片，滑動條要9.png格式的最好。這里為方便，直接用layer-list來處理滑動條部分。在drawable中定義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="10dip" />
<gradient
android:angle="180"
android:centerColor="#F5F5F5"
android:centerY="0.2"
android:endColor="#F5F5F5"
android:startColor="#F5F5F5" />
</shape>
</item>
<item android:id="@android:id/progress">
<clip >
<shape >
<corners android:radius="10dip" 
/>
<gradient
android:angle="180"
android:centerColor="#39ac69"
android:centerY="0.45"
android:endColor="#39ac69"
android:startColor="#39ac69" />
</shape>
</clip>
</item>
</layer-list>

這樣就實現(xiàn)了重疊的圖片。設(shè)置滑塊的圖片則直接在seekhint中設(shè)置：