TShopping

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

[教學] Android SeekBar(拖曳條)

[複製鏈接]
發表於 2020-5-14 19:01:59 | 顯示全部樓層 |閱讀模式
 
Push to Facebook Push to Plurk  
1.SeekBar基本用法
好吧,基本用法實際上很簡單,常用的屬性無非就下面這幾個常用的屬性,Java代碼裡只要setXxx即可:

  1. android:max="100" //滑动条的最大值
  2. android:progress="60" //滑动条的当前值
  3. android:secondaryProgress="70" //二级滑动条的进度
  4. android:thumb = "@mipmap/sb_icon" //滑块的drawable
複製代碼

接著要說下SeekBar的事件了,SeekBar.OnSeekBarChangeListener 我們直接調用三個對應的方法:
onProgressChanged:進度發生改變時會觸發
onStartTrackingTouch:按住SeekBar時會觸發
onStopTrackingTouch:放開SeekBar時觸發
簡單的代碼示例:
效果圖:

Android SeekBar 拖曳

Android SeekBar 拖曳


實現代碼:
  1. public class MainActivity extends AppCompatActivity {

  2.     private SeekBar sb_normal;
  3.     private TextView txt_cur;
  4.     private Context mContext;

  5.     @Override
  6.     protected void onCreate(Bundle savedInstanceState) {
  7.         super.onCreate(savedInstanceState);
  8.         setContentView(R.layout.activity_main);
  9.         mContext = MainActivity.this;
  10.         bindViews();
  11.     }

  12.     private void bindViews() {
  13.         sb_normal = (SeekBar) findViewById(R.id.sb_normal);
  14.         txt_cur = (TextView) findViewById(R.id.txt_cur);
  15.         sb_normal.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
  16.             @Override
  17.             public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
  18.                 txt_cur.setText("当前进度值:" + progress + "  / 100 ");
  19.             }

  20.             @Override
  21.             public void onStartTrackingTouch(SeekBar seekBar) {
  22.                 Toast.makeText(mContext, "触碰SeekBar", Toast.LENGTH_SHORT).show();
  23.             }

  24.             @Override
  25.             public void onStopTrackingTouch(SeekBar seekBar) {
  26.                 Toast.makeText(mContext, "放开SeekBar", Toast.LENGTH_SHORT).show();
  27.             }
  28.         });
  29.     }
  30. }
複製代碼


2.簡單SeekBar定制:
本來還想著著自定義下SeekBar的,後來想想,還是算了,涉及到自定義View的一些東西,可能初學者並不了解,看起來也有點困難,關於自定義View的還是放到進階那裡吧,所以這裡就只是簡單的定制下SeekBar!定制的內容包括滑塊,以及軌道!

運行效果圖:

Android SeekBar 拖曳

Android SeekBar 拖曳



代碼實現: 1.滑塊狀態可繪製:sb_thumb.xml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android">
  3.     <item android:state_pressed="true" android:drawable="@drawable/seekbar_thumb_pressed"/>
  4.     <item android:state_pressed="false" android:drawable="@drawable/seekbar_thumb_normal"/>
  5. </selector>
複製代碼

貼下素材:

Android SeekBar 拖曳

Android SeekBar 拖曳

Android SeekBar 拖曳

Android SeekBar 拖曳


2.條形欄Bar的Drawable:sb_bar.xml

這裡用到一個layer-list的drawable資源!其實就是附加圖片,依次是:背景,二級進度條,當前進度:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <layer-list
  3.     xmlns:android="http://schemas.android.com/apk/res/android">
  4.     <item android:id="@android:id/background">
  5.         <shape>
  6.             <solid android:color="#FFFFD042" />
  7.         </shape>
  8.     </item>
  9.     <item android:id="@android:id/secondaryProgress">
  10.         <clip>
  11.             <shape>
  12.                 <solid android:color="#FFFFFFFF" />
  13.             </shape>
  14.         </clip>
  15.     </item>
  16.     <item android:id="@android:id/progress">
  17.         <clip>
  18.             <shape>
  19.                 <solid android:color="#FF96E85D" />
  20.             </shape>
  21.         </clip>
  22.     </item>
  23. </layer-list>
複製代碼


3.然後佈局約會SeekBar後,設置下progressDrawable與thumb即可!
  1. <SeekBar
  2.         android:id="@+id/sb_normal"
  3.         android:layout_width="match_parent"
  4.         android:layout_height="wrap_content"
  5.         android:maxHeight="5.0dp"
  6.         android:minHeight="5.0dp"
  7.         android:progressDrawable="@drawable/sb_bar"
  8.         android:thumb="@drawable/sb_thumb"/>
複製代碼

就是這麼簡單!





文章出處
https://www.runoob.com/w3cnote/android-tutorial-seekbar.html

 

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

本版積分規則



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

GMT+8, 2020-5-26 14:26 , Processed in 0.059621 second(s), 24 queries .

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

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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