What's New in Android Design Tools (Google I/O '17)

# 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

1.0

• Google I/O 2016 から17回リリース
• 2017年2月に 1.0 リリース
• パフォーマンス改善
• Relative positioning
• Center positioning & bias
• Guidelines
• Chains
• Ratio
• ConstraintSet

Android Studio でプロジェクトを作った時のデフォルトが ConstraintLayout に

コミュニティベースのサイトがオープン https://constraintlayout.com/

1.1.0 beta1

view plainprint?

1. maven {  
2.  url "https://maven.google.com"  
3. }  
4. dependencies {  
5.  compile "com.android.support.constraint:constraint-layout:1.1.0-beta1"  
6. }  

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 としてセットできる

view plainprint?

1. TransitionManager.beginDelayedTransition(container);  
2. placeholder.setContentId(view.getId());  

TransitionManager.beginDelayedTransition(container); placeholder.setContentId(view.getId()); 縦横のレイアウトを Placeholder を使った template として用意し、メインのレイアウトを1つにできる layout/header_template.xml

view plainprint?

1. <merge   
2.     ...  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     tools:parentTag="android.support.constraint.ConstraintLayout">  
6.   
7.     <android.support.constraint.Placeholder  
8.         android:id="@+id/template_main_image"  
9.         app:content="@+id/top_image"  
10.         app:layout_constraintDimensionRatio="16:9"  
11.         app:layout_constraintLeft_toLeftOf="parent"  
12.         app:layout_constraintRight_toRightOf="parent" />  
13.   
14.     <android.support.constraint.Placeholder  
15.         android:id="@+id/template_action"  
16.         android:layout_width="48dp"  
17.         android:layout_height="48dp"  
18.         app:content="@+id/action_button"  
19.         app:layout_constraintBottom_toBottomOf="@id/template_main_image"  
20.         app:layout_constraintHorizontal_bias="0.80"  
21.         app:layout_constraintLeft_toLeftOf="parent"  
22.         app:layout_constraintRight_toRightOf="parent"  
23.         app:layout_constraintTop_toBottomOf="@id/template_main_image" />  
24.   
25. </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_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> layout-land/header_template.xml

view plainprint?

1. <merge   
2.     ...  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     tools:parentTag="android.support.constraint.ConstraintLayout">  
6.   
7.     <android.support.constraint.Placeholder  
8.         android:id="@+id/template_main_image"  
9.         app:content="@+id/top_image"  
10.         app:layout_constraintBottom_toBottomOf="parent"  
11.         app:layout_constraintDimensionRatio="1:1"  
12.         app:layout_constraintTop_toTopOf="parent" />  
13.   
14.     <android.support.constraint.Placeholder  
15.         android:id="@+id/template_action"  
16.         android:layout_width="48dp"  
17.         android:layout_height="48dp"  
18.         app:content="@+id/action_button"  
19.         app:layout_constraintBottom_toBottomOf="parent"  
20.         app:layout_constraintLeft_toRightOf="@id/template_main_image"  
21.         app:layout_constraintRight_toRightOf="@id/template_main_image"  
22.         app:layout_constraintTop_toTopOf="parent"  
23.         app:layout_constraintVertical_bias="0.80" />  
24.   
25. </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> layout/activity_main.xml

view plainprint?

1. <android.support.constraint.ConstraintLayout   
2.     ...  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     tools:context="com.sample.myapplication.MainActivity">  
6.   
7.     <ImageView  
8.         android:id="@+id/top_image"  
9.         android:layout_width="wrap_content"  
10.         android:layout_height="wrap_content" />  
11.   
12.     <ImageButton  
13.         android:id="@+id/action_button"  
14.         android:layout_width="48dp"  
15.         android:layout_height="48dp" />  
16.   
17.     <include layout="@layout/header_template" />  
18.   
19. </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" /> <ImageButton android:id="@+id/action_button" android:layout_width="48dp" android:layout_height="48dp" /> <include layout="@layout/header_template" /> </android.support.constraint.ConstraintLayout> template に割り当てる部分は ViewGroup や include でも問題ない

view plainprint?

1. <android.support.constraint.ConstraintLayout   
2.     ...  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     tools:context="com.sample.myapplication.MainActivity">  
6.   
7.     <ImageView  
8.         android:id="@+id/top_image"  
9.         android:layout_width="wrap_content"  
10.         android:layout_height="wrap_content" />  
11.   
12.     <include  
13.         android:id="@+id/action_button"  
14.         layout="@layout/action_button_content" />  
15.   
16.     <include layout="@layout/header_template" />  
17.   
18. </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 されない

view plainprint?

1. ConstraintSet mConstraintSet1 = new ConstraintSet();  
2. ConstraintSet mConstraintSet2 = new ConstraintSet();  
3.   
4. // get constraints from layout  
5. mConstraintSet2.clone(context, R.layout.state2);  
6.   
7. setContentView(R.layout.state1);  
8. mConstraintLayout = (ConstraintLayout) findViewByid(R.id.activity_main);  
9.   
10. // get constraints from ConstraintLayout  
11. mConstraintSet1.clone(mConstraintLayout);  
12.   
13. // switch with animation  
14. TransitionManager.beginDelayedTransition(mConstraintLayout);  
15. // switch to state2  
16. mConstraintSet2.apply(mConstraintLayout);  

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

Inference

• 接続の確率モデルに基づく
• 制約されていない view を制約する（すでに制約されているものは何もしない）
• view は動かさない(alignment tools ではない)

Advanced Inspector

• properties がどの layout, dimen, strings 由来なのか表示

Tools attributes https://developer.android.com/studio/write/tool-attributes.html

• 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 を使う
  view plainprint?

  1. tools:text="@tools:sample/lorem"  
  2. tools:text="@tools:sample/full_names"  
  3. tools:text="@tools:sample/us_phones"  
  4. tools:text="@tools:sample/date_mmddyyyy"  
  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 ファイルを追加
  view plainprint?

  1. #d50000  
  2. #2962ff  
  3. #00e5ff  
  4. #aeea00  
  5. #ff6d00  
  #d50000 #2962ff #00e5ff #aeea00 #ff6d00
  view plainprint?

  1. tools:background="@sample/colors"  
  tools:background="@sample/colors"
• フォルダーに json（contacts.json とか）ファイルを追加
  view plainprint?

  1. {  
  2.  "contacts": [  
  3.   {  
  4.    "name":"...",  
  5.    ...  
  6.   }  
  7.  ]  
  8. }  
  { "contacts": [ { "name":"...", ... } ] }
  view plainprint?

  1. tools:text="@sample/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)