Androidのレイアウト:ConstraintLayout-レイアウト制約

:活力は、Android StudioのIDEを更新した後、私は毎回、新しい活動は、デフォルトでこれを作成したレイアウトファイルは以下のとおりであることがわかりました

<?xml version = "1.0"エンコード= "UTF-8"?> 
<android.support.constraint.ConstraintLayoutのxmlns:アンドロイド= "http://schemas.android.com/apk/res/android" 
    のxmlns:アプリ= "http://schemas.android.com/apk/res-auto" 
    のxmlns:ツール= "http://schemas.android.com/tools" 
    のandroid:layout_width = "match_parent" 
    のandroid:layout_height = "match_parent" 
    ツール:コンテキスト= "app.PickFirstActivity"> 

</android.support.constraint.ConstraintLayout>

最後にConstraintLayoutは何ものでしょうか?以前のLinearLayoutでレイアウトを完了するために使用された後、そのファイルは自動的にレイアウトが作成されるたびに、活力を超えるレイアウト形式のLinearLayout一部を再コピーする必要があります。私は非常に非常に奇妙な、面倒なので、一緒に好奇心、研究、ConstraintLayout下の子供用の靴の精神を感じます。

1.はじめに

ConstraintLayoutレイアウト制約のViewGroupあり、それはApi9 Androidシステム上で使用することができる、過剰なネストされた配列、小さくなるように配置され、制御された可撓性部材の問題を解決するために主に現れます。以下からのAndroid Studioの2.3デフォルトで使用される公式テンプレートからConstraintLayout

公式の定義ConstraintLayoutます。https://developer.android.google.cn/reference/android/support/constraint/ConstraintLayout

2.なぜConstraintLayout

多くの場合、開発プロセスのいくつかの複雑なUIに遭遇し、入れ子にあまりにも多くの問題のレイアウトが発生する可能性があり、より多くのネスト、表示時間と計算能力を引き出すために必要な機器もよります。簡単な例:

                                                                         

:今では、このようなレイアウトを作成すると仮定し、一部の人々は、このようなことがあり
最初は、その後、内部の水平のLinearLayoutのTextViewに入れるのLinearLayout 2つのレベルを置く垂直のLinearLayout、ですが。ネストされた層のLinearLayoutのような文言。

                                                                   

一部の人々は、アカウントに、ネストされたレイアウトのリスクを取るので、すべてのコントロールを保持するためにRelativeLayoutを使用しています。我々は、使用がそれをConstraintLayoutなぜRelativeLayoutは、問題を解決することができます使用するので、そこで問題は、ありますか?ConstraintLayoutので、より良い性能、RelativeLayoutよりも柔軟に使用!もう一つのポイントはConstraintLayoutは、スケールの位置や大きさの制限を制御することができ、より良い異なる画面サイズのモデルに合わせてあります。


3. ConstraintLayoutを使用する方法

3.1依存関係を追加します。

まず、以下に示すように、アプリ/ build.gradleファイルに依存ConstraintLayoutを追加する必要があります。

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

3.2相対位置

拘束部材が別の位置に対向配置され、抽象は、例えば、ビットであってもよいと言います。

TextView1、TextView1以下TextView3、書き込むべきレイアウトファイルに今回の右側の図、TextView2に示すように:

    <TextView
        android:id="@+id/TextView1"
        ...
        android:text="TextView1" />

    <TextView
        android:id="@+id/TextView2"
        ...
        app:layout_constraintLeft_toRightOf="@+id/TextView1" />

    <TextView
        android:id="@+id/TextView3"
        ...
        app:layout_constraintTop_toBottomOf="@+id/TextView1" />

アプリでは、上記のコードで使用TextView2:以下に示すようにlayout_constraintLeft_toRightOf =「@ + ID / TextView1」この属性は、彼は、右のTextView1 TextView2制約に左を意味しました:

以下に、即ち、TextView1 TextView3の上限をlayout_constraintTop_toBottomOf = "@ + ID / TextView1":同様TextView3 TextView1は、以下、必要がアプリケーションを使用します。

