Day 2 : Discount(Seekbar+TextWatcher)

使用語言

• Kotlin

使用元件

• TextView
• EditText
• SeekBar

xml資源檔配置

• SeekBar的設置屬性：

  • android:max="" ：設置 SeekBar 最大值，預設為 100

  • android:progress="" ：設置 SeekBar 初始值

  • android:thumb="" ：設置滑塊樣式

  • android:progressDrawable="" ：設置進度條樣式

  • style="" ：SeekBar的樣式，可使用自定義的樣式或內建樣式

    自定義 style 中即可帶入自定義的滑塊及進度條樣式，例如：

    <style name="MySeekbarStyle" >
        <item name="android:maxHeight">10dp</item>
        <item name="android:minHeight">10dp</item>
        <item name="android:progressDrawable">@drawable/Myprogress</item>
        <item name="android:thumb">@mipmap/Mythumb</item>
    </style>
    

使用Method

OnSeekBarChangeListener

為 SeekBar 設置監聽器，處理 SeekBar 被觸及或是進度變化過程中要進行的事件

seekBar.setOnSeekBarChangeListener(object : SeekBar.OnSeekBarChangeListener{})

三個必須 override 的 funtion：

• onProgressChanged

  onProgressChanged(seekBar: SeekBar, progress: Int, fromUser: Boolean)

  SeekBar 進度變更過程觸發，設定進度改變時要做的事

  override fun onProgressChanged(seekBar: SeekBar?, progress: Int, fromUser: Boolean) {
      discount.setText(progress.toString() + "%")
      textView.setText("${editText.text.toString().toFloat() * progress/100}")
      pg= progress  
   //pg 為外部自定義變數，用來儲存 progress 供其他地方使用
  }
  

  • seekBar：使用者滑動的 SeekBar

  • progress：SeekBar 的進度

  • fromUser：如果是使用者滑動造成進度變動則為 True，若是經 Code 變更進度則為 False

• onStartTrackingTouch

  onStartTrackingTouch (seekBar: SeekBar)

  在 SeekBar 被使用者觸摸的當下觸發

  override fun onStartTrackingTouch(seekBar: SeekBar?) {}
  

• onStopTrackingTouch

  onStopTrackingTouch (seekBar: SeekBar)

  在使用者手指離開 SeekBar 時當下觸發

  override fun onStopTrackingTouch(seekBar: SeekBar?) {}
  

addTextChangedListener

addTextChangedListener (watcher: TextWatcher)

editText.addTextChangedListener(object :TextWatcher{})

用來監聽 Text 的變化，TextWatcher 為一個 Interface，因此需實作裡面的三個 abstract class

• beforeTextChanged

  override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) {}
  

  • s：Text 變化前的字串

  • start：Text 開始變化的位置

  • count：即將被取代的字符個數

  • after：用來取代原字符的字符

  舉例：原本 Text 內容為 1，接著輸入 2 的時候：
  變化前的字串為 1（s），然後將從 1（start）的位置，有 0（count）個字符將被長度為 1（after）的字符取代

• onTextChanged

  override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {
      // 在 EditText 發生變化的同時，改變顯示的 TextView
      if(editText.text.toString() != "")
          textView.setText("${editText.text.toString().toFloat() * pg/100}")
      else textView.setText("0")
  }
  

  • s：Text 變化前的字串

  • start：Text 開始變化的位置

  • before：即將被取代的原字符長度

  • count：剛剛取代原字符的字符個數

  舉例：原本 Text 內容為 1，接著輸入 2 的時候：
  變化前的字串為 1（s），然後將從 1（start）的位置，有長度為 0（before）字符剛剛被 1（count）個字符取代

• afterTextChanged

  override fun afterTextChanged(s: Editable?) {}
  

  • s：被改變的字符串

實作成果

查看詳細 Code > GitHub