(九)Android布局类型(约束布局ConstraintLayout)

        约束布局(ConstraintLayout)与相对布局差不多,是创建一个应用后默认的布局方式,比相对布局更加灵活,一般用于平铺的布局(不适用于层叠布局),常用于托拖拽方式构建页面,最特色的地方在于布局中可以设置参考线、通过托拉拽方式去放置好组件、需要设置约束(否则会设置为绝对定位)。一般采用设计界面进行开发。

拖拉拽设计方式

如果此时,直接拖入一个按钮,想要放置在正中央,会看到出现水平虚线和垂直虚线(参考线)

如果不想放置在正重要,也可以点击参考线,可以添加水平参考线和垂直参考线以及其他参考线

当添加水平参考线后,出现了一条水平方向上的虚线,左侧显示为三角形

点击三角形,可以改变三角形方向,测出下方距离

继续点击三角形,可以将三角形变为百分号(%)

代表的意思是,该水平参考线,距离顶部2%的位置,如果你想要设置为垂直居中的位置,则需要拖动参考线,直到显示的百分比为50%

垂直方向的参考线也是一样的操作方法

首先添加一条垂直方向的参考线,连续点击三角形,使其变为百分比的形式,拖动线,直到其显示为50%

绘制参考线的目的是为了方便放置组件,运行的时候,该参考线是看不见的。此时拖入一个按钮放置在垂直水平居中的位置,看到两条虚线加粗后,则表示位置放置准确,再放开鼠标。

此时再拖入一个按钮,等待垂直方向上的参考线变粗后放开鼠标

添加约束(点击新组件的下方的圆点,连接搭配旧组件的上方圆点),意思是,新组件相对旧组件来的垂直上方位置

结果发现,按钮往下移动了位置

如果不想两个组件爱的太近,可以点击新组件,设置下边距为50dp

设计如下界面就容易了

代码解读

因为其他组件都是参考中间这个组件来的,所以看代码的时候,优先看参考组件,发现id是button

再看上方组件的代码,在参考组件的上方,且下边距为50dp。与相对布局不同的是,设置在参考组件的某个方位的属性中,都带有constraint。

一般,使用约束布局,就很少去看代码,直接设计即可。作为初学者,还是可以看看代码。代码方式能精准定位,托拉拽很难精确定位,如果是熟悉了,两种方法均可做出同样效果,配合使用更高效。

测试

使用拖拉拽方式设计一个登录界面

需要注意的是,排版好了,一定要添加约束,否则设计图和运行出来的结果不一致。

添加约束

参考代码:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"tools:context=".MainActivity"><androidx.constraintlayout.widget.Guidelineandroid:id="@+id/guideline3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="vertical"app:layout_constraintGuide_percent="0.1" /><androidx.constraintlayout.widget.Guidelineandroid:id="@+id/guideline4"android:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="vertical"app:layout_constraintGuide_percent="0.5" /><androidx.constraintlayout.widget.Guidelineandroid:id="@+id/guideline5"android:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="horizontal"app:layout_constraintGuide_percent="0.5" /><androidx.constraintlayout.widget.Guidelineandroid:id="@+id/guideline6"android:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="horizontal"app:layout_constraintGuide_percent="0.25" /><androidx.constraintlayout.widget.Guidelineandroid:id="@+id/guideline7"android:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="horizontal"app:layout_constraintGuide_percent="0.75" /><androidx.constraintlayout.widget.Guidelineandroid:id="@+id/guideline8"android:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="vertical"app:layout_constraintGuide_percent="0.9" /><ImageViewandroid:id="@+id/imageView"android:layout_width="409dp"android:layout_height="wrap_content"android:layout_marginTop="128dp"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintHorizontal_bias="0.5"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent"app:srcCompat="@drawable/ic_launcher_background" /><TextViewandroid:id="@+id/textView2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginStart="30dp"android:layout_marginTop="100dp"android:textSize="18sp"android:text="用户名:"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toBottomOf="@+id/imageView" /><TextViewandroid:id="@+id/textView3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginStart="30dp"android:layout_marginTop="50dp"android:text="密    码:"android:textSize="18sp"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="@+id/guideline5" /><EditTextandroid:id="@+id/editTextText"android:layout_width="256dp"android:layout_height="44dp"android:layout_marginStart="10dp"android:layout_marginTop="90dp"android:layout_marginEnd="40dp"android:ems="10"android:hint="请输入用户名"android:inputType="text"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toEndOf="@+id/textView2"app:layout_constraintTop_toBottomOf="@+id/imageView" /><EditTextandroid:id="@+id/editTextTextPassword"android:layout_width="259dp"android:layout_height="41dp"android:layout_marginStart="10dp"android:layout_marginTop="7dp"android:layout_marginEnd="40dp"android:ems="10"android:hint="请输入密码"android:inputType="textPassword"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toEndOf="@+id/textView3"app:layout_constraintTop_toBottomOf="@+id/editTextText" /><Buttonandroid:id="@+id/button6"android:layout_width="321dp"android:layout_height="48dp"android:layout_marginStart="30dp"android:layout_marginTop="50dp"android:layout_marginEnd="30dp"android:text="登录"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toBottomOf="@+id/textView3" /></androidx.constraintlayout.widget.ConstraintLayout>