下面来看看相对定位的常用属性:
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有する
ベースラインは、例えば、テキストのベースラインを指します。

                                                                      

 

二つのTextView非常に矛盾して示したが、彼らはまた、テキストの配置をしたいように、この時間はlayout_constraintBaseline_toBaselineOfを使用することができ、以下のように、コードは次のとおりです。

    <TextView
        android:id="@+id/TextView1"
        .../>

    <TextView
        android:id="@+id/TextView2"
        ...
        app:layout_constraintLeft_toRightOf="@+id/TextView1" 
        app:layout_constraintBaseline_toBaselineOf="@+id/TextView1"/>

結果は以下の通りであります:

マップは、以下の相対的な位置決めを要約するとRelativeLayoutの使用とConstraintLayout相対的な位置決めは、非常に類似しています。

                                                     

角度位置決め3.3

二つの空間の角度と距離の制約センターで使用することができる角度位置決め手段。例えば:

    <TextView
        android:id="@+id/TextView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/TextView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintCircle="@+id/TextView1"
        app:layout_constraintCircleAngle="120"
        app:layout_constraintCircleRadius="150dp" />

TextView2上記の例では3つの属性が使用されます
アプリ:layout_constraintCircle = "@ + ID / TextView1"
アプリ:layout_constraintCircleAngle = "120"(角度)
アプリ:layout_constraintCircleRadius = "150DP型"(距離)
TextView1におけるTextView2の中心を指しそれは120度、距離150DP型、次のような効果を中心に:

                                                                         

3.4マージン

  • 3.4.1一般的なマージン

共通の属性以下ConstraintLayoutマージン:
アンドロイド:layout_marginStart
アンドロイド:layout_marginEnd
アンドロイド:layout_marginLeft
アンドロイド:layout_marginTop
アンドロイド:layout_marginRight
アンドロイド:layout_marginBottom

あなたが例えばどこConstraintLayoutにおける第1の制約の位置制御を、必要があり、他のレイアウトとの違いを作るように見えるが、実際には余裕を達成するために内部ConstraintLayoutを制御しません。

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

    <TextView
        android:id="@+id/TextView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp" />

</android.support.constraint.ConstraintLayout>

別のレイアウトならば、TextView1位置は、左からとボーダーの上10dpの余裕を持っている必要がありますが、ConstraintLayoutの年で、制約のないレイアウトでTextView1位置するので効果的ではありません。次のように正しい言葉遣いは、次のとおりです。

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

    <TextView
        android:id="@+id/TextView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp" 
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

</android.support.constraint.ConstraintLayout>

TextView1左と上の親に結合し、左と上には、このマージンが有効になり、次のように、効果は次のとおりです。

                                                                          

在使用margin的时候要注意两点:
控件必须在布局里约束一个相对位置
margin只能大于等于0

  • 3.4.2 goneMargin

goneMargin主要用于约束的控件可见性被设置为gone的时候使用的margin值,属性如下:
layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom

举个例子:
假设TextView2的左边约束在TextView1的右边,并给TextView2设一个app:layout_goneMarginLeft="10dp",代码如下:

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

    <TextView
        android:id="@+id/TextView1"
        .../>

    <TextView
        android:id="@+id/TextView2"
        ...
        app:layout_constraintLeft_toRightOf="@+id/TextView1"
        app:layout_goneMarginLeft="10dp"
        />

</android.support.constraint.ConstraintLayout>

效果如下,TextView2在TextView1的右边,且没有边距。

                                                              

这个时候把TextView1的可见性设为gone,效果如下:

                                                              

TextView1消失后,TextView2有一个距离左边10dp的边距。

3.5 居中和偏移

在RelativeLayout中,把控件放在布局中间的方法是把layout_centerInParent设为true,而在ConstraintLayout中的写法是:

app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"

意思是把控件的上下左右约束在布局的上下左右,这样就能把控件放在布局的中间了。同理RelativeLayout中的水平居中layout_centerHorizontal相当于在ConstraintLayout约束控件的左右为parent的左右;RelativeLayout中的垂直居中layout_centerVertical相当于在ConstraintLayout约束控件的上下为parent的上下。
由于ConstraintLayout中的居中已经为控件约束了一个相对位置,所以可以使用margin,如下所示:

