ConstraintLayoutの目的:Android xmlレイアウトファイルのレベルを下げるために!!!
おすすめの読書記事
1. ConstraintLayout(地獄はこれで何)
2. ConstraintLayout(地獄はこれで何)(ヒントとヒント)パートII
3.制約レイアウトアニメーション|ダイナミック制約| UIが(これが何であるか)Javaで実装されました[第三部]
4. ConstraintLayoutの可視化[デザイン]エディタ(地獄はこれが何であるか)[パート4]
参照を追加:build.gradleのステートメント(現在のバージョンは1.0.1)
dependencies {
compile 'com.android.support.constraint:constraint-layout:1.0.1'
}
5つの機能の説明:
- 相対位置
- 比例位置
- ガイドライン
- 比例した幅と高さ
- リンクリストスタイル
使用説明書:
1.相対位置
<?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"
tools:context="com.example.administrator.constraintdemo.MainActivity">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
効果:
コードの説明:重要なのはこれらの4つの文であり、原則は同じであるため、1つの文を分析します
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf =” parent”
この文は3つの部分に分かれています
- 制約ボトム:コントロールの下部に相当(コード内のボタン)
- toBottomOf:xxxの下部にあります
- 「親」:コントロールの親コントロールを意味し、@ id / xxxもここで使用できます
要約すると、これらの4つの文は、ボタンの幅と高さが「wrap_content」であるため、ボタンの左側が親コントロールの左側、上部が親コントロールの上部、右側が親コントロールの右側、下部が親コントロールの下部であることを意味します。 、ボタンが親コントロールの中央にあることがわかります
app:layout_constraintBottom_toBottomOf =” parent”を削除すると、効果は次のようになります。
これはボタンの効果です。次に2つのボタンを見てみましょう。
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
android:id="@+id/constraintLayout"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/cancel_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginStart="16dp"
android:text="取消"
app:layout_constraintBottom_toBottomOf="@id/constraintLayout"
app:layout_constraintStart_toStartOf="@id/constraintLayout"/>
<Button
android:id="@+id/next_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginStart="16dp"
android:text="下一步"
app:layout_constraintBottom_toBottomOf="@id/constraintLayout"
app:layout_constraintStart_toEndOf="@id/cancel_button"/>
</android.support.constraint.ConstraintLayout>
最初のボタンの位置コード:
app:layout_constraintBottom_toBottomOf="@id/constraintLayout"
app:layout_constraintStart_toStartOf="@id/constraintLayout"
@ id / contraintLayoutは、参照される親レイアウトのIDであるため、最初の[キャンセル]ボタンは左下隅にあります。
2番目のボタン位置コードを見てください。
app:layout_constraintBottom_toBottomOf="@id/constraintLayout"
app:layout_constraintStart_toEndOf="@id/cancel_button"
注2行目に、というスタートの第二ボタンがであるエンドとcancel_buttonのID、我々は次のような効果を見ることができるので、「キャンセル」ボタンの右にあります、:
2.比例位置
app:layout_constraintHorizontal_bias="0.3"
app:layout_constraintVertical_bias="0.2"
比例位置は水平方向と垂直方向の2つだけです。ボタンが1つだけのスタイルで
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
私たちは、比率を宣言していないが、デフォルト率、すなわち0.5であるので、ボタンは、中心であった左から親コントロールに左ボタンと右ボタンコントロールの親に右から比は、1:1を、我々は比率を追加した場合、たとえば、以下のレイアウト
<?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"
tools:context="com.example.administrator.constraintdemo.MainActivity">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.3"
app:layout_constraintVertical_bias="0.2"/>
</android.support.constraint.ConstraintLayout>
効果は以下のようになります。
3.ガイドライン
- android:orientation =” vertical”値は垂直(垂直線)と水平(水平線)です
- app:layout_constraintGuide_begin = "72dp"開始からの距離
- app:layout_constraintGuide_end =”終了位置から72dpの距離
- app:layout_constraintGuide_percent =” 0.2”は、比率に従って場所を計算します
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/constraintLayout"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.constraint.Guideline
android:id="@+id/guideLine"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="72dp"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Guide Up"
app:layout_constraintStart_toStartOf="@id/guideLine"
app:layout_constraintTop_toTopOf="@+id/constraintLayout"
app:layout_constraintBottom_toBottomOf="@+id/constraintLayout"
app:layout_constraintVertical_bias="0.25"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Guide Down"
app:layout_constraintStart_toStartOf="@id/guideLine"
app:layout_constraintTop_toTopOf="@+id/constraintLayout"
app:layout_constraintBottom_toBottomOf="@+id/constraintLayout"
app:layout_constraintVertical_bias="0.75"/>
</android.support.constraint.ConstraintLayout>
効果画像:
4.比例した幅と高さ
**アスペクト比** 16:9、幅を個別に設定した場合の比率でレイアウトの高さを計算できます
app:layout_constraintDimensionRatio="16:9"
コード例:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
android:id="@+id/constraintLayout"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="0dp"
android:layout_height="200dp"
android:background="@color/colorAccent"
android:src="@drawable/total_large"
app:layout_constraintBottom_toBottomOf="@+id/constraintLayout"
app:layout_constraintLeft_toLeftOf="@+id/constraintLayout"
app:layout_constraintRight_toRightOf="@+id/constraintLayout"
app:layout_constraintTop_toTopOf="@+id/constraintLayout"
app:layout_constraintDimensionRatio="16:9"/>
<ImageView
android:layout_width="0dp"
android:layout_height="200dp"
android:background="@color/colorAccent"
android:contentDescription="@null"
android:src="@drawable/total_large"
app:layout_constraintBottom_toBottomOf="@+id/constraintLayout"
app:layout_constraintDimensionRatio="4:3"
app:layout_constraintLeft_toLeftOf="@+id/constraintLayout"
app:layout_constraintRight_toRightOf="@+id/constraintLayout"/>
</android.support.constraint.ConstraintLayout>
効果画像:
5.リンクリストスタイル
横リンクリスト、縦リンクリスト、リンクリストスタイルスタイルを設定できます
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintVertical_chainStyle="packed"
属性値は次のとおりです:
- 拡大
- パック
Spread_inside
関連する優れた記事:
初期使用:
http://www.jianshu.com/p/32a0a6e0a98a
https://juejin.im/entry/58aaedd5ac502e006974e868高度な使用法:
新しい知識を広めるために一生懸命働いてくれたこれらのブロガーに感謝します。