Android四种常见布局方式示例教程

2024-04-02 19:04:59 724人浏览八月长安

摘要

目录一、线性布局LinearLayout有两种排序方式线性布局的权重二、相对布局RelativeLayout相对位置的取值三、网格布局GridLayout四、滚动视图ScrollVi

一、线性布局LinearLayout

有两种排序方式

orientation属性值为horizontal时，内部视图在水平方向从左往右排列。
orientation属性值为vertical时，内部视图在垂直方向从上往下排列。

如果不指定orientation属性，则LinearLayout默认水平方向排列。

线性布局的权重

指线性布局的下级视图各自拥有多大比例的宽高。

属性名为layout_weight，但该属性不在LinearLayout节点设置，而在线性布局的直接下级视图设置，表示改下级视图占据的宽高比例。

layout_width为0dp时，表示水平方向的宽度比例
layout_height为0dp时，表示垂直方向的高度比例

例：

第一个线性布局：width = 0dp 说明在水平方向设置宽度比例，weight = 1，占据weight总数的1/2，则占据一半空间。

第二个线性布局：height = 0dp 说明在垂直方向设置宽度比例，weight = 1，占据weight总数的1/3，则占据三分之一空间。

    <LinearLayout
        Android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView
            android:layout_width="0dp"//宽度为0dp，通过权重设置宽度比例
            android:layout_height="wrap_content"
            android:layout_weight="1"//weight为1，下面的weight也为1，占1/2，即宽度比例占1/2
            android:text="横排第一个"
            android:textSize="17sp"
            android:textColor="#000000"/>
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="横排第二个"
            android:textSize="17sp"
            android:textColor="#000000"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="0dp"//高度为0dp，通过权重设置高度比例
            android:layout_weight="1"//weight为1，下面的weight为2，占1/3，即宽度比例占1/3
            android:text="竖排第一个"
            android:textSize="17sp"
            android:textColor="#000000"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_weight="2"
            android:text="竖排第二个"
            android:textSize="17sp"
            android:textColor="#000000"/>
    </LinearLayout>

二、相对布局RelativeLayout

相对布局的视图位置由平级或上级视图决定，用于确定下级视图位置的参考物分两种：

与该视图自身平级的视图
该视图的上级视图

如果不设定下级视图的参照物，那么下级视图默认显示在RelativeLayout内部的左上角。

相对位置的取值

例:

    <TextView
        android:id="@+id/tv_center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ffffff"
        android:layout_centerInParent="true"
        android:text="中间"
        android:textSize="11sp"
        android:textColor="#000000"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ffffff"
        android:layout_centerHorizontal="true"
        android:text="水平中间"
        android:textSize="11sp"
        android:textColor="#000000"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ffffff"
        android:layout_centerVertical="true"
        android:text="垂直中间"
        android:textSize="11sp"
        android:textColor="#000000"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ffffff"
        android:layout_alignParentLeft="true"
        android:text="上级左边对齐"
        android:textSize="11sp"
        android:textColor="#000000"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ffffff"
        android:layout_toLeftOf="@id/tv_center"
        android:layout_alignTop="@id/tv_center"
        android:text="中间左边"
        android:textSize="11sp"
        android:textColor="#000000"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ffffff"
        android:layout_above="@id/tv_center"
        android:layout_alignLeft="@id/tv_center"
        android:text="中间上边"
        android:textSize="11sp"
        android:textColor="#000000"/>

三、网格布局GridLayout

网格布局支持多行多列的表格排列。

网格布局默认从左往右、从上到下排列，新增两个属性：

columnCount属性：指定网格的列数，即每行能放多少视图。
rowCount属性：指定网格行数，即每列能放多少视图。

例:

