UI基础入门(三)——Android常用布局- 校招VIP

文章声明：转载来源：https://blog.csdn.net/weixin_40352715/article/details/120666790

一、布局基础

1、布局的作用

布局是指对界面结构的全面规划与安排，通过api中提供的各种布局能够快速的完成对于界面的设计

2、布局的种类

线性布局（LinearLayout）

相对布局（RelativeLayout）相对位置布局

帧布局（FrameLayout）有层次的布局

表格布局（TableLayput）

网格布局（GridLayout）

约束布局（ConstraintLayout）

3、添加布局方式

利用xml文件设计

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity">
 
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
 
</androidx.constraintlayout.widget.ConstraintLayout>

使用java代码添加

package com.example.testapplication;
 
import androidx.appcompat.app.AppCompatActivity;
 
import android.graphics.Color;
import android.os.Bundle;
import android.view.ViewGroup;
import android.widget.LinearLayout;
 
public class MainActivity extends AppCompatActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // setContentView(R.layout.activity_main);
        // 1、跟布局为线性布局
        LinearLayout ll = new LinearLayout(this);
 
        // 2、设置宽高
        ll.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.MATCH_PARENT));
 
        // 3、背景设为红色
        ll.setBackgroundColor(Color.RED);
 
        // 4、指定此Activity的内容视图为该线性布局
        setContentView(ll);
    }
}

4、布局的重要属性

android:layout_width 宽度
andorid:layout_height 高度
andorid:layout_padding 内边距
andorid:layout_margin 外边距

二、线性布局

1、线性布局的重要属性

android:orientation 方向
android:layout_weight 权重
android:layout_gravity 重力

2、线性布局的使用

<?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">
    <!--    android:layout_margin="20dp"-->
    <!--    android:padding="20dp"-->
 
    <!-- vertical: 垂直的   horizontal:水平的 -->
    <!-- layout_weight: 权重 -->
 
    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:textSize="40sp"
        android:background="#ff0000"
        android:text="葫芦"
        android:layout_weight="1"
        android:layout_gravity="bottom"/>
 
    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="#00ff00"
        android:textSize="40sp"
        android:text="葫芦"
        android:layout_weight="2"
        android:layout_gravity="center"/>
    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="#0000ff"
        android:textSize="40sp"
        android:text="葫芦"
        android:layout_weight="2"/>
 
 
</LinearLayout>

三、相对布局

1、相对布局的重要属性

相对于父容器(取值: true/false)
android:layout_alignParentRight 右
android:layout_centerInParent 水平上下居中
android:layout_alignParentLeft 左
android:layout_alignParentTop 上
android:layout_alignParentBottom 下
android:layout_centerHorizontal 水平居中
android:layout_centerVertical 垂直居中

相对于其他控件(取值: 其他控件id)
andorid:layout_toRightOf 右
android:layout_toLeftOf 左
android:layout_below 下
android:layout_above 上

2、相对布局的使用

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <!--
        android:layout_centerInParent 居中
        android:layout_alignParentLeft 左
        android:layout_alignParentRight 右
        android:layout_alignParentTop 上
        android:layout_alignParentBottom 下
        android:layout_centerHorizontal 水平居中
        android:layout_centerVertical 垂直居中
    -->
 
    <TextView
        android:id="@+id/center"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#ff0000"
        android:textSize="30sp"
        android:text="屏幕中间"
        android:layout_centerInParent="true"
        />
 
    <!--
        android:layout_toLeftOf 左
        android:layout_toRightOf 右
        android:layout_below 下
        android:layout_above 上
    -->
 
    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#00ff00"
        android:textSize="30sp"
        android:text="中偏左上"
        android:layout_toLeftOf="@id/center"
        android:layout_above="@id/center" 
        />
 
    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#00ff00"
        android:textSize="30sp"
        android:text="中偏右上"
        android:layout_toRightOf="@id/center"
        android:layout_above="@id/center"
        />
 
    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#00ff00"
        android:textSize="30sp"
        android:text="中偏左下"
        android:layout_toLeftOf="@id/center"
        android:layout_below="@id/center"
        />
 
    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#00ff00"
        android:textSize="30sp"
        android:text="中偏右下"
        android:layout_toRightOf="@id/center"
        android:layout_below="@id/center"
        />
</RelativeLayout>

四、帧布局

1、帧布局的重要属性

android:layout_gravity 控件重力
android:foreground 前景
android:foregroundGravity 前景重力

2、帧布局的使用

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:foreground="@mipmap/ic_launcher"
    android:foregroundGravity="center">
 
    <TextView
        android:layout_width="400dp"
        android:layout_height="400dp"
        android:background="#ff0000"
        android:layout_gravity="center"/>
 
    <TextView
        android:layout_width="350dp"
        android:layout_height="350dp"
        android:background="#00ff00"
        android:layout_gravity="center"/>
 
    <TextView
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:background="#0000ff"
        android:layout_gravity="center"/>
 
    <TextView
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:background="#00ffff"
        android:layout_gravity="center"/>
 
    <TextView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="#ffff00"
        android:layout_gravity="center"/>
 
    <TextView
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_gravity="center"
        android:background="#ff00ff" />
 
 
