约束布局在不同的屏幕上看起来不一样

时间:2019-06-29 04:35:03

标签: xml android-layout android-constraintlayout android-screen-support

我希望自己的布局支持所有屏幕尺寸,我正在使用约束布局,当我在不同的模拟器上运行它时,外观看起来并不相同,我正在使用dp来显示尺寸和边距,请注意此应用有12个屏幕,所以我不能为每个屏幕尺寸进行布局,我尝试将前两个cardviews的宽度设置为wrap_content,但似乎不起作用 [![小屏幕] [1]] [1]

 <androidx.cardview.widget.CardView
        android:id="@+id/id_card_timeView"
        android:layout_width="326dp"
        android:layout_height="72dp"
        android:layout_marginStart="18dp"
        android:layout_marginTop="11dp"
        android:layout_marginEnd="16dp"
        app:cardBackgroundColor="#ff1972a0"
        app:cardCornerRadius="39dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/cardView8">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="149dp"

            android:layout_marginTop="22dp"
            android:layout_marginEnd="145dp"
            android:layout_marginBottom="3dp"
            android:text="10"
            android:textColor="#fff"
            android:textSize="27sp" />

        <TextView
            android:layout_width="32dp"
            android:layout_height="58dp"
            android:layout_marginStart="90dp"

            android:layout_marginTop="22dp"
            android:layout_marginEnd="204dp"
            android:layout_marginBottom="3dp"
            android:text="09"
            android:textColor="#fff"
            android:textSize="27sp" />

        <TextView
            android:layout_width="159dp"
            android:layout_height="26dp"
            android:layout_marginStart="92dp"
            android:layout_marginTop="5dp"
            android:layout_marginEnd="94dp"
            android:layout_marginBottom="46dp"
            android:maxLines="1"
            android:text="time until next session"
            android:textAllCaps="true"
            android:textColor="#fff"
            android:textSize="12sp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="203dp"

            android:layout_marginTop="22dp"
            android:layout_marginEnd="91dp"
            android:layout_marginBottom="3dp"
            android:text="23"
            android:textColor="#fff"
            android:textSize="27sp" />
    </androidx.cardview.widget.CardView>

    <TextView
        android:id="@+id/textView2"
        android:layout_width="62dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="20dp"
        android:layout_marginTop="18dp"
        android:layout_marginEnd="278dp"
        android:text="OVERVIEW"
        android:textAllCaps="true"
        android:textColor="#ff565659"
        android:textSize="12sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/id_card_timeView" />

    <View
        android:id="@+id/view7"
        android:layout_width="327dp"
        android:layout_height="1dp"
        android:layout_marginStart="17dp"
        android:layout_marginTop="3dp"
        android:layout_marginEnd="16dp"
        android:background="#707070ff"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView13" />

    <View
        android:id="@+id/view6"
        android:layout_width="327dp"
        android:layout_height="1dp"
        android:layout_marginStart="17dp"
        android:layout_marginTop="3dp"
        android:layout_marginEnd="16dp"
        android:background="#707070ff"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView2" />

    <View
        android:id="@+id/view8"
        android:layout_width="327dp"
        android:layout_height="1dp"
        android:layout_marginStart="17dp"
        android:layout_marginTop="3dp"
        android:layout_marginEnd="16dp"
        android:background="#707070ff"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/id_reviews" />

    <TextView
        android:id="@+id/textView13"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="17dp"
        android:layout_marginTop="27dp"
        android:layout_marginEnd="296dp"
        android:text="ORDERS"
        android:textAllCaps="true"
        android:textColor="#ff565659"
        android:textSize="12sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/id_card_pagView" />

    <androidx.cardview.widget.CardView
        android:id="@+id/id_card_orderSmall"
        android:layout_width="wrap_content"
        android:layout_height="133dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"

        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/id_card_earning">

        <ImageView
            android:id="@+id/imageView9"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_marginStart="101dp"
            android:layout_marginTop="12dp"
            android:background="@drawable/card_images"
            android:scaleType="center"
            android:src="@drawable/order_icon" />

        <TextView

            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:layout_marginStart="16dp"
            android:layout_marginTop="67dp"
            android:layout_marginEnd="99dp"
            android:layout_marginBottom="40dp"
            android:text="ORDER"
            android:textAllCaps="true"
            android:textColor="#ff565659"
            android:textSize="12sp" />

        <TextView

            android:id="@+id/id_order_txt"
            android:layout_width="50dp"
            android:layout_height="49dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:layout_marginStart="18dp"
            android:layout_marginTop="81dp"
            android:layout_marginEnd="104dp"
            android:layout_marginBottom="3dp"
            android:text="44"
            android:textColor="#ff565659"
            android:textSize="30sp" />
    </androidx.cardview.widget.CardView>

    <androidx.cardview.widget.CardView
        android:id="@+id/id_card_pagView"

        android:layout_width="wrap_content"
        android:layout_height="133dp"
        android:layout_marginStart="20dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:background="@drawable/card_cut"
        app:layout_constraintEnd_toStartOf="@+id/id_card_orderSmall"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/id_sale_card">

        <ImageView
            android:id="@+id/imageView6"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_marginStart="101dp"
            android:layout_marginTop="12dp"
            android:layout_marginEnd="25dp"
            android:background="@drawable/card_images"
            android:scaleType="center"
            android:src="@drawable/pageview" />

        <TextView

            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:layout_marginStart="16dp"
            android:layout_marginTop="67dp"
            android:layout_marginEnd="75dp"
            android:layout_marginBottom="40dp"
            android:text="PAGE VIEW"
            android:textAllCaps="true"
            android:textColor="#ff565659"
            android:textSize="12sp" />

        <TextView

            android:id="@+id/id_pageView_txt"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:layout_marginStart="20dp"
            android:layout_marginTop="81dp"
            android:layout_marginEnd="85dp"
            android:layout_marginBottom="3dp"
            android:text="99k"
            android:textColor="#ff565659"
            android:textSize="30sp" />
    </androidx.cardview.widget.CardView>

    <androidx.cardview.widget.CardView
        android:id="@+id/id_sale_card"
        android:layout_width="wrap_content"
        android:layout_height="72dp"
        android:layout_marginStart="18dp"
        android:layout_marginTop="@dimen/_19sdp"
        android:layout_marginEnd="16dp"
        app:layout_constraintEnd_toStartOf="@+id/id_card_earning"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/view6">

        <ImageView
            android:id="@+id/imageView4"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_marginStart="101dp"
            android:layout_marginTop="15dp"
            android:layout_marginEnd="25dp"
            android:background="@drawable/card_images"
            android:scaleType="center"
            android:src="@drawable/sale" />

        <TextView
            android:id="@+id/id_sale_txt"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:layout_marginStart="19dp"
            android:layout_marginTop="34dp"
            android:layout_marginEnd="98dp"
            android:layout_marginBottom="11dp"
            android:text="$0.00"
            android:textColor="#ff565659" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:layout_marginStart="18dp"
            android:layout_marginTop="15dp"
            android:layout_marginEnd="109dp"
            android:layout_marginBottom="31dp"
            android:text="Sale"
            android:textAllCaps="true"
            android:textColor="#ff565659"
            android:textSize="12sp" />


    </androidx.cardview.widget.CardView>

    <androidx.cardview.widget.CardView
        android:id="@+id/id_card_earning"
        android:layout_width="wrap_content"
        android:layout_height="72dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="@dimen/_19sdp"
        android:layout_marginEnd="18dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/id_sale_card"
        app:layout_constraintTop_toBottomOf="@+id/view6">


        <ImageView
            android:id="@+id/imageView8"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_marginStart="101dp"
            android:layout_marginTop="15dp"
            android:background="@drawable/card_images"
            android:scaleType="center"
            android:src="@drawable/earning" />

        <TextView
            android:id="@+id/id_earning_txt"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:layout_marginStart="19dp"
            android:layout_marginTop="34dp"
            android:layout_marginEnd="98dp"
            android:layout_marginBottom="11dp"
            android:text="$0.00"
            android:textColor="#ff565659" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:layout_marginStart="18dp"
            android:layout_marginTop="15dp"
            android:maxLines="1"
            android:text="Earning"
            android:textAllCaps="true"
            android:textColor="#ff565659"
            android:textSize="12sp" />

    </androidx.cardview.widget.CardView>

    <TextView
        android:id="@+id/id_reviews"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="19dp"
        android:layout_marginTop="22dp"
        android:layout_marginEnd="289dp"
        android:layout_marginBottom="10dp"

        android:text="REVIEWS"
        android:textAllCaps="true"
        app:layout_constraintBottom_toTopOf="@id/id_card_reviewBig"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/id_card_orderBig" />

    <androidx.cardview.widget.CardView
        android:id="@+id/id_card_orderBig"
        android:layout_width="326dp"
        android:layout_height="253dp"
        android:layout_marginStart="18dp"
        android:layout_marginTop="13dp"
        android:layout_marginEnd="16dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.549"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/view7">

        <TextView
            android:id="@+id/id_cardTxt_total"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:layout_marginStart="16dp"
            android:layout_marginTop="21dp"
            android:layout_marginEnd="150dp"
            android:layout_marginBottom="205dp"
            android:text="Total"
            android:textColor="#ff565659" />

        <TextView
            android:id="@+id/completed_txt"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:layout_marginStart="16dp"
            android:layout_marginTop="53dp"
            android:layout_marginEnd="150dp"
            android:layout_marginBottom="174dp"
            android:text="Completed"
            android:textColor="#ff1e9b37" />

        <TextView
            android:id="@+id/pending_txt"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:layout_marginStart="16dp"
            android:layout_marginTop="85dp"
            android:layout_marginEnd="150dp"
            android:layout_marginBottom="110dp"
            android:text="Pending"
            android:textColor="#ff949494" />

        <TextView
            android:id="@+id/processing_txt"
            android:layout_width="wrap_content"
            android:layout_height="26dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:layout_marginStart="16dp"
            android:layout_marginTop="117dp"
            android:layout_marginEnd="150dp"
            android:layout_marginBottom="205dp"
            android:text="Processing"
            android:textColor="#ff6c6ca7" />

        <TextView
            android:id="@+id/cancelled_txt"
            android:layout_width="wrap_content"
            android:layout_height="26dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:layout_marginStart="16dp"
            android:layout_marginTop="149dp"
            android:layout_marginEnd="150dp"
            android:layout_marginBottom="205dp"
            android:text="Cancelled"
            android:textColor="#fff33d3d" />

        <TextView
            android:id="@+id/refunded_txt"
            android:layout_width="wrap_content"
            android:layout_height="26dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:layout_marginStart="16dp"
            android:layout_marginTop="181dp"
            android:layout_marginEnd="150dp"
            android:layout_marginBottom="205dp"
            android:text="Refunded"
            android:textColor="#ffd6d61a" />

        <TextView
            android:id="@+id/onHold_txt"
            android:layout_width="wrap_content"
            android:layout_height="26dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:layout_marginStart="16dp"
            android:layout_marginTop="213dp"
            android:layout_marginEnd="150dp"
            android:layout_marginBottom="205dp"
            android:text="On Hold"
            android:textColor="#ffbf7f0f" />

        <TextView
            android:id="@+id/id_txt_total_bigCard"
            android:layout_width="wrap_content"
            android:layout_height="26dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:layout_marginStart="283dp"
            android:layout_marginTop="21dp"
            android:layout_marginEnd="10dp"
            android:layout_marginBottom="206dp"
            android:text="100"
            android:textColor="#ff565659" />

        <TextView
            android:id="@+id/id_txt_completed_bigCard"
            android:layout_width="wrap_content"
            android:layout_height="26dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:layout_marginStart="283dp"
            android:layout_marginTop="53dp"
            android:layout_marginEnd="10dp"
            android:layout_marginBottom="206dp"
            android:text="100"
            android:textColor="#ff1e9b37" />

        <TextView
            android:id="@+id/id_txt_pending_bigCard"
            android:layout_width="wrap_content"
            android:layout_height="26dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:layout_marginStart="283dp"
            android:layout_marginTop="85dp"
            android:layout_marginEnd="10dp"
            android:layout_marginBottom="206dp"
            android:text="100"
            android:textColor="#ff949494" />

        <TextView
            android:id="@+id/id_txt_processing_bigCard"
            android:layout_width="wrap_content"
            android:layout_height="26dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:layout_marginStart="283dp"
            android:layout_marginTop="117dp"
            android:layout_marginEnd="10dp"
            android:layout_marginBottom="206dp"
            android:text="100"
            android:textColor="#ff6c6ca7" />

        <TextView
            android:id="@+id/id_txt_cancelled_bigCard"
            android:layout_width="wrap_content"
            android:layout_height="26dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:layout_marginStart="283dp"
            android:layout_marginTop="149dp"
            android:layout_marginEnd="10dp"
            android:layout_marginBottom="206dp"
            android:text="100"
            android:textColor="#fff33d3d" />

        <TextView
            android:id="@+id/id_txt_refunded_bigCard"
            android:layout_width="wrap_content"
            android:layout_height="26dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:layout_marginStart="283dp"
            android:layout_marginTop="181dp"
            android:layout_marginEnd="10dp"
            android:layout_marginBottom="206dp"
            android:text="100"
            android:textColor="#ffd6d61a" />

        <TextView
            android:id="@+id/id_txt_onHold_bigCard"
            android:layout_width="wrap_content"
            android:layout_height="26dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:layout_marginStart="283dp"
            android:layout_marginTop="213dp"
            android:layout_marginEnd="10dp"

            android:text="100"
            android:textColor="#ffbf7f0f" />


    </androidx.cardview.widget.CardView>

    <androidx.cardview.widget.CardView
        android:id="@+id/id_card_reviewBig"
        android:layout_width="326dp"
        android:layout_height="173dp"
        android:layout_marginStart="18dp"
        android:layout_marginTop="13dp"
        android:layout_marginEnd="16dp"
        android:layout_marginBottom="13dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.549"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/view8">

        <TextView
            android:id="@+id/id_cardTxt_totalReviews"
            android:layout_width="wrap_content"
            android:layout_height="26dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:layout_marginStart="16dp"
            android:layout_marginTop="21dp"
            android:layout_marginEnd="150dp"
            android:layout_marginBottom="205dp"
            android:text="Total"
            android:textColor="#ff565659" />

        <TextView
            android:id="@+id/id_cardTxt_liveReviews"
            android:layout_width="wrap_content"
            android:layout_height="26dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:layout_marginStart="16dp"
            android:layout_marginTop="53dp"
            android:layout_marginEnd="150dp"
            android:layout_marginBottom="174dp"
            android:text="Live"
            android:textColor="#ff565659" />



    </androidx.cardview.widget.CardView>




  [1]: https://i.stack.imgur.com/WsrEo.png

