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
700
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)
About Flutter Architecture
wasabeef
0
42
2023 Flutter/Dart Summary
wasabeef
0
11
I/O Extended 2023 - Dart と Flutter の新機能
wasabeef
0
100
I/O Extended 2023 - Flutter 活用事例
wasabeef
10
2.3k
What it Takes to be a Flutter Developer
wasabeef
0
130
FlutterKaigi 2022 Keynote
wasabeef
1
490
Flutter Hooks を使ったアプリ開発 / App Development with the Flutter Hooks
wasabeef
2
1.2k
Flutter 2021 の振り返りと今後のアプリ開発に向けて / Looking back on Flutter 2021 and for future app development.
wasabeef
4
2k
Flutter Hooks, sometimes Jetpack Compose
wasabeef
3
1.6k
Other Decks in Programming
See All in Programming
Site Reliability Engineering for GMO
pyama86
6
970
PHP8.3の機能を振り返る / Review of PHP 8.3 features
seike460
PRO
1
110
SpringBoot+MyBatisで例外が出たときどこを見るか
syukai
0
110
[技育CAMPアカデミア]アイディアを形に!【超入門】スマホアプリ開発〜リリースまでの流れをご紹介
teamlab
PRO
0
350
コードレビューで学ぶ!Kotlinオブジェクト指向デザインパターン
akkie76
2
180
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
340
Netty Chicago Java User Group 2024-04-17
sullis
0
130
try! Swift Tokyo 2024 参加報告 / try! Swift Tokyo 2024 Report
hironytic
0
180
1인 개발자로 행복하게 살기 - GDG 송도 헬로월드 2024
benjaminkim
1
5.6k
オブジェクト指向のリ・オリエンテーション~歴史を振り返り、AI時代に向きなおる~
hanyudaeiiti
10
5.7k
TYPO3 v13 – The road to LTS: What's new and new APIs
luisasofie_xoxo
0
180
チーム力を高めるスクラム実践法:カンバン公開と課題攻略について - ニフティのスクラムトーク Vol. 2 - NIFTY Tech Talk #18
niftycorp
PRO
1
110
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
72
5.1k
Building Flexible Design Systems
yeseniaperezcruz
318
37k
What’s in a name? Adding method to the madness
productmarketing
PRO
15
2.6k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
356
22k
The Invisible Side of Design
smashingmag
294
49k
RailsConf 2023
tenderlove
2
530
The Art of Programming - Codeland 2020
erikaheidi
41
12k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
658
120k
Optimising Largest Contentful Paint
csswizardry
7
2.3k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
220
21k
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