【安卓开发】安卓布局控件

已于 2022-08-02 15:44:52 修改
阅读量671 收藏
点赞数 1
分类专栏： andriod开发 文章标签： android
于 2022-08-01 12:04:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_62361050/article/details/126083622
版权

目录

一、布局的种类和页面的关系

在这里插入图片描述

打开布局相关代码 .xml 我们可以看到一些组件：

在这里插入图片描述

这些组件共同构成安卓页面的显示，我们可以用一张图来解释一下布局的原理：

在这里插入图片描述

所有组件必须放在画布上面。

所有的组件都有其对应的属性，比如位置、大小、方向、颜色等等：

在这里插入图片描述



二、显示一张图片

  1. 首先建立一个工程：

在这里插入图片描述

  1. 打开布局文件，我们删除多余的代码：

在这里插入图片描述

在这里插入图片描述

  1. 随便去网上下载一张图片，保存在电脑中，在工程 res 文件下的 drawable-hdpi 文件中复制粘贴添加这张图片：

  1. 在组件属性中添加背景色，Alt + ‘/’ 添加 drawable/bg 图片文件：

在这里插入图片描述

在这里插入图片描述

  1. 打开模拟器中的APP，显示成功：

在这里插入图片描述



三、显示两张图片

我们先画一下布局原理图，显示两张图片，我们需要有一个总布局，相当于画布（红色框框），在画布中有两个子布局（绿色框框），这样我们就能实现显示两张图片。
在这里插入图片描述

  1. 新建一个工程，打开 .xml 布局代码，删除多余代码，新建两个布局（同上）：

在这里插入图片描述

  1. 模仿总布局写出它的宽度、高度等属性：

在这里插入图片描述

  1. 想要上下显示两个美女，我们需要为上面的图片添加 id 属性（注意这是属性内容是 +id），并且在第二张图片的属性中添加位置属性 layout_below ，位置在第一张图片下面，位置属性内容是 @id/dp1 ，否则第二张图片会覆盖第一张图片：

在这里插入图片描述

  1. 下面我们看一下显示效果：

在这里插入图片描述



四、相对布局RelativeLayout常用属性


1. wrap_content

android:layout_width="wrap_content"
android:layout_height="wrap_content"

该属性是指显示实际图片的大小，fill_parent 和 match_parent 是适应屏幕大小，即撑满屏幕。

在这里插入图片描述

测试结果：

在这里插入图片描述


2. 相对于父控件，例如：android:layout_alignParentTop=“true”


android:layout_alignParentTop属性

android:layout_alignParentTop="true"

该属性的作用是控件的顶部与父控件的顶部对齐。

测试结果：

在这里插入图片描述

该结果与上面结果没什么区别，因为默认是顶部对齐。


android:layout_alignParentBottom属性

android:layout_alignParentBottom="true"

该属性的作用是控件的顶部与父控件的底部对齐。

测试结果：

在这里插入图片描述


android:layout_alignParentLeft属性

android:layout_alignParentLeft="true"

该属性的作用是控件的顶部与父控件的左部对齐。

测试结果：

在这里插入图片描述


android:layout_alignParentRight属性

android:layout_alignParentRight="true"

该属性的作用是控件的顶部与父控件的右部对齐。

测试结果：

在这里插入图片描述


3. 相对给定Id控件，例如：android:layout_above="@id/**"属性


android:layout_above属性

//为了看出效果我们将图片1放在底部
android:layout_alignParentBottom="true"		//图片1放在父控件底部

android:layout_above="@id/dp1"		//图片2 放在图片1上面

该属性的作用是控件的底部置于给定ID的控件之上。

测试结果：

在这里插入图片描述


android:layout_below属性

android:layout_below="@id/dp1"

该属性的作用是控件的底部置于给定ID的控件之下。

测试结果：

在这里插入图片描述


android:layout_toLeftOf属性

//为了看出效果，先将图片1放在父控件右侧
android:layout_alignParentRight="true"	//图片1放在父控件右侧

android:layout_toLeftOf="@id/dp1"	//图片2放在图片1左侧

该属性的作用是控件的右边缘与给定ID的控件左边缘对齐。

