【第17回】potatotips(iOS/Android開発Tips共有会) 発表スライドです http://connpass.com/event/14143/ izumin5210/ViewBorderHelper: https://github.com/izumin5210/ViewBorderHelper

1. border-left: 1dp solid #666666;

2. Ƅ Rekimoto Lab. at University of Tokyo
(prev: Akashi-NCT)
Ɠ Enginner at Wantedly, Inc.
(Dmetlabel Corp. , Life is Tech, Inc.)

3. Ruby
Ruby on Rails
JavaScript
Android
Design
Others
Skill Ratio

4. border-left: 1dp solid #666666;

7. How do you do this in Android ?

8. 1 border-right: 1px solid #fff;
2 border-bottom: 1px solid #fff;
CSS

9. XML
1 <layer-list>
2 <item android:top="-1dp" android:left="-1dp">
3 <shape>
4 <stroke android:width="1dp" android:color="#55ffffff" />
5 </shape>
6 </item>
7 </layer-list>

10. XML
1 <layer-list>
2 <item android:top="-1dp" android:left="-1dp">
3 <shape>
4 <stroke android:width="1dp" android:color="#55ffffff" />
5 </shape>
6 </item>
7 </layer-list>

11. 1 <layer-list>
2 <item android:top="-1dp" android:left="-1dp">
3 <shape>
4 <stroke android:width="1dp" android:color="#55ffffff" />
5 </shape>
6 </item>
7 </layer-list>
1dp
1dp
黒 : View
赤 : layer-list 内の item
XML

12. 1 <layer-list>
2 <item android:top="-1dp" android:left="-1dp">
3 <shape>
4 <stroke android:width="1dp" android:color="#55ffffff" />
5 </shape>
6 </item>
7 </layer-list>
1dp
1dp
黒 : View
赤 : layer-list 内の item
XML

13. XML
1 <layer-list>
2 <item android:top="-1dp" android:left="-1dp">
3 <shape>
4 <stroke android:width="1dp" android:color="#ffff9999" />
5 </shape>
6 </item>
7 <item android:bottom="-1dp" android:right="-1dp">
8 <shape>
9 <stroke android:width="1dp" android:color="#ff9999ff" />
10 </shape>
11 </item>
12 </layer-list>

14. 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);
<layer-list /> : LayerDrawable
<item /> : GradientDrawable

15. 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);
<layer-list /> : LayerDrawable
<item /> : GradientDrawable

17. 楽をしてみる

18. CSS-Like な border
1 <AwesomeView
2 android:laoyut_width="wrap_content"
3 android:laoyut_height="wrap_content"
4 app:border_color="0xffffffff"
5 app:border_right_width="1dp"
6 app:border_bottom_width="1dp" />

19. CSS-Like な border
1 <AwesomeView
2 android:laoyut_width="wrap_content"
3 android:laoyut_height="wrap_content"
4 app:border_color="0xffffffff"
5 app:border_right_width="1dp"
6 app:border_bottom_width="1dp" />

20. 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 }

21. 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 }

22. izumin5210/ViewBorderHelper
1 <AwesomeView
2 android:laoyut_width="wrap_content"
3 android:laoyut_height="wrap_content"
4 app:border_color="0xffffffff"
5 app:border_right_width="1dp"
6 app:border_bottom_width="1dp" />

23. 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

24. まとめ
Android で View の border 扱うのは面倒
（CSS に比べた場合）
イイ感じのヘルパとか作ってややこしさ隠蔽
（e.g. izumin5210/ViewBorderHelper）
これで CSS わかる人なら
Android のレイアウトが書ける！ [ 要出典 ]