android学习笔记第一章，六大布局

最新推荐文章于 2024-04-16 19:31:58 发布
最新推荐文章于 2024-04-16 19:31:58 发布
阅读量119 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_49532777/article/details/118187622
版权

LinearLayout（线性布局）

线性布局学习流程图如下：

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

RelativeLayout（相对布局）

父容器定位属性示意图

在这里插入图片描述

根据兄弟组件定位

在这里插入图片描述

图中的组件1,2就是兄弟组件了,而组件3与组件1或组件2并不是兄弟组件,所以组件3不能通过 组件1或2来进行定位,比如layout_toleftof = "组件1"这样是会报错的！切记！ 关于这个兄弟组件定位的最经典例子就是"梅花布局"了,下面代码实现下:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">

    <Button
        android:id="@+id/img1"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_centerInParent="true"
        android:text="中央"/>
    <Button
        android:id="@+id/img2"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_toLeftOf="@+id/img1"
        android:layout_centerVertical="true"
        android:text="左边"/>
    <Button
        android:id="@+id/img3"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_toRightOf="@id/img1"
        android:layout_centerVertical="true"
        android:text="右边"/>
    <Button
        android:id="@+id/img4"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_above="@+id/img1"
        android:layout_centerHorizontal="true"
        android:text="上面"/>
    <Button
        android:id="@+id/img5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_below="@id/img1"
        android:text="下面"/>
</RelativeLayout>

在这里插入图片描述

margin和padding的区别

首先margin代表的是偏移，比如marginleft=“5dp”表示组件离容器左边缘编译5dp；而padding代表的则是填充，而填充的对象针对的是组件中的元素，比如TextView中的文字，比如为TextView设置paddingleft=“5dp”，则是在组件里的元素的左边填充5dp的空间！margin针对的是容器中的组件，而padding针对是组件中的元素，要区分开来！下面通过简单的代码演示两者的区别：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">

    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"/>
    <Button
        android:paddingLeft="100dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        android:layout_toRightOf="@+id/btn1"/>
    <Button
        android:id="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        android:layout_alignParentBottom="true"/>
    <Button
        android:layout_marginLeft="100dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        android:layout_toRightOf="@+id/btn2"
        android:layout_alignParentBottom="true"/>

</RelativeLayout>

在这里插入图片描述

TableLayout(表格布局)

TableLayout的介绍

	html中<table> <tr><td>就可以生成一个html的表格 ，而Android中也允许我们使用表格的方式来排列组件，就是行与列的方式，可以直接设置多少行多少列！
	如何确定行数和列数：
	1.如果我们直接往TableLayout中添加组件的话，那么这个组件将沾满一行！！
	2.如果我们想一行上有多少个组件的话，就要添加一个TableRow的容器，把组件都丢到里面！
	3.tablerow中的组件个数就决定了该有多少行多少列，而列的宽度由该列中最宽的单元格决定
	4.tablerow的layout_width属性，默认是fill_parent的，我们自己设置成其他的值也不会生效！！但是layout_height默认是wrapten_content的，我们却可以自己设置大小！
	5.整个表格布局的宽度取决于父容器的宽度（占满父容器本身）
	6有多少行就要自己数啦，一个tablerow一行，一个单独的组件也一行！多少列则是看tableRow中的组件个数，组件最多的就是TableLayout的列数。

三个常用属性

android:collapseColumns:设置需要被隐藏的列的序号
android:shrinkColumns：设置允许被收缩的列的列序号
android:stretchColumns：设置运行被拉伸的列的列序号
以上这三个属性的列号都是0开始算的，比如shirnkColunmns=“2”，对应的是第三列！可以设置多个，用逗号隔开比如“0，2”，如果是所有列都生效，则用“*”号即可，除了这三个常用属性，还有两个属性，分别就是跳格子以及合并单元格，这和HTMLL中的Table类似：
android：layout_column=“2”:表示的就是跳过第二个，直接显示到第三个格子处，从1开始算的！
android：layout_span=“4”:表示合并4个单元格，也就是说这个组件占4个单元格

collapseColumns(隐藏列)

流程：在TableRow中定义5个按钮后，接着在最外层的TableLayout中添加以下属性：android:collapseColumns=“0,2”，就是隐藏第一于第三列，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<TableRow 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">
    <TableRow>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="one"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="two"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="three"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="four"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="five"/>
    </TableRow>
