Android App开发-简单控件（2）——视图基础

2.2　视图基础

本节介绍视图的几种基本概念及其用法，包括如何设置视图的宽度和高度，如何设置视图的外部间距和内部间距，如何设置视图的外部对齐方式和内部对齐方式等等。

2.2.1　设置视图的宽高

手机屏幕是块长方形区域，较短的那条边叫作宽，较长的那条边叫作高。App控件通常也是长方形状，控件宽度通过属性android:layout_width表达，控件高度通过属性android:layout_height表达，宽高的取值主要有下列3种：

（1）match_parent：表示与上级视图保持一致。上级视图的尺寸有多大，当前视图的尺寸就有多大。

（2）wrap_content：表示与内容自适应。对于文本视图来说，内部文字需要多大的显示空间，当前视图就要占据多大的尺寸。但最宽不能超过上级视图的宽度，一旦超过就要换行；最高不能超过上级视图的高度，一旦超过就会隐藏。

（3）以dp为单位的具体尺寸，比如300dp，表示宽度或者高度就是这么大。在XML文件中采用以上任一方式均可设置视图的宽高，但在Java代码中设置宽高就有点复杂了，首先确保XML中的宽高属性值为wrap_content，这样才允许在代码中修改宽高。接着打开该页面对应的Java代码，依序执行以下3个步骤：

步骤一，调用控件对象的getLayoutParams方法，获取该控件的布局参数，参数类型为ViewGroup.LayoutParams。

步骤二，布局参数的width属性表示宽度，height属性表示高度，修改这两个属性值，即可调整控件的宽高。

步骤三，调用控件对象的setLayoutParams方法，填入修改后的布局参数使之生效。不过布局参数的width和height两个数值默认是px单位，需要将dp单位的数值转换为px单位的数值，然后才能赋值给width属性和height属性。下面是把dp大小转为px大小的方法代码：

// 根据手机的分辨率从 dp 的单位 转成为 px(像素)
public static int dip2px(Context context, float dpValue) {
  // 获取当前手机的像素密度（1个dp对应几个px）
  float scale = context.getResources().getDisplayMetrics().density;
  // 四舍五入取整
  return (int) (dpValue * scale + 0.5f); 
}

有了上面定义的公共方法dip2px，就能将某个dp数值转换成px数值，比如准备把文本视图的宽度改为300dp，那么调整宽度的Java代码示例如下：

// 获取名为tv_code的文本视图
TextView tv_code = findViewById(R.id.tv_code);
// 获取tv_code的布局参数（含宽度和高度）
ViewGroup.LayoutParams params = tv_code.getLayoutParams();
// 修改布局参数中的宽度数值，注意默认px单位，需要把dp数值转成px数值
params.width = Utils.dip2px(this, 300);
 // 设置tv_code的布局参数
tv_code.setLayoutParams(params);

接下来通过演示页面并观察几种尺寸设置方式的界面效果，主要通过背景色区分当前视图的宽高范围，详细的XML文件内容如下所示：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:background="#00ffff"
        android:text="视图宽高采用warp_content定义"
        android:textColor="#000000"
        android:textSize="20sp" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:background="#00ffff"
        android:text="视图宽采用match_parent定义"
        android:textColor="#000000"
        android:textSize="20sp" />

    <TextView
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:background="#00ffff"
        android:text="视图宽度采用固定大小"
        android:textColor="#000000"
        android:textSize="20sp" />

    <TextView
        android:id="@+id/tv_code"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:background="#00ffff"
        android:text="视图宽度采用代码定义"
        android:textColor="#000000"
        android:textSize="20sp" />

</LinearLayout>

效果如图：

接下来通过演示页面并观察几种尺寸设置方式的界面效果，主要通过背景色区分当前视图的宽高范围，详细的XML文件内容如下所示：

在这里插入图片描述

2.2.2　设置视图的间距

