Android 布局笔记

像海浪撞过了山丘以后还能撑多久
他可能只为你赞美一句后往回流
那娇艳的花盛开后等你来能撑多久
还是被诗人折断了伤心了
换歌词一首
那鸳鸯走散了一只在拼命的往南走
被混沌的城市用钢筋捂住了出口
仿佛悲伤的人们
能靠着雾霾遮住伤口
还羡慕着期待蓝天的少年总抬头
.....

前言

通过 L1-1B 的课程学习,我 get 到了 ViewGroup 和两种基本布局 LinearLayout(线性布局)RelativeLayout(相对布局) 的知识,那么现在我们来一一了解这些东西吧。

1. ViewGroup
  • 什么是 ViewGroup ? 运用官放文档的原话

A ViewGroup is a special view that can contain other views (called children.) The view group is the base class for layouts and views containers. This class also defines the ViewGroup.LayoutParams
class which serves as the base class for layouts parameters.

简单的翻译一些就是:ViewGroup 是一个可以包含其他视图(称为子对象)的特殊视图。视图组是布局和视图容器的基类。 这个类还定义了 ViewGroup.LayoutParams 类,用作布局参数的基类。(渣渣英语勿喷)
根据字面上的解释应该很好了解了,如果还想深入了解请移步到 官网

2. LinearLayout(线性布局)

A Layout that arranges its children in a single column or a single row. The direction of the row can be set by calling setOrientation(). You can also specify gravity, which specifies the alignment of all the child elements by calling setGravity() or specify that specific children grow to fill up any remaining space in the layout by setting the weight member of LinearLayout.LayoutParams. The default orientation is horizontal.

渣渣英语又来翻译了:将其子元素排列在单列或单行中的布局。 可以通过调用 setOrientation() 设置行的方向。 您还可以通过调用 setGravity() 来指定所有子元素的对齐方式,或指定特定子项通过设置 LinearLayout.LayoutParamsweight 成员来填充布局中的任何剩余空间。 默认方向为 水平

  • 现在我们来看 LinearLayout 的简单用法
<?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:text="我是小一"
        android:textColor="@color/colorPrimary"
        android:textSize="24sp"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="我是小二"
        android:textColor="#1d953f"
        android:textSize="24sp"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="我是小三"
        android:textColor="#f15b6c"
        android:textSize="24sp"/>
</LinearLayout>

我在 **LinearLayout **中添加了 3 个 TextView ,每个 TextView 的长和宽都是 wrap_content ,并指定排序方式为 vertical ,然后它就会如下图显示一样:

Linear1.png

现在我们来看 LinearLayout 的属性

** android:orientation="vertical" ** :LinearLayout 的排序方式,有 vertical(垂直方向)horizontal(水平方向)

现在我们将 android:orientation 的属性改为 horizontal

<?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="horizontal">
    ...

</LinearLayout>

修改代码后 LinearLayout 中的控件会在水平方向上依次排列,如下图

linear2.png

根据官方原话说:可以通过调用 setGravity() 来指定所有子元素的对齐方式 ,那么现在我们在来看 android:layout_gravity 属性
二话不说,先上代码:

<?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="horizontal">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="我是小一"
        android:textColor="@color/colorPrimary"
        android:textSize="24sp"
        android:layout_gravity="top"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="我是小二"
        android:textColor="#1d953f"
        android:textSize="24sp"
        android:layout_gravity="center_vertical"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="我是小三"
        android:textColor="#f15b6c"
        android:textSize="24sp"
        android:layout_gravity="bottom"/>
    
</LinearLayout>

我将第一个 TextView 的对其方式指定为 top,第二个 TextView 的对其方式指定为 center_vertical,第三个 TextView 的对其方式指定为 bottom,因为当前 LinearLayout 的排列方式为 horizontal,所以当前的效果如下图显示:

linear3.png

