android自己定義進度值可拖動的seekbar

標籤：tin   find   技術分享   location   down   linear   git   進度顯示   左右   

近期忙找實習，加上實驗室在推新項目，須要學習新知識。所以非常長一段時間沒去整理了官部落格了，github也蠻久沒更新。非常羞愧。接下來還是要堅持寫。

今天就簡單的寫一下我在項目中用到的算自己定義seekbar的部落格，需求是這種。seekbar須要顯示最左和最右值。進度要尾隨進度塊移動。

看下就明確了。

事實上實現起來非常easy，主要是思路。

自己定義控制項的話也不難，之前我的部落格也有專門介紹，這裡就不再多說。

實現方案

這裡是通過繼承seekbar來自己定義控制項，這種方式最快。主要痛點在於進度的顯示，事實上我非常的是最笨的方法，就是用了一個popwindow顯示在進度條的上方，然後在移動滑塊的時候即時的改變它顯示的橫座標。

看進度顯示的核心代碼：

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); }}

布局非常easy。就一個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。看以上代碼:

   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移動的距離。這樣就實現了文字的移動。

最後會給出原始碼下載。

怎樣使用呢。跟普通自己定義的控制項一樣。例如以下：

<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"/>

當然眼下實現了原生的樣式，以下來說說怎樣自己定義seekbar的樣式。

自己定義樣式

seekbar要改樣式得準備三張圖片，左邊己選擇的滑動條圖片，右邊未選擇的滑動條圖片和滑塊圖片，滑動條要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>

這樣就實現了重疊的圖片。設定滑塊的圖片則直接在seekhint中設定：

android:thumb="@drawable/bt_seekbar"

到此進度值可拖動的seekbar就實現了。
原始碼下載

android自己定義進度值可拖動的seekbar