在上一小节末尾的XML文件中，每个TextView标签都携带新的属性android:layout_marginTop=“5dp”，该属性的作用是让当前视图与上方间隔一段距离。同理，

android:layout_marginLeft让当前视图与左边间隔一段距离，

android:layout_marginRight让当前视图与右边间隔一段距离，

android:layout_marginBottom让当前视图与下方间隔一段距离。

如果上下左右都间隔同样的距离，还能使用android:layout_margin一次性设置四周的间距。layout_margin不单单用于文本视图，还可用于所有视图，包括各类布局和各类控件。因为不管布局还是控件，它们统统由视图基类View派生而来，而layout_margin正是View的一个通用属性，所以View的子子孙孙都能使用layout_margin。在View的大家族中，视图组ViewGroup尤为特殊，它既是View的子类，又是各类布局的基类。布局下面能容纳其他视图，而控件却不行，这正源自ViewGroup的组装特性。View、ViewGroup、控件、布局四者的继承关系如图所示。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

除了layout_margin之外，padding也是View的一个通用属性，它用来设置视图的内部间距，并且padding也提供了paddingTop、paddingBottom、paddingLeft、paddingRight四个方向的距离属性。

同样是设置间距，layout_margin指的是当前视图与外部视图（包括上级视图和平级视图）之间的距离，而padding指的是当前视图与内部视图（包括下级视图和内部文本）之间的距离。为了观察外部间距和内部间距的差异，接下来做个实验，看看layout_margin与padding究竟有什么区别。

首先创建新的活动页面，并给该页面的XML文件填入以下的布局内容：

<?xml version="1.0" encoding="utf-8"?>
<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="300dp"
    android:orientation="vertical"
    android:background="#00AAFF"
    tools:context=".ViewMarginActivity">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_margin="20dp"
        android:background="#FFFF99"
        android:padding="60dp">
        <!--内层视图背景为红色-->
        <View
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#FF0000" />
    </LinearLayout>

</LinearLayout>

上面的XML文件有两层视图嵌套，第一层是蓝色背景布局里面放黄色背景布局，第二层是黄色背景布局里面放红色背景视图。中间层的黄色背景布局，同时设置了20dp的layout_margin，以及60dp的padding，其中padding是layout_margin的三倍宽（60/20=3）。接着运行测试App，看到的演示界面如图所示。

从效果图可见，外面一圈间隔较窄，里面一圈间隔较宽，表示20dp的layout_margin位于外圈，而60dp的padding位于内圈。这种情况印证了：layout_margin指的是当前图层与外部图层的距离，而padding指的是当前图层与内部图层的距离。

在这里插入图片描述

2.2.3　设置视图的对齐方式

App界面上的视图排列，默认靠左朝上对齐，这也符合日常的书写格式。然而页面的排版不是一成不变的，有时出于美观或者其他原因，要将视图排列改为朝下或靠右对齐，为此需要另外指定视图的对齐方式。在XML文件中通过属性android:layout_gravity可以指定当前视图的对齐方向，当属性值为top时表示视图朝上对齐，为bottom时表示视图朝下对齐，为left时表示视图靠左对齐，为right时表示视图靠右对齐。如果希望视图既朝上又靠左，则用竖线连接top与left，此时属性标记为android:layout_gravity=“top|left”；如果希望视图既朝下又靠右，则用竖线连接bottom与right，此时属性标记为android:layout_gravity=“bottom|right”。

注意layout_gravity规定的对齐方式，指的是当前视图往上级视图的哪个方向对齐，并非当前视图的内部对齐。若想设置内部视图的对齐方向，则需由当前视图的android:gravity指定，该属性一样拥有top、bottom、left、right 4种取值及其组合。它与layout_gravity的不同之处在于：layout_gravity设定了当前视图相对于上级视图的对齐方式，而gravity设定了下级视图相对于当前视图的对齐方式；前者决定了当前视图的位置，而后者决定了下级视图的位置。

