TShopping

 找回密碼
 註冊
搜索
查看: 258|回復: 0

[教學] Android控制組件之SeekBar

[複製鏈接]
發表於 2017-12-28 19:15:51 | 顯示全部樓層 |閱讀模式
 
Push to Facebook Push to Plurk Push to Twitter 
1 SeekBar簡介
SeekBar是進度條。我們使用進度條時,可以使用系統默認的進度條;也可以自定義進度條的圖片和滑塊圖片等。
2 SeekBar示例
創建一個activity,包含2個SeekBar。
第1個SeekBar是系統默認的SeekBar。
第2個SeekBar是自定義SeekBar,使用自定義的背景圖和滑塊圖片。
代碼
  1. package com.skywang.control;

  2. import android.os.Bundle;
  3. import android.app.Activity;
  4. import android.util.Log;
  5. import android.widget.TextView;
  6. import android.widget.SeekBar;
  7. import android.widget.SeekBar.OnSeekBarChangeListener;

  8. public class SeekBarTest extends Activity implements SeekBar.OnSeekBarChangeListener{
  9.     private static final String TAG = "SKYWANG";

  10.     // 与“系统默认SeekBar”对应的TextView
  11.     private TextView mTvDef;
  12.     // 与“自定义SeekBar”对应的TextView
  13.     private TextView mTvSelf;
  14.     // “系统默认SeekBar”
  15.     private SeekBar mSeekBarDef;
  16.     // “自定义SeekBar”
  17.     private SeekBar mSeekBarSelf;
  18.    
  19.     @Override
  20.     protected void onCreate(Bundle savedInstanceState) {
  21.         super.onCreate(savedInstanceState);
  22.         setContentView(R.layout.seek_bar_test);
  23.         
  24.         // 与“系统默认SeekBar”对应的TextView
  25.         mTvDef = (TextView) findViewById(R.id.tv_def);
  26.         // “系统默认SeekBar”
  27.         mSeekBarDef = (SeekBar) findViewById(R.id.seekbar_def);
  28.         mSeekBarDef.setOnSeekBarChangeListener(this);

  29.         // 与“自定义SeekBar”对应的TextView
  30.         mTvSelf = (TextView) findViewById(R.id.tv_self);
  31.         // “自定义SeekBar”
  32.         mSeekBarSelf = (SeekBar) findViewById(R.id.seekbar_self);
  33.         mSeekBarSelf.setOnSeekBarChangeListener(this);
  34.     }   
  35.    
  36.     /*
  37.      * SeekBar停止滚动的回调函数
  38.      */
  39.     @Override
  40.     public void onStopTrackingTouch(SeekBar seekBar) {
  41.         
  42.     }

  43.     /*
  44.      * SeekBar开始滚动的回调函数
  45.      */
  46.     @Override
  47.     public void onStartTrackingTouch(SeekBar seekBar) {

  48.     }

  49.     /*
  50.      * SeekBar滚动时的回调函数
  51.      */
  52.     @Override
  53.     public void onProgressChanged(SeekBar seekBar, int progress,
  54.             boolean fromUser) {
  55.         Log.d(TAG, "seekid:"+seekBar.getId()+", progess"+progress);
  56.         switch(seekBar.getId()) {
  57.             case R.id.seekbar_def:{
  58.                 // 设置“与系统默认SeekBar对应的TextView”的值
  59.                 mTvDef.setText(getResources().getString(R.string.text_def)+" : "+String.valueOf(seekBar.getProgress()));
  60.                 break;
  61.             }
  62.             case R.id.seekbar_self: {
  63.                 // 设置“与自定义SeekBar对应的TextView”的值               
  64.                 mTvSelf.setText(getResources().getString(R.string.text_self)+" : "+String.valueOf(seekBar.getProgress()));
  65.                 break;
  66.             }
  67.             default:
  68.                 break;
  69.         }
  70.     }
  71. }
複製代碼

