Slide 1
Slide 1 text
border-left: 1dp solid #666666;
Slide 2
Slide 2 text
Ƅ Rekimoto Lab. at University of Tokyo
(prev: Akashi-NCT)
Ɠ Enginner at Wantedly, Inc.
(Dmetlabel Corp. , Life is Tech, Inc.)
Slide 3
Slide 3 text
Ruby
Ruby on Rails
JavaScript
Android
Design
Others
Skill Ratio
Slide 4
Slide 4 text
border-left: 1dp solid #666666;
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
How do you do this in Android ?
Slide 8
Slide 8 text
1 border-right: 1px solid #fff;
2 border-bottom: 1px solid #fff;
CSS
Slide 9
Slide 9 text
XML
1
2
3
4
5
6
7
Slide 10
Slide 10 text
XML
1
2
3
4
5
6
7
Slide 11
Slide 11 text
1
2
3
4
5
6
7
1dp
1dp
黒 : View
赤 : layer-list 内の item
XML
Slide 12
Slide 12 text
1
2
3
4
5
6
7
1dp
1dp
黒 : View
赤 : layer-list 内の item
XML
Slide 13
Slide 13 text
XML
1
2
3
4
5
6
7
8
9
10
11
12
Slide 14
Slide 14 text
Java
1 GradientDrawable layer = new GradientDrawable();
2 layer.setStroke(BORDER_WIDTH, BORDER_COLOR);
3
4 Drawable[] layers = new Drawable[]{layer};
5 LayerDrawable layerDrawable = new LayerDrawable(layers);
6 layerDrawable.setLayerInset(0, 0, -BORDER_WIDTH, 0, -BORDER_WIDTH);
7
8 view.setBackground(layerDrawable);
: LayerDrawable
: GradientDrawable
Slide 15
Slide 15 text
Java
1 GradientDrawable layer = new GradientDrawable();
2 layer.setStroke(BORDER_WIDTH, BORDER_COLOR);
3
4 Drawable[] layers = new Drawable[]{layer};
5 LayerDrawable layerDrawable = new LayerDrawable(layers);
6 layerDrawable.setLayerInset(0, 0, -BORDER_WIDTH, 0, -BORDER_WIDTH);
7
8 view.setBackground(layerDrawable);
: LayerDrawable
: GradientDrawable
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
楽をしてみる
Slide 18
Slide 18 text
CSS-Like な border
1
Slide 19
Slide 19 text
CSS-Like な border
1
Slide 20
Slide 20 text
izumin5210/ViewBorderHelper
1 class AwesomeView extends View {
2 public AwesomeView(Context context, AttributeSet attrs) {
3 super(context, attrs);
4 new ViewBorderHelper(context, attrs).setBorder(this);
5 }
6 }
Slide 21
Slide 21 text
izumin5210/ViewBorderHelper
1 class AwesomeView extends View {
2 public AwesomeView(Context context, AttributeSet attrs) {
3 super(context, attrs);
4 new ViewBorderHelper(context, attrs).setBorder(this);
5 }
6 }
Slide 22
Slide 22 text
izumin5210/ViewBorderHelper
1
Slide 23
Slide 23 text
izumin5210/ViewBorderHelper
border_color
border_left_color
border_bottom_color
border_dash_width
border_left_dash_width
border_bottom_dash_width
border_width
border_left_width
border_bottom_width
border_dash_gap
border_left_dash_gap
border_bottom_dash_gap
Slide 24
Slide 24 text
まとめ
Android で View の border 扱うのは面倒
（CSS に比べた場合）
イイ感じのヘルパとか作ってややこしさ隠蔽
（e.g. izumin5210/ViewBorderHelper）
これで CSS わかる人なら
Android のレイアウトが書ける！ [ 要出典 ]