SeekBar Customize style Detailed explanation

 

SeekBar brief introduction

SeekBar yes ProgressBar An extension of , Added a draggable slider .

When we use the progress bar , You can use the default progress bar ;

You can also customize the pictures of the progress bar and slider .

The user can touch his thumb and drag left or right to set the current progress level , Or use the arrow keys .

It is not recommended to place focusable widgets in SeekBar To the left or right of .

 

Custom effects ：

 

 

<SeekBar
            android:id="@+id/sb_screen_bri"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:progress="66"
            android:progressDrawable="@drawable/poc_seek_bar_drawable"
            android:splitTrack="false"
            android:thumbTint="@android:color/transparent" />

 

<?xml version="1.0" encoding="utf-8"?><!-- Copyright (C) 2018 The Android Open Source Project

     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.
     You may obtain a copy of the License at

          http://www.apache.org/licenses/LICENSE-2.0

     Unless required by applicable law or agreed to in writing, software
     distributed under the License is distributed on an "AS IS" BASIS,
     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
     See the License for the specific language governing permissions and
     limitations under the License.
-->
<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">
            <size android:height="10dp" />
            <solid android:color="#282b31" />
            <corners android:radius="10dp" />
        </shape>
    </item>
    <item
        android:id="@android:id/progress"
        android:gravity="center_vertical|fill_horizontal">
        <scale android:scaleWidth="100%">
            <shape android:shape="rectangle">
                <size android:height="10dp" />
                <!--<solid android:color="#707d93" />-->
                <gradient
                    android:angle="0"
                    android:endColor="#aab8d4"
                    android:startColor="#707d93" />
                <corners android:radius="10dp" />
            </shape>
        </scale>
    </item>
</layer-list>

 

  structural analysis ：

attribute ：

android:maxHeight   //  Background height 
android:progressDrawable  //  Progress bar background 
android:thumb  //  slider 
android:splitTrack //  hua block   Whether to cut  seekbar  background , Default true, Will see thumb The surrounding area is cut 

 

seekbar Expand ：

1、 The slider cannot be on the far left of the progress bar

Solution ： Set offset

android:thumbOffset="5dp"

 

2、 The slider cannot be centered in the progress bar

Solution ： Set height adaptation , Will automatically fit the slider height

android:layout_height="wrap_content"

Then use the following properties to set the height

android:maxHeight="30dip"
android:minHeight="30dip" 

3、 How to write on the slider

Solution ： rewrite ondraw Method

protected synchronized void onDraw(Canvas canvas) {  
        super.onDraw(canvas);  
        Rect rect = new Rect();  
        this.mPaint.getTextBounds(this.text, 0, this.text.length(), rect);  
        int x = (getWidth() / 2) - rect.centerX();  
        int y = (getHeight() / 2) - rect.centerY();  
        canvas.drawText(this.text, x, y, this.mPaint);  
    }   

  
stay seekbar Cover it with a TextView
 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="16dp">

    <SeekBar
        android:id="@+id/sb"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="100"
        android:progress="0"
        android:progressDrawable="@drawable/seekbar_bg"
        android:thumb="@drawable/thumb"
        android:thumbOffset="0dp" />

    <TextView
        android:id="@+id/tv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:gravity="center"
        android:text=" Please press and hold the slider , Drag to the far right "
        android:textColor="#888888"
        android:textSize="14dp" />
</RelativeLayout>

 
4、seekbar in thumb The opacity effect

Problem description ：
stay Android5.0 The above will appear thumb There is a circle of unknown white things around , Occlusion to parent layout

Solution ：
Set up splitTrack The attribute is false That's all right.

android:splitTrack="false"

5、seekbar There will be a certain margin around the distance

Solution ：
Set up seekbar Of paddingleft And paddingright by 0dp

 android:paddingStart="0dp"
 android:paddingEnd="0dp"  

 

6、 prohibit seekbar Click jump progress , Just drag and drop

Solutions ：

Save an old location progress——oldsign, The default is 0, The user clicks seekbar In the rear , Record the user clicks progress

By judging the currently clicked progress whether < (oldsign+ A certain value ),

If yes, you can drag , If not, set seekbar Location progress by 0, So as to achieve the immobility effect .

 

Solution 1 ：

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.widget.SeekBar;
import android.widget.SeekBar.OnSeekBarChangeListener;

public class ValidateSeekBar extends SeekBar implements OnSeekBarChangeListener{

    private Context context;
    // Record old location 
    private int oldsign;
    // Write on the progress bar text My brush 
    private Paint mPaint; 

    private String textStr =" Please drag to the far right to complete the verification ";
    //text Content 
    private String text=textStr;
    //text font size 
    private int textSize =20;
    //text Color 
    private String textColor ="#607B8B";


    public interface ValidateSeekBarCallBack {
        void onProgressChangedCallBack(SeekBar seekbar, int progress, boolean arg2);
        void onStartTrackingTouchCallBack(SeekBar seekbar);
        void onStopTrackingTouchCallBack(SeekBar seekbar);
    }
    private ValidateSeekBarCallBack callback;

