iT邦幫忙

2022 iThome 鐵人賽

DAY 4
0
Mobile Development

Android Studio 30天學習紀錄系列 第 4

Android Studio 30天學習紀錄-Day4 自訂seekbar樣式&同步音量

  • 分享至 

  • xImage
  •  

今天主要要來提Seekbar(拖曳軸)這個應用,SeekBar常常應用在音量調整,那麼今天就來做SeekBar和音量的同步調整,首先先看到看到SeekBar元件:

SeekBar

<SeekBar
    android:id="@+id/seekBar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

將seekBar加入至布局後,要來看到的是SeekBar的屬性。

屬性

android:progressDrawable="@drawable/seekbar_voice_style"//滑動條的樣式
android:thumb="@drawable/seekbar_voice_circle_style"//滑動圈圈的樣式
android:splitTrack="false"//取消間隙(沒取消會有白塊)

參考更多:Android Developers

目前我是我用到這三個屬性做設計,接下來就開始設計滑動圓圈及滑動條的drawable。


樣式(drawable)

首先透過New->Drawable Resource File去新增drawable。
我新增的名稱分別是滑動圓圈drawable(seekbar_voice_circle_style,Root element為shape)和滑動條(seekbar_voice_style,Root element為selector)。
https://ithelp.ithome.com.tw/upload/images/20220720/201392592GZbRx5xfN.png

那麼接著貼上樣式的code:

滑動圓圈(seekbar_voice_circle_style.xml)

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    android:useLevel="false">
    <solid android:color="#3AB1E8"/>
    <size android:width="20dp"
        android:height="20dp"/>
</shape>

滑動條(seekbar_voice_style.xml)

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--沒按下的狀態(默認)-->
    <item android:state_pressed="false">
        <shape android:shape="rectangle">
            <!--改邊界顏色為白色-->
            <stroke android:width="3dp"
                android:color="@color/white"/>
            <!--改填充色為淺藍-->
            <solid android:color="#3AB1E8"/>
            <corners android:radius="100dp"/>
        </shape>
    </item>
    <!--點擊按鈕時的樣式-->
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <!--填充顏色為紫色-->
            <solid android:color="@color/purple_200"/>
            <corners android:radius="100dp"/>
            <size android:height="10dp"/>
        </shape>
    </item>
</selector>

那麼設計好需要的drawable後,稍後可以在activity進行使用,接著開始設計需要的UI畫面和程式碼。


UI

<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">

    <TextView
        android:id="@+id/txv_progress"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="30dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.497"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.248" />

    <SeekBar
        android:id="@+id/seekBar"
        android:layout_width="0dp"
        android:layout_height="80dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:progressDrawable="@drawable/seekbar_voice_style"
        android:splitTrack="false"/>

</androidx.constraintlayout.widget.ConstraintLayout>

程式碼

public class MainActivity extends AppCompatActivity {
    private SeekBar mSeekBar;
    private TextView txv_progress;
    public AudioManager audiomanage;//調整音量、響鈴
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        voiceRegisterReceiver();//註冊同步更新的廣播
        txv_progress=findViewById(R.id.txv_progress);
        audiomanage = (AudioManager)getSystemService(Context.AUDIO_SERVICE);//取得音量控制服務
        mSeekBar = findViewById(R.id.seekBar);
        mSeekBar.setMax(audiomanage.getStreamMaxVolume(AudioManager.STREAM_MUSIC));
        mSeekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            //當seekbar狀態值改變
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean b) {
                audiomanage.setStreamVolume(AudioManager.STREAM_MUSIC, progress, 0);//音量調整
                txv_progress.setText("目前音量:"+progress);
            }
            //點擊seekbar事件
            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {
                Toast.makeText(getApplicationContext(),"滑動",Toast.LENGTH_SHORT).show();
            }
            //放開seekbar事件
            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
                Toast.makeText(getApplicationContext(),"停止",Toast.LENGTH_SHORT).show();
            }
        });
        init();
    }
    private void voiceRegisterReceiver(){
        //廣播
        MyVolumeReceiver mVolumeReceiver = new MyVolumeReceiver() ;
        IntentFilter filter = new IntentFilter() ;
        filter.addAction("android.media.VOLUME_CHANGED_ACTION") ;
        registerReceiver(mVolumeReceiver, filter) ;
    }
    private class MyVolumeReceiver extends BroadcastReceiver {
        @Override
        public void onReceive(Context context, Intent intent) {
            //音量若更動則改變seekbar位置
            if(intent.getAction().equals("android.media.VOLUME_CHANGED_ACTION")){
                AudioManager mAudioManager = (AudioManager) context.getSystemService(Context.AUDIO_SERVICE);
                int currVolume = mAudioManager.getStreamVolume(AudioManager.STREAM_MUSIC) ;// 當前的媒體音量
                mSeekBar.setProgress(currVolume);
            }
        }
    }
    //初始設定音量
    private void init(){
        int volume = audiomanage.getStreamVolume(AudioManager.STREAM_MUSIC);//目前音量取得
        txv_progress.setText("目前音量:"+volume);
        mSeekBar.setProgress(volume);
    }
}

成果

https://ithelp.ithome.com.tw/upload/images/20220914/20139259hW3EQndNRO.png


上一篇
Android Studio 30天學習紀錄-Day3 進度條(Progress Bar)
下一篇
Android Studio 30天學習紀錄-Day5 相簿選取相片
系列文
Android Studio 30天學習紀錄30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言