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
860
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
240
2023 Flutter/Dart Summary
wasabeef
0
73
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
600
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
生成AIで日々のエラー調査を進めたい
yuyaabo
0
640
レガシーシステムの機能調査・開発におけるAI利活用
takuya_ohtonari
0
610
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
1
470
C++20 射影変換
faithandbrave
0
520
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
1
660
Claude Codeの使い方
ttnyt8701
1
130
エンジニア向け採用ピッチ資料
inusan
0
160
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
560
[初登壇@jAZUG]アプリ開発者が気になるGoogleCloud/Azure+wasm/wasi
asaringo
0
130
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
340
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
120
Bytecode Manipulation 으로 생산성 높이기
bigstark
2
370
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.4k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
Navigating Team Friction
lara
187
15k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
670
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Code Reviewing Like a Champion
maltzj
524
40k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
490
RailsConf 2023
tenderlove
30
1.1k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
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