android基础 | 第二课:约束布局(ConstraintLayout)

思考:

平时开发过程中提的最多的就是优化,ConstraintLayout就是应布局优化而生,它的出现是为了解决复杂布局时,布局嵌套层级过多,引起过度绘制问题。

Android 2.2 版本中添加了新布局编辑器,支持直接在布局编辑器当中拖动控件、添加约束条件。但是不建议拖拽,因为还需要二次修改,而且复杂布局实现不了。所以让我们一起来学习ConstraintLayout吧。

开撸:

查看 build.gradle中是否添加了下面代码,最新的android studio中新建项目是默认添加的。

implementation 'com.android.support.constraint:constraint-layout:1.1.3'

1、基础属性

1、layout_constraintStart_toStartOf = layout_constraintLeft_toLeftOf
表示此控件的左边框与某个控件的左边框对齐或者在其右边


//相对于父布局
app:layout_constraintStart_toStartOf="parent"
//相对于兄弟控件
app:layout_constraintStart_toStartOf="@+id/id"

同上,下面用法一致:
2、layout_constraintEnd_toEndOf = layout_constraintRight_toRightOf
表示此控件的右边框与某个控件的右边框对齐或在其左边
3、app:layout_constraintTop_toTopOf
表示此控件的顶部边框与某个控件的顶部边框水平对齐或在其下边
4、app:layout_constraintBottom_toBottomOf
表示此控件的底部边框与某个控件的底部边框水平对齐或其上边
5、layout_constraintStart_toEndOf = layout_constraintLeft_toRightOf
表示此控件的左边框与某个控件的右边框对齐或者在其右边
6、layout_constraintEnd_toStartOf = layout_constraintRight_toLeftOf
表示此控件的右边框与某个控件的左边框对齐或在其左边
7、app:layout_constraintTop_toBottomOf
表示此控件的顶部边框与某个控件的底部边框水平对齐或在其下边
8、app:layout_constraintBottom_toTopOf
表示此控件的底部边框与某个控件的顶部边框水平对齐或其上边

2、特殊属性

1、app:layout_constraintBaseline_toBaselineOf
表示此控件与某个控件水平对齐



2、app:layout_editor_absoluteX
表示此控件在布局中X轴的绝对坐标点。
3、app:layout_editor_absoluteY
表示此控件在布局中Y轴的绝对坐标点
4、app:layout_constraintHorizontal_bias
表示此控件在布局中的水平方向上的偏移百分百
app:layout_constraintHorizontal_bias=”0.2”:设置相对父控件距离的长度的为父控件的宽度0.2倍的位置
5、app:layout_constraintVertical_bias
表示此控件在布局中的的垂直方向上的偏移百分百
layout_constraintVertical_bias=”0.2”:设置相对父控件距离的长度的为父控件的长度0.2倍的位置
6、app:layout_constraintDimensionRatio
表示两个控件的纵横比,而使用则需要把宽(layout_width)或者高(layout_height)设置为0dp,根据另一个属性和比例, 计算当前属性。

<Button
    android:id="@+id/button1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintDimensionRatio="7:3"
    android:text="Button1"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

3、基准线(Guideline)

Guideline是一条隐形的线,这条线可作为准线,根据此准线设置其他控件的位置。
Guideline是一个View(android.support.constraint.Guideline),基准线的通过android:orientation设置方向。通过基准线来约束其他的view。
layout_constraintGuide_begin=”xxdp”:基准线开始方向xxdp
layout_constraintGuide_end=”xxdp”:基准线结束方向xxdp
layout_constraintGuide_percent=”0.3”:基准线开始方向距离的父控件大小的百分比。

<android.support.constraint.Guideline
    android:id="@+id/guide"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_begin="100dp"
    app:layout_constraintGuide_end="100dp"
    app:layout_constraintGuide_percent="0.5" />

其他控件对这个控件使用方法:

app:layout_constraintTop_toBottomOf="@+id/guide" 

4、链状结构(Chain Style)

Chain Style是使多个控件像链条一样显示,这个更能可以类似LinearLayout的weight属性。
要想chain style生效,控件要相互引用,比如A的右边依赖B的左边,B的左边依赖A的右边,都是设置。 如:水平方向的Chain Style.

Chain Style的分为水平和竖直方向,每种都有3中模式:
layout_constraintHorizontal_chainStyle=”spread”:均匀分布(包括边上控件左右的边距)
layout_constraintHorizontal_chainStyle=”spread_inside”:均匀分布,但是边上的控件不均匀分布(边上控件没有边距)
layout_constraintHorizontal_chainStyle=”packed”:控件紧挨在一起。还可以通过bias属性设置偏移量。
layout_constraintHorizontal_weight="":跟线性布局的weight差不多,width需要设置0dp,控件的大小根据设置的weight比例进行设置。
layout_constraintVertical_chainStyle=”“:和上面一样,有三种模式spread,spread_inside,packed。
layout_constraintVertical_weight="":


5、其他

ConstraintLayout控件的其他属性
layout_constraintWidth_min="":最小宽度
layout_constraintWidth_max="":最大宽度
layout_constraintHeight_min="":最小高度
layout_constraintHeight_max="":最大高度

eg:


<FrameLayout
        android:id="@+id/layout_title"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        app:layout_constraintEnd_toStartOf="@+id/text_online_num"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/guide">

        <TextView
            android:id="@+id/live_video_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:drawableEnd="@mipmap/ic_launcher"
            android:ellipsize="end"
            android:gravity="center_vertical"
            android:paddingEnd="10dp"
            android:paddingStart="10dp"
            android:singleLine="true"
            tools:text="哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈" />

    </FrameLayout>

    <TextView
        android:id="@+id/text_online_num"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="10dp"
        android:layout_marginStart="5dp"
        android:gravity="end"
        android:singleLine="true"
        app:layout_constraintBottom_toBottomOf="@+id/layout_title"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@+id/layout_title"
        tools:text="哈哈哈哈哈" />

结束语:

关于ConstraintLayout还有其他的属性,不过用的不是很多,希望大家一定要多动手,这样才能熟练掌握。

GitHub:https://github.com/DaveSally/MyDemo

欢迎大家关注我的公众号:受伤的粽子

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

推荐阅读更多精彩内容