为了进一步分辨layout_gravity与gravity的区别，接下来做个实验，对某个布局视图同时设置android:layout_gravity和android:gravity属性，再观察内外视图的对齐情况。下面便是实验用的XML文件例子：

<?xml version="1.0" encoding="utf-8"?>
<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="300dp"
    android:background="#FFFF99"
    android:orientation="horizontal"
    tools:context=".ViewGravityActivity"
    android:baselineAligned="false">

    <!--设置第一个子布局背景为红色，它在上级试图中朝下对齐，它的下级视图则考左对齐-->
    <LinearLayout
        android:layout_width="1dp"
        android:layout_height="200dp"
        android:layout_gravity="bottom"
        android:layout_margin="10dp"
        android:layout_weight="1"
        android:background="#FF0000"
        android:padding="10dp"
        android:gravity="left">

        <View
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:background="#00FFFF" />
    </LinearLayout>

    <!--设置第一个子布局背景为红色，它在上级试图中朝上对齐，它的下级视图则考右对齐-->
    <LinearLayout
        android:layout_width="1dp"
        android:layout_height="200dp"
        android:layout_gravity="top"
        android:layout_margin="10dp"
        android:layout_weight="1"
        android:background="#FF0000"
        android:padding="10dp"
        android:gravity="right">

        <View
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:background="#00FFFF" />
    </LinearLayout>

</LinearLayout>

运行测试App，打开演示界面如图所示:

在这里插入图片描述

由效果图可见，第一个子布局朝下，并且它的内部视图靠左；而第二个子布局朝上，并且它的内部视图靠右。对比XML文件中的layout_gravity和gravity取值，证明了二者的对齐情况正如之前所言：layout_gravity决定当前视图位于上级视图的哪个方位，而gravity决定了下级视图位于当前视图的哪个方位。

本笔记参考于[B站动脑学院]，仅作学习用途，方便随时查看。
参考资料：2022 最新 Android基础教程，从开发入门到项目实战，看它就够了

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/351620.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Unknown encoder ‘libmp3lame

Unknown encoder ‘libmp3lame

环境&#xff1a; macos m1 &#xff0c; python3.10.x 背景 做视频切片&#xff0c; 使用moviepy 中VideoFileClip进行截取视频。 报错&#xff1a; Unknown encoder libmp3lameThe audio export failed because FFMPEG didnt find the specified codec for audio encoding …
阅读更多...
ppt背景图片怎么设置？让你的演示更加出彩！

ppt背景图片怎么设置？让你的演示更加出彩！

PowerPoint是一款广泛应用于演示文稿制作的软件&#xff0c;而背景图片是演示文稿中不可或缺的一部分。一个好的背景图片能够提升演示文稿的整体效果&#xff0c;使观众更加关注你的演示内容。可是ppt背景图片怎么设置呢&#xff1f;本文将介绍ppt背景图片设置的三个方法&#…
阅读更多...
浪花 - 添加队伍业务开发

浪花 - 添加队伍业务开发

一、接口设计 1. 请求参数&#xff1a;封装添加队伍参数 TeamAddRequest package com.example.usercenter.model.request;import com.baomidou.mybatisplus.annotation.IdType; import com.baomidou.mybatisplus.annotation.TableField; import com.baomidou.mybatisplus.ann…
阅读更多...
STM32 freertos 使用软件模拟串口uart

STM32 freertos 使用软件模拟串口uart

如题&#xff0c;为什么要这样做&#xff1f; 最近做的一个项目上使用了74HC595作为指示灯板使用&#xff1b; 这个灯板与驱动板是通过排线连接&#xff0c;排线约25cm长&#xff1b; 在实验室测试一切正常&#xff0c;发到客户手上使用就出现了某个LED跳动情况&#xff1b;…
阅读更多...
Spring Boot 中 Service 层依赖注入问题

Spring Boot 中 Service 层依赖注入问题