</FrameLayout>

五、表格布局

1、表格布局的重要属性

android:stretchColumns 设置可以伸展的列，直接传列的索引，如果多列逗号分隔，所有列为*
android:shrinkColumns 设置可以缩小的列
android:collapseColumns 设置可以隐藏的列
android:layout_span 合并表格

2、表格布局的使用

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:stretchColumns="*">
 
    <!--    如果直接往TableLayout中添加控件，那么该控件与屏幕等宽
            如果想使多个控件在同一行，那么我们在这些控件外层包裹一堆TableRow标签
            并且在这种情况下，控件宽度与内容适配
    -->
    <EditText android:layout_weight="2"
            android:text="0"
            android:gravity="right|center_vertical"
            android:textSize="28sp"/>
    
    <TableRow android:layout_weight="1">
        <Button android:text="c"
                android:layout_height="match_parent"
                android:textSize="24sp"/>
        <Button android:text="+/-"
                android:layout_height="match_parent"
                android:textSize="24sp"/>
        <Button android:text="%"
                android:layout_height="match_parent"
                android:textSize="24sp"/>
        <Button android:text="➗"
                android:layout_height="match_parent"
                android:textSize="24sp"/>
    </TableRow>
 
    <TableRow android:layout_weight="1">
        <Button android:text="7"
            android:layout_height="match_parent"
            android:textSize="24sp"/>
        <Button android:text="8"
            android:layout_height="match_parent"
            android:textSize="24sp"/>
        <Button android:text="9"
            android:layout_height="match_parent"
            android:textSize="24sp"/>
        <Button android:text="*"
            android:layout_height="match_parent"
            android:textSize="24sp"/>
    </TableRow>
 
    <TableRow android:layout_weight="1">
        <Button android:text="4"
            android:layout_height="match_parent"
            android:textSize="24sp"/>
        <Button android:text="5"
            android:layout_height="match_parent"
            android:textSize="24sp"/>
        <Button android:text="6"
            android:layout_height="match_parent"
            android:textSize="24sp"/>
        <Button android:text="-"
            android:layout_height="match_parent"
            android:textSize="24sp"/>
    </TableRow>
 
    <TableRow android:layout_weight="1">
        <Button android:text="1"
            android:layout_height="match_parent"
            android:textSize="24sp"/>
        <Button android:text="2"
            android:layout_height="match_parent"
            android:textSize="24sp"/>
        <Button android:text="3"
            android:layout_height="match_parent"
            android:textSize="24sp"/>
        <Button android:text="+"
            android:layout_height="match_parent"
            android:textSize="24sp"/>
    </TableRow>
 
    <TableRow android:layout_weight="1">
        <Button android:text="0"
            android:layout_height="match_parent"
            android:textSize="24sp"
            android:layout_span="2"/>
        <Button android:text="."
            android:layout_height="match_parent"
            android:textSize="24sp"/>
        <Button android:text="="
            android:layout_height="match_parent"
            android:textSize="24sp"/>
    </TableRow>
 
 
</TableLayout>

五、网格布局

1、网格布局的重要属性
android:columnCount 列数量
android:layout_columnSpan 跨几列
android:layout_columnWeight 列权重

2、网格布局的使用

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnCount="4">
 
    <EditText
            android:layout_columnSpan="4"
            android:layout_columnWeight="4"
            android:layout_rowWeight="2"
            android:text="0"
            android:gravity="right|center_vertical"
        />
 
    <Button android:text="C"
            android:layout_columnWeight="1"
            android:layout_rowWeight="1"
            android:layout_height="0dp"
            android:layout_width="0dp"/>
    <Button android:text="+/-"
            android:layout_columnWeight="1"
            android:layout_rowWeight="1"
            android:layout_height="0dp"
            android:layout_width="0dp"/>
    <Button android:text="%"
            android:layout_columnWeight="1"
            android:layout_rowWeight="1"
            android:layout_height="0dp"
            android:layout_width="0dp"/>
    <Button android:text="➗"
            android:layout_columnWeight="1"
            android:layout_rowWeight="1"
            android:layout_height="0dp"
            android:layout_width="0dp"/>
 
    <Button android:text="7"
            android:layout_columnWeight="1"
            android:layout_rowWeight="1"
            android:layout_height="0dp"
            android:layout_width="0dp"/>
    <Button android:text="8"
            android:layout_columnWeight="1"
            android:layout_rowWeight="1"
            android:layout_height="0dp"
            android:layout_width="0dp"/>
    <Button android:text="9"
            android:layout_columnWeight="1"
            android:layout_rowWeight="1"
            android:layout_height="0dp"
            android:layout_width="0dp"/>
    <Button android:text="*"
            android:layout_columnWeight="1"
            android:layout_rowWeight="1"
            android:layout_height="0dp"
            android:layout_width="0dp"/>
 
    <Button android:text="4"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:layout_height="0dp"
        android:layout_width="0dp"/>
    <Button android:text="5"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:layout_height="0dp"
        android:layout_width="0dp"/>
    <Button android:text="6"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:layout_height="0dp"
        android:layout_width="0dp"/>
    <Button android:text="+"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:layout_height="0dp"
        android:layout_width="0dp"/>
 
    <Button android:text="1"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:layout_height="0dp"
        android:layout_width="0dp"/>
    <Button android:text="2"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:layout_height="0dp"
        android:layout_width="0dp"/>
    <Button android:text="3"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:layout_height="0dp"
        android:layout_width="0dp"/>
    <Button android:text="-"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:layout_height="0dp"
        android:layout_width="0dp"/>
 
    <Button android:text="0"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:layout_height="0dp"
        android:layout_width="0dp"
        android:layout_columnSpan="2"/>
    <Button android:text="."
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:layout_height="0dp"
        android:layout_width="0dp"/>
    <Button android:text="="
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:layout_height="0dp"
        android:layout_width="0dp"/>
 
 
