com.android.support（二）ConstraintLayout

 

ConstraintLayout

之前一直挺排斥这个布局，因为我总觉得我使用RelativeLayout、LinearLayout的布局组合完全可以实现基本上所有布局样式，也已经很熟悉这套玩法，就像使用flex一样舒爽，直到我遇见了一个特别恶心的布局，我里三层外三层终于把布局搞出来了，却发现这个布局加载起来竟然慢了！！！！！！！！！！

好吧，我就抱着试一下的心态去拥抱一下我排斥许久的Constraintlayout，用了之后才发现，我XXXX！！！ 真好使。

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

相对定位的常用属性：
layout_constraintLeft_toLeftOf
layout_constraintLeft_toRightOf
layout_constraintRight_toLeftOf
layout_constraintRight_toRightOf
layout_constraintTop_toTopOf
layout_constraintTop_toBottomOf
layout_constraintBottom_toTopOf
layout_constraintBottom_toBottomOf
layout_constraintBaseline_toBaselineOf
layout_constraintStart_toEndOf
layout_constraintStart_toStartOf
layout_constraintEnd_toStartOf
layout_constraintEnd_toEndOf

文本基线对齐
layout_constraintBaseline_toBaselineOf

相对于某控件多少角度多少距离
app:layout_constraintCircle="@+id/tv1"
app:layout_constraintCircleAngle="100"（角度）
app:layout_constraintCircleRadius="150dp"（距离）

居中也很简单、把四个边都拉一下，自动居中
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"

还可以设置宽高比
app:layout_constraintDimensionRatio="H,1:3"  高:宽=1:3
app:layout_constraintDimensionRatio="W,1:3"  宽:高=1:3

然后就是Linearlayout的效果实现，链

把要排成一串的布局，分别连起来，再设置layout_constraintHorizontal_chainStyle来改变整条链的样式。chains提供了3种样式，分别是：
CHAIN_SPREAD  展开元素 (默认)； （有点像flex justify-content：space-around）
CHAIN_SPREAD_INSIDE   展开元素，但链的两端贴近parent；（有点像flex justify-content：space-between）
CHAIN_PACKED   链的元素将被打包在一起（有点像flex justify-content：center）     

比Linearlayout更像flex，舒爽

 

  <TextView
        android:id="@+id/tv_inputnum_a"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_marginLeft="2dp"
        android:layout_marginTop="60dp"
        android:layout_marginRight="2dp"
        android:background="@drawable/setting_item_select_for_user_num"
        android:focusable="true"
        android:focusableInTouchMode="true"
        android:gravity="center"
        android:text="A"
        android:textColor="@drawable/inputcodenum_textcolour"
        android:textSize="16sp"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/tv_inputnum_b"
        app:layout_constraintTop_toBottomOf="@id/edit_text" />

    <TextView
        android:id="@+id/tv_inputnum_b"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_marginLeft="2dp"
        android:layout_marginTop="60dp"
        android:layout_marginRight="2dp"
        android:background="@drawable/setting_item_select_for_user_num"
        android:focusable="true"
        android:focusableInTouchMode="true"
        android:gravity="center"
        android:text="B"
        android:textColor="@drawable/inputcodenum_textcolour"
        android:textSize="16sp"
        app:layout_constraintLeft_toRightOf="@+id/tv_inputnum_a"
        app:layout_constraintRight_toLeftOf="@+id/tv_inputnum_c"
        app:layout_constraintTop_toBottomOf="@id/edit_text" />

    <TextView
        android:id="@+id/tv_inputnum_c"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_marginLeft="2dp"
        android:layout_marginTop="60dp"
        android:layout_marginRight="2dp"
        android:background="@drawable/setting_item_select_for_user_num"
        android:focusable="true"
        android:focusableInTouchMode="true"
        android:gravity="center"
        android:text="C"
        android:textColor="@drawable/inputcodenum_textcolour"
        android:textSize="16sp"
        app:layout_constraintLeft_toRightOf="@+id/tv_inputnum_b"
        app:layout_constraintRight_toLeftOf="@+id/tv_inputnum_d"
        app:layout_constraintTop_toBottomOf="@id/edit_text" />


    <TextView
        android:id="@+id/tv_inputnum_d"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_marginLeft="2dp"
        android:layout_marginTop="60dp"
        android:layout_marginRight="2dp"
        android:background="@drawable/setting_item_select_for_user_num"
        android:focusable="true"
        android:focusableInTouchMode="true"
        android:gravity="center"
        android:text="D"
        android:textColor="@drawable/inputcodenum_textcolour"
        android:textSize="16sp"
        app:layout_constraintLeft_toRightOf="@+id/tv_inputnum_c"
        app:layout_constraintRight_toLeftOf="@+id/tv_inputnum_e"
        app:layout_constraintTop_toBottomOf="@id/edit_text" />

    <TextView
        android:id="@+id/tv_inputnum_e"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_marginLeft="2dp"
        android:layout_marginTop="60dp"
        android:layout_marginRight="2dp"
        android:background="@drawable/setting_item_select_for_user_num"
        android:focusable="true"
        android:focusableInTouchMode="true"
        android:gravity="center"
        android:text="E"
        android:textColor="@drawable/inputcodenum_textcolour"
        android:textSize="16sp"
        app:layout_constraintLeft_toRightOf="@+id/tv_inputnum_d"
        app:layout_constraintRight_toRightOf="@+id/tv_inputnum_f"
        app:layout_constraintTop_toBottomOf="@id/edit_text" />

    <TextView
        android:id="@+id/tv_inputnum_f"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_marginLeft="2dp"
        android:layout_marginTop="60dp"
        android:layout_marginRight="2dp"
        android:background="@drawable/setting_item_select_for_user_num"
        android:focusable="true"
        android:focusableInTouchMode="true"
        android:gravity="center"
        android:text="F"
        android:textColor="@drawable/inputcodenum_textcolour"
        android:textSize="16sp"
        app:layout_constraintLeft_toRightOf="@+id/tv_inputnum_e"
        app:layout_constraintRight_toRightOf="@+id/relativeLayout"
        app:layout_constraintTop_toBottomOf="@id/edit_text" />