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

概述

自定义一个数值，小数点，温度符号均可灵活自定义的温度显示控件

详细

前言

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

今天涉及内容：

1. 为什么一个温度显示控件要自定义
2. 自定义温度显示控件TempView的几个方法
3. TempView在MainActivity中使用
4. 效果图和项目结构图

效果图如下：

一. 为什么一个温度显示控件要自定义

首先需要说明的是，这个自定义温度显示控件需要显示的内容只有一个温度数值和温度单位，类似：18.5°。很多人会疑问这不很简单吗？一个TextView表示就可以了，温度单位也可以用一个特殊符号表示，还需要自定义温度显示控件吗？
在实际开发中，特别是UI显示一块，可能温度单位显示的位置需要调整，或者温度值的整数部分，小数点，小数部分的大小，颜色，是否加粗等都需要给一个特定值，所以才出现了这篇文章，用于自定义定制显示温度数据的每一部分信息。

二. 自定义温度显示控件TempView的几个方法

这里我自定义了一个温度显示控件TempView,其继承自View,如下：

    public class TempView extends View {
         //其他代码省略
         //......
    }

 其主要用到的方法有两个，均是用于更新数据显示：

        /**刷新温度值**/
        public void updateView(String temp, String tempSub)
        /**刷新温度值**/
        public void updateView(float temp)

三. TempView在MainActivity中使用

在MainActivity对应布局activity_main.xml中引用 TempView控件:

    <?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.TempView
            android:id="@+id/temp_view"
            android:layout_width="@dimen/dp_100"
            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"
            app:TempInt="@dimen/dp_30"
            app:TempDegreeStoken="1.5dp"
            app:TempDegreeRadius="2dp"
            app:TempDegreeSpace="1.5dp"
            app:TempPointRadius="1.5dp" />
    </androidx.constraintlayout.widget.ConstraintLayout>

在MainActivity中使用TempView控件示例如下：

    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.TempView;
    import com.pain.testdemo.util.MyUtil;
    public class MainActivity extends AppCompatActivity implements View.OnClickListener{
        private TextView mTv;
        private Button mBtn;
        private Button mBtn2;
        private TempView mTempView;
        @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);
            mTempView = findViewById(R.id.temp_view);
        }
        private void initData() {
        }
        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======");
                    //刷新温度
                    mTempView.updateView(18.5f);
                    break;
                case R.id.btn_test2:
                    MyUtil.i("=======test2=====");
                    //刷新温度
                    mTempView.updateView("27","");
                    break;
                default:
                    break;
            }
        }
    }

四. 效果图和项目结构图