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();
}
});
}
}