测试结果：

在这里插入图片描述


android:layout_toRightOf属性

android:layout_toRightOf="@id/dp1"

该属性的作用是控件的左边缘与给定ID的控件右边缘对齐。

测试结果：

在这里插入图片描述


android:layout_alignBaseline属性

android:layout_alignBaseline="@id/dp1"

该属性的作用是控件的baseline与给定ID的baseline对齐。

测试结果：


android:layout_alignTop属性

在这里为了方便看清效果，我们交换一下图片，小图片是图片1，大图片是图片2，小图片相对大图片进行对齐。

android:layout_alignTop="@id/dp2"

该属性的作用是控件的顶部边缘与给定ID的顶部边缘对齐。

测试结果：

在这里插入图片描述


android:layout_alignBottom属性

android:layout_alignBottom="@id/dp2"

该属性的作用是控件的底部边缘与给定ID的底部边缘对齐。

测试结果：

在这里插入图片描述


android:layout_alignLeft属性

android:layout_alignLeft="@id/dp2"

该属性的作用是控件的左边缘与给定ID的左边缘对齐。

测试结果：

在这里插入图片描述


android:layout_alignRight属性

android:layout_alignRight="@id/dp2"

该属性的作用是控件的左边缘与给定ID的右边缘对齐。

测试结果：

在这里插入图片描述


4. 居中，例如：android:layout_centerInParent=“true”


android:layout_centerHorizontal属性

android:layout_centerHorizontal="true"

该属性的作用是水平居中。

测试结果：

在这里插入图片描述


android:layout_centerVertical属性

android:layout_centerVertical="true"

该属性的作用是垂直居中。

测试结果：

在这里插入图片描述


android:layout_centerInParent属性

android:layout_centerInParent="true"

该属性的作用是位于父控件的中央。

测试结果：

在这里插入图片描述



五、基础控件之Button，TextView，EditText，ImageView制作一个登陆界面

需要用到的组件：

TextView：文本
EditText：文本框
Button：按钮

具体实现过程如下：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >
    
    <RelativeLayout 
        android:layout_width="400dp"
        android:layout_height="150dp"
        android:layout_centerInParent="true"
        android:background="#ff0000"
        >
        
        <TextView 	
            android:id="@+id/user"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="用户"
            android:layout_marginTop="10dp"
            android:textSize="20dp"
            android:textColor="#ffffff"
            />
        
       <EditText 
           android:id="@+id/ed1"
           android:layout_width="320dp"
           android:layout_height="40dp"
           android:layout_toRightOf="@id/user"
           />
       
       <TextView 
            android:id="@+id/passwd"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="密码"
            android:layout_marginTop="10dp"
            android:textSize="20dp"
            android:layout_below="@id/user"
            android:textColor="#ffffff"
            />
        
       <EditText 
           android:id="@+id/ed2"
           android:layout_width="320dp"
           android:layout_height="40dp"
           android:layout_toRightOf="@id/user"
           android:layout_below="@id/ed1"
           />
       
       <Button 
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="确定"
           android:layout_below="@id/ed2"
           android:layout_alignParentRight="true"
           />
       
    </RelativeLayout>
    
</RelativeLayout>

效果图：

在这里插入图片描述



六、padding和margin

padding 英文翻译为衬料，衬垫的意思，在布局中被叫做内边距，margin 英文翻译为页边距的意思，在布局中为外边界的意思，具体可以用一张图来解释：

在这里插入图片描述

android:layout_marginLeft="**dp"
android:layout_marginRight="**dp"
android:layout_marginTop="**dp"
android:layout_marginBottom="**dp"

android:paddingLeft="**dp"
android:paddingRight="**dp"
android:paddingTop="**dp"
android:paddingBottom="**dp"