目录 问题描述 产生错误 问题原因 解决方法 手动注入方法 1、使用工具集 hutool&#xff0c;引入 Maven 依赖 2、编写 SpringUtil 工具类 问题描述 Controller 层方法为 static 静态&#xff0c;引入 Service 层时使用 Autowired 注解自动装配&#xff0c;Controller层方…
阅读更多...
2017年认证杯SPSSPRO杯数学建模D题(第二阶段)教室的合理设计全过程文档及程序

2017年认证杯SPSSPRO杯数学建模D题(第二阶段)教室的合理设计全过程文档及程序

2017年认证杯SPSSPRO杯数学建模 D题 教室的合理设计 原题再现&#xff1a; 某培训机构租用了一块如图&#xff08;见附件&#xff09;所示的场地&#xff0c;由于该机构开设了多种门类的课程&#xff0c;所以需要将这块场地通过加入一些隔墙来分割为多个独立的教室和活动区。…
阅读更多...
手把手教学:AD09制作BOM及小技巧

手把手教学:AD09制作BOM及小技巧

BOM&#xff08;Bill of Material&#xff09;物料清单&#xff0c;是以数据格式来描述产品结构的文件&#xff0c;即生产一件产品所需的子零件及其产品中零件数量的完全组合。这里生成BOM表用作对你制作的pcb板进行成本预估和制作生产资料文件。同时也是样品制作时&#xff0c…
阅读更多...
pytest参数化

pytest参数化

一、pytest.mark.parametrize介绍 pytest.mark.parametrize(argnames, argvalues, indirectFalse, idsNone)参数说明&#xff1a; argnames: 一个或多个参数名&#xff0c;用逗号分隔的字符串&#xff0c;如"arg1,arg2,arg3"&#xff0c;参数名与用例入参数一致。 a…
阅读更多...
TensorFlow2实战-系列教程2：神经网络分类任务

TensorFlow2实战-系列教程2：神经网络分类任务

&#x1f9e1;&#x1f49b;&#x1f49a;TensorFlow2实战-系列教程 总目录 有任何问题欢迎在下面留言 本篇文章的代码运行界面均在Jupyter Notebook中进行 本篇文章配套的代码资源已经上传 1、Mnist数据集 下载mnist数据集&#xff1a; %matplotlib inline from pathlib imp…
阅读更多...
shell常用命令，参数传递，函数，挂载磁盘

shell常用命令，参数传递，函数，挂载磁盘

1、ls 功能&#xff1a;显示文件和目录的信息ls　以默认方式显示当前目录文件列表 ls -a 显示所有文件包括隐藏文件 ls -l 显示文件属性&#xff0c;包括大小&#xff0c;日期&#xff0c;符号连接&#xff0c;是否可读写及是否可执行 ls -lh 显示文件的大小&#xff0c;以…
阅读更多...
BOSS 直聘：日增10亿数据的历史库，如何通过OceanBase节省70%存储成本？

BOSS 直聘：日增10亿数据的历史库，如何通过OceanBase节省70%存储成本？

BOSS 直聘是在全球范围内首创互联网“直聘”模式的在线招聘产品&#xff0c;目前已经成为了中国最大的招聘平台。本文谈到的 BOSS 直聘的业务场景主要是通过数据库对招聘过程中的聊天记录信息进行存储&#xff0c;数据量极大&#xff0c;且每天都有 5 亿到 10 亿的增量数据。和…
阅读更多...
Linux入门攻坚——14、实战软件安装-搭建Python3.8环境-2

Linux入门攻坚——14、实战软件安装-搭建Python3.8环境-2

上一篇解决了openssl和pip问题&#xff0c;这一篇来解决sqlite问题 创建app时出现错误&#xff0c;模块_sqlite3找不到&#xff0c;查询sqlite相关的包&#xff1a; 在python2.6的lib-dynload路径下&#xff0c;有_sqlite3.so&#xff0c;这个应该就是Python需要的sqlite模块&a…
阅读更多...
Redis 实际项目中的整合,记录各种用法

