美文网首页
自定义温度显示控件(三)

自定义温度显示控件(三)

作者: 奔跑的佩恩 | 来源:发表于2022-10-14 18:06 被阅读0次

前言

在上篇文章中,我们对数字滚动效果的实现做了简单逻辑分析,大家有兴趣的话,可参考以下文章:
自定义温度显示控件(一)
自定义温度显示控件(二)
鉴于自定义温度显示控件(二)文章的讲解,但是我们需要实现的是点击控按钮后,温度数值从左到右或者是从右到左的滚动效果,因此自定义温度显示控件(二)只能作为实现的借鉴,我们需要在它的基础之上,做进一步改造。

今天涉及内容有:

  1. 需求差异及改造点
  2. MultiRollNumber几个常用方法
  3. MultiRollNumberMainActivity中使用
  4. 效果图和项目结构图
  5. MultiRollNumber相关源码

效果图如下:


效果图.gif

一. 需求差异及改造点

这里数字滚动控件依然是由两个自定义控件MultiRollNumberRollNumber来共同实现。对照我们要实现的效果,RollNumber需要处理显示数字的范围问题。而MultiRollNumber需要改造的是数字滚动方向的问题,由于滚动方向变化了,效果也变了,MultiRollNumber还需要优化下添加数字内容控件到LinearLayout的处理逻辑。

二. MultiRollNumber 几个常用方法

这里对MultiRollNumber控件做了些处理与优化,其可提供外部使用的方法有:

    /**设置阈值**/
    public void setRange(float minValue,float maxValue)

    /**获取最大范围值**/
    public float getMaxValue()

    /**获取最小范围值**/
    public float getMinValue()

    /**设置初始值**/
    public void initNumber(float number)

    /**设置从lastNumber滚动到number**/
    public void setTargetNumber(float lastNumber,float number) 

    /**获取滚动结束的值**/
    public float getTargetNumber()

    /**设置插值器**/
    public void setInterpolator(Interpolator interpolator)

像设置字体大小,颜色,粗细,字体样式之类的基本属性,这里就不实现了,大家可以基于此类设置属性扩展出来。

三. MultiRollNumber 在 MainActivity 中使用

先给出MainActivity对应布局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">

    <TextView
        android:id="@+id/tv_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="@dimen/dp_70"/>

    <Button
        android:id="@+id/btn_test"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="测试1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tv_text"
        android:layout_marginTop="@dimen/dp_20"/>

    <Button
        android:id="@+id/btn_test2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="测试n"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btn_test"
        android:layout_marginTop="@dimen/dp_20"/>


    <com.pain.testdemo.function.MultiRollNumber
        android:id="@+id/multi_scroll_number"
        android:layout_width="@dimen/dp_120"
        android:layout_height="@dimen/dp_40"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btn_test2"
        android:layout_marginTop="@dimen/dp_20"/>


</androidx.constraintlayout.widget.ConstraintLayout>

下面给出MultiRollNumberMainActivity中使用代码:

public class MainActivity extends AppCompatActivity implements View.OnClickListener{

    private TextView mTv;
    private Button mBtn;
    private Button mBtn2;
    private MultiRollNumber multiRollNumber;
    private float mLastNumber;

    @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);
        multiRollNumber = findViewById(R.id.multi_scroll_number);
    }

    private void initData() {
        multiRollNumber.setRange(15.5f,28.5f);
        multiRollNumber.initNumber(17f);
    }

    private void setListener() {
        mBtn.setOnClickListener(this);
        mBtn2.setOnClickListener(this);
    }


    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.btn_test:
                MyUtil.i("=======test======");

                //获取滚动结束的值
                mLastNumber=multiRollNumber.getTargetNumber();
                //设置从lastNumber滚动到number
                multiRollNumber.setTargetNumber(mLastNumber,16f);
                mLastNumber=multiRollNumber.getTargetNumber();
                MyUtil.toast("最后值为:"+mLastNumber,MainActivity.this);
                break;
            case R.id.btn_test2:
                MyUtil.i("=======test2=====");
                //获取滚动结束的值
                mLastNumber=multiRollNumber.getTargetNumber();
                multiRollNumber.setTargetNumber(mLastNumber,20.5f);
                mLastNumber=multiRollNumber.getTargetNumber();
                MyUtil.toast("滚动后值为:"+mLastNumber,MainActivity.this);
                break;
            default:
                break;
        }

    }

}

四. 效果图和项目结构图

项目结构图.png 效果图.gif

五. MultiRollNumber 相关源码

RollNumber源码如下:

相关文章

  • 自定义温度显示控件(三)

    前言 在上篇文章中,我们对数字滚动效果的实现做了简单逻辑分析,大家有兴趣的话,可参考以下文章:自定义温度显示控件(...

  • 自定义温度显示控件(二)

    前言 在上一节中,我们讲到了自定义温度控件的知识,大家有兴趣的话,可参考以下文章自定义温度显示控件(一)[http...

  • 自定义温度显示控件(一)

    前言 在Android开发过程中,我们有时会涉及到自定义显示控件,那么今天就让我们来学习一个自定义温度显示控件吧。...

  • 自定义温度显示控件(四) — 终结篇

    前言 在之前的文章中,已经讲到了自定义温度显示控件一步步进化的历程,大家有兴趣的话可参考以下文章:自定义温度显示控...

  • 自定义控件——绘制基础(一)

    什么是自定义控件 自定义控件有三个点,布局绘制和触摸反馈。接下来的章节我们先说绘制,绘制就是在控件上显示需要我们用...

  • XCArcMenuView 控件的使用

    本文涉及内容如下: XCArcMenuView 控件显示截图展示; XCArcMenuView 控件源码+自定义属...

  • Android源码社区高质量的开发类库(三)

    1.SuperCalendarandroid 自定义日历控件 支持左右无限滑动 周月切换 标记日期显示 自定义显示...

  • 组合控件2——海贼王选项菜单

    之前的自定义控件——初识自定义控件,我们了解到了自定义控件分为三种,自制控件,组合控件,拓展控件。而我们在自制控件...

  • 组合控件1—— 设置框

    之前的自定义控件——初识自定义控件,我们了解到了自定义控件分为三种,自制控件,组合控件,拓展控件。 而我们在自制控...

  • Android中的自定义控件

    Android中的自定义控件大致可以分成三类:自定义组合控件、继承原生控件的自定义控件、继承View自己实现绘制的...

网友评论

      本文标题:自定义温度显示控件(三)

      本文链接:https://www.haomeiwen.com/subject/pbifzrtx.html