利用边距值调整对登录界面进行调整：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >
    
    <RelativeLayout 
        android:layout_width="400dp"
        android:layout_height="150dp"
        android:layout_centerInParent="true"
        android:background="#ffffff"
        android:layout_marginTop="10dp"
        >
        
        <ImageView 
            android:id="@+id/img1"
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:background="#ff0000"
            android:src="@drawable/user"
            android:layout_marginTop="10dp"
            
            />
        
        <ImageView 
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:background="#ff0000"
            android:src="@drawable/passwd"
            android:layout_below="@id/img1"
            android:layout_marginTop="15dp"
            
            />
        
        <TextView 
            android:id="@+id/user"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="用户"
            android:layout_marginTop="10dp"
            android:layout_marginLeft="30dp"
            android:textSize="20dp"
            android:textColor="#000000"
            />
        
       <EditText 
           android:id="@+id/ed1"
           android:layout_width="320dp"
           android:layout_height="40dp"
           android:layout_toRightOf="@id/user"
           android:layout_marginLeft="5dp"
           
           />
       
       <TextView 
            android:id="@+id/passwd"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="密码"
            android:layout_marginTop="15dp"
            android:layout_marginLeft="30dp"
            android:textSize="20dp"
            android:layout_below="@id/user"
            android:textColor="#000000"
            />
        
       <EditText 
           android:id="@+id/ed2"
           android:layout_width="320dp"
           android:layout_height="40dp"
           android:layout_toRightOf="@id/user"
           android:layout_marginLeft="5dp"
           android:layout_below="@id/ed1"
           />
       
       <Button 
           android:id="@+id/btn2"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="取消"
           android:layout_below="@id/ed2"
           android:layout_alignParentRight="true"
           android:layout_marginRight="120dp"
           android:layout_marginTop="20dp"
           />
       
       <Button 
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="确定"
           android:layout_marginRight="40dp"
           android:layout_below="@id/ed2"
           android:layout_toLeftOf="@id/btn2"
           android:layout_marginTop="20dp"
           />
       
    </RelativeLayout>
    
</RelativeLayout>

效果显示：

在这里插入图片描述



七、相对布局综合小演练—智能家居刷卡界面

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/bg_shopping_menu"
    tools:context=".MainActivity" >

    <ImageView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/bg_shopping_menu"
        />
    
    <ImageView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/pic_rf"
        android:layout_centerInParent="true"
        />
    
    <ImageView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/card"
        android:layout_centerInParent="true"
        android:paddingLeft="80dp"
        android:paddingBottom="15dp"
        />
    
    <Button 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="刷卡"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="30dp"
        />
    
    <RelativeLayout 
        android:layout_width="match_parent"
        android:layout_height="35dp"
        android:background="#00ff00"
        >
        
        <TextView 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="智能家居刷卡界面"
        android:textSize="15dp"
        android:layout_marginTop="8dp"
        android:layout_marginLeft="15dp"
        
        />
        
        <Button 
            android:id="@+id/btn2"
            android:layout_width="wrap_content"
        	android:layout_height="wrap_content"
        	android:text="注册"
        	android:textSize="15dp"
        	android:layout_alignParentRight="true"
        	android:layout_marginRight="10dp"
            />
        
        <Button 
            android:layout_width="wrap_content"
        	android:layout_height="wrap_content"
        	android:text="查询信息"
        	android:textSize="15dp"
			android:layout_toLeftOf="@id/btn2"

            />
        
    </RelativeLayout>

</RelativeLayout>

效果：

在这里插入图片描述

按键美化的小技巧（精美博文）

https://blog.csdn.net/tracydragonlxy/article/details/88552262

经过上述技巧美化以后：

在这里插入图片描述



八、线性布局

1. 介绍

线性布局，所有组件都按照线性排列，不是横，就是竖。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

</LinearLayout>

在这里插入图片描述

在这里插入图片描述

2. 线性布局常用属性

在这里插入图片描述