在学习 LinearLayout 过程中我还学到了一个重要的属性
android:layout_weight (权重) ,现在我们来看它的用法:

<?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="horizontal">

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@color/colorPrimary"
        android:text="我是小一"
        android:textSize="24sp"/>

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="#1d953f"
        android:text="我是小二"
        android:textSize="24sp"/>

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="#f15b6c"
        android:text="我是小三"
        android:textSize="24sp"/>

</LinearLayout>

根据代码显示,当前 LinearLayout 的排列方式为 horizontal,我把 3 个 TextViewandroid:layout_width 属性设为 ''0dp'',然后在每个 TextView 中加入了 android:layout_weight="1" 属性,然后它的效果就会如下图显示:

linear4.png

根据上图分析可以得到,我加入了 android:layout_weight="1" 属性之后,3TextVeiw 就平分了整个屏幕,每个 TextVeiw 各占一份,从而得到 权重 是与 屏幕比例相关的

注意: 当我们在水平方向上使用 weight 属性的时候,控件所占屏幕比和控件的高度本身没有任何关系,只是和高度的值有关系。反之一样

  • 到现在为止关于 LinearLayou 的属性就介绍到这里了,如果想深入了解,请查阅官方文档。
3. RelativeLayout(相对布局)

关于 RelativeLayout 我就不想过多的做解释了,在这里主要放出官方文档的原意和基本属性。

A Layout where the positions of the children can be described in relation to each other or to the parent. 点击跳转到官方
上面的意思就是:可以相对于彼此或相对于父母描述子元素的位置的布局。

  • 基本属性:
    • android:layout_alignParentTop="true":将部件的顶部与容器的顶部对齐
  • android:layout_alignParentBottom="true":将部件的底部与容器的底部对齐
  • android:layout_alignParentStart="true":将部件的左侧与容器的左侧对齐
  • android:layout_alignParentEnd="true":将部件的右侧与容器的右侧对齐
  • android:layout_centerInParent="true"":部件在容器中水平垂直居中
  • android:layout_centerHorizontal="true"":部件在容器中垂直居中
  • android:layout_centerVertical="true"":部件在容器中水平居中
  • android:layout_below="@+id/控件名字":该控件在某控件的下方
  • android:layout_above="@+id/控件名字":该控件在某控件的上方
  • android:layout_toStartOf="@+id/控件名字":该控件在某控件的左方
  • android:layout_toEndOf="@+id/控件名字":该控件在某控件的右方
4. 总结

好了,就到这里了,其实关于布局不止有 LinearLayout(线性布局)、RelativeLayout(相对布局),在 Android 中还有 FrameLayout(帧布局)、AbsoluteLayout(绝对布局),TableLayout(表格布局)、GridLayout(网格布局)、PercentLayout(百分比布局)、ConstraintLayout(约束布局)等等。以上就是我通过 L1-1B 的课程学习到的知识点,虽然很简单,但做任何是都是由简单到复杂的!

                 混子性打野,等我混起来之时,就是我 carry 之日
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 195,653评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,321评论 2 373
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 142,833评论 0 324
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,472评论 1 266
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,306评论 4 357
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,274评论 1 273
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,658评论 3 385
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,335评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,638评论 1 293
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,697评论 2 312
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,454评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,311评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,699评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,986评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,254评论 1 251
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,647评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,847评论 2 335

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,117评论 25 707
  • afinalAfinal是一个android的ioc,orm框架 https://github.com/yangf...
    passiontim阅读 15,366评论 2 44
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,331评论 0 17
  • 早晨下雨的时候,吹好的头发不小心淋了点雨,变得惨不忍睹,在公司尬了一天。 下班回家路上,不时用手抓头发,然后...
    CalmEsae阅读 179评论 1 0
  • 三草两木卸妆霜 2.卸妆泡沫:清洁能力比较强,带有硅胶刷头,适合油性或混合性偏油 干性以及...
    LL莉子阅读 166评论 0 0