android自定义进度值可拖动的seekbar

最近忙找实习，加上实验室在推新项目，需要学习新知识。所以很长一段时间没去整理了官博客了，github也蛮久没更新，很惭愧。接下来还是要坚持写。今天就简单的写一下我在项目中用到的算自定义seekbar的博客，需求是这样的，seekbar需要显示最左和最右值，进度要跟随进度块移动。看下效果图就明白了。

其实实现起来很简单，主要是思路。自定义控件的话也不难，之前我的博客也有专门介绍，这里就不再多说。

实现方案

这里是通过继承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);

    }
}

布局很简单，就一个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就实现了。

源码下载