    public ValidateSeekBar(Context context) {
        super(context);
        this.context = context;
        init();
    }

    public ValidateSeekBar(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        this.context = context;
        init();
    }

    public ValidateSeekBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.context = context;
        init();
    }

    private void init() {
        this.mPaint = new Paint();  
        this.mPaint.setColor(Color.parseColor(textColor)); 
        this.mPaint.setTextSize(textSize);
        setMax(100);
        setOnSeekBarChangeListener(this);
    }

    @Override  
    protected synchronized void onDraw(Canvas canvas) {  
        super.onDraw(canvas);  

        Rect rect = new Rect();  
        this.mPaint.getTextBounds(this.text, 0, this.text.length(), rect);  
        int x = (getWidth() / 2) - rect.centerX();  
        int y = (getHeight() / 2) - rect.centerY();  
        canvas.drawText(this.text, x, y, this.mPaint);  
    }

    @Override
    public void onProgressChanged(SeekBar seekbar, int progress, boolean arg2) {
        // control textview It will flash bug

        if(progress<(seekbar.getMax()/9+1)&&progress!=0){
            text="";
        }

        // When the click position is greater than  （0 + 100/9+1） Can't be dragged   ,+ The larger the number after the number , The greater the range that allows the front to start dragging 
        // Why use “/”+ Certain value ? Because the maximum value of preventing progress bar may be 1000、500、300 etc. , So they all take the progress bar  9 Divided 1 +  A custom value 
        // Why not change the judgment to the current position greater than  0？  Because when you click the slider ,progerss Has been changed 
        if(progress>oldsign+(seekbar.getMax()/9+1)){

            seekbar.setProgress(oldsign);
            return;
        }
        seekbar.setProgress(progress);
        oldsign = progress;
        if(this.callback!=null){
            this.callback.onProgressChangedCallBack(seekbar,progress,arg2);
        }

    }

    @Override
    public void onStartTrackingTouch(SeekBar seekbar) {

        seekbar.setProgress(oldsign);
        if(this.callback!=null){
            this.callback.onStartTrackingTouchCallBack(seekbar);
        }
    }

    @Override
    public void onStopTrackingTouch(SeekBar seekbar) {

        if(seekbar.getProgress()!=seekbar.getMax()){
            oldsign=0;
            text =textStr;
            seekbar.setProgress(oldsign);
        }
        else{
            text =" To complete the verification ";
        }


        if(this.callback!=null){
                this.callback.onStopTrackingTouchCallBack(seekbar);

            }

    }  
    /**
     * seekbar Callback 
     * @param callback
     */
    public void setValidateSeekBarCallBack(ValidateSeekBarCallBack callback){
        this.callback =callback;
    }

    public void refreshText(){
        text=textStr;
    }

}

This plan , Because the drag range ahead is too difficult to control , If you just click the position near the slider button , The slider will move , It won't move until it's outside the drag range . If you click in the middle to slide ,progress And slide along

 

Solution 2 ： It can solve the problem of dragging from the middle

public class MainSeekbar extends android.support.v7.widget.AppCompatSeekBar implements SeekBar.OnSeekBarChangeListener {

    private static final int INDEX = 100;
    private static final int FINISH = 100;
    private boolean isMove = true;
    private OnSeekBarListener mOnSeekBarListener;

    public MainSeekbar(Context context) {
        super(context);
        setOnSeekBarChangeListener(this);
    }

    public MainSeekbar(Context context, AttributeSet attrs) {
        super(context, attrs);
        setOnSeekBarChangeListener(this);
    }

    public MainSeekbar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        setOnSeekBarChangeListener(this);
    }

    public void setOnSeekBarListener(OnSeekBarListener onSeekBarListener) {
        mOnSeekBarListener = onSeekBarListener;
    }

    @Override
    public boolean dispatchTouchEvent(MotionEvent event) {
        int x = (int) event.getX();
        if (event.getAction() == MotionEvent.ACTION_DOWN) {
            isMove = true;
            if (x - INDEX > 0) {
                isMove = false;
                return true;
            }
        }
        if (event.getAction() == MotionEvent.ACTION_MOVE) {
            if (!isMove) {
                return true;
            }
        }
        return super.dispatchTouchEvent(event);
    }

    @Override
    public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {

    }

    @Override
    public void onStartTrackingTouch(SeekBar seekBar) {

    }

    @Override
    public void onStopTrackingTouch(SeekBar seekBar) {
        if (seekBar.getProgress() != FINISH || !isMove) {
            seekBar.setProgress(0);
            mOnSeekBarListener.onStart();
        } else {
            mOnSeekBarListener.onFinish();
        }
    }


    protected interface OnSeekBarListener {
        void onFinish();
        void onStart();
    }
}

OVER ~! For reference only ～！