安卓学习Day04（布局）

学习目标

• 学习线性布局
• 学习帧式布局

线性布局

• LinearLayout 是一个视图组，用于使所有子视图在单个方向（垂直或水平）保持对齐。

常用属性

• layout_width：布局宽度（match_parent，wrap_conent）
• layout_height：布局高度（match_parent，wrap_conent）
• orietation：方向（vertical，horizontal）
• gravity：对齐方式（left, right, center, top, bottom…)
• background：背景（颜色、图片、选择器）
• weight：比重（用于瓜分手机屏幕）
• padding：内边距 (paddingLeft, paddingRight, paddingTop, paddingBottom)
• margin：外边距 (marginLeft, marginRight, marginTop, marginBottom)

案例演示（选择水果）

创建安卓项目（ClickFruit）

准备图片素材

编写主窗口布局资源文件（activity_main.xml）

<?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:background="@drawable/bg"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_marginRight="20dp"
            android:onClick="doApple"
            android:src="@mipmap/apple"/>

        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_marginRight="20dp"
            android:onClick="doOrange"
            android:src="@mipmap/orange"/>

        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:onClick="doPomegranate"
            android:src="@mipmap/po"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingTop="30dp"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_marginRight="20dp"
            android:onClick="doBroccoli"
            android:src="@mipmap/bro"/>

        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_marginRight="20dp"
            android:onClick="doAvocado"
            android:src="@mipmap/avocado"/>

        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:onClick="doCabbage"
            android:src="@mipmap/ca"/>
    </LinearLayout>



</LinearLayout>

编写主界面MainActivity

测试结果

帧式布局

• 帧式布局是一种层叠式的布局，后添加的控件会层叠在先添加的控件上。

常用属性

• scrollbars：滚动条（none、horizontal、vertical）
• layout_marginTop：上边距
• layout_marginBottom：下边距
• layout_marginLeft：左边距
• layout_marginRight：右边距
• paddingLeft：左内边距
• paddingRight：右内边距
• paddingTop：上内边距
• paddingBottom：下内边距
• background：背景

案例演示（切换颜色）

创建安卓项目

在字符资源文件里定义变量

• 打开strings.xml
  

<resources>
    <string name="app_name">帧式布局：切换颜色</string>
    <string name="bottom">底层</string>
    <string name="middle">中层</string>
    <string name="top">顶层</string>
    <string name="switch_color">切换颜色</string>>
</resources>

编写主窗口布局资源文件（activity_main.xml）

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/tvBottom"
            android:layout_width="300dp"
            android:layout_height="300dp"
            android:layout_gravity="center"
            android:background="#ff0000"
            android:text="@string/bottom"
            android:textColor="#ffff00"
            android:textSize="30sp" />

        <TextView
            android:id="@+id/tvMiddle"
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:layout_gravity="center"
            android:background="#0000ff"
            android:text="@string/middle"
            android:textColor="#ffff00"
            android:textSize="30sp" />

        <TextView
            android:id="@+id/tvTop"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_gravity="center"
            android:background="#00ff00"
            android:text="@string/top"
            android:textColor="#ffff00"
            android:textSize="30sp" />
    </FrameLayout>

    <Button
        android:id="@+id/btnSwitchColor"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:onClick="doSwitchColor"
        android:text="@string/switch_color"
        android:textSize="20sp" />
</LinearLayout>

编写主界面MainActivity

测试结果