《Android編程權(quán)威指南》之使用布局與部件創(chuàng)建用戶界面

好啦，本章將會(huì)優(yōu)化 CriminalIntent 項(xiàng)目的布局，并將學(xué)習(xí)一個(gè)新的很好用的工具褥赊，叫 ConstraintLayout。加油莉恼！??

初識(shí) ConstraintLayout 布局

它被叫做約束布局拌喉，是 Android Jetpack 中的一部分，它可使用扁平視圖層次結(jié)構(gòu)（無嵌套視圖組）創(chuàng)建復(fù)雜的大型布局俐银，而且它的功能支持直接通過布局編輯器的可視化工具進(jìn)行拖拽使用尿背。

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

圖形布局編輯器

接下來嘗試使用 ConstraintLayout 布局吧，打開 item_crime.xml捶惜，右邊切換到 Design田藐，將 LinearLayout Convert to ConstraintLayout 看看。

demo

然后一些小圖標(biāo)操作售躁，自行熟悉一下坞淮。

使用ConstraintLayout

可以拖拽，可以手寫陪捷』鼐剑可能會(huì)出現(xiàn)點(diǎn)問題，多試幾次市袖。

<?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>

然后將手銬的小圖標(biāo)加上邏輯代碼啡直，具體實(shí)現(xiàn)參考結(jié)尾處 Github 地址喔。

深入學(xué)習(xí)布局屬性

Android 每個(gè)控件都默認(rèn)引用 Android 自帶樣式文件的 style 屬性苍碟。該預(yù)定義樣式來自應(yīng)用的主題酒觅，主題也是一種樣式資源。Android 自帶了一些供應(yīng)用使用的平臺(tái)主題微峰，應(yīng)用默認(rèn)主題是在 manifest 文件的 application 標(biāo)簽下引用的舷丹。

后面會(huì)有個(gè)章節(jié)專門講主題，稍等等等...

深入學(xué)習(xí)：邊距與內(nèi)邊距

邊距（margin）：布局參數(shù)蜓肆，決定了控件間的距離
內(nèi)邊距（padding）：非布局參數(shù)颜凯，它的設(shè)置是在告訴控件繪制自己本身時(shí)谋币，要比所含內(nèi)容大多少。

深入學(xué)習(xí)：ConstraintLayout 的發(fā)展動(dòng)態(tài)

Guideline：它是只能用在ConstraintLayout布局里面的一個(gè)工具類症概。

官方介紹：https://developer.android.google.cn/reference/android/support/constraint/Guideline
網(wǎng)上博客學(xué)習(xí)：
https://biaomingzhong.github.io/2017/constraintlayout-basics-guidelines-3/
https://www.jowanxu.top/2018/01/15/Android-ConstraintLayout-Chains/
MotionLayout：是 ConstraintLayout 的一個(gè)擴(kuò)展蕾额。有了它，向視圖添加動(dòng)畫就容易多了彼城。為了使用MotionLayout诅蝶，你可以創(chuàng)建一個(gè)MotionScene文件，約定如何執(zhí)行動(dòng)畫募壕，以及在開始和結(jié)束布局里各個(gè)視圖的映射關(guān)系是什么调炬。你也可以設(shè)置keyframe作為動(dòng)畫過程中的中間視圖。然后司抱，MotionLayout開始執(zhí)行動(dòng)畫筐眷，從啟動(dòng)視圖開始，經(jīng)過keyframe习柠，直到視圖動(dòng)畫正確播放至結(jié)束視圖。

官方學(xué)習(xí)地址：https://developer.android.com/training/constraint-layout/motionlayout?hl=zh-cn

挑戰(zhàn)練習(xí)：日期格式化

這里寫了個(gè)日期格式化的工具類照棋，調(diào)用一下资溃，就完成了挑戰(zhàn)練習(xí)要求啦，格式有點(diǎn)小小不一樣烈炭，問題不大溶锭，目的是為了學(xué)習(xí)使用 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]
    }
}

效果：