2 个答案:

答案 0 :(得分:0)

<androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#fff5f5f5">
  <androidx.cardview.widget.CardView
            android:id="@+id/id_sale_card"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="18dp"
            android:layout_marginTop="19dp"
            android:layout_marginEnd="16dp"
            app:layout_constraintEnd_toStartOf="@+id/id_card_earning"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/view6">
<androidx.cardview.widget.CardView
            android:id="@+id/id_card_earning"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="189dp"
            android:layout_marginTop="19dp"
            android:layout_marginEnd="16dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/view6">  

保留这样的UI,并在libs以下使用

Intuit SSP Intuit SDP

答案 1 :(得分:0)

@Venky的回答确实是这样,但是在我的回答中,我想解释一下为什么您的布局在所有设备上看起来都不一样:

  • 在Android中,开发Android应用程序时需要考虑不同屏幕尺寸的数量。
  • 不同的手机具有不同的屏幕尺寸,在您的布局中,您使用的是固定尺寸的视图(例如,固定尺寸为android:layout_width =“ 155dp”),结果是在一个屏幕上看起来不错(您的android工作室预览屏幕),但在其他屏幕(您的实际电话)上显示效果不佳。

一个简单的解决方案是将视图的宽度设置为match_parent(这样会在屏幕上分布),视图的高度设置为wrap_content

