用開源項目RangBar來實現有范圍的SeekBar

 

RangeBar是一個可以有選擇范圍的Seekbar，用這個項目其實是很簡單的。就是一個自定義控件~

一、布局文件

這里可以看到有很多屬性可以定制，除了通過xml來定義也可以再java代碼中進行定義。

說明：

<declare-styleable name="RangeBar">

tickCount:有多少個分割線
tickHeight：分割線的高度
barWeight：分割線和滑動條的粗細
barColor：分割線和滑動條的顏色
connectingLineWeight：已經選中區域的滑動條寬度
connectingLineColor：已經選中區域的滑動條顏色（不包括滑塊）
thumbRadius：滑塊的半徑，其實就是改變滑塊的大小
thumbImageNormal：滑塊普通狀態的圖片
thumbImagePressed：滑塊按下時的圖片
thumbColorNormal：滑塊普通狀態的顏色
thumbColorPressed：滑塊按下時的顏色

<attr name="tickCount" format="integer" />
<attr name="tickHeight" format="dimension" />
<attr name="barWeight" format="dimension" />
<attr name="barColor" format="reference|color" />
<attr name="connectingLineWeight" format="dimension" />
<attr name="connectingLineColor" format="reference|color" />
<attr name="thumbRadius" format="dimension" />
<attr name="thumbImageNormal" format="reference" />
<attr name="thumbImagePressed" format="reference" />
<attr name="thumbColorNormal" format="reference|color"/>
<attr name="thumbColorPressed" format="reference|color"/>
</declare-styleable>

 

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="${relativePackage}.${activityClass}" >

    <!-- 這里可以通過xml進行配置，用到了自定義的命名空間custom，具體的配置屬性可以在最下面看到 -->
    <com.edmodo.rangebar.RangeBar
        xmlns:custom="http://schemas.android.com/apk/res-auto"
        android:id="@+id/rangebar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="50dp"
        android:layout_marginTop="50dp"
        custom:tickCount="7" />
    
</RelativeLayout>

 

java代碼：

package com.kale.rangbartest;

import com.edmodo.rangebar.RangeBar;
import com.edmodo.rangebar.RangeBar.OnRangeBarChangeListener;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;

public class MainActivity extends Activity {

    RangeBar rangeBar;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        rangeBar = (RangeBar)findViewById(R.id.rangebar);
        
        rangeBar.setTickCount(7);//有多少分割線
        rangeBar.setTickHeight(25);//分割線的高度

        rangeBar.setBarWeight(6);//分割線和滑動桿的粗細
        rangeBar.setBarColor(0xff000000);//分割線和滑動桿的顏色，
        
        rangeBar.setConnectingLineWeight(5);//設置被選中的區域的寬度
        rangeBar.setConnectingLineColor(Color.parseColor("#ff0000"));//選中區域的顏色

        rangeBar.setThumbImageNormal(R.drawable.thumb);//滑塊普通狀態時顯示的圖片
        rangeBar.setThumbImagePressed(R.drawable.ic_launcher);//滑塊按下時顯示的圖片
        
        /**
         * 如果setThumbRadius()，setThumbColorNormal()，setThumbColorPressed()其中的一個或多個
         * 進行了設置那么rangbar會自動忽略已經設置好的滑塊圖片，這是需要注意的!!!
         */
        
        //rangeBar.setThumbRadius(20);//滑塊的半徑(>0)，也就是設置滑塊的大小。可以用setThumbRadius(-1)讓其回到默認狀態
        
        //設置滑塊普通狀態的顏色，這里會覆蓋setThumbImageNormal的設置，如果想要恢復最原始的樣子可以setThumbColorNormal(-1)
        //rangeBar.setThumbColorNormal(Color.parseColor("#0000ff"));
        //設置滑塊普通狀態的顏色，這里會覆蓋setThumbImagePressed的設置，如果想要恢復最原始的樣子可以setThumbColorPressed(-1)
        //rangeBar.setThumbColorPressed(Color.parseColor("#00ff00"));
        
        rangeBar.setThumbIndices(1, 5);//設置滑塊距離左端的位置。這里設置為左滑塊距離左邊一個格子，右滑塊距離左邊5個格子
        
        
        //設置監聽器
        rangeBar.setOnRangeBarChangeListener(new MyRangBarListener());
    }
    
    /**
     * @author:Jack Tony
     * @tips  :監聽滑塊選擇的監聽器
     * @date  :2014-10-22
     */
    private class MyRangBarListener implements OnRangeBarChangeListener{

        /**
         * 三個參數:
         * 1.rangbar對象
         * 2.左邊的滑塊距離左邊的距離，這里的距離用每一格來代替
         * 3.右邊滑塊距離左邊的距離，距離用滑塊的格數來代替
         * 還需要注意的是：設置left = 2，表示左邊滑塊處於第三個分割線的位置。
         * 
         * example：
         * leftThumbIndex = 2;rightThumbIndex = 5;
         * 
         *            thumb          thumb     ← 這是左右滑塊
         * |————|————|————|————|————|————|     ← 這里是分割線
         */
        @Override
        public void onIndexChangeListener(RangeBar rangeBar,
                int leftThumbIndex, int rightThumbIndex) {
            System.out.println("leftThumbIndex = "+ leftThumbIndex +
                    " rightThumbIndex = " + rightThumbIndex);
        }
        
    }
    
}

 

注意：如果setThumbRadius()，setThumbColorNormal()，setThumbColorPressed()其中的一個或多個進行了設置那么rangbar會自動忽略已經設置好的滑塊圖片，這是需要注意的!!!

 

效果圖：

 

屬性對比表格：

來源：https://github.com/edmodo/range-bar/wiki

 

源碼下載：http://download.csdn.net/detail/shark0017/8069581