模拟器效果

真机效果

        大致看起来差不多,但是,仔细点看会发现,无论是模拟器还是真机,都和设计图有差别,这是因为屏幕尺寸不同。

        所以,拖拉拽的方式虽然简单,但是很难做出适合各种屏幕尺寸的效果,主要原因是,使用拖拉拽的方式添加约束,看起来很近的时候,我们会习惯性设置边距;其次,设置了参考线,但是,除了水平居中和垂直居中外,其他参考线,都无法使得其变粗,放置组件就会去设置边距。

        所以,初学开发者通常宁愿写代码,不愿意拖拉拽。这样更容易按照设计图出相应的程序。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

第五篇:数字视频广告格式概述 - IAB视频广告标准《数字视频和有线电视广告格式指南》

第五篇&#xff1a;第五篇&#xff1a;数字视频广告格式概述 - IAB视频广告标准《数字视频和有线电视广告格式指南 --- 我为什么要翻译介绍美国人工智能科技公司IAB系列技术标准&#xff08;2&#xff09; ​​​​​​​翻译计划 第一篇序言第二篇简介和目录第三篇概述- IA…

由浅到深认识C语言(2):C语言的类型及语句

该文章Github地址&#xff1a;https://github.com/AntonyCheng/c-notes 在此介绍一下作者开源的SpringBoot项目初始化模板&#xff08;Github仓库地址&#xff1a;https://github.com/AntonyCheng/spring-boot-init-template & CSDN文章地址&#xff1a;https://blog.csdn…

pr画中画模板视频素材

pr画中画视频模板&#xff0c;视频聊天对话模板。软件支持&#xff1a;Premiere Pro 2021或更高版本。 来自&#xff1a;pr模板网&#xff0c;下载地址&#xff1a;https://prmuban.com/38196.html

代码随想录算法训练营第day26|39. 组合总和、 40.组合总和II、 131.分割回文串

39. 组合总和 力扣题目链接(opens new window) 给定一个无重复元素的数组 candidates 和一个目标数 target &#xff0c;找出 candidates 中所有可以使数字和为 target 的组合。 candidates 中的数字可以无限制重复被选取。 说明&#xff1a; 所有数字&#xff08;包括 ta…

execl数据多维度建模(二)

源数据 1.选择数据 1&#xff09;插入透视表 选中源数据的数据区域--插入--数据透视表&#xff08;新的工作表名&#xff1a;透视表&#xff09; 2&#xff09;透视表设置 ShipCountry拉入行标签&#xff1b;CategoryName拉入列标签&#xff1b;sales拉入值的位置 3&#xf…

计算机二级Python题目12

目录 1. 基础题 1.1 基础题1 1.2 基础题2 1.3 基础题3 2. turtle画图题 3. 大题 3.1 大题1 3.2 大题2 1. 基础题 1.1 基础题1 sinput("请输入一个小数&#xff1a;") ss[::-1] cs0 for c in s:if c.:breakcseval(c) print({:*>10}.format(cs)) 1.2 基础…

CPU生产的生命周期 - 原材料篇

CPU是中央处理器的缩写&#xff0c;它是执行程序指令的电子电路。CPU使用的基本原材料是硅、铜、铝和各种塑料。由于CPU在现代社会中被大量消耗&#xff0c;因此生产商必须考虑原材料的能源投入和环境影响。 硅是地壳中第二丰富的元素。它以二氧化硅和硅酸盐的形式存在。二氧化…

Linux——进程通信(二) 匿名管道的应用:进程池

前言 之前我们学习了进程通过匿名管道进行通信&#xff0c;实现了两个进程的数据传输。 如果我们管理的是很多个进程&#xff0c;通过管道发送指令&#xff0c;因为如果管道中没有数据&#xff0c;读端必须等待&#xff0c;也就是被管理的进程们都在等待我发送的指令&#xf…

CVE-2024-24112 XMall后台管理系统 SQL 注入漏洞分析

------作者本科毕业设计项目 基于 Spring Boot Vue 开发而成...... [Affected Component] /item/list /item/listSearch /sys/log /order/list /member/list (need time-based blind injection) /member/list/remove 项目下载地址 Exrick/xmall: 基于SOA架构的分布式…