</GridLayout>

六、约束布局

1、约束布局的重要属性

app:layout_constraintBottom_toBottomOf 约束当前view的底部位置
app:layout_constraintVertical_bias 垂直偏移量

2、约束布局的使用

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity"
    android:background="@mipmap/bg_zfb">
 
    <!--
    app:layout_constraint方位_to方位Of="?"
    ?  : 1. parent    2.引用其他控件id
    当前控件的某个方位和另一个参照物的某个方位对齐
    app:layout_constraintLeft_toLeftOf  相当于RelativeLayout的alignLeft属性
    app:layout_constraintRight_toRightOf 相当于RelativeLayout的alignRight属性
    app:layout_constraintTop_toTopOf    相当于RelativeLayout的alignTop属性
    app:layout_constraintBottom_toBottomOf  相当于RelativeLayout的alignBottom属性
    app:layout_constraintStart_toStartOf    同Left_toLeftOf
    app:layout_constraintEnd_toEndOf    同Right_toRightOf
    当前控件的A侧会在参照物的B侧
    app:layout_constraintLeft_toRightOf    相当于RelativeLayout的toRightOf
    app:layout_constraintRight_toLeftOf    相当于RelativeLayout的toLeftOf
    app:layout_constraintTop_toBottomOf    相当于RelativeLayout的below
    app:layout_constraintBottom_toTopOf    相当于RelativeLayout的above
    app:layout_constraintStart_toEndOf     同Left_toRightOf
    app:layout_constraintEnd_toStartOf      同Right_toLeftOf
        app:layout_constraintVertical_bias="0.53"     垂直偏移量，0.5在正中间
        app:layout_constraintHorizontal_bias="0.53"     水平偏移量，0.5在正中间
    -->
 
    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="15dp"
        android:text="红包"
        android:textColor="#f6d5a8"
        android:textSize="22sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
 
 
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="15dp"
        android:layout_marginLeft="8dp"
        android:text=" < 返回"
        android:textColor="#f6d5a8"
        android:textSize="22sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
 
    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="15dp"
        android:layout_marginEnd="8dp"
        android:text="红包记录"
        android:textColor="#f6d5a8"
        android:textSize="22sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
 
    <Button
        android:id="@+id/button"
        android:layout_width="330dp"
        android:layout_height="60dp"
        android:background="@mipmap/btn_zfb"
        android:text="一字千金红包"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.56"/>
 
    <Button
        android:id="@+id/button2"
        android:layout_width="330dp"
        android:layout_height="60dp"
        android:text="普通红包"
        android:background="@mipmap/btn_zfb"
        android:layout_marginBottom="15dp"
        app:layout_constraintBottom_toTopOf="@+id/button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />
 
    <Button
        android:id="@+id/button3"
        android:layout_width="330dp"
        android:layout_height="60dp"
        android:text="口令红包"
        android:background="@mipmap/btn_zfb"
        android:layout_marginBottom="15dp"
        app:layout_constraintBottom_toTopOf="@+id/button2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />
 
    <LinearLayout
        android:id="@+id/linearLayout"
        android:layout_width="300dp"
        android:layout_height="60dp"
        android:background="@mipmap/edit_zfb"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.495"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button"
        app:layout_constraintVertical_bias="0.416">
 
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@null"
            android:gravity="center"
            android:hint="输口令，领红包" />
 
        <TextView
            android:layout_width="90dp"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="确定"
            android:textColor="#cccccc"
            android:textSize="26sp" />
    </LinearLayout>
 
    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="12dp"
        android:text="口令红包规则"
        android:textSize="18sp"
        android:textColor="#f6d5a8"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/linearLayout" />
 
 
</androidx.constraintlayout.widget.ConstraintLayout>