腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

軟件下載

android MAC 驅(qū)動(dòng)下載字體下載 DLL

源碼下載

PHP ASP.NET ASP JSP

軟件編程

C# JAVA C 語(yǔ)言 Delphi Android

網(wǎng)絡(luò)編程

PHP ASP.NET ASP JavaScript

在線工具

CSS格式化 JS格式化 Html轉(zhuǎn)化為Js

數(shù)據(jù)庫(kù)

MYSQL MSSQL oracle DB2 MARIADB

CMS

PHPCMS DEDECMS 帝國(guó)CMS WordPress

常用工具

PHP開(kāi)發(fā)工具 python Photoshop 必備軟件

Android 可拖動(dòng)的seekbar自定義進(jìn)度值

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

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

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

這里寫(xiě)圖片描述

其實(shí)實(shí)現(xiàn)起來(lái)很簡(jiǎn)單，主要是思路。自定義控件的話也不難，之前我的博客也有專(zhuān)門(mén)介紹，這里就不再多說(shuō)。

實(shí)現(xiàn)方案

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

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

布局很簡(jiǎn)單，就一個(gè)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);
}

那么如何讓滑塊上方的文字跟著滑動(dòng)。只要重寫(xiě)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);
}
}

其實(shí)最主要的就是算出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;
}

通過(guò)getProgress獲得進(jìn)度來(lái)計(jì)算x移動(dòng)的距離。這樣就實(shí)現(xiàn)了文字的移動(dòng)。最后會(huì)給出源碼下載。

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

<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)然目前實(shí)現(xiàn)了原生的樣式，下面來(lái)說(shuō)說(shuō)如何自定義seekbar的樣式。

自定義樣式

seekbar要改樣式得準(zhǔn)備三張圖片，左邊己選擇的滑動(dòng)條圖片，右邊未選擇的滑動(dòng)條圖片和滑塊圖片，滑動(dòng)條要9.png格式的最好。這里為方便，直接用layer-list來(lái)處理滑動(dòng)條部分。在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>

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

android:thumb="@drawable/bt_seekbar"

到此進(jìn)度值可拖動(dòng)的seekbar就實(shí)現(xiàn)了。大家都看明白了，有任何疑問(wèn)歡迎給腳本之家小編留言，小編會(huì)及時(shí)給大家回復(fù)的。欲了解更多精彩內(nèi)容請(qǐng)持續(xù)關(guān)注腳本之家網(wǎng)站，謝謝！

您可能感興趣的文章: