Android常见布局

作者: 抱不住太阳的深海line | 来源:发表于2019-03-31 21:06 被阅读0次

2020-10-06
Android常见布局
android1-5章
Constraintlayout相关使用
Android 常见布局
android 布局
Android应用界面开发——第二周笔记
setContentView是如何把布局加上去的
Android约束布局解析
Android MSlidingTabLayout滑动显示省略号

在Android中免不了用到布局，今天主要学习下Android常见布局

线性布局（LinearLayout）
帧布局（FrameLayout）
相对布局（RelativeLayout）
表格布局（TableLayout）
约束布局（ConstraintLayout）

线性布局

线性布局比较简单，下面通过一个例子介绍一下。

计算器.png

布局文件献上，此文件的布局是一个计算器（对于常见控件，暂不介绍）。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    tools:context=".MainActivity">
    <TextView
        android:layout_marginVertical="20dp"
        android:gravity="right"
        android:textSize="20sp"
        android:text="0"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <LinearLayout
        android:layout_width="match_parent"
        android:orientation="horizontal"
        android:layout_height="wrap_content">
        <Button
            android:layout_weight="1"
            android:text="%"
            android:layout_width="0dp"
            android:layout_height="wrap_content" />
        <Button
            android:layout_weight="1"
            android:text="√"
            android:layout_width="0dp"
            android:layout_height="wrap_content" />
        <Button
            android:layout_weight="1"
            android:text="x²"
            android:layout_width="0dp"
            android:layout_height="wrap_content" />
        <Button
            android:layout_weight="1"
            android:text="1/x"
            android:layout_width="0dp"
            android:layout_height="wrap_content" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:orientation="horizontal"
        android:layout_height="wrap_content">
        <Button
            android:layout_weight="1"
            android:text="CE"
            android:layout_width="0dp"
            android:layout_height="wrap_content" />
        <Button
            android:layout_weight="1"
            android:text="C"
            android:layout_width="0dp"
            android:layout_height="wrap_content" />
        <Button
            android:layout_weight="1"
            android:text="←"
            android:layout_width="0dp"
            android:layout_height="wrap_content" />
        <Button
            android:layout_weight="1"
            android:text="÷"
            android:layout_width="0dp"
            android:layout_height="wrap_content" />
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:orientation="horizontal"
        android:layout_height="wrap_content">
        <Button
            android:layout_weight="1"
            android:text="7"
            android:layout_width="0dp"
            android:layout_height="wrap_content" />
        <Button
            android:layout_weight="1"
            android:text="8"
            android:layout_width="0dp"
            android:layout_height="wrap_content" />
        <Button
            android:layout_weight="1"
            android:text="9"
            android:layout_width="0dp"
            android:layout_height="wrap_content" />
        <Button
            android:layout_weight="1"
            android:text="×"
            android:layout_width="0dp"
            android:layout_height="wrap_content" />
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:orientation="horizontal"
        android:layout_height="wrap_content">
        <Button
            android:layout_weight="1"
            android:text="4"
            android:layout_width="0dp"
            android:layout_height="wrap_content" />
        <Button
            android:layout_weight="1"
            android:text="5"
            android:layout_width="0dp"
            android:layout_height="wrap_content" />
        <Button
            android:layout_weight="1"
            android:text="6"
            android:layout_width="0dp"
            android:layout_height="wrap_content" />
        <Button
            android:layout_weight="1"
            android:text="-"
            android:layout_width="0dp"
            android:layout_height="wrap_content" />
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:orientation="horizontal"
        android:layout_height="wrap_content">
        <Button
            android:layout_weight="1"
            android:text="1"
            android:layout_width="0dp"
            android:layout_height="wrap_content" />
        <Button
            android:layout_weight="1"
            android:text="2"
            android:layout_width="0dp"
            android:layout_height="wrap_content" />
        <Button
            android:layout_weight="1"
            android:text="3"
            android:layout_width="0dp"
            android:layout_height="wrap_content" />
        <Button
            android:layout_weight="1"
            android:text="+"
            android:layout_width="0dp"
            android:layout_height="wrap_content" />
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:orientation="horizontal"
        android:layout_height="wrap_content">
        <Button
            android:layout_weight="1"
            android:text="±"
            android:layout_width="0dp"
            android:layout_height="wrap_content" />
        <Button
            android:layout_weight="1"
            android:text="0"
            android:layout_width="0dp"
            android:layout_height="wrap_content" />
        <Button
            android:layout_weight="1"
            android:text="."
            android:layout_width="0dp"
            android:layout_height="wrap_content" />
        <Button
            android:layout_weight="1"
            android:text="="
            android:layout_width="0dp"
            android:layout_height="wrap_content" />
    </LinearLayout>
