ConstraintLayout小计

ConstraintLayout作为Google的新宠儿,效果确实很理想,网上一堆堆资料, 这里不再赘述,只是简单的介绍用法,有点投机取巧之嫌,废话少说,代码:(忘记是哪位博主写的了,我再此之上简单的描述一下,感谢那位博主)

举个荔枝:比如一张小图片,相对于父图片的位置,那么在子图片里增加下面几行代码,然后自己按住控件各种拖动,直到您满意为止。treeIv是父布局的id。前面4行不必说,相对父布局的位置。

下面简单的说说layout_constraintHorizontal_bias和layout_constraintVertical_bias,简单的说就是横向和纵向的位置。

app:layout_constraintHorizontal_bias:表示此控件在布局中的水平方向上的偏移百分比。子View左相关的长度/(子View左相关的长度+其右相关的长度),默认值为0.5。就是左右位置

app:layout_constraintVertical_bias:表示此控件在布局中的的垂直方向上的偏移百分比。就是上下位置

app:layout_constraintBottom_toBottomOf="@id/treeIv"

app:layout_constraintEnd_toEndOf="@id/treeIv"

app:layout_constraintStart_toStartOf="@id/treeIv"

app:layout_constraintTop_toTopOf="@id/treeIv"

app:layout_constraintHorizontal_bias="0.41"

app:layout_constraintVertical_bias="0.064"

再说说父布局,就是一张图片,

<!--下面的三个属性可根据实际情况自行更改
    我这里是为了全屏显示,变成了match_parent和fitXY-->
<!--android:layout_width="match_parent"-->
<!--android:layout_height="match_parent"-->
<!--android:scaleType="fitXY"-->
<ImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="fitXY"
    android:src="@mipmap/ic_tree_bg_daytime"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />
<ImageView

布局文件:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!--下面的三个属性可根据实际情况自行更改
        我这里是为了全屏显示,变成了match_parent和fitXY-->
    <!--android:layout_width="match_parent"-->
    <!--android:layout_height="match_parent"-->
    <!--android:scaleType="fitXY"-->
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        android:src="@mipmap/ic_tree_bg_daytime"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView

        android:id="@+id/treeIv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="centerInside"
        android:src="@mipmap/ic_tree_6"

        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.6" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="centerInside"
        android:src="@mipmap/ic_red_packet_9"

        app:layout_constraintBottom_toBottomOf="@id/treeIv"
        app:layout_constraintEnd_toEndOf="@id/treeIv"
        app:layout_constraintHorizontal_bias="0.65"
        app:layout_constraintStart_toStartOf="@id/treeIv"

        app:layout_constraintTop_toTopOf="@id/treeIv"
        app:layout_constraintVertical_bias="0.525" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="centerInside"
        android:src="@mipmap/ic_red_packet_9"

        app:layout_constraintBottom_toBottomOf="@id/treeIv"
        app:layout_constraintEnd_toEndOf="@id/treeIv"
        app:layout_constraintHorizontal_bias="0.35"
        app:layout_constraintStart_toStartOf="@id/treeIv"

        app:layout_constraintTop_toTopOf="@id/treeIv"
        app:layout_constraintVertical_bias="0.44" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="centerInside"
        android:src="@mipmap/ic_red_packet_9"

        app:layout_constraintBottom_toBottomOf="@id/treeIv"
        app:layout_constraintEnd_toEndOf="@id/treeIv"
        app:layout_constraintHorizontal_bias="0.437"
        app:layout_constraintStart_toStartOf="@id/treeIv"

        app:layout_constraintTop_toTopOf="@id/treeIv"
        app:layout_constraintVertical_bias="0.295" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="centerInside"
        android:src="@mipmap/ic_red_packet_9"

        app:layout_constraintBottom_toBottomOf="@id/treeIv"
        app:layout_constraintEnd_toEndOf="@id/treeIv"
        app:layout_constraintHorizontal_bias="0.83"
        app:layout_constraintStart_toStartOf="@id/treeIv"

        app:layout_constraintTop_toTopOf="@id/treeIv"
        app:layout_constraintVertical_bias="0.33" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="centerInside"
        android:src="@mipmap/ic_red_packet_9"

        app:layout_constraintBottom_toBottomOf="@id/treeIv"
        app:layout_constraintEnd_toEndOf="@id/treeIv"
        app:layout_constraintHorizontal_bias="0.134"
        app:layout_constraintStart_toStartOf="@id/treeIv"

        app:layout_constraintTop_toTopOf="@id/treeIv"
        app:layout_constraintVertical_bias="0.491" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="centerInside"
        android:src="@mipmap/ic_red_packet_9"

        app:layout_constraintBottom_toBottomOf="@id/treeIv"
        app:layout_constraintEnd_toEndOf="@id/treeIv"
        app:layout_constraintHorizontal_bias="0.26"
        app:layout_constraintStart_toStartOf="@id/treeIv"

        app:layout_constraintTop_toTopOf="@id/treeIv"
        app:layout_constraintVertical_bias="0.15" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="centerInside"
        android:src="@mipmap/ic_red_packet_9"

        app:layout_constraintBottom_toBottomOf="@id/treeIv"
        app:layout_constraintEnd_toEndOf="@id/treeIv"
        app:layout_constraintHorizontal_bias="0.59"
        app:layout_constraintStart_toStartOf="@id/treeIv"

        app:layout_constraintTop_toTopOf="@id/treeIv"
        app:layout_constraintVertical_bias="0.1" />


    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="centerInside"
        android:src="@mipmap/ic_red_packet_9"

        app:layout_constraintBottom_toBottomOf="@id/treeIv"
        app:layout_constraintEnd_toEndOf="@id/treeIv"
        app:layout_constraintHorizontal_bias="0.76"
        app:layout_constraintStart_toStartOf="@id/treeIv"

        app:layout_constraintTop_toTopOf="@id/treeIv"
        app:layout_constraintVertical_bias="0.14" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="centerInside"
        android:src="@mipmap/ic_red_packet_9"

        app:layout_constraintBottom_toBottomOf="@id/treeIv"
        app:layout_constraintEnd_toEndOf="@id/treeIv"
        app:layout_constraintHorizontal_bias="0.1"
        app:layout_constraintStart_toStartOf="@id/treeIv"

        app:layout_constraintTop_toTopOf="@id/treeIv"
        app:layout_constraintVertical_bias="0.26" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="centerInside"
        android:src="@mipmap/ic_red_packet_9"

        app:layout_constraintBottom_toBottomOf="@id/treeIv"
        app:layout_constraintEnd_toEndOf="@id/treeIv"
        app:layout_constraintHorizontal_bias="0.41"
        app:layout_constraintStart_toStartOf="@id/treeIv"

        app:layout_constraintTop_toTopOf="@id/treeIv"
        app:layout_constraintVertical_bias="0.064" />
</android.support.constraint.ConstraintLayout>

图片资源奉上

https://download.csdn.net/download/qq_30299243/11255158

发布了95 篇原创文章 · 获赞 17 · 访问量 6万+

猜你喜欢

转载自blog.csdn.net/qq_30299243/article/details/93409733