iT邦幫忙

2022 iThome 鐵人賽

DAY 11
0
Mobile Development

Android Studio - 30天菜鳥筆記系列 第 11

Android Studio菜鳥筆記 - Day11 - SeekBar

  • 分享至 

  • xImage
  •  

SeekBar是拖動條控件一般用於音量控制或播放進度控制

Seekbar的常用屬性:

android:max //滑動條的最大值
android:progress //滑動條的當前值
android:secondaryProgress //二級滑動條的進度
android:thumb //滑塊的樣式
android:progressDrawable //滑動條的樣式
android:splitTrack // 是否設置一個間隙,讓滑塊與底部圖片分隔

Seekbar監聽事件OnSeekBarChangeListener
裡面有三個事件分別為
onProgressChanged:進度條改變事件
onStartTrackingTouch:進度條開始拖動事件
onStopTrackingTouch:進度條停止拖動事件

seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
    @Override
    public void onProgressChanged(SeekBar seekBar, int i, boolean b) {
        //進度發生改變時會觸發
    }

    @Override
    public void onStartTrackingTouch(SeekBar seekBar) {
        //按住SeekBar時會觸發
    }

    @Override
    public void onStopTrackingTouch(SeekBar seekBar) {
        //放開SeekBar時觸發
    }
});

自訂外觀:
進度條外觀
有三種屬性可以去調整
@android:id/background:進度條背景顏色
@android:id/secondaryProgress:二級進度條的顏色
@android:id/progress:進度條當前已經滑過面積的顏色
首先先在res/drawable下創建一個.xml

依個人喜好創建樣式
seek_bar_progress.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!--進度條背景顏色-->
    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="10dp"/>
            <solid android:color="#FF0000" />
        </shape>
    </item>
<!--二級進度條的顏色-->
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <solid android:color="#9FD9E4" />
            </shape>
        </clip>
    </item>
<!--進度條已滑過的顏色-->
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="10dp"/>
                <gradient
                    android:angle="45"
                    android:centerX="50%"
                    android:centerColor="#91BDFF"
                    android:startColor="#FF8A8A"
                    android:endColor="#BDFF91"
                    android:type="linear"
                    />
            </shape>
        </clip>
    </item>
</layer-list>

接著套用屬性

<SeekBar
    android:id="@+id/seekBar"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:secondaryProgress="50"    //可決定是否顯示二級進度條
    android:splitTrack="false"    
    android:progressDrawable="@drawable/seek_bar_progress"
        />

無二級進度條:

有二級進度條:

接著是自訂滑塊樣式
一樣先在res/drawable下創建.xml
若想要點擊前後出現不一樣的樣式可以創建兩個板模然後再創建一個xml用來結合
seek_bar_thumb1.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <size android:height="15dp"
        android:width="15dp"/>

    <corners android:radius="100dp"/>

    <solid android:color="#FFE800"/>

</shape>

seek_bar_thumb2.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <size android:height="15dp"
        android:width="15dp"/>

    <corners android:radius="100dp"/>

    <solid android:color="#00FF99"/>

</shape>

把以上兩個xml結合
seek_bar_thumb_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 按下狀態-->
    <item android:drawable="@drawable/seek_bar_thumb1" android:state_pressed="true" />

    <!-- 有焦點狀態 -->
    <item android:drawable="@drawable/seek_bar_thumb1" android:state_focused="true" />

    <!-- 普通狀態 -->
    <item android:drawable="@drawable/seek_bar_thumb2" />
</selector>

完整程式碼:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <SeekBar
        android:id="@+id/seekBar"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0"
        android:splitTrack="false"
        android:secondaryProgress="50"
        android:progressDrawable="@drawable/seek_bar_progress"
        android:thumb="@drawable/seek_bar_thumb_bg"
        />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.303" />
</androidx.constraintlayout.widget.ConstraintLayout>
import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.widget.SeekBar;
import android.widget.TextView;
import android.widget.Toast;

import org.w3c.dom.Text;

public class MainActivity extends AppCompatActivity {
    SeekBar seekBar;
    TextView textView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        textView = findViewById(R.id.textView);
        seekBar = findViewById(R.id.seekBar);
        seekBar.setMax(100);
        seekBar.setProgress(30);
        seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int i, boolean b) {
                //進度發生改變時會觸發
                textView.setText(i + "/" + seekBar.getMax());
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {
                //按住SeekBar時會觸發
                Toast.makeText(MainActivity.this, "SeekBar被點選", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
                //放開SeekBar時觸發
                Toast.makeText(MainActivity.this, "以放開SeekBar", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

上一篇
Android Studio菜鳥筆記 - Day10 - Spinner
下一篇
Android Studio菜鳥筆記 - Day12 - AlertDialog
系列文
Android Studio - 30天菜鳥筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言