类似的东西:

 <androidx.cardview.widget.CardView
        android:id="@+id/id_sale_card"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        app:layout_constraintEnd_toStartOf="@+id/id_card_earning"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/view6">

<androidx.cardview.widget.CardView
        android:id="@+id/id_card_earning"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/view6">

编辑:

这是我使用Guidelines的新布局:

<?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"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent">


<android.support.v7.widget.CardView
    android:id="@+id/id_card_timeView"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    app:cardBackgroundColor="#ff1972a0"
    app:cardCornerRadius="39dp"
    app:layout_constraintBottom_toTopOf="@+id/textView2"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="149dp"

        android:layout_marginTop="22dp"
        android:layout_marginEnd="145dp"
        android:layout_marginBottom="3dp"
        android:text="10"
        android:textColor="#fff"
        android:textSize="27sp" />

    <TextView
        android:layout_width="32dp"
        android:layout_height="58dp"
        android:layout_marginStart="90dp"

        android:layout_marginTop="22dp"
        android:layout_marginEnd="204dp"
        android:layout_marginBottom="3dp"
        android:text="09"
        android:textColor="#fff"
        android:textSize="27sp" />

    <TextView
        android:layout_width="159dp"
        android:layout_height="26dp"
        android:layout_marginStart="92dp"
        android:layout_marginTop="5dp"
        android:layout_marginEnd="94dp"
        android:layout_marginBottom="46dp"
        android:maxLines="1"
        android:text="time until next session"
        android:textAllCaps="true"
        android:textColor="#fff"
        android:textSize="12sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="203dp"

        android:layout_marginTop="22dp"
        android:layout_marginEnd="91dp"
        android:layout_marginBottom="3dp"
        android:text="23"
        android:textColor="#fff"
        android:textSize="27sp" />
