Kotlin Android 第12天,从 0 到 ML - ConstraintLayout

前言:

   Kotlin 的语法讲完了,就来进入android 的世界了,首先要开一个空白的专案,来了解一下什麽是ConstraintLayout (约束)。

大纲 :

ConstraintLayout

 是一个可在创造一个大而复杂的平面式的结构图,在layout编辑器中可以直接用图形介面就可以拖拉好的你的layout ,不是靠写xml来达成的。
要在ConstraintLayout 中定义位置的话,图视元件需要最少需要给一个水平和一个垂直的约束

图形设计工具视窗

https://ithelp.ithome.com.tw/upload/images/20210917/20121643Mygnuulyvc.png

蓝色的框是 code 和 图形视窗切换键
绿色的线是 从元件库拉出按键元件到图视layout
黄色的框是 选到的元件属性参数,也可以直接下参数调整
红色的框是 元件有layout条件还没有设定,这里的是没有任何的约束

来看一下图视元件都拉到中间的位置,但没有给约束,看起来layout是设计好了,但跑起来会是如何呢?
让我们看下去。

https://ithelp.ithome.com.tw/upload/images/20210917/20121643o9oYof35x5.png

全部的元件都集合在一起了,元件没给约束,预设就是(0,0)的位置

我们把元件来拉好一下吧~~~~

TextView

参数:上面隔32dp ,文字大小设48sp ,左右下是约束符合内容调整

https://ithelp.ithome.com.tw/upload/images/20210917/201216431a2w6udD2a.png

EditText

 参数:上下隔32dp ,左右是约束符合内容调整

https://ithelp.ithome.com.tw/upload/images/20210917/20121643F8s5qg4Lc6.png

Button

参数:下面隔32dp ,上左右是约束符合内容调整  

https://ithelp.ithome.com.tw/upload/images/20210917/20121643oT0vd8ICgP.png

来看一下手机跑的如何,是成功,还是~~~~~~~

https://ithelp.ithome.com.tw/upload/images/20210917/20121643JxToKVUBBE.png

终於拉了元件,不用去改 xml code 就可以完成layout画面

来拉一个18个按键,并排列整齐吧~~~~~

按1234步骤拉layout
https://ithelp.ithome.com.tw/upload/images/20210917/20121643zbuqJ1DeDl.jpg

就完成18个按键的排列喽,一直拉到30个呀~~~~~~~
https://ithelp.ithome.com.tw/upload/images/20210917/201216436TGoo9dOa2.png

结论:

layout没事的话要多多练习,不然拉图都比写code还麻烦呀

参考

https://developer.android.com/training/constraint-layout


<<:  [iT铁人赛Day17]JAVA的函数(上篇)

>>:  Day 2 弄好环境,跑一个范例服务器

[Python学习笔记] 建立开发环境-Day1

"参考allenchen大大的铁人30天搞懂Python" "如有任何...

Day14 Django资料库介绍

我们这几天已经学了一些Django的入门技巧了,但之後如果实作时,势必需要储存一些资料在後台。 但我...

[Day 15] epoll

前言 在系列文的第二篇我就提到过, 一个非同步运行框架, 应该要含有两种架构, 一个是能够 mult...

CSS文字样式相关属性(DAY11)

今天这篇文章会介绍CSS文字大小、文字粗细、字体和字型,这些都是有关文字样式的相关属性: 文字大小 ...