3. 线性布局登录框应用

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >
 	
   <!-- 登录框区域 -->
   <LinearLayout 
        android:layout_width="200dp"
        android:layout_height="70dp"
        android:layout_centerInParent="true"
        <!-- 账号密码文本和登录框两个区域水平排列 -->
        android:orientation="horizontal"
        >

        <LinearLayout 
            <!-- 账号密码文本区域占比为1 -->
            android:layout_weight="1"	
            <!-- 水平方向自由分配 -->
            android:layout_width="0dp" 	
            android:layout_height="70dp"
            <!-- 账号和密码文本设置垂直排布 -->
            android:orientation="vertical"
            <!-- 添加分割线文件 -->
            android:divider="@drawable/fenge"
            <!-- 设置分割线内边距 -->
     	    android:dividerPadding="2dp"
     	    <!-- 设置分割线显示方式 -->
       		android:showDividers="middle|end"
            >
            
            <TextView 
                <!-- 账号文本宽度适应父组件，达到水平居中效果 -->
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:text="账号"
                <!-- 账号文本居中 -->
                android:gravity="center"
                <!-- 账号文本垂直占比为1 -->
                android:layout_weight="1"
                />
            
            <TextView 
                <!-- 密码文本宽度适应父组件，达到水平居中效果 -->
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:text="密码"
                <!-- 密码文本居中 -->
                android:gravity="center"
                <!-- 密码文本垂直占比为1 -->
                android:layout_weight="1"
                />
            
        </LinearLayout>
        
         <LinearLayout 
            <!-- 账号密码输入框区域占比为5 -->
            android:layout_weight="5"	
            <!-- 水平方向自由分配 -->
            android:layout_width="0dp" 	
            android:layout_height="70dp"
            <!-- 账号和密码输入框设置垂直排布 -->
            android:orientation="vertical"
            <!-- 添加分割线文件 -->
            android:divider="@drawable/fenge"
            <!-- 设置分割线内边距 -->
     	    android:dividerPadding="2dp"
     	    <!-- 设置分割线显示方式 -->
       		android:showDividers="middle|end"
            >
             
             <EditText 
                <!-- 账号输入框适应父组件，达到填充满父组件效果 -->
                android:layout_width="match_parent"
                <!-- 垂直方向自由分配 -->
                android:layout_height="0dp"
                <!-- 垂直方向占比为1 -->
                android:layout_weight="1"
                 />
             
             <EditText 
                <!-- 密码输入框适应父组件，达到填充满父组件效果 -->
                android:layout_width="match_parent"
                <!-- 垂直方向自由分配 -->
                android:layout_height="0dp"
                <!-- 垂直方向占比为1 -->
                android:layout_weight="1"
                 />
         </LinearLayout>
    </LinearLayout>
</RelativeLayout>

分割线文件：（不常用）

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
	<!-- 添加一条分割线 -->
    android:shape="line"
    >
    
    <size 
    	<!-- 分割线尺寸 -->
        android:width="200dp"
        android:height="2dp"
        />
    <!-- 分割线颜色 -->
    <stroke android:color="#00ff00"/>

</shape>

注意：

  1. android:layout_width/height="0dp"和ndroid:layout_weight="n"要搭配使用才能达到比例分配效果。
  2. android:orientation=“”表示线性排列方式，分为水平和垂直。
  3. Layout_gravity是针对父控件子控件的对齐方式，gravity针对自己的子空间的对齐方式。

效果图：

在这里插入图片描述

添加分割线以后的效果：（不常用）

在这里插入图片描述

