Kevin Learn Kotlin：Android UI (基

每日一图.jpg

Android 的 UI 可以分为两大类：View 视图 和 ViewGroup 容器。
View 视图：（TextView,Button,ImageView）都是常用又常见的视图。
ViewGroup 容器：内部可以承载、放置、添加 View 视图。

LinearLayout 线性布局

线性布局就是从左到右或从上到下按顺序排列的一种布局。

属性

• orientation
  可选值 vertical 和 horizontal ，是水平方向逐个排列还是垂直方向逐个排列。

• weight
  按比例分配父容器剩余的宽度或高度。

效果图

20.png

布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:backgroundTint="@color/teal_200"
        android:text="普通按钮"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:backgroundTint="@color/black"
        android:text="普通按钮"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:backgroundTint="@color/teal_700"
        android:text="普通按钮"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="普通按钮"/>

</LinearLayout>

RelaytiveLayout 相对布局

相对布局在摆放子视图位置时，按照指定的参考系来摆放子视图的位置，默认一屏幕左上角（0, 0）位置作为参考系摆放位置。

属性

• 相对父容器摆放自己的位置 7 个常用属性
  layout_alignParentTop 是否让控件相对父容器顶部对齐
  layout_alignParentBottom 是否让控件相对父容器底部对齐
  layout_alignParentLeft 是否让控件相对父容器左边对齐
  layout_alignParentRight 是否让控件相对父容器右边对齐
  layout_centerInParent 是否相对父容器居中显示
  layout_centerVertical 是否相对父容器垂直居中显示
  layout_centerHorizontal 是否相对父容器水平居中显示

• 相对子控件摆放自己的位置 4 个常用属性
  layout_above 指定在哪个控件的上侧
  layout_below 指定在哪个控件的下侧
  layout_toLeftOf 指定在哪个控件的左侧
  layout_toRightOf 指定在哪个控件的右侧

效果图

21.png

布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:backgroundTint="@color/teal_200"
        android:text="普通按钮"/>

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:backgroundTint="@color/teal_200"
        android:layout_above="@id/button1"
        android:layout_toLeftOf="@id/button1"
        android:insetTop="0dp"
        android:insetBottom="0dp"
        android:text="普通按钮"/>



    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:backgroundTint="@color/black"
        android:layout_above="@id/button1"
        android:layout_toRightOf="@id/button1"
        android:insetTop="0dp"
        android:insetBottom="0dp"
        android:text="普通按钮"/>

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:backgroundTint="@color/teal_700"
        android:layout_below="@id/button1"
        android:layout_toLeftOf="@id/button1"
        android:insetTop="0dp"
        android:insetBottom="0dp"
        android:text="普通按钮"/>

    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/button1"
        android:layout_toRightOf="@id/button1"
        android:insetTop="0dp"
        android:insetBottom="0dp"
        android:text="普通按钮"/>

</RelativeLayout>

FrameLayout 帧布局

组建的默认位置都是在左上角，组件之间可以重叠。像千层饼一样。

效果图

22.png

布局文件

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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">

    <View
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_gravity="center"
        android:background="@color/teal_700"/>

    <View
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:layout_gravity="center"
        android:background="@color/teal_200"/>

    <View
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_gravity="center"
        android:background="@color/purple_500"/>

    <View
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:background="@color/purple_200"/>

    <View
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_gravity="center"
        android:background="@color/white"/>
</FrameLayout>