</android.support.v7.widget.CardView>

<TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="OVERVIEW"
    android:textAllCaps="true"
    android:textColor="#ff565659"
    android:textSize="12sp"
    app:layout_constraintBottom_toTopOf="@+id/id_sale_card"
    app:layout_constraintStart_toStartOf="@+id/id_card_timeView"
    app:layout_constraintTop_toBottomOf="@+id/id_card_timeView" />

<View
    android:id="@+id/view7"
    android:layout_width="0dp"
    android:layout_height="1dp"
    android:background="#707070ff"
    app:layout_constraintBottom_toTopOf="@+id/id_card_orderBig"
    app:layout_constraintEnd_toEndOf="@+id/id_card_timeView"
    app:layout_constraintStart_toStartOf="@+id/id_card_timeView"
    app:layout_constraintTop_toBottomOf="@+id/textView13" />

<View
    android:id="@+id/view6"
    android:layout_width="0dp"
    android:layout_height="1dp"
    android:background="#707070ff"
    app:layout_constraintBottom_toTopOf="@+id/id_card_pagView"
    app:layout_constraintEnd_toEndOf="@+id/id_card_timeView"
    app:layout_constraintStart_toStartOf="@+id/id_card_timeView"
    app:layout_constraintTop_toBottomOf="@+id/id_sale_card" />

