android中的布局

Android学习布局以及组件总结

android中的布局

LinearLayout 线性布局
RelativeLayout相对布局
GridLayout 网格布局
FrameLayout 帧布局
TableLayout 表格布局
PercentFrameLayout 百分比帧布局
PercentRelativeLayout 百分比相对布局
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布局

扫描二维码关注公众号，回复： 1805905 查看本文章

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

猜你喜欢