代碼說明:
要監聽SeekBar的滑動消息,通過實現“SeekBar.OnSeekBarChangeListener”接口。這個接口中包含3個方法onStartTrackingTouch()、onStopTrackingTouch()和onProgressChanged()。
layout文件
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     xmlns:tools="http://schemas.android.com/tools"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent"
  5.     android:orientation="vertical" >
  6.    
  7.     <TextView
  8.         android:id="@+id/tv_def"
  9.         android:layout_width="wrap_content"
  10.         android:layout_height="wrap_content"
  11.         android:text="@string/text_def" />
  12.    
  13.     <!--
  14.         max=100,代表它的取值范围是0-100,共101个值;
  15.         progress=10,代表默认值是10  
  16.     -->
  17.     <SeekBar
  18.         android:id="@+id/seekbar_def"
  19.         android:layout_width="620px"
  20.         android:layout_height="wrap_content"
  21.         android:max="100"
  22.         android:progress="10"
  23.         />
  24.    
  25.     <TextView
  26.         android:id="@+id/tv_self"
  27.         android:layout_width="wrap_content"
  28.         android:layout_height="wrap_content"
  29.         android:text="@string/text_self" />
  30.    
  31.     <!--
  32.         max=100,代表它的取值范围是0-100,共101个值;
  33.         progress=20,代表默认值是20
  34.         progressDrawable,表示SeekBar的背景图片
  35.         thumbe,表示SeekBar的滑块图片  
  36.     -->
  37.     <SeekBar
  38.         android:id="@+id/seekbar_self"
  39.         android:layout_width="620px"  
  40.         android:layout_height="wrap_content"
  41.         android:max="100"
  42.         android:progress="20"
  43.         android:progressDrawable="@drawable/bg_bar"  
  44.         android:thumb="@drawable/thumb_bar" />
  45.    
  46. </LinearLayout>
複製代碼

自定義SeekBar的背景定義為:android:progressDrawable="@drawable/bg_bar"。
它調用的bg_bar.xml的內容如下:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  3.     <!-- 背景图 -->
  4.     <item android:id="@+android:id/background" android:drawable="@drawable/bar_dn" />
  5.     <!-- 第二进度图 -->
  6.     <item android:id="@+android:id/SecondaryProgress" android:drawable="@drawable/bar_dn" />
  7.     <!-- 进度度 -->
  8.     <item android:id="@+android:id/progress" android:drawable="@drawable/bar_up" />
  9. </layer-list>
複製代碼

bar_dn.png如下圖:
1.png
bar_up.png如下圖:
2.png
自定義SeekBar的滑塊定義為:android:thumb="@drawable/thumb_bar"。
它調用的thumb_bar.xml的內容如下:
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android">
  3.     <!-- 按下状态 -->
  4.     <item android:state_pressed="true"
  5.         android:drawable="@drawable/thumb_dn" />

  6.     <!-- 焦点状态 -->
  7.     <item android:state_focused="true"
  8.         android:drawable="@drawable/thumb_up" />
  9.    
  10.     <!-- 默认状态 -->
  11.     <item android:drawable="@drawable/thumb_up" />  
  12.    
  13. </selector>
複製代碼



thumb_up.png如下圖:
3.png
thumb_dn.png如下圖:
4.png
manifest文件

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <manifest xmlns:android="http://schemas.android.com/apk/res/android"
  3.     package="com.skywang.control"
  4.     android:versionCode="1"
  5.     android:versionName="1.0" >

  6.     <uses-sdk
  7.         android:minSdkVersion="8"
  8.         android:targetSdkVersion="17" />

  9.     <application
  10.         android:allowBackup="true"
  11.         android:icon="@drawable/ic_launcher"
  12.         android:label="@string/app_name"
  13.         android:theme="@style/AppTheme" >
  14.         <activity
  15.             android:name="com.skywang.control.SeekBarTest"
  16.             android:label="@string/app_name" >
  17.             <intent-filter>
  18.                 <action android:name="android.intent.action.MAIN" />

  19.                 <category android:name="android.intent.category.LAUNCHER" />
  20.             </intent-filter>
  21.         </activity>
  22.     </application>

  23. </manifest>
複製代碼

點擊下載:源代碼
運行效果:如圖
5.jpg


 

臉書網友討論
您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



Archiver|手機版|小黑屋|免責聲明|TShopping

GMT+8, 2018-12-16 17:48 , Processed in 0.057636 second(s), 24 queries .

本論壇言論純屬發表者個人意見,與 TShopping綜合論壇 立場無關 如有意見侵犯了您的權益 請寫信聯絡我們。

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表