閱讀185 返回首頁    go 阿裏雲 go 技術社區[雲棲]


API Demos 2.3 學習筆記 (13)-- Views->Seek Bar

更多精彩內容,請點擊閱讀:《API Demos 2.3 學習筆記》


SeekBar 是基於ProgressBar的擴展,可以理解為添加了滑動條的ProgressBar。用戶可以左右移動滑動條或者左右移動軌跡球來設置當前的進度值。最好不要在SeekBar左邊或者右邊放置一個可以聚焦的控件。

SeekBar 控件最經典的應用是在播放器中用於顯示/改變播放進度的進度條。下麵是一個簡單的SeekBar 控件:

	 <SeekBar android:
       	      android:layout_width="match_parent"
       	      android:layout_height="wrap_content"
       	      android:max="100"
       	      android:progress="50"
       	      android:secondaryProgress="75" />
注:android:max="100" 屬性表示該SeekBar 的最大值為100,即取值範圍為0~100
android:progress="50" 屬性表示當前初始的進度值為50

android:secondaryProgress="75"  屬性表示當前初始的第二進度值為 75


在播放器的進度條中, android:progress常用來表示當前播放的進度,而 android:secondaryProgress則常用來表示當前音頻/視頻文件緩衝的進度。

SeekBar 主要通過設置監聽器OnSeekBarChangeListener來響應用戶點擊的。具體使用方法如下:

       // 通過findViewById方法獲得RatingBar對象
        SeekBar mSeekBar = (SeekBar) findViewById(R.id.seekbar);
                 
         //創建SeekBar 監聽器
        mSeekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
			
			public void onStopTrackingTouch(SeekBar seekBar) {
				// TODO 用戶停止對seekbar進行觸屏操作時觸發響應
				
			}
			
			public void onStartTrackingTouch(SeekBar seekBar) {
				// TODO 用戶開始對seekbar進行觸屏操作時觸發響應
				
			}
			
			public void onProgressChanged(SeekBar seekBar, int progress,
					boolean fromUser) {
				// TODO 用戶移動滑動條,導致進度值改變時,觸發響應
				
			}
		});
注:創建 SeekBar 監聽器時,需要注意的是,3個參數以及它們對應的含義如下:
seekBar:   由於多個SeekBar可以同時指定同一個SeekBar 監聽器 。該參數就是當前觸發SeekBar 監聽器的那一個SeekBar 對象。
progress:  當前進度值。取值範圍從0到android:max屬性所設定的最大值。

fromUser:  如果觸發監聽器的是來自用戶觸屏點擊或軌跡球左右移動,則為true。


下麵我們進行實例代碼解析:

res-layout-seekbar_1.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:andro
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 一個SeekBar對象-->
    <!-- android:max="100" 表示seekbar最大值是100,即取值範圍0~100-->
    <!-- android:progress="50" 表示seekbar當前進度取值是50-->
    <!-- android:secondaryProgress="75"  表示seekbar當前第二進度取值是75-->
    <SeekBar android:
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="100"
        android:progress="50"
        android:secondaryProgress="75" />

    <!-- 一個TextView對象,用於顯示當前的progress進度值 -->
    <TextView android:
       	android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    
    <!-- 一個TextView對象,用於顯示用戶當前是否在對Seek Bar進行觸屏操作 -->
    <TextView android:
       	android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>


src-com.example.android.apis.view-SeekBar1.java

package com.example.android.apis.view;

import android.app.Activity;
import android.os.Bundle;
import android.widget.SeekBar;
import android.widget.TextView;

import com.example.android.apis.R;


/**
 * 演示如何使用seek bar
 */
public class SeekBar1 extends Activity implements SeekBar.OnSeekBarChangeListener {
    
    SeekBar mSeekBar;
    TextView mProgressText;
    TextView mTrackingText;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.seekbar_1);
        
        // 通過findViewById方法獲得一個SeekBar對象和兩個用於提示作用的TextView
        mSeekBar = (SeekBar)findViewById(R.id.seek);
        mSeekBar.setOnSeekBarChangeListener(this); //設置Seek Bar監聽器
        mProgressText = (TextView)findViewById(R.id.progress);
        mTrackingText = (TextView)findViewById(R.id.tracking);
    }

    //當用戶用手移動滑動條,改變進度值時,觸發該響應。progress表示當前進度值。
    public void onProgressChanged(SeekBar seekBar, int progress, boolean fromTouch) {
        mProgressText.setText(progress + " " + 
                getString(R.string.seekbar_from_touch) + "=" + fromTouch); 
    }

    //用戶開始對SeekBar進行觸屏操作時觸發響應
    public void onStartTrackingTouch(SeekBar seekBar) {
        mTrackingText.setText(getString(R.string.seekbar_tracking_on));
    }

    //用戶停止對SeekBar進行觸屏操作時觸發響應
    public void onStopTrackingTouch(SeekBar seekBar) {
        mTrackingText.setText(getString(R.string.seekbar_tracking_off));
    }
}

知識點1:關於如何自定義SeekBar的顏色,大小,圖片等進階知識,請點擊閱讀《SeekBar自定義(顏色,大小,圖片)》


預覽效果:


最後更新:2017-04-02 06:51:56

  上一篇:go Js遍曆Josn對象(內容對比頁實現思路)
  下一篇:go 係統架構-性能篇章2(係統拆分1)