border-left: 1dp solid #666666;

【第17回】potatotips(iOS/Android開発Tips共有会) 発表資料 http://connpass.com/event/14143/

izumin5210/ViewBorderHelper: https://github.com/izumin5210/ViewBorderHelper

Transcript

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 のレイアウトが書ける！ [ 要出典 ]