IT阳晨。
关注
专栏目录
android控件的布局介绍及使用（全）
11-25
Android 中常用的控件介绍及其相应的使用，内含实例代码
Android布局控件
静待岁月的博客
11-24 381
本文转载http://blog.csdn.net/sky_plum_blossom/article/details/49333991
Android控件（示例）
最新发布
m0_47449012的博客
08-11 1434
Android控件使用示例。
Android 控件与布局
m0_52941887的博客
07-25 392
Android常用控件与常用布局
Android控件布局
u010857572的博客
10-10 388
Android开发编码规范之布局规则（三） 1.TextView布局需要注意以下几点 1.1字体到的内边距和外边距 1.2字体的大小和颜色 1.3文字的行数和文字内容过长是的 @dimen/h5 @color/skin_c5 android:lines="3" android:ellipsize="end"
如何让安卓（Android）子控件超出父控件的范围显示
09-01
在Android开发中，有时我们需要设计布局时，让子控件的部分内容超出其父控件的边界，以实现某些特殊的视觉效果或交互体验。例如，一个底部导航栏可能需要部分悬停在屏幕下方，或者一个按钮需要延伸到屏幕边缘。本篇...
Android开发实现布局中为控件添加选择器的方法
08-29
Android开发实现布局中为控件添加选择器的方法 在 Android 开发中，为控件添加选择器是一种常见的操作技巧，这种方法可以使得控件的展示效果更加丰富多样，提高用户体验。添加选择器的方法主要涉及到布局设置的相关...
安卓开发(4)——安卓布局控件
weixin_44999992的博客
05-06 927
当我们给一个view设置了android:layout_weight属性，意味着赋予它话语权，常规思维就是谁的weight大，谁说了算（空间占比大）。res->drawable-mdpi->右键-> Android->Android XML File->起个名称xxx.xml。既然是线性排列，肯定就不仅只有一个方向，这里一般只有两个方向：水平方向和垂直方向。LinearLayout又称作线性布局，是一种非常常用的布局。这个布局会将它所包含的控件在线性方向上依次排列。TextView：文本框。
Android 布局组件
weixin_34344677的博客
07-31 125
布局介绍 布局用于定义Activity中UI元素的排列结构，Android提供了LinearLayout线性布局、RelativeLayout相对布局 、FrameLayout帧布局 、TableLayout表格布局、AbsoluteLay...
android 常用控件布局汇总
09-03
android 常用控件如：ProgressBar、ActionBar、Switch、ListView 、PopupWindow....等的用法，各种Style的写法以及自定义常用控件 android 五大布局的汇总及用法
Android控件布局（浅谈5种布局）
01-20
学习：布局和控件的使用，学会搭建常用布局。 程序调试的方法，使用logcat定位日志。 样式和主题国际化 布局的类型：LinearLayout（线性布局）、RelativeLayout（相对布局）、FrameLayout（帧布局）、TableLayout（表格布局）、Absolute（绝对布局） 1.LinearLayout线性布局：主要以水平和竖直方式来显示界面中的控件。左右，上下。 在线性布局中有一个特别重要的属性： orientation，它的值为 vertical（竖直） horizontal（水平） 控件属性： layout.width以及layout.height 它们的值
5_Android的控件布局
广源的博客
08-16 514
1.控件布局的基本概念 2.控件布局的种类 3.各类布局的方法特点 4.线性布局(LinearLayout) 5.线性布局(LinearLayout)的嵌套使用 6.相对布局(RelativeLayout)详解 1.控件布局的基本概念 所谓的控件布局方法，就是指控制控件在Activity当中的位置、大小、颜色以及其他控件样式属性的方法。 1.使用布局文件完成控件布局（activi...
安卓的布局和控件
N_Y_S的博客
07-29 305
LinearLayout(线性布局)RelativeLayout（相对布局）TableLayout(表格布局)FrameLayout(帧布局)2.Android的基础控件，常用属性有什么。1.Android有几大布局。ConstraintLayout（约束布局）RadioGroup常用属性。CheckBox复选。...
Android入门（二）——常见布局与控件
rookie_0_0的博客
04-01 5003
一、常见界面布局及案例 二、常见界面控件及案例 三、Activity
安卓常用布局控件、监听器总结
菜鸟的成长步伐的博客
11-26 2150
布局管理器 名称 作用 要点 特点 总结 备注 LinearLayout 线性布局 控制组件 横向 或者 纵向 排列 android:layout_gravity 是控制组件本身的对齐方式, android:gravity是控制本容器子组件的对齐方式; 适用性强 傻瓜式的依次顺序布局   RelativeLayout 相对布局 子组件的位置总是相对兄
黑马程序员-Android控件大全以及各布局控间的使用方式
a642384938的专栏
06-03 1253
------- android培训、java培训、期待与您交流！ ---------- 控件讲解 ?在 Windows 下搭建 Android 开发环境   ?Android 项目的目录结构说明 ?写一个简单的 Hello World 程序   一、在 Windows 下搭建 Android 开发环境 1、安装 JDK (Java Development Kit) http://
Android开发：基础控件与布局详解
本文将深入探讨Android开发中的基础控件及其布局方式，为初学者和开发者提供有价值的参考。首先，Android和iOS的控件使用原理相似，都基于事件驱动机制，支持接口回调和委托代理。尽管两者控件功能相近，但布局方式...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

IT阳晨。

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值