Android实现跟随滑块移动显示的seekBar

概述

详细讲述跟随滑块移动显示的seekBar效果的自定义实现过程

详细

前言

在Android开发过程中，我们有时会使用到自定义Seekbar,如在滑动滑块时，文字随滑块移动之类的效果，今天就来讲讲跟随滑块移动显示的seekBar的实现吧。

今天涉及内容：

1. 自定义随滑块移动文字效果的seekbar的难点
2. TextSeekBar在Activity中的使用
3. 需要注意的点
4. 效果图和项目结构图

效果图如下：

一. 自定义随滑块移动文字效果的seekbar的难点

这里我们继承AppCompatSeekBar来实现随滑块移动显示的seekBar，该类叫TextSeekBar,实现过程中有两个难点：

• 滑块在移动到TextSeekBar的最左边和最右边的时候，是否能显示完整
• 滑块滑动时，滑块上方的文字是否能正常显示在滑块上方

针对以上问题，在初始化TextSeekBar控件时，我们要设置一个setPadding,留出左右两边滑块的显示余量。
滑块滑动时，要根据进度实时刷新文字在x方向的坐标

二. TextSeekBar 在 Activity 中的使用

先给出Activity对应布局文件activity_main.xml代码：

 

下面看看TextSeekBar 在Activity 中的使用:

    package com.pain.testdemo;
    import androidx.annotation.RequiresApi;
    import androidx.appcompat.app.AppCompatActivity;
    import android.os.Build;
    import android.os.Bundle;
    import android.view.View;
    import android.widget.Button;
    import android.widget.SeekBar;
    import android.widget.TextView;
    import com.pain.testdemo.function.TextSeekBar;
    import com.pain.testdemo.util.MyUtil;
    @RequiresApi(api = Build.VERSION_CODES.O)
    public class MainActivity extends AppCompatActivity implements View.OnClickListener {
        private TextView mTv;
        private Button mBtn;
        private Button mBtn2;
        private TextSeekBar mTextSeekBar;
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            MyUtil.i("=======onCreate======");
            initView();
            initData();
            setListener();
        }
        private void initView() {
            mTv = findViewById(R.id.tv_text);
            mBtn = findViewById(R.id.btn_test);
            mBtn2 = findViewById(R.id.btn_test2);
            mTextSeekBar = findViewById(R.id.text_seek_bar);
        }
        private void initData() {
            mTextSeekBar.setMax(100);
            mTextSeekBar.setMin(0);
        }
        private void setListener() {
            mBtn.setOnClickListener(this);
            mBtn2.setOnClickListener(this);
            mTextSeekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
                @Override
                public void onProgressChanged(SeekBar seekBar, int i, boolean b) {
                    mTextSeekBar.updateView(i);
                }
                @Override
                public void onStartTrackingTouch(SeekBar seekBar) {
                }
                @Override
                public void onStopTrackingTouch(SeekBar seekBar) {
                }
            });
        }
        @Override
        public void onClick(View v) {
            switch (v.getId()) {
                case R.id.btn_test:
                    MyUtil.i("=======test======");
                    break;
                case R.id.btn_test2:
                    MyUtil.i("=======test2=====");
                    break;
                default:
                    break;
            }
        }
    }

三. 需要注意的点

需要注意的是，当我们在给TextSeekBar设置纯色背景的时候，可以用android:background属性结合xml的shape来设置背景，但是当TextSeekBar的背景为图片时，我们再按这种方式设置就会导致图片显示变形的问题，于是我们可以利用布局来解决这个问题，也就是上文中activity_main.xml写的那样:

用FrameLayout包裹，ImageView打底，然后利用ImageView设置图片的属性来调节背景图片的显示。

四. 效果图和项目结构图

ok，今天关于自定义seekBar的知识就介绍到这里了，谢谢大家。