</TableRow>

隐藏前
在这里插入图片描述
隐藏后
在这里插入图片描述

stretchColumns(拉伸列)

流程：在TableLayout中设置了四个按钮，接着在最外层的TableLayout中添加以下属性：android:stretchCloumns="1"设置第二列为拉伸列，让该列填满这一行所有剩余空间

<?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:id="@+id/TableLayout2"
    android:layout_width="fill_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:stretchColumns="1"
    tools:context=".MainActivity">
    <TableRow>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="one"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="two"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="three"/>

    </TableRow>
</TableLayout>

在这里插入图片描述

shrinkColumns(收缩列)

步骤:这里为了演示出效果,设置了5个按钮和一个文本框,在最外层的TableLayout中添加以下属性: android:shrinkColumns = “1”

设置第二个列为可收缩列,代码如下:

<?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:id="@+id/TableLayout2"
    android:layout_width="fill_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:shrinkColumns="1"
    tools:context=".MainActivity">
    <TableRow>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="one"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="two"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="three"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="four"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="five"/>
    </TableRow>
</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:id="@+id/TableLayout2"
    android:layout_width="fill_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"

    tools:context=".MainActivity">

    <TableRow>
        <TextView/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="用户名:"/>
        <EditText
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:minWidth="150dp"/>
        <TextView/>
    </TableRow>
        <TableRow>
            <TextView/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="密码:"/>
            <EditText
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:minWidth="150dp"/>
            <TextView/>
        </TableRow>
    <TableRow>
        <TextView/>
        <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="退出"/>
        <TextView/>
    </TableRow>
</TableLayout>

在这里插入图片描述

FrameLayout(帧布局)

帧布局可以说是六大布局中最为简单的一个布局，这个布局直接在屏幕上开辟出一块空白的区域，当我们往里面添加控件的时候，会默认把他们放到这块区域的左上角，而这种布局方式却没有任何的定位方式，所以它应用的场景并不多；帧布局的大小由控件中最大的子控件决定，但是我们也可以通过layout_gravity属性，指定到其他的位置！

常用属性

前景图像：永远处于帧布局最上面，直接面对用户的图像，就是不会被覆盖的图片。

两个属性：
android:foreground:设置帧布局容器的前景图像
android:foregroundGravity:设置前景图像显示的位置

<?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:id="@+id/TableLayout2"
    android:layout_width="fill_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:foreground="@mipmap/ic_launcher"
    android:foregroundGravity="right|top"
    tools:context=".MainActivity">
    <TextView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="#FF6143"/>
    <TextView
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:background="#78FE00"/>
    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#FFFF00"/>

</FrameLayout>

在这里插入图片描述
代码解析：很简单，三个TextView设置不同大小与背景颜色，依次覆盖，接着右下角的是前景图像，通过android：foregrou=“”设置前景图像的图像，android：foregroundGravity=“”设置前景图像的位置在右下角

随手指移动的图像
出了点BUG，所以暂且不放代码了
gif动图，根据八张图片帧率播放
package com.example.testlinelayout;

import androidx.appcompat.app.AppCompatActivity;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.widget.FrameLayout;
import java.util.Timer;
import java.util.TimerTask;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.FrameLayout;
import android.app.Activity;
import android.graphics.drawable.Drawable;

public class MainActivity extends AppCompatActivity {
    FrameLayout frame=null;
        Handler handler = new Handler()
        {
            int i=0;
            @Override
            public void handleMessage(Message msg)
            {
                if (msg.what == 0x123)
                {
                    i++;
                    move(i%8);
                }
                super.handleMessage(msg);
            }
        };
        void move(int i)
        {
            Drawable a = getResources().getDrawable(R.drawable.s_1);
            Drawable b = getResources().getDrawable(R.drawable.s_2);
            Drawable c = getResources().getDrawable(R.drawable.s_3);
            Drawable d = getResources().getDrawable(R.drawable.s_4);
            Drawable e = getResources().getDrawable(R.drawable.s_5);
            Drawable f = getResources().getDrawable(R.drawable.s_6);
            Drawable g = getResources().getDrawable(R.drawable.s_7);
            Drawable h = getResources().getDrawable(R.drawable.s_8);
            switch (i)
            {
                case 0:
                    frame.setForeground(a);
                    break;
                case 1:
                    frame.setForeground(b);
                    break;
                case 2:
                    frame.setForeground(c);
                    break;
                case 3:
                    frame.setForeground(d);
                    break;
                case 4:
                    frame.setForeground(e);
                    break;
                case 5:
                    frame.setForeground(f);
                    break;
                case 6:
                    frame.setForeground(g);
                    break;
                case 7:
                    frame.setForeground(h);
                    break;
            }
        }