</LinearLayout>

上面布局文件中：

`android:layout_weight`	表示权重
`android:orientation`	表示控件的方向
`horizontal`	表示水平方向
`vertical`	表示垂直方向
`android:layout_width`	表示控件的宽
`android:layout_height`	表示控件的高
`android:layout_margin`	表示控件的外边距
`android:padding`	表示内边距

相对布局

还是通过例子，这次我们用相对布局来完成。

2.png

<?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">
    <Button
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/button"
        android:layout_alignRight="@id/button"
        android:text="Button" />
    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
       android:layout_below="@id/button"
        android:layout_alignRight="@id/button"
        android:text="Button" />
    <Button
        android:layout_alignTop="@id/button"
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
       android:layout_toLeftOf="@id/button"
        android:text="Button" />
    <Button
        android:layout_alignTop="@id/button"
        android:id="@+id/button6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/button"
        android:text="Button" />
</RelativeLayout>

android:layout_toLeftOf	该组件位于引用组件的左方
android:layout_toRightOf	该组件位于引用组件的右方
android:layout_above	该组件位于引用组件的上方
android:layout_below	该组件位于引用组件的下方
android:layout_alignParentLeft	该组件是否对齐父组件的左端
android:layout_alignParentRight	该组件是否齐其父组件的右端
android:layout_alignParentTop	该组件是否对齐父组件的顶部
android:layout_alignParentBottom	该组件是否对齐父组件的底部
android:layout_centerInParent	该组件是否相对于父组件居中
android:layout_centerHorizontal	该组件是否横向居中
android:layout_centerVertical	该组件是否垂直居中

帧布局

所有的子控件都会在左上角，每个控件都会覆盖前面的控件

表格布局

3.png

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:shrinkColumns="0,1,2"
    android:stretchColumns="0,1,2"
    android:layout_height="match_parent">
    
    <TableRow android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <Button android:text="1"/>
        <Button android:text="1"/>
        <Button android:text="1"/>
    </TableRow>
    <TableRow android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <Button android:text="1"/>
        <Button android:text="1"/>
        <Button android:text="1"/>
    </TableRow>
    <TableRow android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <Button android:text="1"/>
        <Button android:text="1"/>
        <Button android:text="1"/>
    </TableRow>
</TableLayout>

Shrinkable 表示该列的宽度可以进行收缩，以使表格能够适应父容器的大小
Stretchable 表示该列的宽度可以进行拉伸，以使能够填满表格中的空闲空间

约束布局

约束布局常用于拖控件当中。我们把控件拖入屏幕当中，当前控件会有四个小圆圈，我们可以设置约束条件。

image.png

2020-10-06
Android常见界面布局：RelativeLayout（相对布局） LinearLayout（线性...
Android常见布局
在Android中免不了用到布局，今天主要学习下Android常见布局线性布局（LinearLayout）帧布...
android1-5章
一.Dalvik虚拟机二. Android常见界面布局线性布局LinearLayout，帧布局FrameLay...
Constraintlayout相关使用
官网介绍 Constraintlayout Android常见布局 LinearLayout RelativeLa...
Android 常见布局
基本理论 Android六大基本布局分别是：线性布局LinearLayout、表格布局TableLayout、相对...
android 布局
android 常见布局 drawerlayout（主界面+侧边栏（navigationview） Coordin...
Android应用界面开发——第二周笔记
线性布局线性布局是程序中常见的布局方式之一，包括水平线性布局和垂直线性布局两种, 通过Android:orien...
setContentView是如何把布局加上去的
在Android开发中，最常见的代码就是setContentView，然后传入你写的布局ID，那么布局就被加载到界...
Android约束布局解析
Android约束布局解析 UI布局常见问题 UI设计有时毫无规律且复杂，使用基础布局十分困难复杂，需要多层嵌套 ...
Android MSlidingTabLayout滑动显示省略号
前言:我们都知道，在Android中标签布局有很多种，常见的TabLayout，MSlidingTabLayout...