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

2018-09-21  本文已影响0人  受伤的粽子

思考:

平时开发过程中提的最多的就是优化,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

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

上一篇 下一篇

猜你喜欢

热点阅读