Android布局之网格布局

1. 什么是布局
就是把界面中的控件按照某种规律摆放到指定的位置

2. 布局的二种实现
代码
xml配置文件：res/layout目录下
注：也可以同时使用xml和代码

3. 布局的基本属性
取值范围
{ //效果是一样的
fill_parent//过时
match_parent//不过时
}

固定值
{
dp 控件大小
sp 文字大小
}

padding 内补丁
margin 外补丁

android:gravity和android:layout_gravity
用一个TextView、文字、背景查看效果最方便
android:gravity:控件内部的元素
android:layout_gravity：控件所在父元素的位置
但父元素的水平和垂直设置的优先度更高

4. 常见布局
线性布局LinearLayout
表格布局(几乎不用)
帧布局

绝对布局
相对布局 RelativeLayout
网格布局
RTL(几乎不用)

今天给大家带来一个网格布局：

网格布局常用属性
GridLayout布局相关属性：rowCount、columnCount
GridLayout中子控件相关属性：layout_gravity="fill_horizontal|fill_vertical"

Space标签的作用：挡住控件，让其不超出网格的范围
<Space android:layout_width="wrap_content" android:layout_height="wrap_content"/>

以下是一个简单的计算机网格布局的相关代码，仅供参考：

<?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:rowCount="5"//这个表格布局是多少行
    android:columnCount="4"//这个表格布局有多少列

    tools:context=".MainActivity">

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

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

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

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

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

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

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

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

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

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

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

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

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="fill_horizontal"//自动行填充
        android:layout_columnSpan="2"
        android:text="0"/>

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

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="fill_vertical"//自动列填充
        android:layout_rowSpan="2"//占多少行
        android:text="+"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="fill_horizontal"
        android:layout_columnSpan="3"//占几列
        android:text="="/>
<Space />
</GridLayout>

效果图如下：

Android布局之网格布局

猜你喜欢