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

五陵年少金市东，银鞍白马渡春风。这篇文章主要讲述android自己定义进度值可拖动的seekbar相关的知识，希望能为你提供帮助。
近期忙找实习，加上实验室在推新项目，须要学习新知识。所以非常长一段时间没去整理了官博客了，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? 【android自己定义进度值可拖动的seekbar】 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中设置：