前言
在Android开发过程中，我们有时会涉及到自定义显示控件，那么今天就让我们来学习一个自定义温度显示控件吧。
今天涉及内容：
- 为什么一个温度显示控件要自定义
- 自定义温度显示控件
TempView的几个方法 -
TempView在MainActivity中使用 - 效果图和项目结构图
-
TempView源码
效果图如下：
效果图.gif
一. 为什么一个温度显示控件要自定义
首先需要说明的是，这个自定义温度显示控件需要显示的内容只有一个温度数值和温度单位，类似：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;
}
}
}
四. 效果图和项目结构图
效果图.gif
项目结构图.png
