Upgrade to Pro — share decks privately, control downloads, hide ads and more …

border-left: 1dp solid #666666;

border-left: 1dp solid #666666;

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

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

9eed44f137609e6ce3b6f1e14f80b9e1?s=128

Masayuki Izumi

May 13, 2015
Tweet

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;

  5. None
  6. None
  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
  16. None
  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 のレイアウトが書ける! [ 要出典 ]