《Android编程权威指南》之使用布局与部件创建用户界面

好啦，本章将会优化 CriminalIntent 项目的布局，并将学习一个新的很好用的工具，叫 ConstraintLayout。加油！🆙

初识 ConstraintLayout 布局

它被叫做约束布局，是 Android Jetpack 中的一部分，它可使用扁平视图层次结构（无嵌套视图组）创建复杂的大型布局，而且它的功能支持直接通过布局编辑器的可视化工具进行拖拽使用。

官方介绍 ConstraintLayout 布局地址：
https://developer.android.google.cn/training/constraint-layout?hl=zh-cn

图形布局编辑器

接下来尝试使用 ConstraintLayout 布局吧，打开 item_crime.xml，右边切换到 Design，将 LinearLayout Convert to ConstraintLayout 看看。

demo

然后一些小图标操作，自行熟悉一下。

使用ConstraintLayout

可以拖拽，可以手写。可能会出现点问题，多试几次。

<?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"
    android:id="@+id/linearLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="16dp">

    <TextView
        android:id="@+id/tv_item_crime_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Crime Title"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv_item_crime_date"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:text="Crime Date"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tv_item_crime_title" />

    <ImageView
        android:id="@+id/img_item_crime_isSolved"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_solved"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

然后将手铐的小图标加上逻辑代码，具体实现参考结尾处 Github 地址喔。

深入学习布局属性

Android 每个控件都默认引用 Android 自带样式文件的 style 属性。该预定义样式来自应用的主题，主题也是一种样式资源。Android 自带了一些供应用使用的平台主题，应用默认主题是在 manifest 文件的 application 标签下引用的。

后面会有个章节专门讲主题，稍等等等...

深入学习：边距与内边距

边距（margin）：布局参数，决定了控件间的距离
内边距（padding）：非布局参数，它的设置是在告诉控件绘制自己本身时，要比所含内容大多少。

深入学习：ConstraintLayout 的发展动态

Guideline：它是只能用在ConstraintLayout布局里面的一个工具类。

官方介绍：https://developer.android.google.cn/reference/android/support/constraint/Guideline
网上博客学习：
https://biaomingzhong.github.io/2017/constraintlayout-basics-guidelines-3/
https://www.jowanxu.top/2018/01/15/Android-ConstraintLayout-Chains/
MotionLayout：是 ConstraintLayout 的一个扩展。有了它，向视图添加动画就容易多了。为了使用MotionLayout，你可以创建一个MotionScene文件，约定如何执行动画，以及在开始和结束布局里各个视图的映射关系是什么。你也可以设置keyframe作为动画过程中的中间视图。然后，MotionLayout开始执行动画，从启动视图开始，经过keyframe，直到视图动画正确播放至结束视图。

官方学习地址：https://developer.android.com/training/constraint-layout/motionlayout?hl=zh-cn

挑战练习：日期格式化

这里写了个日期格式化的工具类，调用一下，就完成了挑战练习要求啦，格式有点小小不一样，问题不大，目的是为了学习使用 DateFormat 类。

object DateUtil {

    /**
     * 自定义返回日期 星期，格式是 「2021年8月20日 周五」
     * Get day and week
     * @return 8月20日 周五
     */
    fun getDayAndWeek(date: Date): String {

        val simpleDateFormat = SimpleDateFormat("yyyy年MM月dd日")
        val dateStr: String = simpleDateFormat.format(date)

        val dayAndWeek = StringBuilder()
        dayAndWeek.append(dateStr)
        dayAndWeek.append("   ")
        dayAndWeek.append(getWeek_ChinaName(date))
        return dayAndWeek.toString()
    }

    /**
     * Get week_china name
     * 获取今天是星期几
     * @return 星期(几)
     */
    fun getWeek_ChinaName(date: Date): String {
        val list = arrayOf("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六")
        val calendar: Calendar = Calendar.getInstance()
        calendar.time = date
        var index: Int = calendar.get(Calendar.DAY_OF_WEEK) - 1
        if (index < 0) {
            index = 0
        }
        return list[index]
    }
}

效果：