# What's new ではない復習的な内容は一部省略しています。
ConstraintLayout
- Unified and expressive way to create Layouts
- Flat Layouts
- Deep INtegration with Android Studio & the Layout Editor
- Unbundled Library
- Compatible with 99% of Android Devices
- Google I/O 2016 から17回リリース
- 2017年2月に 1.0 リリース
- パフォーマンス改善
- Relative positioning
- Center positioning & bias
- Guidelines
- Chains
- Ratio
- ConstraintSet
コミュニティベースのサイトがオープン https://constraintlayout.com/
1.1.0 beta1
- maven {
- url "https://maven.google.com"
- }
- dependencies {
- compile "com.android.support.constraint:constraint-layout:1.1.0-beta1"
- }
- Barriers
- widget の集まりに対して、最小 or 最大の端を取るもの
- Group
- widget の集まりを定義できる
- group に対して setVisibility() すると、それに含まれるすべての widget に setVisibility() される
- Placeholder
Placeholder
virtual view を作成し、ConstraintLayout の別の view を contents としてセットできる- TransitionManager.beginDelayedTransition(container);
- placeholder.setContentId(view.getId());
- <merge
- ...
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- tools:parentTag="android.support.constraint.ConstraintLayout">
- <android.support.constraint.Placeholder
- android:id="@+id/template_main_image"
- app:content="@+id/top_image"
- app:layout_constraintDimensionRatio="16:9"
- app:layout_constraintLeft_toLeftOf="parent"
- app:layout_constraintRight_toRightOf="parent" />
- <android.support.constraint.Placeholder
- android:id="@+id/template_action"
- android:layout_width="48dp"
- android:layout_height="48dp"
- app:content="@+id/action_button"
- app:layout_constraintBottom_toBottomOf="@id/template_main_image"
- app:layout_constraintHorizontal_bias="0.80"
- app:layout_constraintLeft_toLeftOf="parent"
- app:layout_constraintRight_toRightOf="parent"
- app:layout_constraintTop_toBottomOf="@id/template_main_image" />
- </merge>
- <merge
- ...
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- tools:parentTag="android.support.constraint.ConstraintLayout">
- <android.support.constraint.Placeholder
- android:id="@+id/template_main_image"
- app:content="@+id/top_image"
- app:layout_constraintBottom_toBottomOf="parent"
- app:layout_constraintDimensionRatio="1:1"
- app:layout_constraintTop_toTopOf="parent" />
- <android.support.constraint.Placeholder
- android:id="@+id/template_action"
- android:layout_width="48dp"
- android:layout_height="48dp"
- app:content="@+id/action_button"
- app:layout_constraintBottom_toBottomOf="parent"
- app:layout_constraintLeft_toRightOf="@id/template_main_image"
- app:layout_constraintRight_toRightOf="@id/template_main_image"
- app:layout_constraintTop_toTopOf="parent"
- app:layout_constraintVertical_bias="0.80" />
- </merge>
- <android.support.constraint.ConstraintLayout
- ...
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- tools:context="com.sample.myapplication.MainActivity">
- <ImageView
- android:id="@+id/top_image"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content" />
- <ImageButton
- android:id="@+id/action_button"
- android:layout_width="48dp"
- android:layout_height="48dp" />
- <include layout="@layout/header_template" />
- </android.support.constraint.ConstraintLayout>
- <android.support.constraint.ConstraintLayout
- ...
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- tools:context="com.sample.myapplication.MainActivity">
- <ImageView
- android:id="@+id/top_image"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content" />
- <include
- android:id="@+id/action_button"
- layout="@layout/action_button_content" />
- <include layout="@layout/header_template" />
- </android.support.constraint.ConstraintLayout>
ConstraintSet
- View 自体と、それをどのようにレイアウトするかを分離
- すべての制約を一つのオブジェクトにカプセル化
- 既存の ConstraintLayout に ConstraintSet を適用できる
- 複数の ConstraintSet 間を切り替え
- layout を切り替えるわけではないので、view は reload されない
- ConstraintSet mConstraintSet1 = new ConstraintSet();
- ConstraintSet mConstraintSet2 = new ConstraintSet();
- // get constraints from layout
- mConstraintSet2.clone(context, R.layout.state2);
- setContentView(R.layout.state1);
- mConstraintLayout = (ConstraintLayout) findViewByid(R.id.activity_main);
- // get constraints from ConstraintLayout
- mConstraintSet1.clone(mConstraintLayout);
- // switch with animation
- TransitionManager.beginDelayedTransition(mConstraintLayout);
- // switch to state2
- mConstraintSet2.apply(mConstraintLayout);
その他の利用例） 縦横それぞれのレイアウトとその ConstraintSet を用意し、画面回転を自分でハンドリングして、そのときに ConstraintSet を切り替えることで自分でレイアウトを切り替えることが可能
ConstraintLayout & Motion
- Flat Hierarchy == No clipping issues
- Scene Graph
- ConstraintSet == Keyframe
Android Studio 3.0
Tools がいろいろある- alignment tools
- arrengement tools
- guideline tools
- right click menu
- 接続の確率モデルに基づく
- 制約されていない view を制約する（すでに制約されているものは何もしない）
- view は動かさない(alignment tools ではない)
- properties がどの layout, dimen, strings 由来なのか表示
- tools:
- デザイン時の属性を上書き
- tools:showIn
- このレイアウトを他のやつに埋め込んで表示する
- tools:layout
- fragmentで利用するレイアウト
- tools:listitem
- list item のレイアウト
- tools:parentTag
- merge tag の parent のレイアウトを指定
Sample Data
* Sample Data は Android Studio 3.0 Canary 3 で使えるようになりました。
- Default Adapter で使える
- content を指定する
- tools:listitem で list item のレイアウトを指定する
- list item のレイアウトで sample data を使う
- tools:text="@tools:sample/lorem"
- tools:text="@tools:sample/full_names"
- tools:text="@tools:sample/us_phones"
- tools:text="@tools:sample/date_mmddyyyy"
- sampledata フォルダーを作る（app > sampledata）
- フォルダーに colors ファイルを追加
- #d50000
- #2962ff
- #00e5ff
- #aeea00
- #ff6d00
- tools:background="@sample/colors"
- フォルダーに json（contacts.json とか）ファイルを追加
- {
- "contacts": [
- {
- "name":"...",
- ...
- }
- ]
- }
- tools:text="@sample/contacts.json/contacts/name"
- Baked-in data types
- date, names, phone numbers...
- JSON files
- Resources in sample data folder
- Text
- Color
- Image (collections if in folder)