<TextView
    android:id="@+id/textView13"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="ORDERS"
    android:textAllCaps="true"
    android:textColor="#ff565659"
    android:textSize="12sp"
    app:layout_constraintBottom_toTopOf="@+id/view7"
    app:layout_constraintStart_toStartOf="@+id/id_card_timeView"
    app:layout_constraintTop_toBottomOf="@+id/id_card_pagView" />

<android.support.v7.widget.CardView
    android:id="@+id/id_card_orderSmall"
    android:layout_width="0dp"
    android:layout_height="0dp"

    app:layout_constraintBottom_toTopOf="@+id/view7"
    app:layout_constraintEnd_toEndOf="@+id/id_card_timeView"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/id_card_pagView"
    app:layout_constraintTop_toBottomOf="@+id/id_card_earning">

    <ImageView
        android:id="@+id/imageView9"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_marginStart="101dp"
        android:layout_marginTop="12dp"
        android:background="@drawable/card_images"
        android:scaleType="center"
        android:src="@drawable/order_icon" />

    <TextView

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="16dp"
        android:layout_marginTop="67dp"
        android:layout_marginEnd="99dp"
        android:layout_marginBottom="40dp"
        android:text="ORDER"
        android:textAllCaps="true"
        android:textColor="#ff565659"
        android:textSize="12sp" />

    <TextView

        android:id="@+id/id_order_txt"
        android:layout_width="50dp"
        android:layout_height="49dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="18dp"
        android:layout_marginTop="81dp"
        android:layout_marginEnd="104dp"
        android:layout_marginBottom="3dp"
        android:text="44"
        android:textColor="#ff565659"
        android:textSize="30sp" />
</android.support.v7.widget.CardView>

