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

立即下载用AI写一个

发布时间：2023-04-04

2人 | 浏览：3401次 | 收藏 |

技术：Android

运行环境：androidstudio

概述

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

详细

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

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

效果图如下：
![效果图.gif](/contentImages/image/20230402/EgIcbcRyMJ5tr9S5IcD.gif)

#### 一. 自定义随滑块移动文字效果的`seekbar`的难点
这里我们继承`AppCompatSeekBar`来实现随滑块移动显示的`seekBar`，该类叫`TextSeekBar`,实现过程中有两个难点：
- 滑块在移动到`TextSeekBar`的最左边和最右边的时候，是否能显示完整
- 滑块滑动时，滑块上方的文字是否能正常显示在滑块上方

针对以上问题，在初始化`TextSeekBar`控件时，我们要设置一个`setPadding`,留出左右两边滑块的显示余量。
滑块滑动时，要根据进度实时刷新文字在`x`方向的坐标
#### 二.  TextSeekBar 在 Activity 中的使用
先给出`Activity`对应布局文件`activity_main.xml`代码：
```
<?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">

<com.pain.testdemo.function.TextSeekBar
            android:id="@+id/text_seek_bar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:maxHeight="16dp"
            android:splitTrack="false"
            android:thumb="@drawable/temp_seekbar"
            app:offset_x="-2dp"
            app:offset_y="16dp"
            app:stroke_width="1.5dp"
            app:text_color="@color/red"
            app:text_size="30sp"
            app:thumb_width="60dp" />
    </FrameLayout>

</androidx.constraintlayout.widget.ConstraintLayout>
```
下面看看`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
       //其他代码省略
       //......
       >

<com.pain.testdemo.function.TextSeekBar
          //其他代码省略
          //......
            />
    </FrameLayout>
```
用`FrameLayout`包裹，`ImageView`打底，然后利用`ImageView`设置图片的属性来调节背景图片的显示。
#### 四. 效果图和项目结构图
![](/contentImages/image/20230402/vzgpUecEsqIZ0vAl01m.png)

![效果图.gif](/contentImages/image/20230402/EgIcbcRyMJ5tr9S5IcD.gif)

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

本实例支付的费用只是购买源码的费用，如有疑问欢迎在文末留言交流，如需作者在线代码指导、定制等，在作者开启付费服务后，可以点击“购买服务”进行实时联系，请知悉，谢谢

感谢

手机上随时阅读、收藏该文章？请扫下方二维码

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

概述

详细

相似例子推荐

评论

作者

评分详细

作者例子