Android - SeekBar

准备

IDE:

Android Studio 4.1.1
Build #AI-201.8743.12.41.6953283, built on November 5, 2020
Runtime version: 1.8.0_242-release-1644-b01 amd64
VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o
Windows 10 10.0

Android Virtual Device:

Name: Pixel_2_API_28
CPU/ABI: Google Play Intel Atom (x86)
Path: C:\Users\86188\.android\avd\Pixel_2_API_28.avd
Target: google_apis_playstore [Google Play] (API level 28)
Skin: pixel_2
SD Card: 512M
fastboot.chosenSnapshotFile: 
runtime.network.speed: full
hw.accelerometer: yes
hw.device.name: pixel_2
hw.lcd.width: 1080
hw.initialOrientation: Portrait
image.androidVersion.api: 28
tag.id: google_apis_playstore
hw.mainKeys: no
hw.camera.front: emulated
avd.ini.displayname: Pixel 2 API 28
hw.gpu.mode: auto
hw.ramSize: 1536
PlayStore.enabled: true
fastboot.forceColdBoot: no
hw.cpu.ncore: 4
hw.keyboard: yes
hw.sensors.proximity: yes
hw.dPad: no
hw.lcd.height: 1920
vm.heapSize: 256
skin.dynamic: yes
hw.device.manufacturer: Google
hw.gps: yes
hw.audioInput: yes
image.sysdir.1: system-images\android-28\google_apis_playstore\x86\
showDeviceFrame: yes
hw.camera.back: virtualscene
AvdId: Pixel_2_API_28
hw.lcd.density: 420
hw.arc: false
hw.device.hash2: MD5:55acbc835978f326788ed66a5cd4c9a7
fastboot.forceChosenSnapshotBoot: no
fastboot.forceFastBoot: yes
hw.trackBall: no
hw.battery: yes
hw.sdCard: yes
tag.display: Google Play
runtime.network.latency: none
disk.dataPartition.size: 6442450944
hw.sensors.orientation: yes
avd.ini.encoding: UTF-8
hw.gpu.enabled: yes

注意:以下示例仅在安卓虚拟设备上运行测试,并没有在真实的设备上运行测试。