<android.support.v7.widget.CardView
    android:id="@+id/id_card_pagView"

    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="@drawable/card_cut"
    app:layout_constraintBottom_toTopOf="@+id/textView13"
    app:layout_constraintEnd_toStartOf="@+id/id_card_orderSmall"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="@+id/id_card_timeView"
    app:layout_constraintTop_toBottomOf="@+id/view6">

    <ImageView
        android:id="@+id/imageView6"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_marginStart="101dp"
        android:layout_marginTop="12dp"
        android:layout_marginEnd="25dp"
        android:background="@drawable/card_images"
        android:scaleType="center"
        android:src="@drawable/pageview" />

    <TextView

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="16dp"
        android:layout_marginTop="67dp"
        android:layout_marginEnd="75dp"
        android:layout_marginBottom="40dp"
        android:text="PAGE VIEW"
        android:textAllCaps="true"
        android:textColor="#ff565659"
        android:textSize="12sp" />

    <TextView

        android:id="@+id/id_pageView_txt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="20dp"
        android:layout_marginTop="81dp"
        android:layout_marginEnd="85dp"
        android:layout_marginBottom="3dp"
        android:text="99k"
        android:textColor="#ff565659"
        android:textSize="30sp" />
</android.support.v7.widget.CardView>

<android.support.v7.widget.CardView
    android:id="@+id/id_sale_card"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toTopOf="@+id/view6"
    app:layout_constraintEnd_toStartOf="@+id/id_card_earning"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="@+id/id_card_timeView"
    app:layout_constraintTop_toBottomOf="@+id/textView2">

    <ImageView
        android:id="@+id/imageView4"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_marginStart="101dp"
        android:layout_marginTop="15dp"
        android:layout_marginEnd="25dp"
        android:background="@drawable/card_images"
        android:scaleType="center"
        android:src="@drawable/sale" />

    <TextView
        android:id="@+id/id_sale_txt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="19dp"
        android:layout_marginTop="34dp"
        android:layout_marginEnd="98dp"
        android:layout_marginBottom="11dp"
        android:text="$0.00"
        android:textColor="#ff565659" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="18dp"
        android:layout_marginTop="15dp"
        android:layout_marginEnd="109dp"
        android:layout_marginBottom="31dp"
        android:text="Sale"
        android:textAllCaps="true"
        android:textColor="#ff565659"
        android:textSize="12sp" />


</android.support.v7.widget.CardView>

<android.support.v7.widget.CardView
    android:id="@+id/id_card_earning"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toTopOf="@+id/id_card_orderSmall"
    app:layout_constraintEnd_toEndOf="@+id/id_card_timeView"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/id_sale_card"
    app:layout_constraintTop_toBottomOf="@+id/id_card_timeView">


    <ImageView
        android:id="@+id/imageView8"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_marginStart="101dp"
        android:layout_marginTop="15dp"
        android:background="@drawable/card_images"
        android:scaleType="center"
        android:src="@drawable/earning" />

    <TextView
        android:id="@+id/id_earning_txt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="19dp"
        android:layout_marginTop="34dp"
        android:layout_marginEnd="98dp"
        android:layout_marginBottom="11dp"
        android:text="$0.00"
        android:textColor="#ff565659" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="18dp"
        android:layout_marginTop="15dp"
        android:maxLines="1"
        android:text="Earning"
        android:textAllCaps="true"
        android:textColor="#ff565659"
        android:textSize="12sp" />

</android.support.v7.widget.CardView>

