Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ConstraintLayout & Android Studio Design Tools
Search
Daichi Furiya (Wasabeef)
May 19, 2018
Programming
2
870
ConstraintLayout & Android Studio Design Tools
Daichi Furiya (Wasabeef)
May 19, 2018
Tweet
Share
More Decks by Daichi Furiya (Wasabeef)
See All by Daichi Furiya (Wasabeef)
DevFest Tokyo 2025 - Flutter のアプリアーキテクチャ現在地点
wasabeef
5
1.9k
About Flutter Architecture
wasabeef
1
250
2023 Flutter/Dart Summary
wasabeef
0
79
I/O Extended 2023 - Dart と Flutter の新機能
wasabeef
0
180
I/O Extended 2023 - Flutter 活用事例
wasabeef
10
3k
What it Takes to be a Flutter Developer
wasabeef
0
200
FlutterKaigi 2022 Keynote
wasabeef
1
610
Flutter Hooks を使ったアプリ開発 / App Development with the Flutter Hooks
wasabeef
2
1.4k
Flutter 2021 の振り返りと今後のアプリ開発に向けて / Looking back on Flutter 2021 and for future app development.
wasabeef
4
2.2k
Other Decks in Programming
See All in Programming
可変性を制する設計: 構造と振る舞いから考える概念モデリングとその実装
a_suenami
7
1k
MCPで実現できる、Webサービス利用体験について
syumai
7
2.2k
AIコーディングエージェント全社導入とセキュリティ対策
hikaruegashira
15
8.4k
Bedrock AgentCore ObservabilityによるAIエージェントの運用
licux
8
360
Prompt Engineeringの再定義「Context Engineering」とは
htsuruo
0
110
バイブスあるコーディングで ~PHP~ 便利ツールをつくるプラクティス
uzulla
1
300
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
220
AI Ramen Fight
yusukebe
0
120
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
190
知って得する@cloudflare_vite-pluginのあれこれ
chimame
1
120
AIに安心して任せるためにTypeScriptで一意な型を作ろう
arfes0e2b3c
0
270
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
570
Featured
See All Featured
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
390
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
BBQ
matthewcrist
89
9.8k
A Tale of Four Properties
chriscoyier
160
23k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Typedesign – Prime Four
hannesfritz
42
2.7k
Why Our Code Smells
bkeepers
PRO
337
57k
What's in a price? How to price your products and services
michaelherold
246
12k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Producing Creativity
orderedlist
PRO
346
40k
Documentation Writing (for coders)
carmenintech
72
4.9k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
720
Transcript
ConstraintLayout & Android Studio Design Tools wasabeef GDG Fukuoka 2018
About me Daichi Furiya Google Developer Expert CyberAgent, Inc. @wasabeef_jp
wasabeef
まずは 5 分でおさらい IO18 Android announcements
1. Android Jetpack
Jetpack
Jetpack - Navigation
2. Android App Bundle
複数 apk の管理をなくす apk サイズを小さくする インストール後でも機能をできる インストールしなくても実行できる Android App Bundle
Android App Bundle
Android App Bundle aab生成方法 $ ./gradlew assemble{Variables} $ ./gradlew bundle{Variables}
3. Kotlin
Concise Safe Interoperable Tool-Friendly Kotlin Kotlin Koans Online https://try.kotlinlang.org
Android KTX view.viewTreeObserver.addOnPreDrawListener( object : ViewTreeObserver.OnPreDrawListener { override fun onPreDraw():
Boolean { viewTreeObserver.removeOnPreDrawListener(this) actionToBeTriggered() return true } }); view.doOnPreDraw { actionToBeTriggered() }
4. Slices
Slices Google検索結果の中に自分のアプリのUI、 アクションなど表示することができる
5. App Actions
App Actions ホーム画面やスマートテキスト選択などに 自分のアプリのアクションを設定できる
Android Studio Design Tools Android Studio 3.2 Canary 15
CustomViewがエディタから選択できるように
既存のViewGroupから変換できるように
<include>先のレイアウト確認が楽に
Tools attributes
知らなかったものもたくさんあります tools:ignore tools:targetApi tools:layout tools:context tools:listitem tools:showIn tools:itemCount tools:openDrawer Tools:text
tool:menu tools:locale tools:keep and more…
頻繁に使うであろう tools attributes tools:ignore tools:targetApi tools:layout tools:context tools:listitem tools:showIn tools:itemCount
tools:openDrawer Tools:text tool:menu tools:locale tools:keep and more…
レイアウト確認で空のandroid:textだと不便な場合など <TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height=“wrap_content" android:text=“TextView” app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent"/>
<TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height=“wrap_content" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent"/> レイアウト確認で空のandroid:textだと不便な場合など
tools:text を活用すればデザイン確認も少し楽に <TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height=“wrap_content" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf=“parent" tools:text=“わさびーふ”/>
RecycierView はエディタ上だと確認しずらい
サンプルデータを表示することができる
設定もエディタ上から簡単に
わかりやすい見た目になり、データ数の調整も可能 <androidx.recyclerview.widget.RecyclerView android:layout_width="0dp" android:layout_height="wrap_content" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf=“@+id/bookmark" tools:listitem=“@layout/recycler_view_item_5” tools:itemCount=“5" />
Sample Data
Sample Data サンプル画像が用意されている
Sample Data 背景用サンプル画像も
Sample Data 自分で用意したサンプル画像も
独自で用意した画像などは フォルダを作って格納する sampledata/myavatars
カラーのサンプルデータ #f44336 #9c28b0 #3f51b5 #673ab7 sampledata/colors
sampledata/full_names ユーザ名のサンプルデータ Taro yamada Sho Otani Daichi Furiya
用意したカラーをエディタ上だけ反映してみる <ImageView android:id="@+id/imageView" android:layout_width="128dp" android:layout_height="128dp" android:src="@drawable/jetpack_hero"/>
<ImageView android:id="@+id/imageView" android:layout_width="128dp" android:layout_height="128dp" android:src="@drawable/jetpack_hero" tools:tint="@sample/colors" /> 用意したカラーをエディタ上だけ反映してみる
Names @tools:sample/first_names Cities @tools:sample/us_cities Lorem ipsum @tools:sample/lorem Avatars @tools:sample/avatars …
Predefined Sample Data
Demo
ConstraintLayout 2.0
柔軟なレイアウト ViewGroupの階層を深くしない UI Builderが充実 API 9 から利用可能で 99.99% の端末で動作 ライブラリサイズが
160kb 未満 ConstraintLayout
ConstraintLayout 1.1 (2018) dependencies { implementation 'androidx.constraintlayout:constraintlayout:1.1.0' }
相対・センタリング・バイアス グルーピング 非表示時のハンドリング ガイドライン ConstraintSet ConstraintLayout 1.0 (2017)
Chain サポートの向上 New Optimizer Barrier … more ConstraintLayout 1.1 (2018)
Helper
UIの作成を楽にするもの GuidlineやBarrier 各Viewの参照をまとめたりもできる Helper
Barrier 例えば文字が長くなっ た方に右側の要素を合 わせたりできる
Guidline 例えば文字が長くなっ た方に右側の要素を合 わせたりできる
Layout Manipulation Post-Layout Manipulation Rendering or Decorating Helper
Layer
表示・非表示サポート 変形アニメーションサポート Layer
Layer
Circular Revel
Circular Revel 自分で実装するとなる と難しい、このアニ メーションも簡単にで きる
Decorators
Lava Decorator
Lava Decorator Floating Action Button のアニメーションに応 用したりできる
Next future
MotionLayout
MotionLayout ConstraintLayoutのサブクラス MotionScene ConstraintLayoutStatesのアニ メーションをやってくれる
MotionLayout CustomViewのアニメーションサ ポート Custom attributeのサポート
MotionLayout
Motion Editor
Motion Editor
Motion Editor
Conclusion
2018/06/08(金) 19:00 〜 (株)メルカリ 福岡オフィス http://bit.ly/HKT-IO18
Thank you. twitter.com/wasabeef_jp wasabeef.jp github.com/wasabeef