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
ノハナ社のレイアウト戦略
Search
HiroYUKI Seto
February 03, 2018
Technology
0
3.9k
ノハナ社のレイアウト戦略
2018/2/9
DroidKaigi 2018 DAY02 room1 10:30~
発表の付録3
HiroYUKI Seto
February 03, 2018
Tweet
Share
More Decks by HiroYUKI Seto
See All by HiroYUKI Seto
Androidアプリの 安全なリファクタリングを行うパターン集
seto_hi
2
5k
UI TestやVisual Regression Testを コスパ良くやる
seto_hi
3
1.9k
事業支援というお仕事
seto_hi
0
430
MDCの内部実装から学ぶ 表現力の高いViewの作り方
seto_hi
5
1.8k
CoordinatorLayoutのBehaviorを使い倒す
seto_hi
1
440
Jetpack Compose
seto_hi
2
860
UI改善に繋がるエンジニアの立ち回り
seto_hi
2
4.8k
MDCのButtonのCorner Family
seto_hi
1
230
MDCのBottomAppBarのShadowの実現方法
seto_hi
0
1k
Other Decks in Technology
See All in Technology
Goで実現する堅牢なアーキテクチャ:DDD、gRPC-connect、そしてAI協調開発の実践
fujidomoe
3
740
GoとWasmでつくる軽量ブラウザUI
keyl0ve
0
130
技術キャッチアップ効率化を実現する記事推薦システムの構築
yudai00
2
140
技術選定 したい人 したくない人
shirayanagiryuji
0
380
Claude Codeと駆け抜ける 情報収集と実践録
sontixyou
1
990
【2026年版】生成AIによる情報システムへのインパクト
taka_aki
0
170
作るべきものと向き合う - ecspresso 8年間の開発史から学ぶ技術選定 / 技術選定con findy 2026
fujiwara3
4
700
Scrum Fest Morioka 2026
kawaguti
PRO
2
640
Kubernetes環境周りの責任範囲をいい機会なので考える / Taking the Opportunity to Clarify Kubernetes Responsibilities
kohbis
1
110
全自動で回せ!Claude Codeマーケットプレイス運用術
yukyu30
3
130
「静的解析」だけで終わらせない。 SonarQube の最新機能 × AIで エンジニアの開発生産性を本気で上げる方法
xibuka
2
280
GitHub Copilot CLI 現状確認会議(2026年2月のすがた)
torumakabe
4
630
Featured
See All Featured
A Tale of Four Properties
chriscoyier
162
24k
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
madoxten
59
50k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
254
22k
Writing Fast Ruby
sferik
630
62k
Practical Orchestrator
shlominoach
191
11k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
11
850
Between Models and Reality
mayunak
1
210
Reality Check: Gamification 10 Years Later
codingconduct
0
2k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
helenjbeal
1
130
Large-scale JavaScript Application Architecture
addyosmani
515
110k
We Have a Design System, Now What?
morganepeng
55
8k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
3.1k
Transcript
DroidKaigi 2018付録3 ノハナ社 の レイアウト戦略 株式会社ノハナ 瀬戸優之 @seto_hi
ノハナ社のレイアウト戦略 • レイアウトどうしたらいいの?の ノハナ的回答 • あくまで参考 • みんな違ってみんないい
Q1 Q. レイアウトエディタ使ってます? A. 使ってません ・意図しない要素が追加されるリスクが怖い ・エンジニアが楽をしても結局はQAコストになる
・ConstraintLayoutの属性はそんなに多くないです ・覚えましょう ※eclipse時代から開発しているのでxmlに慣れすぎている
Q2 Q. レイアウトのRootはすべてConstraintLayoutですか? A. 違います ConstraintLayoutな画面は多いですが、 measure回数が少なくなることと
保守性を考えて レイアウトを組みます
Measure回数 ViewGroup Measure回数 FrameLayout 自身のMeasureSpecがEXACTLYなら1回 それ以外は2回されるViewあり LinearLayout WeightがないViewは1回 WeightをあるViewはだいたい2回 RelativeLayout
2回 ConstraintLayout Viewのサイズが固定値なら1回 そうでなければ2〜最大3回 ただし別途複数回レイアウト計算が走る
ConstraintLayout利点 • 階層が浅くなりやすい ◦ 自由度が高い ◦ だいたいのレイアウトに対応できる!すごい! • RootをConstraintLayoutにすると、 レイアウトを大幅に変更しても対応しやすい
• 多機能 ◦ Groupなど
ConstraintLayout欠点 • 簡単なレイアウトには計算が多すぎる ◦ いい感じのレイアウトではmeasureがほぼ2回走る ◦ 現状の端末では十二分に高速だとは思うが.. ▪ 簡単なレイアウトなので複雑な計算しても高速 •
記述が多い ◦ 例えば縦組みレイアウトなら LinearLayoutの方が記述も少なく処理も高速 人間の目にも優しい
ノハナ流 ViewGroup決定メソッド LinearLayout RelativeLayout CosntraintLayout 縦 or 横一直線な レイアウト レイアウトが直近で
修正される可能性が 高い RelativeLayoutでも 実現できそう YES NO でもConstraintLayoutを 使うと楽
Q3 Q. 独自ViewGroupはいっぱいありますか? A. そんなには多くないです メンテナンス性を考えるとあまり作るべきでない ・どうしても既存のViewGroupでは実現できない
・measureとlayoutが複雑になりすぎない 場合にのみ作るようにしています