<?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:columnCount="2"
    android:rowCount="2">
    <TextView
        android:layout_width="0dp"//设置权重，占满屏幕
        android:layout_columnWeight="1"
        android:layout_height="60dp"
        android:background="#ffcccc"
        android:text="浅红色"
        android:gravity="center"//设置文字位于网格中间
        android:textColor="#000000"
        android:textSize="17sp"/>
    <TextView
        android:layout_width="0dp"
        android:layout_height="60dp"
        android:layout_columnWeight="1"
        android:background="#ffaa00"
        android:text="浅红色"
        android:gravity="center"
        android:textColor="#000000"
        android:textSize="17sp"/>
    <TextView
        android:layout_width="0dp"
        android:layout_height="60dp"
        android:layout_columnWeight="1"
        android:background="#00ff00"
        android:text="绿色"
        android:gravity="center"
        android:textColor="#000000"
        android:textSize="17sp"/>
    <TextView
        android:layout_width="0dp"
        android:layout_height="60dp"
        android:layout_columnWeight="1"
        android:background="#660066"
        android:text="深紫色"
        android:gravity="center"
        android:textColor="#000000"
        android:textSize="17sp"/>
</GridLayout>

四、滚动视图ScrollView

有两种：

ScrollView：垂直方向的滚动视图，垂直方向滚动时，layout_width属性值设置为match_parent，layout_height 属性值设置为wrap_content。
HorizontalScrollView：水平方向的滚动视图，水平方向滚动时，layout_width属性值设置为wrap_content，layout_height属性值设置为match_parent。

例:

水平方向两个View共600dp，超出屏幕，所以上级视图使用HorizontalScrollView，宽度自适应，高度跟随上级视图。

<?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">
    <HorizontalScrollView
        android:layout_width="wrap_content"
        android:layout_height="200dp">
<!--        水平方向的线性布局-->
        <LinearLayout
            android:layout_width="wrap_content"//宽度自适应
            android:layout_height="match_parent"//高度跟随上级视图
            android:orientation="horizontal">//水平排列
        <View
            android:layout_width="300dp"//宽度自定义，超出屏幕
            android:layout_height="match_parent"
            android:background="#aaffff"/>
        <View
            android:layout_width="300dp"
            android:layout_height="match_parent"
            android:background="#ffff00"/>
        </LinearLayout>
    </HorizontalScrollView>
<!--        垂直方向的线性布局-->
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="vertical">
        <View
            android:layout_width="match_parent"
            android:layout_height="400dp"
            android:background="#aaffff"/>
        <View
            android:layout_width="match_parent"
            android:layout_height="400dp"
            android:background="#ffff00"/>
</LinearLayout>
    </ScrollView>
</LinearLayout>

到此这篇关于Android四种常见布局方式示例教程的文章就介绍到这了,更多相关Android布局内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: Android四种常见布局方式示例教程

本文链接: https://www.lsjlt.com/news/168589.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

Android四种常见布局方式示例教程

目录一、线性布局LinearLayout有两种排序方式线性布局的权重二、相对布局RelativeLayout相对位置的取值三、网格布局GridLayout四、滚动视图ScrollVi...

99+

2024-04-02
android实现线程间通信的四种常见方式

1，通过Handler机制主线程中定义Handler,子线程发消息，通知Handler完成UI更新,Handler对象必须定义在主线程中，如果是多个类直接互相调用，就不是很方便，...

99+

2024-04-02
java中Swing五种常见的布局方式

Java中Swing常见的布局方式有以下五种：1. BorderLayout（边界布局）：将容器分为东、南、西、北和中五个区域，每个...

99+

2023-09-16

java
Android 单例模式的四种实现方式

