Kevin Learn QMUI--＞ QMUISlider

Posted 2022-03-30 Kevin_小飞象

简介

滑块（QMUISlider）允许用户从一个有限的范围内选择一个数值。当沿着轨道移动滑块控件时，将显示一个表示当前值的提示框，用户可通过设置它的属性来自定义滑块。

开始使用

qmui

1. 引入库
   请确保配置了 JCenter 仓库源，然后直接引用:
   implementation "com.qmuiteam:qmui:2.0.0-alpha10"
   至此，QMUI 已被引入项目中。

2. 配置主题
   把项目的 theme 的 parent 指向 QMUI.Compat，至此，QMUI 可以正常工作。
   <style name="Theme.QMUIDemo" parent="QMUI.Compat.NoActionBar"></style>

效果图

核心代码

1. 布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".ui.SliderActivity">

    <com.qmuiteam.qmui.widget.QMUITopBar
        android:id="@+id/topbar"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        app:qmui_topbar_title_bold="true"
        app:qmui_topbar_title_color="@color/white"
        android:background="@color/app_color_theme_8"/>

    <com.qmuiteam.qmui.widget.QMUISlider
        android:id="@+id/slider"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="20dp"/>


    <com.qmuiteam.qmui.widget.QMUISeekBar
        android:id="@+id/seekBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="40dp"/>

</LinearLayout>

2. 逻辑代码

public class SliderActivity extends BaseActivity implements QMUISlider.Callback 
    @BindView(R.id.topbar)
    QMUITopBar mTopBar;

    @BindView(R.id.slider)
    QMUISlider mSlider;

    @BindView(R.id.seekBar)
    QMUISeekBar mSeekBar;

    @Override
    protected int getLayoutId() 
        return R.layout.activity_slider;
    

    @Override
    protected void initView() 
        mTopBar.setTitle("QMUISliderBar");
        mTopBar.addLeftBackImageButton().setOnClickListener(new View.OnClickListener() 
            @Override
            public void onClick(View v) 
                finish();
            
        );

        mSlider.setCallback(this);
        mSeekBar.setCallback(this);

    

    @Override
    public void onProgressChange(QMUISlider slider, int progress, int tickCount, boolean fromUser) 
        Toast.makeText(this,"progress = " + progress + "; fromUser = " + fromUser,Toast.LENGTH_SHORT).show();
    

    @Override
    public void onTouchDown(QMUISlider slider, int progress, int tickCount, boolean hitThumb) 

    

    @Override
    public void onTouchUp(QMUISlider slider, int progress, int tickCount) 

    

    @Override
    public void onStartMoving(QMUISlider slider, int progress, int tickCount) 

    

    @Override
    public void onStopMoving(QMUISlider slider, int progress, int tickCount)