In the past about the ConstraintLayout
articles are of use for its various properties, in the end how these uses and properties achieve the desired effect but can not tell, just dryly that the role of these attributes what's the use, I hope to get started can be used directly, so the target oriented, take a look at how this control to demonstrate its powerful features!
Explanation
- Some effect can be nested to achieve, but it can not only achieve a level of control, so you can use more than
ConstraintLayout
a view-level optimization, the best is to start directlyConstraintLayout
not pushed to the back - By way of example are in the horizontal direction, the vertical direction is not self-evident
- The key property of interest (code block not marked red line, so on the perception)
- It does not separate the various attributes described
Midline alignment line
A line and B line alignment, regardless of the size of the AB
<TextView
android:id="@+id/left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:text="AAAAAAAAAA"
android:textSize="30sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="@+id/right"
app:layout_constraintBottom_toBottomOf="@+id/right"/>
<TextView
android:id="@+id/right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:text="BBBBBBB"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
Centerline aligned edge
A top line is aligned with the B
<TextView
android:id="@+id/left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:text="AAAAAAAAAA"
android:textSize="30sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="@+id/right"
app:layout_constraintBottom_toTopOf="@+id/right"/>
<TextView
android:id="@+id/right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:text="BBBBBBB"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
Edge alignment line
A top of the line B is aligned with the (sometimes due to an anchor point and not simply on a reverse)
then we need an auxiliary View, and yet not android.support.constraint.Guideline
see this article
<TextView
android:id="@+id/left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:text="AAAAAAAAAA"
android:textColor="#333"
android:textSize="23sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="@+id/middle"/>
<View
android:id="@+id/middle"
android:layout_width="match_parent"
android:layout_height="0.5dp"
app:layout_constraintRight_toRightOf="@id/right"
android:visibility="invisible"
app:layout_constraintTop_toTopOf="@id/right"
app:layout_constraintBottom_toBottomOf="@id/right"/>
<TextView
android:id="@+id/right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:text="BBBBBBB"
android:textColor="#999"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
Accounting side
A aligned at the right side of the overall width B 30%, regardless of A, B varying width
<TextView
android:id="@+id/left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:text="AAAAAAAAAA"
android:textColor="#333"
android:textSize="30sp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toLeftOf="@+id/percent_30"/>
<View
android:id="@+id/percent_30"
android:layout_width="0.5dp"
android:layout_height="match_parent"
android:visibility="invisible"
app:layout_constraintLeft_toLeftOf="@id/right"
app:layout_constraintRight_toRightOf="@id/right"
app:layout_constraintHorizontal_bias="0.3"/>
<TextView
android:id="@+id/right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:text="BBBBBBB"
android:textColor="#999"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
The overall proportion
A total width of 30% of the overall width B
<TextView
android:id="@+id/left"
android:layout_width="0dp"
android:layout_height="wrap_content"
tools:text="AAAAAAAAAA"
android:textColor="#333"
android:textSize="30sp"
android:maxLines="1"
android:ellipsize="end"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="@+id/right"
app:layout_constraintRight_toLeftOf="@+id/percent_30"/>
<View
android:id="@+id/percent_30"
android:layout_width="0.5dp"
android:layout_height="match_parent"
android:visibility="invisible"
app:layout_constraintLeft_toLeftOf="@id/right"
app:layout_constraintRight_toRightOf="@id/right"
app:layout_constraintHorizontal_bias="0.3"/>
<TextView
android:id="@+id/right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:text="BBBBBBBBBBBBBB"
android:textColor="#999"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
The overall proportion of midline
A whole is always at 30% of the overall width B, regardless of the variation width A, i.e., line A is aligned with the level of B at 30%
<TextView
android:id="@+id/left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:text="AAAAAAAAAA"
android:textColor="#333"
android:textSize="30sp"
android:maxLines="1"
android:ellipsize="end"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="@+id/percent_30"
app:layout_constraintRight_toLeftOf="@+id/percent_30"/>
<View
android:id="@+id/percent_30"
android:layout_width="0.5dp"
android:layout_height="match_parent"
android:visibility="invisible"
app:layout_constraintLeft_toLeftOf="@id/right"
app:layout_constraintRight_toRightOf="@id/right"
app:layout_constraintHorizontal_bias="0.3"/>
<TextView
android:id="@+id/right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:text="BBBBBBBBBBBBBB"
android:textColor="#999"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
Follow disappear
B is set to Gone, A followed by B Gone also
then need to use auxiliary controls android.support.constraint.Group
, while not directly operate B, and the operation Group
; with Group
two binding controls, set Group
two disappeared together disappears
<TextView
android:id="@+id/left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:text="AAAAAAAAAA"
android:textColor="#333"
android:textSize="30sp"
android:maxLines="1"
android:ellipsize="end"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
<android.support.constraint.Group
android:id="@+id/group"
android:layout_width="0dp"
android:layout_height="0dp"
app:constraint_referenced_ids="left,right"/>
<TextView
android:id="@+id/right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:text="BBBBBBBBB"
android:textColor="#999"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
Code set at
view.findViewById(R.id.group).setVisibility(View.GONE);
Close, dynamic maximum width
Description: This effect can only be implemented as ConstraintLayout!
Following effects desired
B against A, the respective widths of non-fixed value, upon reaching the edge of the B can not increase the width A, i.e., A has the maximum width, but which is determined by the B (and against the effect of the LinearLayout somewhat similar but quite different!)
which is:
This effect can not be achieved in the past any control by way of property declaration, unless with the code, but now with the ConstraintLayout
later, and a cool beer!
Demonstrate ConstraintLayout
the power of the time arrived, the complete code
<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">
<TextView
android:id="@+id/left"
android:layout_width="0dp"
android:layout_height="wrap_content"
tools:text="AAAAAAAAAAAAADDDDDDD"
android:textColor="#333"
android:textSize="30sp"
android:maxLines="1"
android:ellipsize="end"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/right"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintWidth_default="wrap"
app:layout_constraintHorizontal_bias="0"/>
<TextView
android:id="@+id/right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:text="BBB"
android:textColor="#999"
android:textSize="20sp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="@+id/left"
app:layout_constraintRight_toRightOf="parent"/>
</android.support.constraint.ConstraintLayout>