项目

  1. 新建项目,选择 Empty Activity,在配置项目时,我选择的 Minimum SDKAPI 16: Android 4.1 (Jelly Bean)

  2. 编辑 src\main\res\layout\activity_main.xml 文件,删除原有的 TextView 元素,分别新增 3 个 SeekBar 和 3 个 TextView 元素:

    提示:此处引入 TextView 元素的目的是为了显示 SeekBar 元素的 progress 值。

    <?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/seekBarR"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginLeft="16dp"
            android:layout_marginTop="24dp"
            android:layout_marginEnd="16dp"
            android:layout_marginRight="16dp"
            android:max="100"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    
        <SeekBar
            android:id="@+id/seekBarG"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginLeft="16dp"
            android:layout_marginTop="24dp"
            android:layout_marginEnd="16dp"
            android:layout_marginRight="16dp"
            android:max="100"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/seekBarR" />
    
        <SeekBar
            android:id="@+id/seekBarB"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginLeft="16dp"
            android:layout_marginTop="24dp"
            android:layout_marginEnd="16dp"
            android:layout_marginRight="16dp"
            android:max="100"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/seekBarG" />
    
        <TextView
            android:id="@+id/textViewR"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginLeft="16dp"
            android:layout_marginTop="24dp"
            app:layout_constraintEnd_toStartOf="@+id/textViewG"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintHorizontal_weight="1"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/seekBarB" />
    
        <TextView
            android:id="@+id/textViewG"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginLeft="16dp"
            app:layout_constraintBaseline_toBaselineOf="@+id/textViewR"
            app:layout_constraintEnd_toStartOf="@+id/textViewB"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintHorizontal_weight="1"
            app:layout_constraintStart_toEndOf="@+id/textViewR" />
    
        <TextView
            android:id="@+id/textViewB"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginLeft="16dp"
            android:layout_marginEnd="16dp"
            android:layout_marginRight="16dp"
            app:layout_constraintBaseline_toBaselineOf="@+id/textViewG"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintHorizontal_weight="1"
            app:layout_constraintStart_toEndOf="@+id/textViewG" />
    </androidx.constraintlayout.widget.ConstraintLayout>
    
  3. 修改 MainActivity

    package com.mk;
    
    import androidx.annotation.RequiresApi;
    import androidx.appcompat.app.AppCompatActivity;
    
    import android.os.Build;
    import android.os.Bundle;
    import android.util.Log;
    import android.view.View;
    import android.widget.SeekBar;
    import android.widget.TextView;
    import android.widget.Toast;
    
    public class MainActivity extends AppCompatActivity {
          
          
    
        private SeekBar seekBarR;
        private SeekBar seekBarG;
        private SeekBar seekBarB;
        private TextView textViewR;
        private TextView textViewG;
        private TextView textViewB;
        
        @Override
        protected void onCreate(Bundle savedInstanceState) {
          
          
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            initView();
        }
    
        private void initView() {
          
          
            seekBarR = (SeekBar) findViewById(R.id.seekBarR);
            seekBarG = (SeekBar) findViewById(R.id.seekBarG);
            seekBarB = (SeekBar) findViewById(R.id.seekBarB);
    
            textViewR = (TextView) findViewById(R.id.textViewR);
            textViewG = (TextView) findViewById(R.id.textViewG);
            textViewB = (TextView) findViewById(R.id.textViewB);
    
            // 设置初始值
            seekBarR.setProgress(10);
            seekBarG.setProgress(20);
            seekBarB.setProgress(30);
    
            textViewR.setText("R: " + seekBarR.getProgress());
            textViewG.setText("G: " + seekBarG.getProgress());
            textViewB.setText("B: " + seekBarB.getProgress());
    
            seekBarR.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
          
          
                @Override
                public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
          
          
                    textViewR.setText("R: " + progress);
                }
    
                @Override
                public void onStartTrackingTouch(SeekBar seekBar) {
          
          }
    
                @Override
                public void onStopTrackingTouch(SeekBar seekBar) {
          
          }
            });
    
            seekBarG.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
          
          
                @Override
                public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
          
          
                    textViewG.setText("G: " + progress);
                }
    
                @Override
                public void onStartTrackingTouch(SeekBar seekBar) {
          
          }
    
                @Override
                public void onStopTrackingTouch(SeekBar seekBar) {
          
          }
            });
    
            seekBarB.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
          
          
                @Override
                public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
          
          
                    textViewB.setText("B: " + progress);
                }
    
                @Override
                public void onStartTrackingTouch(SeekBar seekBar) {
          
          }
    
                @Override
                public void onStopTrackingTouch(SeekBar seekBar) {
          
          }
            });
        }
    }
    
  4. 运行效果:

    在这里插入图片描述

自定义样式

  1. 新建 src\main\res\drawable-v24\seek_bar_style_r.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"
            android:gravity="center_vertical|fill_horizontal">
            <shape android:shape="rectangle">
                <corners android:radius="5dp"/>
                <size android:height="2dp"/>
                <solid android:color="#CCCCCC"/>
            </shape>
        </item>
    
        <item
            android:id="@android:id/progress"
            android:gravity="center_vertical|fill_horizontal">
            <clip>
                <shape android:shape="rectangle">
                    <corners android:radius="5dp"/>
                    <size android:height="2dp"/>
                    <solid android:color="#FFFF0000"/>
                </shape>
            </clip>
        </item>
    </layer-list>
    
  2. seek_bar_style_r.xml 文件所在目录下,新建两个类似的文件 seek_bar_style_g.xmlseek_bar_style_b.xml 文件,它们与 seek_bar_style_r.xml 文件的区别仅在于 progress 颜色不同,分别为 #FF00FF00#FF0000FF

  3. 修改 src\main\res\layout\activity_main.xml 文件,分别为 3 个 SeekBar 元素设置 progressDrawable 属性:

    <?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/seekBarR"
            ... 其他,略
            android:progressDrawable="@drawable/seek_bar_style_r" />
    
        <SeekBar
            android:id="@+id/seekBarG"
            ... 其他,略
            android:progressDrawable="@drawable/seek_bar_style_g" />
    
        <SeekBar
            android:id="@+id/seekBarB"
            ... 其他,略
            android:progressDrawable="@drawable/seek_bar_style_b" />
    
        ... 其他,略
    </androidx.constraintlayout.widget.ConstraintLayout>
    
  4. 运行效果:

    在这里插入图片描述

参考

SeekBar(拖动条)

Android修改seekbar颜色(Material Design)

猜你喜欢

转载自blog.csdn.net/qq_29761395/article/details/113532417
今日推荐