安卓开发自定义时间日期显示组件

安卓开发自定义时间日期显示组件

问题背景

实现时间和日期显示,左对齐和对齐两种效果,如下图所示:

问题分析

自定义view实现一般思路:

(1)自定义一个View

(2)编写values/attrs.xml,在其中编写styleable和item等标签元素

(3)在布局文件中View使用自定义的属性

(4)在View的构造方法中通过TypedArray获取

问题解决

话不多说,直接上代码

(1)编写values/attrs.xml,组件定义left属性

复制代码
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="TimeClockView">
        <attr name="left" format="boolean"/>
    </declare-styleable>
</resources>

(2)自定义View,代码如下:

复制代码
public class TimeClockView extends LinearLayout {
    boolean isLeft = true;
    public TimeClockView(Context context) {
        super(context);
        initView(context);
    }

    private void initView(Context context) {
        if (isLeft) {
            LayoutInflater.from(context).inflate(R.layout.layout_time_date,this);
        } else {
            LayoutInflater.from(context).inflate(R.layout.layout_time_date1,this);
        }
    }

    public TimeClockView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initTypeValue(context,attrs);
        initView(context);
    }

    public void initTypeValue(Context context ,AttributeSet attrs){
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.TimeClockView);
        isLeft = a.getBoolean(R.styleable.TimeClockView_left, true);
        a.recycle();
    }
}

(3)自定义view对应的布局文件如下:

左对齐:

复制代码
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <TextClock
        android:id="@+id/time"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:format12Hour="hh:mm"
        android:format24Hour="HH:mm"
        android:textSize="40px" />

    <TextClock
        android:id="@+id/date"
        android:layout_below="@id/time"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:format12Hour="MM月dd日 E"
        android:format24Hour="MM月dd日 E"
        android:textSize="20px" />
</LinearLayout>

右对齐:

复制代码
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:gravity="end"
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <TextClock
        android:id="@+id/time"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:format12Hour="hh:mm"
        android:format24Hour="HH:mm"
        android:textSize="40px" />

    <TextClock
        android:id="@+id/date"
        android:layout_below="@id/time"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:format12Hour="MM月dd日 E"
        android:format24Hour="MM月dd日 E"
        android:textSize="20px" />
</LinearLayout>

(4)在页面布局中,使用自定义的view

复制代码
<?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">

    <com.baorant.mytestnew.view.TimeClockView
        android:layout_marginLeft="90px"
        android:layout_marginTop="70px"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <com.baorant.mytestnew.view.TimeClockView
        android:layout_marginRight="90px"
        android:layout_marginTop="70px"
        app:left="false"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>


</androidx.constraintlayout.widget.ConstraintLayout>
相关推荐
tmacfrank1 小时前
Android 网络全栈攻略(四)—— TCPIP 协议族与 HTTPS 协议
android·网络·https
fundroid2 小时前
Kotlin 协程:Channel 与 Flow 深度对比及 Channel 使用指南
android·kotlin·协程
草字2 小时前
cocos 打包安卓
android
DeBuggggggg3 小时前
centos 7.6安装mysql8
android
浩浩测试一下4 小时前
渗透信息收集- Web应用漏洞与指纹信息收集以及情报收集
android·前端·安全·web安全·网络安全·安全架构
移动开发者1号5 小时前
深入理解原子类与CAS无锁编程:原理、实战与优化
android·kotlin
陈卓4105 小时前
MySQL-主从复制&分库分表
android·mysql·adb
移动开发者1号5 小时前
深入理解 ThreadLocal:原理、实战与优化指南
android·kotlin
zhangphil5 小时前
Android PNG/JPG图ARGB_8888/RGB_565‌解码形成Bitmap在物理内存占用大小的简单计算
android
厦门德仔6 小时前
【WPF】WPF(样式)
android·java·wpf