UILayoutTest

app

apply plugin: 'com.android.application'

android {
    compileSdkVersion 26
    defaultConfig {
        applicationId "com.example.uilayouttest"
        minSdkVersion 15
        targetSdkVersion 26
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:26.1.0'
    compile 'com.android.support:percent:26.1.0'
    //将百分比布局定义在support库中，使新增布局在所有Android版本中都能使用
    implementation 'com.android.support.constraint:constraint-layout:1.0.2'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.1'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.1'
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<!--<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"-->
<!--android:orientation="horizontal"-->
<!--android:layout_width="match_parent"-->
<!--android:layout_height="match_parent">-->
<!--&lt;!&ndash;-->
<!--android:orientation：控制布局的排列方向-->
<!--vertical：垂直方向排列-->
<!--horizontal：水平方向排列-->
<!--&ndash;&gt;-->

<!--<Button-->
<!--android:id="@+id/button1"-->
<!--android:layout_width="wrap_content"-->
<!--android:layout_height="wrap_content"-->
<!--android:layout_gravity="top"-->
<!--android:text="Button 1"-->
<!--/>-->
<!--&lt;!&ndash;-->
<!--android:layout_gravity：对齐方式-->
<!--&ndash;&gt;-->

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

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


<!--&lt;!&ndash;-->
<!--android:layout_weight：这个属性允许使用比例的方式来指定控件的大小-->
<!--将两个控件的值都指定为“1”，那将会使他们平分宽度，计算方法：先将值加起来，这里是1+1=2，那每个就是1/2-->
<!--&ndash;&gt;-->
<!--<EditText-->
<!--android:id="@+id/input_message"-->
<!--android:layout_width="0dp"-->
<!--android:layout_height="wrap_content"-->
<!--android:layout_weight="1"-->
<!--android:hint="说出你的故事"-->
<!--/>-->

<!--<Button-->
<!--android:id="@+id/send"-->
<!--android:layout_width="0dp"-->
<!--android:layout_height="wrap_content"-->
<!--android:layout_weight="1"-->
<!--android:text="发送"-->
<!--/>-->


<!--&lt;!&ndash;-->
<!--这种方式EditText会占满屏幕所有剩余空间-->
<!--&ndash;&gt;-->
<!--<EditText-->
<!--android:id="@+id/input_message"-->
<!--android:layout_width="0dp"-->
<!--android:layout_height="wrap_content"-->
<!--android:layout_weight="1"-->
<!--android:hint="说出你的故事"-->
<!--/>-->

<!--<Button-->
<!--android:id="@+id/send"-->
<!--android:layout_width="wrap_content"-->
<!--android:layout_height="wrap_content"-->
<!--android:text="发送"-->
<!--/>-->

<!--&lt;!&ndash;</LinearLayout>&ndash;&gt;-->

<!--&lt;!&ndash;相对布局&ndash;&gt;-->
<!--<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"-->
<!--android:layout_width="match_parent"-->
<!--android:layout_height="match_parent">-->

<!--&lt;!&ndash;控件相对于父布局&ndash;&gt;-->
<!--<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"-->
<!--/>-->


<!--&lt;!&ndash;控件相对于控件&ndash;&gt;-->
<!--<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"-->
<!--/>-->

<!--<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"-->
<!--/>-->

<!--</RelativeLayout>-->


<!--&lt;!&ndash;帧布局&ndash;&gt;-->
<!--&lt;!&ndash;-->
<!--这种布局没有方便的定位方式，所有控件都会默认摆放在布局的左上角-->
<!--&ndash;&gt;-->
<!--<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:layout_gravity="left"-->
        <!--android:text="这是个文本视图"-->
        <!--/>-->

    <!--<ImageView-->
        <!--android:id="@+id/image_view"-->
        <!--android:layout_width="wrap_content"-->
        <!--android:layout_height="wrap_content"-->
        <!--android:layout_gravity="right"-->
        <!--android:src="@mipmap/ic_launcher"-->
        <!--/>-->
    <!--&lt;!&ndash;使用@mipmap来访问ic_launcher这张图&ndash;&gt;-->

<!--</FrameLayout>-->

<!--百分比布局-->
<android.support.percent.PercentFrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button1"
        android:text="Button 1"
        android:layout_gravity="left|top"
        app:layout_widthPercent="50%"
        app:layout_heighPercent="50%"
        />

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

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

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


</android.support.percent.PercentFrameLayout>