目录一.饿汉式二.懒汉式三.双重检查加锁方式四.静态内部类方式总结一.饿汉式 public class SingletionStarving { private sta...

99+

2024-04-02
vue+uniapp瀑布流布局多种实现方式示例代码

目录前言一、实现原理二、代码实现三.uniapp实现四、多列实现总结前言瀑布流布局是网页设计常见的一种布局，一般用于图片多列展示。列宽固定，图片根据自身高度自适应交错排列。一、...

99+

2023-03-23

uniapp实现瀑布流 uni-app瀑布流 vue实现瀑布流布局
Android常用布局使用技巧示例讲解

目录一、FrameLayout 帧布局二、ConstraintLayout 约束布局1、相对定位2、角度定位3、权重和0dp4、控件排成一排平均分布(默认)5、Group分组6、Ba...

99+

2023-05-17

Android常用布局特点 Android常用布局
Android三种常见的图片压缩方式

目录1、质量压缩2、按比例压缩（尺寸压缩、采样率压缩）3、鲁班压缩（推荐）下面就为大家带来3种比较常见的压缩方式先给出一组数据原图：width:2976; height:297...

99+

2024-04-02
异常try catch的常见四类方式(案例代码)

目录第1类：嵌套模式第二类：分而治之方式第三类：异常合并方式第四类：大合并方式第1类：嵌套模式 package day14; import java.io.FileInputStre...

99+

2023-05-19

异常try catch try catch常见异常
Web页面布局方式的方法教程

本篇内容介绍了“Web页面布局方式的方法教程”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！1、元素漂移把一...

99+

2024-04-02
低代码平台四大常见用例开发的方法教程

本篇内容主要讲解“低代码平台四大常见用例开发的方法教程”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“低代码平台四大常见用例开发的方法教程”吧!如今，低代码对很多...

99+

2024-04-02
CSS布局教程：实现瀑布流式卡片布局的最佳方法

引言：在现代网页设计中，瀑布流式卡片布局是非常流行的一种布局方式。它能够有效地展示大量的内容，并且在不同的屏幕尺寸下都能够自适应，给用户带来良好的浏览体验。本文将介绍实现瀑布流式卡片布局的最佳方法，并提供具体的代码示例。一、实现瀑布流式布局...

99+

2023-10-21

CSS 瀑布流布局
Android使用ViewStub实现布局优化方法示例

目录实践过程实现方式知识点实践过程 Hello，大家好啊，我是小空，今天带大家了解下动态加载控件ViewStub。在平时开发中经常会遇到复杂布局，而每一个view都是会占据内存和消...

99+

2024-04-02
Map集合的四种遍历方式代码示例

很久以前写的代码，和上一个做比较吧！便于以后查看。import java.util.HashMap;import java.util.Iterator;import java.util.Map;public class TestMap { ...

99+

2023-05-30

map 遍历 ma
CSS布局教程：实现两栏响应式布局的最佳方法

简介：在网页设计中，响应式布局是一种非常重要的技术，它能使网页根据用户设备的屏幕大小和分辨率自动调整布局，提供更好的用户体验。在本教程中，我们将介绍如何使用CSS来实现一个简单的两栏响应式布局，并提供具体的代码示例。一、HTML结构：首先，...

99+

2023-10-21

响应式布局 CSS布局两栏布局
CSS布局教程：实现三栏响应式布局的最佳方法

前言：在网页设计中，合理的布局是非常重要的。而响应式布局则是指网页能够根据不同设备的屏幕尺寸自动调整和适应布局，以实现更好的用户体验。本文将介绍一种实现三栏响应式布局的最佳方法，并提供具体的代码示例。一、HTML结构首先，我们需要确定HTM...

99+

2023-10-21

响应式布局 CSS布局方法三栏布局
flutter中的布局和响应式app方法示例

目录flutter中的布局（使用）放置一个组件app 本身就是个组件Material apps 和 Non-Material apps自适应和响应式flutter实现响应式的方法小结...

99+

2022-12-08

flutter布局响应式app flutter 响应式app
解决移动端响应式布局常见问题的方案

移动端响应式布局的常见问题及解决方案随着移动互联网的快速发展，越来越多的人开始使用移动设备访问网页，这也给网页设计师带来了新的挑战。为了适应不同设备的屏幕尺寸，移动端响应式布局成为了一种流行的设计趋势。然而，在实际应用中，我们...

99+

2024-01-29

解决方案布局响应式设计
详解Java创建线程的五种常见方式

目录Java中如何创建线程呢？1.显示继承Thread，重写run来指定现成的执行代码。2.匿名内部类继承Thread，重写run来执行线程执行的代码。3.显示实现Runnable接...

99+

2024-04-02
Go 语言分布式编程教程：如何解决分布式系统中的常见问题？

随着互联网的发展，分布式系统在企业级应用中越来越普遍。分布式系统可以提高系统的可靠性、可扩展性和性能。然而，在分布式系统中，有许多常见问题需要解决，例如网络延迟、节点故障、数据一致性等。在本篇文章中，我们将介绍如何使用 Go 语言解决分布...

99+

2023-08-26

分布式教程面试
Java项目打包发布到maven私仓常见的几种方式

目录前言发布到maven私仓的步骤1.在maven的settings.xml中< servers >节点配置用户名和密码，形如下：2、指定发布到nexus私仓的url并进...

99+

2024-04-02