AndroidStudio学习（三)：基本布局（LinearLayout/RelativeLayout/FrameLayout/Percent(F/R)Layout）

教材：第一行代码（第2版）

布局

布局是一种可用于放置很多控件的容器，
它可以按照一定的规律调整内部控件的位置，
从而写出精美的界面；
同时，布局内部也可以放置布局，
通过多层布局的嵌套，
我们就能完成一些比较复杂的界面实现。

新建项目UILayoutTest

线性布局LinearLayout

将控件在线性方向上依次排列：
	android:orientation = " "
	vertical - 垂直方向
	horizontal - 水平方向

//修改activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text = "Button 1"
        />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text = "Button 2"
        />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text = "Button 3"
        />

</LinearLayout>

//修改
android:orientation="horizontal"
//此时内部控件的宽度绝不能指定为match_parent
//否则一个控件就会将水平方向占满，其他控件就没有位置了

//同理：vertical时绝不能将高度指定为match_parent

android:layout_gravity

android:gravity
	指定文字在控件中的对齐方式
android:layout_gravity
	指定控件在布局中的对齐方式

horizontal - 只有垂直方向上的对齐方式会生效
vertical - 只有水平方向上的对齐方式会生效

//在三个按钮控件中分别添加

	android:layout_gravity="top"
	
	android:layout_gravity="center_vertical"
	
	android:layout_gravity="bottom"

android:layout_weight

android:layout_weight
	使用比例的方式来指定控件的大小

//修改activity_main.xml
	<EditText
        android:id="@+id/input_message"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:hint="Type something"
        />

    <Button
        android:id="@+id/send"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text = "Send"
        android:textAllCaps="false"
        />

//将两个控件的android:layout_weight指定为1
//表示两个控件将在水平方向平分宽度
//因为系统会把所有控件的layout_weight值相加，得到一个总值
//一个控件的layout_weight除以这个总值就是它在布局中的占比大小

//修改activity_main.xml
	<EditText
        android:id="@+id/input_message"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:hint="Type something"
        />

    <Button
        android:id="@+id/send"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text = "Send"
        android:textAllCaps="false"
        />

相对布局RelativeLayout

通过相对定位的方式让控件出现在布局的任何位置。

//修改activity_main.xml

//相对于父布局进行定位
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text = "Button 1"
        />
        //父布局左上角

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:text = "Button 2"
        />
        //父布局右上角

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text = "Button 3"
        />
        //居中

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:text = "Button 4"
        />
        //左下角

    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:text = "Button 5"
        />
        //右下角

</RelativeLayout>

//修改activity_main.xml

//相对于控件进行定位
    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text = "Button 3"
        />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/button3"
        android:layout_toLeftOf="@id/button3"
        android:text = "Button 1"
        />
        //button3左上角

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/button3"
        android:layout_toRightOf="@id/button3"
        android:text = "Button 2"
        />

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/button3"
        android:layout_toLeftOf="@id/button3"
        android:text = "Button 4"
        />

    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/button3"
        android:layout_toRightOf="@id/button3"
        android:text = "Button 5"
        />

帧布局FrameLayout

没有方便的定位方式，
所有控件都默认摆放在布局左上角。

//修改activity_main.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <TextView
        android:id="@+id/text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="This is TextView"
        />

    <ImageView
        android:id="@+id/image_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"
        />

</FrameLayout>

//由于ImageView后添加，所以会压在TextView上面。

//在两个控件中分别添加

	android:layout_gravity="left"

	android:layout_gravity="right"

百分比布局PercentFrameLayout/PercentRelativeLayout

只有LinearLayout支持使用layout_weight属性来实现按比例指定控件大小的功能；
在百分比布局中，可以不再使用wrap_parent和match_parent等方式指定控件大小，
而是允许直接指定控件在布局中所占的百分比。

百分比属于新增布局，定义在support库中；
我们只需要在项目的build.gradle中添加百分比布局库的依赖，
就能保证百分比布局在所有Android版本上的兼容性。

//打开app/build.gradle文件，在dependencies闭包中添加
dependencies {
	//compile fileTree(dir:'libs',includes: ['*.jar'])
    //compile 'com.android.support:appcompat-v7:24.2.1'
    //compile 'com.android.support:percent:24.2.1'
    //testCompile 'junit:junit:4.12'
    //3.5版本使用compile会报错，改为implementation
    //我的sdk版本是30，这里编写24也会报错

    implementation fileTree(dir:'libs',includes: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:30.2.1'
    implementation 'com.android.support:percent:30.2.1'
    testImplementation 'junit:junit:4.12'
}

//点击Sync Now

//修改activity_main.xml
//书中这里写的是android.support.percent.PercentFrameLayout
//需要修改为：androidx.percentlayout.widget.PercentFrameLayout
<androidx.percentlayout.widget.PercentFrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto" //注意这里，定义一个app的命名空间
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

	//可能会报错 - ‘layout_height’ attribute should be defined ...
	//可以忽视
    <Button
        android:id="@+id/button1"
        android:text="Button 1"
        android:layout_gravity="left|top"
        app:layout_widthPercent="50%"
        app:layout_heightPercent="50%"
        />

    <Button
        android:id="@+id/button2"
        android:text="Button 2"
        android:layout_gravity="right|top"
        app:layout_widthPercent="50%"
        app:layout_heightPercent="50%"
        />

    <Button
        android:id="@+id/button3"
        android:text="Button 3"
        android:layout_gravity="left|bottom"
        app:layout_widthPercent="50%"
        app:layout_heightPercent="50%"
        />

    <Button
        android:id="@+id/button4"
        android:text="Button 4"
        android:layout_gravity="right|bottom"
        app:layout_widthPercent="50%"
        app:layout_heightPercent="50%"
        />

</androidx.percentlayout.widget.PercentFrameLayout>