ConstraintLayout打造高度适配方案

2,602 阅读6分钟

一、前言

这是一篇Android适配的文章,主要是传达思想,本篇文章使用ConstraintLayout + ScrollView(个人推荐使用recycleView)适配Android机型

二、说明

本文的demo演示是使用“小米商城”中“我的”这一界面布局。

三、效果图

Android studio蓝图(额...没多大用...看起来很有画面感才贴出来的)

原图与使用ConstraintLayout布局边界

四、适配方式说明

1、头部:

2、第二部分:

3、第三部分:

4、第四部分,两种适配方式,可根据实际情况使用:

(1)第一种:

(2)第二种,这种是针对于固定的margin加上控件固定大小大于某些机型进行适配的方案:

横竖屏下两种效果图对比:

五、ConstraintLayout+scrollview适配的xml代码

<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:overScrollMode="never"
android:scrollbars="none"
>

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#FFFFFF">

    <!-- 头部 (start)-->
    <android.support.v7.widget.AppCompatImageView
        android:id="@+id/img_bg"
        android:layout_width="match_parent"
        android:layout_height="106dp"
        android:background="#F37D0F"
        />

    <android.support.v7.widget.AppCompatImageView
        android:id="@+id/img_portrait"
        android:layout_width="49dp"
        android:layout_height="49dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="40dp"
        android:src="#80B548"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@id/img_bg"/>

    <android.support.v7.widget.AppCompatTextView
        android:id="@+id/txt_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="10dp"
        android:text="1264637837"
        android:textColor="#FEF2D8"
        app:layout_constraintBottom_toBottomOf="@id/img_bg"
        app:layout_constraintStart_toEndOf="@id/img_portrait"
        app:layout_constraintTop_toTopOf="@id/img_bg"
        app:layout_constraintVertical_bias="0.625"/>

    <android.support.v7.widget.AppCompatImageView
        android:id="@+id/txt_msg"
        android:layout_width="22dp"
        android:layout_height="22dp"
        android:layout_marginEnd="10dp"
        android:layout_marginTop="26dp"
        android:src="#80B548"
        app:layout_constraintEnd_toEndOf="@id/img_bg"
        app:layout_constraintTop_toTopOf="@id/img_bg"/>

    <android.support.v7.widget.AppCompatTextView
        android:id="@+id/txt_vip"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#FBD34B"
        android:gravity="center_vertical|end"
        android:paddingBottom="4dp"
        android:paddingEnd="15dp"
        android:paddingStart="34dp"
        android:paddingTop="4dp"
        android:text="会员积分"
        android:textColor="#B06713"
        android:textSize="10sp"
        app:layout_constraintBottom_toBottomOf="@id/img_bg"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.725"/>

    <android.support.v7.widget.AppCompatImageView
        android:id="@+id/img_vip"
        android:layout_width="15dp"
        android:layout_height="14dp"
        android:layout_marginStart="12dp"
        android:src="#80B548"
        app:layout_constraintBottom_toBottomOf="@id/txt_vip"
        app:layout_constraintStart_toStartOf="@id/txt_vip"
        app:layout_constraintTop_toTopOf="@id/txt_vip"
        />
    <!-- 头部 (end)-->

    <!-- 第二部分(start) -->
    <android.support.v7.widget.AppCompatTextView
        android:id="@+id/txt_order"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="14dp"
        android:layout_marginTop="13dp"
        android:text="我的订单"
        android:textColor="#000"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/img_bg"
        />

    <android.support.v7.widget.AppCompatImageView
        android:id="@+id/img_order"
        android:layout_width="8dp"
        android:layout_height="13dp"
        android:layout_marginEnd="14dp"
        android:scaleType="fitXY"
        android:src="#80B548"
        android:textSize="13sp"
        app:layout_constraintBottom_toBottomOf="@id/txt_order"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@id/txt_order"/>

    <android.support.v7.widget.AppCompatTextView
        android:id="@+id/txt_order_all"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="9dp"
        android:layout_marginStart="14dp"
        android:text="全部订单"
        android:textSize="13sp"
        app:layout_constraintBottom_toBottomOf="@id/txt_order"
        app:layout_constraintEnd_toStartOf="@id/img_order"
        app:layout_constraintTop_toTopOf="@id/txt_order"
        />

    <View
        android:id="@+id/line1"
        android:layout_width="match_parent"
        android:layout_height="1px"
        android:layout_marginTop="13dp"
        android:background="#e7e7e7"
        app:layout_constraintTop_toBottomOf="@id/txt_order"/>

    <android.support.v7.widget.AppCompatImageView
        android:id="@+id/img_order_pay"
        android:layout_width="23dp"
        android:layout_height="20dp"
        android:layout_marginStart="33dp"
        android:layout_marginTop="27dp"
        android:scaleType="fitXY"
        android:src="#80B548"
        app:layout_constraintEnd_toStartOf="@id/img_order_gain"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/line1"/>

    <android.support.v7.widget.AppCompatTextView
        android:id="@+id/txt_order_pay"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="9dp"
        android:text="待付款"
        android:textSize="10sp"
        app:layout_constraintEnd_toEndOf="@id/img_order_pay"
        app:layout_constraintStart_toStartOf="@id/img_order_pay"
        app:layout_constraintTop_toBottomOf="@id/img_order_pay"
        />

    <android.support.v7.widget.AppCompatImageView
        android:id="@+id/img_order_gain"
        android:layout_width="23dp"
        android:layout_height="20dp"
        android:scaleType="fitXY"
        android:src="#80B548"
        app:layout_constraintBottom_toBottomOf="@id/img_order_pay"
        app:layout_constraintEnd_toStartOf="@id/img_order_comment"
        app:layout_constraintStart_toEndOf="@id/img_order_pay"
        app:layout_constraintTop_toTopOf="@id/img_order_pay"/>

    <android.support.v7.widget.AppCompatTextView
        android:id="@+id/view"
        android:layout_width="17dp"
        android:layout_height="17dp"
        android:layout_marginBottom="8dp"
        android:layout_marginStart="13dp"
        android:background="#F1661F"
        android:gravity="center"
        android:text="1"
        android:textColor="#fff"
        android:textSize="10sp"
        app:layout_constraintBottom_toBottomOf="@id/img_order_gain"
        app:layout_constraintStart_toStartOf="@id/img_order_gain"/>

    <android.support.v7.widget.AppCompatTextView
        android:id="@+id/txt_order_gain"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="9dp"
        android:text="待收货"
        android:textSize="10sp"
        app:layout_constraintEnd_toEndOf="@id/img_order_gain"
        app:layout_constraintStart_toStartOf="@id/img_order_gain"
        app:layout_constraintTop_toBottomOf="@id/img_order_gain"
        />

    <android.support.v7.widget.AppCompatImageView
        android:id="@+id/img_order_comment"
        android:layout_width="23dp"
        android:layout_height="20dp"
        android:scaleType="fitXY"
        android:src="#80B548"
        app:layout_constraintBottom_toBottomOf="@id/img_order_pay"
        app:layout_constraintEnd_toStartOf="@id/img_order_complete"
        app:layout_constraintStart_toEndOf="@id/img_order_gain"
        app:layout_constraintTop_toTopOf="@id/img_order_pay"/>

    <android.support.v7.widget.AppCompatTextView
        android:id="@+id/txt_order_comment"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="9dp"
        android:text="待评价"
        android:textSize="10sp"
        app:layout_constraintEnd_toEndOf="@id/img_order_comment"
        app:layout_constraintStart_toStartOf="@id/img_order_comment"
        app:layout_constraintTop_toBottomOf="@id/img_order_comment"
        />

    <android.support.v7.widget.AppCompatImageView
        android:id="@+id/img_order_complete"
        android:layout_width="23dp"
        android:layout_height="20dp"
        android:layout_marginEnd="33dp"
        android:scaleType="fitXY"
        android:src="#80B548"
        app:layout_constraintBottom_toBottomOf="@id/img_order_pay"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/img_order_comment"
        app:layout_constraintTop_toTopOf="@id/img_order_pay"/>

    <android.support.v7.widget.AppCompatTextView
        android:id="@+id/txt_order_complete"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="9dp"
        android:text="退换修"
        android:textSize="10sp"
        app:layout_constraintEnd_toEndOf="@id/img_order_complete"
        app:layout_constraintStart_toStartOf="@id/img_order_complete"
        app:layout_constraintTop_toBottomOf="@id/img_order_complete"
        />
    <!-- 第二部分(end) -->

    <View
        android:id="@+id/line2"
        android:layout_width="match_parent"
        android:layout_height="1px"
        android:layout_marginTop="13dp"
        android:background="#e7e7e7"
        app:layout_constraintTop_toBottomOf="@id/txt_order_pay"/>

    <!-- 第三部分(start) -->
    <android.support.v7.widget.AppCompatImageView
        android:id="@+id/lin3"
        android:layout_width="1dp"
        android:layout_height="53dp"
        android:paddingBottom="10dp"
        android:paddingTop="10dp"
        android:src="#e7e7e7"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.214"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/line2"/>


    <android.support.v7.widget.AppCompatImageView
        android:id="@+id/img_advertising"
        android:layout_width="match_parent"
        android:layout_height="101dp"
        android:background="#CBE6E1"
        app:layout_constraintTop_toBottomOf="@id/lin3"
        />

    <android.support.v7.widget.AppCompatTextView
        android:id="@+id/txt_status"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:maxLines="1"
        android:text="最新状态"
        android:textColor="#767676"
        android:textSize="9sp"
        app:layout_constraintBottom_toBottomOf="@id/lin3"
        app:layout_constraintEnd_toEndOf="@id/lin3"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@id/lin3"
        app:layout_constraintVertical_bias="0.328"
        />

    <android.support.v7.widget.AppCompatTextView
        android:id="@+id/txt_status_time"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:maxLines="1"
        android:text="2-25 23:35"
        android:textColor="#767676"
        android:textSize="9sp"
        app:layout_constraintBottom_toBottomOf="@id/lin3"
        app:layout_constraintEnd_toEndOf="@id/lin3"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@id/lin3"
        app:layout_constraintVertical_bias="0.701"
        />

    <android.support.v7.widget.AppCompatImageView
        android:id="@+id/img_product"
        android:layout_width="26dp"
        android:layout_height="26dp"
        android:layout_marginStart="13dp"
        android:src="#80B548"
        app:layout_constraintBottom_toBottomOf="@id/lin3"
        app:layout_constraintStart_toEndOf="@id/lin3"
        app:layout_constraintTop_toTopOf="@id/lin3"/>

    <android.support.v7.widget.AppCompatTextView
        android:id="@+id/txt_status_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="13dp"
        android:maxLines="1"
        android:text="已出库"
        android:textColor="#F9731C"
        android:textSize="10sp"
        app:layout_constraintBottom_toBottomOf="@id/lin3"
        app:layout_constraintStart_toEndOf="@id/img_product"
        app:layout_constraintTop_toTopOf="@id/lin3"
        app:layout_constraintVertical_bias="0.28"/>

    <android.support.v7.widget.AppCompatTextView
        android:id="@+id/txt_status_msg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="13dp"
        android:maxLines="1"
        android:text="广州市,快件到达[广州金堂..........]"
        android:textColor="#7E7E7E"
        android:textSize="10sp"
        app:layout_constraintBottom_toBottomOf="@id/lin3"
        app:layout_constraintStart_toEndOf="@id/img_product"
        app:layout_constraintTop_toTopOf="@id/lin3"
        app:layout_constraintVertical_bias="0.744"/>
    <!-- 第三部分(end) -->

    <View
        android:id="@+id/line4"
        android:layout_width="match_parent"
        android:layout_height="8dp"
        android:background="#F5F5F5"
        app:layout_constraintTop_toBottomOf="@id/img_advertising"/>

    <!-- 第四部分(start) -->
    <android.support.v7.widget.AppCompatImageView
        android:id="@+id/img_coupon"
        android:layout_width="21dp"
        android:layout_height="16dp"
        android:layout_marginStart="17dp"
        android:layout_marginTop="19dp"
        android:scaleType="fitXY"
        android:src="#80B548"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/line4"/>

    <android.support.v7.widget.AppCompatTextView
        android:id="@+id/txt_coupon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:text="优惠券"
        android:textSize="12sp"
        app:layout_constraintBottom_toBottomOf="@id/img_coupon"
        app:layout_constraintStart_toEndOf="@id/img_coupon"
        app:layout_constraintTop_toTopOf="@id/img_coupon"
        />

    <android.support.v7.widget.AppCompatImageView
        android:id="@+id/img_right"
        android:layout_width="9dp"
        android:layout_height="15dp"
        android:layout_marginEnd="12dp"
        android:scaleType="fitXY"
        android:src="#80B548"
        app:layout_constraintBottom_toBottomOf="@id/img_coupon"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@id/img_coupon"
        />

    <View
        android:id="@+id/line5"
        android:layout_width="wrap_content"
        android:layout_height="1px"
        android:layout_marginStart="53dp"
        android:layout_marginTop="19dp"
        android:background="#D7D7D7"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/img_coupon"/>

    <android.support.v7.widget.AppCompatImageView
        android:id="@+id/img_welfare"
        android:layout_width="21dp"
        android:layout_height="16dp"
        android:layout_marginStart="17dp"
        android:layout_marginTop="19dp"
        android:scaleType="fitXY"
        android:src="#80B548"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/line5"/>

    <android.support.v7.widget.AppCompatTextView
        android:id="@+id/txt_welfare"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:text="会员福利"
        android:textSize="12sp"
        app:layout_constraintBottom_toBottomOf="@id/img_welfare"
        app:layout_constraintStart_toEndOf="@id/img_welfare"
        app:layout_constraintTop_toTopOf="@id/img_welfare"
        />

    <android.support.v7.widget.AppCompatImageView
        android:id="@+id/img_right_welfare"
        android:layout_width="9dp"
        android:layout_height="15dp"
        android:layout_marginEnd="12dp"
        android:scaleType="fitXY"
        android:src="#80B548"
        app:layout_constraintBottom_toBottomOf="@id/img_welfare"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@id/img_welfare"
        />

    <View
        android:id="@+id/line6"
        android:layout_width="wrap_content"
        android:layout_height="1px"
        android:layout_marginStart="53dp"
        android:layout_marginTop="19dp"
        android:background="#D7D7D7"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/img_welfare"/>

    <android.support.v7.widget.AppCompatImageView
        android:id="@+id/img_wallet"
        android:layout_width="21dp"
        android:layout_height="16dp"
        android:layout_marginStart="17dp"
        android:layout_marginTop="19dp"
        android:scaleType="fitXY"
        android:src="#80B548"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/line6"/>

    <android.support.v7.widget.AppCompatTextView
        android:id="@+id/txt_wallet"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:text="我的钱包"
        android:textSize="12sp"
        app:layout_constraintBottom_toBottomOf="@id/img_wallet"
        app:layout_constraintStart_toEndOf="@id/img_wallet"
        app:layout_constraintTop_toTopOf="@id/img_wallet"
        />

    <android.support.v7.widget.AppCompatImageView
        android:id="@+id/img_right_wallet"
        android:layout_width="9dp"
        android:layout_height="15dp"
        android:layout_marginEnd="12dp"
        android:scaleType="fitXY"
        android:src="#80B548"
        app:layout_constraintBottom_toBottomOf="@id/img_wallet"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@id/img_wallet"
        />

    <View
        android:id="@+id/line7"
        android:layout_width="match_parent"
        android:layout_height="8dp"
        android:layout_marginTop="19dp"
        android:background="#F5F5F5"
        app:layout_constraintTop_toBottomOf="@id/img_wallet"/>
    <!-- 第四部分(end) -->

    <!-- 第四部分另一种适配模式(start) -->
    <android.support.v7.widget.AppCompatImageView
        android:id="@+id/img_te"
        android:layout_width="21dp"
        android:layout_height="16dp"
        android:layout_marginTop="19dp"
        android:scaleType="fitXY"
        android:src="#80B548"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.05"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/line7"/>

    <android.support.v7.widget.AppCompatTextView
        android:id="@+id/txt_te"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="我的钱包"
        android:textSize="12sp"
        app:layout_constraintBottom_toBottomOf="@id/img_te"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.173"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@id/img_te"
        />

    <android.support.v7.widget.AppCompatImageView
        android:id="@+id/img_right_te"
        android:layout_width="9dp"
        android:layout_height="15dp"
        android:scaleType="fitXY"
        android:src="#80B548"
        app:layout_constraintBottom_toBottomOf="@id/img_te"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.966"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@id/img_te"
        />

    <View
        android:id="@+id/line8"
        android:layout_width="match_parent"
        android:layout_height="8dp"
        android:layout_marginTop="19dp"
        android:background="#F5F5F5"
        app:layout_constraintTop_toBottomOf="@id/img_te"/>
    <!-- 第四部分另一种适配模式(end) -->


</android.support.constraint.ConstraintLayout>

</ScrollView>

六、结语

本文主要对垂直方向可滑动的布局进行适配,如果您的界面是固定不能滑动的,可以让控件约束于parent然后使用bias进行适配(参考第四部分的第二种方法)。

由于不清楚大家对适配方案和ConstraintLayout的了解程度,本文的描述可能比较粗略,对ConstraintLayout也没有太多的解释,如果大家在使用过程中有疑问,请在下方留言,我会根据您的需求尽快的整理出更详细的文章。