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

前言

在之前的文章中，已经讲到了自定义温度显示控件一步步进化的历程，大家有兴趣的话可参考以下文章：
自定义温度显示控件(一)
自定义温度显示控件(二)
自定义温度显示控件(三)
今天讲温度实现效果的最终篇。
涉及到以下内容：

1. 实现涉及主体类
2. MultiRollNumber在MainActivity中使用
3. 效果图和项目结构图
4. MultiRollNumber相关源码

效果图

效果图.gif

一. 实现涉及主体类

自定义温度控件的实现依然依靠两个类：RollNumber和MultiRollNumber。其中涉及到的资源类attrs.xml代码如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>

  
    <declare-styleable name="RollNumber">
        <attr name="TempInt" format="dimension"/>
        <attr name="TempFloat" format="dimension"/>
        <attr name="TempDegreeStoken" format="dimension"/>
        <attr name="TempDegreeRadius" format="dimension"/>
        <attr name="TempDegreeSpace" format="dimension"/>
        <attr name="TempPointRadius" format="dimension"/>
        <attr name="TempWordOffsetY" format="dimension"/>
    </declare-styleable>


    <declare-styleable name="MultiScrollNumber">
        <attr name="primary_number" format="integer"/>
        <attr name="target_number" format="integer"/>
        <attr name="number_size" format="integer"/>
    </declare-styleable>

</resources>

dimens.xml代码如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>
   
    <dimen name="temp_integer_size">30dp</dimen>
    <dimen name="temp_degree_stoken_size">1.5dp</dimen>
    <dimen name="temp_degree_radius_size">2dp</dimen>
    <dimen name="temp_degree_space_size">1.5dp</dimen>
    <dimen name="temp_point_radius_size">1.5dp</dimen>
    <dimen name="temp_word_offset_y">5dp</dimen>

</resources>

strings.xml代码如下：

<resources>

    <string name="temp_hi">Hi</string>
    <string name="temp_lo">Lo</string>
    <string name="temp_off">OFF</string>

</resources>

二. 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>

MultiRollNumber在MainActivity中使用示例如下：

package com.pain.testdemo;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;

import com.pain.testdemo.function.MultiRollNumber;
import com.pain.testdemo.util.MyUtil;

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源码如下：