<TextView
        android:id="@+id/TextView1"
        ...
        android:layout_marginLeft="100dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

效果如下:

                                               

上面TextView1在水平居中后使用layout_marginLeft="100dp"向右偏移了100dp。除了这种偏移外,ConstraintLayout还提供了另外一种偏移的属性:
layout_constraintHorizontal_bias 水平偏移
layout_constraintVertical_bias 垂直偏移

举个例子:

<TextView
        android:id="@+id/TextView1"
        ...
        app:layout_constraintHorizontal_bias="0.3"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

效果如下:

                                                    

假如现在要实现水平偏移,给TextView1的layout_constraintHorizontal_bias赋一个范围为 0-1 的值,假如赋值为0,则TextView1在布局的最左侧,假如赋值为1,则TextView1在布局的最右侧,假如假如赋值为0.5,则水平居中,假如假如赋值为0.3,则更倾向于左侧。
垂直偏移同理。

3.6 尺寸约束

控件的尺寸可以通过四种不同方式指定:

  • 使用指定的尺寸

  • 使用wrap_content,让控件自己计算大小
    当控件的高度或宽度为wrap_content时,可以使用下列属性来控制最大、最小的高度或宽度:
    android:minWidth 最小的宽度
    android:minHeight 最小的高度
    android:maxWidth 最大的宽度
    android:maxHeight 最大的高度
    注意!当ConstraintLayout为1.1版本以下时,使用这些属性需要加上强制约束,如下所示:
    app:constrainedWidth=”true”
    app:constrainedHeight=”true”

  • 使用 0dp (MATCH_CONSTRAINT)
    官方不推荐在ConstraintLayout中使用match_parent,可以设置 0dp (MATCH_CONSTRAINT) 配合约束代替match_parent,举个例子:

<TextView
        android:id="@+id/TextView1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="50dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:visibility="visible" />

宽度设为0dp,左右两边约束parent的左右两边,并设置左边边距为50dp,效果如下:

                                              

  • 宽高比
    当宽或高至少有一个尺寸被设置为0dp时,可以通过属性layout_constraintDimensionRatio设置宽高比,举个例子:
<TextView
        android:id="@+id/TextView1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

宽设置为0dp,宽高比设置为1:1,这个时候TextView1是一个正方形,效果如下:

                                                                             

除此之外,在设置宽高比的值的时候,还可以在前面加W或H,分别指定宽度或高度限制。 例如:
app:layout_constraintDimensionRatio="H,2:3"指的是 高:宽=2:3
app:layout_constraintDimensionRatio="W,2:3"指的是 宽:高=2:3

3.7 链

如果两个或以上控件通过下图的方式约束在一起,就可以认为是他们是一条链(图为横向的链,纵向同理)。

                                                    

用代码表示:

    <TextView
        android:id="@+id/TextView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/TextView2" />

    <TextView
        android:id="@+id/TextView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toRightOf="@+id/TextView1"
        app:layout_constraintRight_toLeftOf="@+id/TextView3"
        app:layout_constraintRight_toRightOf="parent" />

    <TextView
        android:id="@+id/TextView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toRightOf="@+id/TextView2"
        app:layout_constraintRight_toRightOf="parent" />

3个TextView相互约束,两端两个TextView分别与parent约束,成为一条链,效果如下:

                                                      

一条链的第一个控件是这条链的链头,我们可以在链头中设置 layout_constraintHorizontal_chainStyle来改变整条链的样式。chains提供了3种样式,分别是:
CHAIN_SPREAD —— 展开元素 (默认);
CHAIN_SPREAD_INSIDE —— 展开元素,但链的两端贴近parent;
CHAIN_PACKED —— 链的元素将被打包在一起。
如图所示:

                                               