Redis 实际项目中的整合,记录各种用法

Redis缓存餐厅数据 我们来看主要的流程 很简单,就是在数据库和接口之间加了一层缓冲,在redis之前其实还可以加其他的缓存 例如 nginx的缓存 接下来,就是结合我的业务,来做缓存 我这里的业务逻辑是,按了分类的按钮,分别以不同的 分类为一组缓存数据 所以,这里的缓存粒度是分类…
阅读更多...
一个人永远无法赚到认知以外的钱

一个人永远无法赚到认知以外的钱

做交付、做产品&#xff0c;从来都不是一件容易的事情。在营销和服务的过程中&#xff0c;我充分见证了人生百态。 前一段时间&#xff0c;小灰创建了一个自媒体陪伴群&#xff0c;群里邀请了各个领域的自媒体大佬&#xff0c;每周都会在群里进行分享&#xff0c;大家的学习气氛…
阅读更多...
推荐家庭关系三姑六婆计算器微信小程序源码

推荐家庭关系三姑六婆计算器微信小程序源码

亲戚关系计算器微信小程序源码是一款为避免遇到亲戚却不知道该怎么称呼时遇到的尴尬情况而开发的&#xff0c;由于社会节奏的快速发展&#xff0c;现在的关系不像以前一样经常联系和维护&#xff0c;导致了有些自己家的一些亲戚也疏远了很多。 演示地 址 &#xff1a; runrunco…
阅读更多...
httprunnerV4.X的基本使用详解

httprunnerV4.X的基本使用详解

目录 1、httprunner概述 1.1、httprunner的优点 2、httprunner的安装 3、基本命令的使用 3.1、生成脚手架 3.2、将har文件转换为测试用例文件 3.3、执行测试用例 3.4、为项目创建虚拟环境&#xff0c;然后安装httprunner库 3.4、执行测试用例生成测试报告 4、httprun…
阅读更多...
北斗卫星为野外科考人员提供安全保障

北斗卫星为野外科考人员提供安全保障

北斗卫星为野外科考人员提供安全保障 自第二次青藏高原综合科学考察研究启动以来&#xff0c;青海不断提升科考服务保障能力&#xff0c;推动科考全程信息化&#xff0c;有效促进科考成果转化。 为保障科考人员的人身安全&#xff0c;青海省青藏科学考察服务中心开发了基于北…
阅读更多...
【Docker】附录一：常见问题总结

【Docker】附录一：常见问题总结

作者主页&#xff1a; 正函数的个人主页 文章收录专栏&#xff1a; Docker 欢迎大家点赞 &#x1f44d; 收藏 ⭐ 加关注哦&#xff01; 常见问题总结 一、镜像相关 如何批量清理临时镜像文件&#xff1f; 答&#xff1a;可以使用 docker image prune 命令。 如何查看镜像支持…
阅读更多...
9.异步爬虫

9.异步爬虫

异步爬虫可以理解为非只单线程爬虫 我们下面做个例子&#xff0c;之前我们通过单线程爬取过梨视频 https://blog.csdn.net/potato123232/article/details/135672504 在保存视频的时候会慢一些&#xff0c;为了提升效率&#xff0c;我们使用异步爬虫爬取 目录 1 线程池 2 …
阅读更多...
使用vs2022将.net8的应用程序发布为一个单独文件

使用vs2022将.net8的应用程序发布为一个单独文件

在使用.NetCore3.1时&#xff0c;可以通过设置以下工程配置文本来将项目发布为一个单独的应用程序文件&#xff1a; <Project Sdk"Microsoft.NET.Sdk.WindowsDesktop"><PropertyGroup><TargetFramework>netcoreapp3.1</TargetFramework><…
阅读更多...
最新文章

Copyright @ 2022~2023