    @Override
    protected  void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        frame = (FrameLayout) findViewById(R.id.myframe);
        new Timer().schedule(new TimerTask() {
            @Override
            public void run() {
                handler.sendEmptyMessage(0x123);
            }
        },0,170);
    }
}

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:id="@+id/GridLayout1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"

    android:orientation="horizontal"
    android:columnCount="4"
    android:rowCount="6"
    tools:context=".MainActivity">
    <TextView
        android:layout_columnSpan="4"
        android:layout_gravity="fill"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:text="0"
        android:textSize="50sp"
        android:background="#FFCCCC"/>
    <Button
        android:layout_columnSpan="2"
        android:gravity="fill"
        android:text="回退"/>
    <Button
        android:layout_columnSpan="2"
        android:gravity="fill"
        android:text="清空"/>
    <Button android:text="+"/>
    <Button android:text="1"/>
    <Button android:text="2"/>
    <Button android:text="3"/>
    <Button android:text="-"/>
    <Button android:text="4"/>
    <Button android:text="5"/>
    <Button android:text="6"/>
    <Button android:text="*"/>
    <Button android:text="7"/>
    <Button android:text="8"/>
    <Button android:text="9"/>
    <Button android:text="/"/>
    <Button
        android:layout_width="wrap_content"
        android:text="."/>
    <Button android:text="0"/>
    <Button android:text="="/>

</GridLayout>

在这里插入图片描述
代码解析：我们通过：android：layout_rowSpan与android：layout_columnSpan设置了组件横跨。多行或者多列的话，如果你要让组件填满横越过的行或列的话，需要添加下面这个属性：android：layout_gravity=“fill”。

用法归纳

1.先定义组件的对齐方式，android：roientation水平或者竖直，设置有多少行多少列
2.设置组件所在的行或列，记得是从0开始算的，不设置默认每个组件占一行一列
3.设置组件横跨几行或者几列；设置完毕后，需要在设置一个填充android:layout_gravity=”fill“

AbsoluteLayout(绝对布局)

绝对布局对机型的适配有要求，因此不是很常用，因此就不过多介绍

总结

建议使用:LinearLayout的weight权重属性+RelativeLayout来构建我们的界面

