关于Seekbar的样式修改——兼谈如何创建一个drawable的xml文件

关于Seekbar的样式修改——兼谈如何创建一个drawable的xml文件

前言

先说一个超级简单的修改Seekbar的方法，不用drawable的xml，直接在main_activity里面就可以实现的
xml代码

<SeekBar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:progressBackgroundTint="@color/colorPrimary"
        android:progressTint="@color/colorPrimaryDark"
        android:secondaryProgressTint="@color/colorAccent"
        android:thumb="@mipmap/seek"
        android:id="@+id/seekBar"/>

其中：

• progressBackgroundTint指的是默认的进度条状态，progressTint指的是一级进度条（已完成部分），secondaryProgressTint指的是二级进度条（已缓冲部分）
• 这个的优点是特别方便，直接就修改了，缺点就是，不可以修改进度条的宽

进入正文——

逻辑链：

• seekbar在activity_main.xml
• drawable文件的创立
• seekbarProgress的层级关系与drawable文件编写
• seebarProgress的clipDrawable的转化与整合
• Java文件

1.seekbar 在acticity_main.xml中

xml 代码

• 注：在这里使用的是RelativeLayout

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout 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:layout_alignParentLeft="true"
            android:layout_centerInParent="true"
            android:background="@android:color/transparent"
            android:id="@+id/seekBar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:progressDrawable="@drawable/progress_drawable"
            android:thumb="@mipmap/seek" />
    	<Button
            android:onClick="startTest"
            android:layout_alignParentBottom="true"
            android:text="Start Test"
            android:textAllCaps="false"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
   </RelativeLayout>
  

• 关于Seekbar在这里的使用的说明

  • thumb指的是可移动的那个滑块，我的图片是在ppt上直接下载下来的，比较大，所以存在了mipmap里面而不是drawable里面
  • progressDrawable指的是进度条、一级进度条和二级进度条所有的样式，也是第二部要创立修改的Drawable的xml文件

2.drawable文件的创立

https://blog.csdn.net/TrineaShao/article/details/72823073
跟着这个网页中第二种创建drawable的xml的方法来就行

3.seekbarProgress的层级关系与编写

首先是关于seekbarProgress的层级关系的逻辑：

• 遵循background — SecondProgress — Progress的顺序与逻辑，也就是在写代码的时候最好也按照这个顺序来

3.1 backgound

backgound.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="200dp"
    android:height="3dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
    <path
        android:fillColor="#FF000000"
        android:pathData="M0,13h24v-2L0,11v2z"/>
</vector>

3.2 second

second_progress.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="200dp"
    android:height="3dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
    <path
        android:fillColor="#FF00FF00"
        android:pathData="M0,13h24v-2L0,11v2z"/>
</vector>

3.3 progress

progress.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="200dp"
    android:height="3dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
    <path
        android:fillColor="#FFFF0000"
        android:pathData="M0,13h24v-2L0,11v2z"/>
</vector>

4.seekbarProgress的clipDrawable的转化与整合

但是写完了Drawable之后，还需要通过clipDrawable 才能彻底地转化

4.1secondProgress的转换

second_progress_drawable.xml

<?xml version="1.0" encoding="utf-8"?>
<clip xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/second_progress">
</clip>

4.2 Progress的转换

main_progress_drawable.xml

<?xml version="1.0" encoding="utf-8"?>
<clip xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/progress">

</clip>

4.3 progress的大整合

progress_drawable.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:drawable="@drawable/background" />
    <item
        android:id="@android:id/secondaryProgress"
        android:drawable="@drawable/second_progress_drawable" />
    <item
        android:id="@android:id/progress"
        android:drawable="@drawable/main_progress_drawable" />
</layer-list>

5.Java文件

package com.example.richeng;

import android.os.CountDownTimer;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.SeekBar;

public class MainActivity extends AppCompatActivity {

    private SeekBar mSeekBar;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mSeekBar = (SeekBar)findViewById(R.id.seekBar);
    }

    @Override
    protected void onResume() {
        super.onResume();

    }

    public void startTest(View view){
        mSeekBar.setProgress(0);
        mSeekBar.setSecondaryProgress(0);
        new CountDownTimer(10000,100){
            @Override
            public void onTick(long millisUntilFinished) {
                android.util.Log.e("zyq","time = "+millisUntilFinished);
                mSeekBar.setSecondaryProgress(100-(int) (millisUntilFinished/100));
            }

            @Override
            public void onFinish() {
                mSeekBar.setSecondaryProgress(100);
                new CountDownTimer(10000,100){
                    @Override
                    public void onTick(long millisUntilFinished) {
                        mSeekBar.setProgress(100-(int) (millisUntilFinished/100));
                    }

                    @Override
                    public void onFinish() {
                        mSeekBar.setProgress(100);
                    }
                }.start();
            }
        }.start();
    }
    }