<android.support.v7.widget.CardView
    android:id="@+id/id_card_orderBig"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="@+id/id_card_timeView"
    app:layout_constraintStart_toStartOf="@+id/id_card_timeView"
    app:layout_constraintTop_toBottomOf="@+id/view7">

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/completed_txt"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:text="Completed"
            android:textColor="#ff1e9b37"
            app:layout_constraintBottom_toTopOf="@+id/processing_txt"
            app:layout_constraintStart_toStartOf="@+id/onHold_txt"
            app:layout_constraintTop_toBottomOf="@+id/onHold_txt" />

        <TextView
            android:id="@+id/pending_txt"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:text="Pending"
            android:textColor="#ff949494"
            app:layout_constraintBottom_toTopOf="@+id/refunded_txt"
            app:layout_constraintStart_toStartOf="@+id/onHold_txt"
            app:layout_constraintTop_toBottomOf="@+id/cancelled_txt" />

        <TextView
            android:id="@+id/processing_txt"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:text="Processing"
            android:textColor="#ff6c6ca7"
            app:layout_constraintBottom_toTopOf="@+id/cancelled_txt"
            app:layout_constraintStart_toStartOf="@+id/onHold_txt"
            app:layout_constraintTop_toBottomOf="@+id/completed_txt" />

        <TextView
            android:id="@+id/cancelled_txt"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:text="Cancelled"
            android:textColor="#fff33d3d"
            app:layout_constraintBottom_toTopOf="@+id/pending_txt"
            app:layout_constraintStart_toStartOf="@+id/onHold_txt"
            app:layout_constraintTop_toBottomOf="@+id/processing_txt" />

        <TextView
            android:id="@+id/refunded_txt"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:text="Refunded"
            android:textColor="#ffd6d61a"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="@+id/onHold_txt"
            app:layout_constraintTop_toBottomOf="@+id/pending_txt" />

        <TextView
            android:id="@+id/onHold_txt"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:layout_marginStart="8dp"
            android:layout_marginEnd="8dp"
            android:text="On Hold"
            android:textColor="#ffbf7f0f"
            app:layout_constraintBottom_toTopOf="@+id/completed_txt"
            app:layout_constraintEnd_toStartOf="@+id/guideline7"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/id_txt_total_bigCard"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:layout_marginStart="8dp"
            android:layout_marginEnd="8dp"
            android:text="100"
            android:textColor="#ff565659"
            app:layout_constraintBottom_toTopOf="@+id/id_txt_processing_bigCard"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="@+id/guideline7"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/id_txt_completed_bigCard"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:text="100"
            android:textColor="#ff1e9b37"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="@+id/id_txt_pending_bigCard"
            app:layout_constraintStart_toStartOf="@+id/id_txt_pending_bigCard"
            app:layout_constraintTop_toBottomOf="@+id/id_txt_pending_bigCard" />

        <TextView
            android:id="@+id/id_txt_pending_bigCard"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:text="100"
            android:textColor="#ff949494"
            app:layout_constraintBottom_toTopOf="@+id/id_txt_completed_bigCard"
            app:layout_constraintEnd_toEndOf="@+id/id_txt_refunded_bigCard"
            app:layout_constraintStart_toStartOf="@+id/id_txt_refunded_bigCard"
            app:layout_constraintTop_toBottomOf="@+id/id_txt_refunded_bigCard" />

        <TextView
            android:id="@+id/id_txt_processing_bigCard"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:text="100"
            android:textColor="#ff6c6ca7"
            app:layout_constraintBottom_toTopOf="@+id/id_txt_cancelled_bigCard"
            app:layout_constraintEnd_toEndOf="@+id/id_txt_total_bigCard"
            app:layout_constraintStart_toStartOf="@+id/id_txt_total_bigCard"
            app:layout_constraintTop_toBottomOf="@+id/id_txt_total_bigCard" />

        <TextView
            android:id="@+id/id_txt_cancelled_bigCard"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:text="100"
            android:textColor="#fff33d3d"
            app:layout_constraintBottom_toTopOf="@+id/id_txt_onHold_bigCard"
            app:layout_constraintEnd_toEndOf="@+id/id_txt_total_bigCard"
            app:layout_constraintStart_toStartOf="@+id/id_txt_total_bigCard"
            app:layout_constraintTop_toBottomOf="@+id/id_txt_processing_bigCard" />

        <TextView
            android:id="@+id/id_txt_refunded_bigCard"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:text="100"
            android:textColor="#ffd6d61a"
            app:layout_constraintBottom_toTopOf="@+id/id_txt_pending_bigCard"
            app:layout_constraintEnd_toEndOf="@+id/id_txt_total_bigCard"
            app:layout_constraintStart_toStartOf="@+id/id_txt_total_bigCard"
            app:layout_constraintTop_toBottomOf="@+id/id_txt_onHold_bigCard" />

        <TextView
            android:id="@+id/id_txt_onHold_bigCard"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"

            android:text="100"
            android:textColor="#ffbf7f0f"
            app:layout_constraintBottom_toTopOf="@+id/id_txt_refunded_bigCard"
            app:layout_constraintEnd_toEndOf="@+id/id_txt_total_bigCard"
            app:layout_constraintStart_toStartOf="@+id/id_txt_total_bigCard"
            app:layout_constraintTop_toBottomOf="@+id/id_txt_cancelled_bigCard" />

        <android.support.constraint.Guideline
            android:id="@+id/guideline7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_begin="163dp"
            app:layout_constraintGuide_percent=".56" />


        </android.support.constraint.ConstraintLayout>

    </android.support.v7.widget.CardView>

</android.support.constraint.ConstraintLayout>

他的样子:

enter image description here