童年℃
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
第一行代码 android学习笔记 完整版
03-18
第一行代码 android学习笔记 修改完整版
第一行代码—Android第二版学习笔记
01-03
Android 第一行代码学习笔记第一章 概述1.1安卓系统架构1.2Android四大组件1.3项目结构1.4app目录结构1.5 项目运行原理1.6 res目录详解1.7日志工具的使用第二章 活动2.1 创建基本活动2.2 使用Intent在活动之间跳转...
Android学习笔记：UI-控件与布局
qq_39008113的博客
09-02 269
1.View类的常用属性: android:id设置控件的标识符号 android:layout_width设置子组件的布局宽度 android:layout_height设置子组件的布局高度 android:background设置控件的背景色 android:onClick设置控件的单击事件绑定监听器 android:visibility设置控件是否可见 android:alpha设置控件透明度（0-1之间的数值） android:padding设置子组件的内边距 android:layout_marg
RelativeLayout相对布局
健身房
07-13 119
RelativeLayout相对布局   使用LinearLayout有一个问题，就是当界面比较复杂的时候，需要嵌套多层的LinearLayout，这样就会降低UI Render的效率(渲染速度)。而且如果是listview或者GridView上的item，效率会更低。另外，太多层LinearLayout嵌套会占用更多的系统资源，还有可能引发StackOverflow。如果使用RelativeLayout的话，可能仅仅需要一层就可以完成了，以父容器或者兄弟组件参考 + margin + padding就可以
Android学习笔记之常用的布局类型
cool-wangtongzhou
05-03 985
常用的布局类型 线性布局 (LinearLayout) 相对布局(RelativeLayout） 帧布局 （FrameLayout) 表格布局(TableLayout) 网格布局 (GridLayout) 约束布局(ConstraintLayout)
Android学习笔记二：编写布局方式和常见布局
jinyeran的博客
07-01 283
界面布局编写包括在XML文件中编写布局（层次更清晰）和在Java代码中编写布局。 android:layout_centerInparent="true"//XML实现控件放到布局中间 layoutParams.addRule(RelativeLayout.CENTER_IN_PARENT);//Java实现控件放到布局中间 RelativeLayout relativeLayout=new RelativeLayout(this);//创建线性布局 TextView textView=new Tex
Android学习笔记-第二章 UI控件
xcsxchen
05-12 851
第二章 UI控件 一、视图组件View View类：是Android所有UI组件的父类，它代表了屏幕上一块空白的矩形区域。 ViewGroup类：作为其它UI组件的容器使用，ViewGroup是View的子类。 应用界面的组成 Android 的所有UI组件都是建立在View、ViewGroup的基础之上。对于一个Android应用的图形用户界面来说，ViewGroup作为容器来盛装其他组件，Vi...
《第一行代码》第二版学习笔记（1）——初识Android开发和活动组件
weixin_46750485的博客
04-16 861
《第一行代码》第二版第一章和第二章学习笔记，参考网课链接：【2022 最新 Android 基础教程，从开发入门到项目实战，看它就够了，更新中】 https://www.bilibili.com/video/BV19U4y1R7zV/?p=2&share_source=copy_web&vd_source=17d73b72d648e6763cecfd48ea369ec6
Android 开发艺术探索笔记 第六章 Android的Drawable
哆啦A梦的博客
10-25 376
一 Drawable的简介  Drawable表示的是一种图像的概念，可以是图片，也可以是通过颜色构造出各色各样的图像的效果。Drawable是一个抽象类，是所有的Drawable对象的基类，比如BitmapDrawable和ShapeDrawable.。在Drawable中的内部宽/高可以通过如下获得 bitmap.getIntrinsicHeight(); bitm
使用Intent在活动之间穿梭（Android学习笔记之第六课）
kerio123的博客
04-14 1548
一个应用中总会存在多个活动，通过这些活动的相互跳转，数据传递，逻辑处理，便可完成一个应用的功能。在各个活动的跳转时，会通过Intent(意图),Intent使Activity跳转大致可分为显示意图和隐式意图.
Android高级终端开发学习笔记（《疯狂Android讲义》第2章-第10章）
weixin_43749999的博客
01-03 2853
Android疯狂讲义前10章知识点总结 /-------------------------10-31号晚上学习笔记----------------------------/ 在设置了最小支持版本为18及以上的时候，需要将获得actionBar组件的包引用改为 import androidx.appcompat.app.ActionBar; 即可。 2.11.3：启用程序图标导航： 已实现 2.11.4：添加ActionView组件： 有些时候只可以使用监听事件处理机制 3.2基于监听的事件处理： 控制
Python基础教程学习笔记 第一章 基础知识
09-03
主要介绍了Python基础教程学习笔记 第一章 基础知识 ,需要的朋友可以参考下
计算机应用基础第一章笔记最终版.pdf
11-18
计算机应用基础第一章笔记最终版.pdf
恶意代码第一章笔记.txt
04-18
恶意代码第一章笔记
python自学教程-04-自定义JavaScript.ev4.rar
05-21
python自学教程-04-自定义JavaScript.ev4.rar
严蔚敏数据结构全套C语言实现
05-21
严蔚敏数据结构全套C语言实现
Java_Android的可扩展媒体播放器.zip
05-21
Java_Android的可扩展媒体播放器
源代码-DBAdmin 在线Access数据库管理程序 v2.3.zip
最新发布
05-21
源代码-DBAdmin 在线Access数据库管理程序 v2.3.zip
android学习笔记
04-01
Android 是一个开源的操作系统，主要用于移动设备，如智能手机、平板电脑等。它基于 Linux 内核，提供了丰富的应用程序框架和 API，支持多种开发语言，如 Java、C/C++、Kotlin 等。 Android 应用程序由多个组件组成...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值