上面的例子创建了一个样式链,除了样式链外,还可以创建一个权重链。
可以留意到上面所用到的3个TextView宽度都为wrap_content,如果我们把宽度都设为0dp,这个时候可以在每个TextView中设置横向权重layout_constraintHorizontal_weight(constraintVertical为纵向)来创建一个权重链,如下所示:

 <TextView
        android:id="@+id/TextView1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/TextView2"
        app:layout_constraintHorizontal_weight="2" />

    <TextView
        android:id="@+id/TextView2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toRightOf="@+id/TextView1"
        app:layout_constraintRight_toLeftOf="@+id/TextView3"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintHorizontal_weight="3" />

    <TextView
        android:id="@+id/TextView3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toRightOf="@+id/TextView2"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintHorizontal_weight="4" />

效果如下:

                                                               


4.辅助工具

4.1 Optimizer

当我们使用 MATCH_CONSTRAINT 时,ConstraintLayout 将对控件进行 2 次测量,ConstraintLayout在1.1中可以通过设置 layout_optimizationLevel 进行优化,可设置的值有:
none:无优化
standard:仅优化直接约束和屏障约束(默认)
direct:优化直接约束
barrier:优化屏障约束
chain:优化链约束
dimensions:优化尺寸测量

4.2 Barrier

                                                                    

 

 

假设有3个控件ABC,C在AB的右边,但是AB的宽是不固定的,这个时候C无论约束在A的右边或者B的右边都不对。当出现这种情况可以用Barrier来解决。Barrier可以在多个控件的一侧建立一个屏障,如下所示:

                                                         

这个时候C只要约束在Barrier的右边就可以了,代码如下:

<TextView
        android:id="@+id/TextView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/TextView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/TextView1" />

    <android.support.constraint.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="right"
        app:constraint_referenced_ids="TextView1,TextView2" />

    <TextView
        android:id="@+id/TextView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toRightOf="@+id/barrier" />

app:barrierDirection为屏障所在的位置,可设置的值有:bottom、end、left、right、start、top
app:constraint_referenced_ids为屏障引用的控件,可设置多个(用“,”隔开)

4.3 Group

Group可以把多个控件归为一组,方便隐藏或显示一组控件,举个例子:

    <TextView
        android:id="@+id/TextView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/TextView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toRightOf="@+id/TextView1" />

    <TextView
        android:id="@+id/TextView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toRightOf="@id/TextView2" />

                                                                    

现在有3个并排的TextView,用Group把TextView1和TextView3归为一组,再设置这组控件的可见性,如下所示:

   <android.support.constraint.Group
        android:id="@+id/group"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="invisible"
        app:constraint_referenced_ids="TextView1,TextView3" />

 

 

效果如下:

                                                        

4.4 Placeholder

Placeholder指的是占位符。在Placeholder中可使用setContent()设置另一个控件的id,使这个控件移动到占位符的位置。举个例子:

<android.support.constraint.Placeholder
        android:id="@+id/placeholder"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:content="@+id/textview"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#cccccc"
        android:padding="16dp"
        android:text="TextView"
        android:textColor="#000000"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

 

 

新建一个Placeholder约束在屏幕的左上角,新建一个TextView约束在屏幕的右上角,在Placeholder中设置 app:content="@+id/textview",这时TextView会跑到屏幕的左上角。效果如下:

                                                       

4.5 Guideline

Guildline像辅助线一样,在预览的时候帮助你完成布局(不会显示在界面上)。
Guildline的主要属性:
android:orientation 垂直vertical,水平horizontal
layout_constraintGuide_begin 开始位置
layout_constraintGuide_end 结束位置
layout_constraintGuide_percent 距离顶部的百分比(orientation = horizontal时则为距离左边)
举个例子:

    <android.support.constraint.Guideline
        android:id="@+id/guideline1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="50dp" />

    <android.support.constraint.Guideline
        android:id="@+id/guideline2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5" />

guideline1为水平辅助线,开始位置是距离顶部50dp,guideline2位垂直辅助线,开始位置为屏幕宽的0.5(中点位置),效果如下:

                                                     


 

特别答谢:https://www.jianshu.com/p/17ec9bd6ca8a

おすすめ

転載: blog.csdn.net/xuwei_net/article/details/89089342