cesium viewer camera flyto

一、viewer的flyTo内部调用的是camera的相关定位方法&#xff0c;针对不同的定位对象&#xff0c;计算出合适的位置和相机视角。viewer可以定位到entity、dataSource、Cesium3DTileset、ImageLayer等。 var rect [116.490401, 39.964771, 116.499623, 39.977102];var heading …

2024全国水科技大会:【协办单位】山东文远环保科技股份有限公司

山东文远环保科技股份有限公司坐落于千年古城齐国故都--临淄。初始成立于2011年&#xff0c;是淄博市首批国有资本参股的混合改制企业。 公司着力打造环保设备制造、环保工程及服务、环保水务/固废处理/新能源项目投资及运营管理、固废循环经济产业园等四大板块。是一家集投资、…

Elasticsearch8.x版本Java客户端Elasticsearch Java API 如何并发修改

前言 并发控制&#xff0c;一般有两种方案&#xff0c;悲观锁和乐观锁&#xff0c;其中悲观锁是默认每次更新操作肯定会冲突&#xff0c;所以每次操作都要先获取锁&#xff0c;操作完毕再释放锁&#xff0c;适用于写比较多的场景。而乐观锁是默认每次更新操作都不会冲突&#…

鸿蒙Harmony应用开发—ArkTS声明式开发(容器组件:GridCol)

栅格子组件&#xff0c;必须作为栅格容器组件(GridRow)的子组件使用。 说明&#xff1a; 该组件从API Version 9开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 子组件 可以包含单个子组件。 接口 GridCol(option?:{span?: number | …

综合知识篇00-综合知识考点汇总目录(2024年软考高级系统架构设计师冲刺知识点总结-综合知识篇-先导篇)

专栏系列文章推荐&#xff1a; 2024高级系统架构设计师备考资料&#xff08;高频考点&真题&经验&#xff09;https://blog.csdn.net/seeker1994/category_12593400.html 【历年案例分析真题考点汇总】与【专栏文章案例分析高频考点目录】&#xff08;2024年软考高级…

二叉树的初步学习和顺序结构实现

当我们学完顺序表、链表、栈和队列的时候&#xff0c;我们就要开始学习树了。树对于以后的学习有非常大的帮助&#xff0c;尤其是排序。好了&#xff0c;开始我们的学习吧。 1.树的概念及结构 1.1树的结构 树结构是一种非线性结构。它是由n&#xff08;n>0&#xff09;个…

CHINC邀请函 | 全视通邀您共赴青岛,碰撞数智火花

展会名称&#xff1a;2024中华医院信息网络大会&#xff08;CHINC&#xff09; 展会时间&#xff1a;3月29-31日 展会地址&#xff1a;青岛国际会展中心&#xff08;红岛馆&#xff09; 全视通展位&#xff1a;B2-A05A 全视通将携智慧病区、智慧门诊、智慧手术室、智慧后勤…

快速实现鸿蒙侧边栏显示与隐藏

文章目录 前言侧边栏组件使用快速搞定侧边栏总结 一、前言 有好多文章要分享&#xff0c;但是来不及&#xff0c;就把最近觉得比较重要的组件分享下。最近因为在完善玩android的一个app&#xff0c;我的这个app叫玩鸿蒙&#xff0c;过段时间就开源了&#xff0c;敬请期待。 …

免费开源的 Vue 拖拽组件 VueDraggablePlus (兼容移动端)

VueDraggablePlus 支持 Vue2 / Vue3&#xff0c;是被尤雨溪推荐了的拖拽组件。我自己试用过了&#xff0c;还挺好用的&#xff0c;兼容移动端。 官网&#xff1a;https://alfred-skyblue.github.io/vue-draggable-plus/ 官网文档里面很详细了&#xff0c;我就不再介绍安装和用…

Google colab中如何从kaggle中接入数据?

写在前面 使用google colab进行数据分析和探索时&#xff0c;可引用的数据源包括但不限于&#xff1a;1.可上传的数据文件用本地加载的的方式打开数据资源&#xff1b;2.从网络链接中直接打开后加载到缓存中的文件资源&#xff1b;3.通过API或者外部的开放接口加载数据&#x…

【日本語】N2考试湖北报名笔记

阅读资料 视频&#xff1a;JLPT报名技巧 使用浏览器调试模式快速报名&#xff1b; 1 报名流程 【考场选择】 1.1 春季报名&#xff1a;03-19 07:00:00 1.2 预习网站登录信息 1.3 登录验证码&#xff1a;06:55 &#xff08;图片来自视频《教日语的阿飞老师 - 担心能力考抢…