android中的布局

Android学习布局以及组件总结

android中的布局

1. LinearLayout 线性布局
2. RelativeLayout相对布局
3. GridLayout 网格布局
4. FrameLayout 帧布局
5. TableLayout 表格布局
6. PercentFrameLayout 百分比帧布局
7. PercentRelativeLayout 百分比相对布局
8. AbsoluteLayout 绝对布局

在上面布局中，最常使用的linearLayout布局，其次是RelativeLayout布局
3,4,5不太常用
6,7小众化，需要在dependencies文件中添加依赖

compile ‘com.android.support:percent:24.2.1’

8,几乎不用，存在兼容性问题

细节讲解
1。LinearLayout

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="线性布局"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="线性布局1"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="线性布局1"
        />
</LinearLayout>
<!--线性布局 ：
    通过orientation属性来设置内部组件的排列方式，有两个取值
    vertical和 herizontal，分别代表垂直排列，和水平排列
-->

2.RelativeLayout布局

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

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="线性布局"
        android:id="@+id/one"
        android:layout_centerInParent="true"
        />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/one"
        android:layout_toLeftOf="@+id/one"
        android:id="@+id/two"
        android:text="线性布局1"
        />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="线性布局1"
        android:id="@+id/three"
        android:layout_above="@+id/one"
        android:layout_toRightOf="@id/one"
        />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="线性布局1"
        android:id="@+id/four"
        android:layout_below="@+id/one"
        android:layout_toLeftOf="@id/one"
        />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="线性布局1"
        android:id="@+id/five"
        android:layout_below="@+id/one"
        android:layout_toRightOf="@id/one"
        />
</RelativeLayout>

在使用相对布局时，要指定每个组件的id，以便使用
下面是解释

该图来源于博主

3.GridLayout网格布局

<?xml version="1.0" encoding="utf-8"?>
<GridLayout 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:visibility="visible"
    android:rowCount="3"
    android:columnCount="4"
    tools:context="com.mingrisoft.myapplication.View.MainActivity">

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

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="two" />

    <Button
        android:id="@+id/three"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:text="three" />

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

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

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

    <Button
        android:id="@+id/si7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="six" />

</GridLayout>

<!--
 android:rowCount="3"
    android:columnCount="4"设置行数和列数
    android:layout_rowSpan="2"
        android:layout_columnSpan="2"设置跨的行数和列数
-->

4.FrameLayout布局

<?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"
    android:visibility="visible"
    tools:context="com.mingrisoft.myapplication.View.MainActivity">

    <View
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="#ccc"></View>

    <View
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:background="#22aa6b"></View>

    <View
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#61c"></View>
</FrameLayout>
<!--
三个view会叠加到一起
frameLayout会将组件默认都放在左上角
-->

5.TableLayout布局

<?xml version="1.0" encoding="utf-8"?>
<TableLayout 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:visibility="visible"
    tools:context="com.mingrisoft.myapplication.View.MainActivity">

    <TableRow>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="用户"
            android:textSize="20dp" />

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:width="160dp"
            android:maxLength="400"
            android:maxLines="1" />
    </TableRow>

    <TableRow>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="密码"
            android:textSize="20dp" />

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:width="160dp"
            android:maxLength="400"
            android:maxLines="1" />
    </TableRow>

    <TableRow android:layout_marginRight="80dp">
        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="退出"
            android:layout_weight="1"
            android:textSize="20dp" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="登录" />

    </TableRow>

</TableLayout>

6.PercentFrameLayout布局

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

    <ImageView
        app:layout_heightPercent="50%"
        app:layout_marginLeftPercent="25%"
        app:layout_marginTopPercent="25%"
        app:layout_widthPercent="50%"
        android:background="#747"/>
</android.support.percent.PercentFrameLayout>
<!--测试属性用，布局就这样了-->

7.PercentRelativeLayout布局

<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentRelativeLayout 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">

    <ImageView
        app:layout_heightPercent="20%"
        app:layout_widthPercent="20%"
        android:layout_toLeftOf="@+id/two"
        android:layout_below="@+id/two"
        android:background="#747"/>

    <ImageView
        app:layout_heightPercent="20%"
        android:layout_centerInParent="true"
        app:layout_widthPercent="20%"
        android:id="@+id/two"
        android:background="#747"/>

</android.support.percent.PercentRelativeLayout>
<!--相对布局的升级版，支持百分比操作，其他都一样-->

8 AbsoluteLayout布局，几乎不用，就不记了

2