border-left: 1dp solid #666666;
TRANSCRIPT
![Page 1: border-left: 1dp solid #666666;](https://reader034.vdocuments.net/reader034/viewer/2022051504/58efa49e1a28ab5b168b45e5/html5/thumbnails/1.jpg)
border-left: 1dp solid #666666;
![Page 2: border-left: 1dp solid #666666;](https://reader034.vdocuments.net/reader034/viewer/2022051504/58efa49e1a28ab5b168b45e5/html5/thumbnails/2.jpg)
� Rekimoto Lab. at University of Tokyo(prev: Akashi-NCT)
� Enginner at Wantedly, Inc.(Dmetlabel Corp. , Life is Tech, Inc.)
![Page 3: border-left: 1dp solid #666666;](https://reader034.vdocuments.net/reader034/viewer/2022051504/58efa49e1a28ab5b168b45e5/html5/thumbnails/3.jpg)
RubyRuby on Rails
JavaScript
Android
Design
Others
Skill Ratio
![Page 4: border-left: 1dp solid #666666;](https://reader034.vdocuments.net/reader034/viewer/2022051504/58efa49e1a28ab5b168b45e5/html5/thumbnails/4.jpg)
border-left: 1dp solid #666666;
![Page 5: border-left: 1dp solid #666666;](https://reader034.vdocuments.net/reader034/viewer/2022051504/58efa49e1a28ab5b168b45e5/html5/thumbnails/5.jpg)
![Page 6: border-left: 1dp solid #666666;](https://reader034.vdocuments.net/reader034/viewer/2022051504/58efa49e1a28ab5b168b45e5/html5/thumbnails/6.jpg)
![Page 7: border-left: 1dp solid #666666;](https://reader034.vdocuments.net/reader034/viewer/2022051504/58efa49e1a28ab5b168b45e5/html5/thumbnails/7.jpg)
How do you do this in Android ?
�
![Page 8: border-left: 1dp solid #666666;](https://reader034.vdocuments.net/reader034/viewer/2022051504/58efa49e1a28ab5b168b45e5/html5/thumbnails/8.jpg)
1 border-right: 1px solid #fff;
2 border-bottom: 1px solid #fff;
CSS
![Page 9: border-left: 1dp solid #666666;](https://reader034.vdocuments.net/reader034/viewer/2022051504/58efa49e1a28ab5b168b45e5/html5/thumbnails/9.jpg)
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>
![Page 10: border-left: 1dp solid #666666;](https://reader034.vdocuments.net/reader034/viewer/2022051504/58efa49e1a28ab5b168b45e5/html5/thumbnails/10.jpg)
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>
![Page 11: border-left: 1dp solid #666666;](https://reader034.vdocuments.net/reader034/viewer/2022051504/58efa49e1a28ab5b168b45e5/html5/thumbnails/11.jpg)
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
![Page 12: border-left: 1dp solid #666666;](https://reader034.vdocuments.net/reader034/viewer/2022051504/58efa49e1a28ab5b168b45e5/html5/thumbnails/12.jpg)
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
![Page 13: border-left: 1dp solid #666666;](https://reader034.vdocuments.net/reader034/viewer/2022051504/58efa49e1a28ab5b168b45e5/html5/thumbnails/13.jpg)
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>
![Page 14: border-left: 1dp solid #666666;](https://reader034.vdocuments.net/reader034/viewer/2022051504/58efa49e1a28ab5b168b45e5/html5/thumbnails/14.jpg)
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
![Page 15: border-left: 1dp solid #666666;](https://reader034.vdocuments.net/reader034/viewer/2022051504/58efa49e1a28ab5b168b45e5/html5/thumbnails/15.jpg)
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
![Page 16: border-left: 1dp solid #666666;](https://reader034.vdocuments.net/reader034/viewer/2022051504/58efa49e1a28ab5b168b45e5/html5/thumbnails/16.jpg)
![Page 17: border-left: 1dp solid #666666;](https://reader034.vdocuments.net/reader034/viewer/2022051504/58efa49e1a28ab5b168b45e5/html5/thumbnails/17.jpg)
楽をしてみる
![Page 18: border-left: 1dp solid #666666;](https://reader034.vdocuments.net/reader034/viewer/2022051504/58efa49e1a28ab5b168b45e5/html5/thumbnails/18.jpg)
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" />
![Page 19: border-left: 1dp solid #666666;](https://reader034.vdocuments.net/reader034/viewer/2022051504/58efa49e1a28ab5b168b45e5/html5/thumbnails/19.jpg)
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" />
![Page 20: border-left: 1dp solid #666666;](https://reader034.vdocuments.net/reader034/viewer/2022051504/58efa49e1a28ab5b168b45e5/html5/thumbnails/20.jpg)
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 }
![Page 21: border-left: 1dp solid #666666;](https://reader034.vdocuments.net/reader034/viewer/2022051504/58efa49e1a28ab5b168b45e5/html5/thumbnails/21.jpg)
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 }
![Page 22: border-left: 1dp solid #666666;](https://reader034.vdocuments.net/reader034/viewer/2022051504/58efa49e1a28ab5b168b45e5/html5/thumbnails/22.jpg)
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" />
![Page 23: border-left: 1dp solid #666666;](https://reader034.vdocuments.net/reader034/viewer/2022051504/58efa49e1a28ab5b168b45e5/html5/thumbnails/23.jpg)
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
![Page 24: border-left: 1dp solid #666666;](https://reader034.vdocuments.net/reader034/viewer/2022051504/58efa49e1a28ab5b168b45e5/html5/thumbnails/24.jpg)
まとめ
� Android で Viewの border 扱うのは面倒
(CSS に比べた場合)
� イイ感じのヘルパとか作ってややこしさ隠蔽
(e.g. izumin5210/ViewBorderHelper)
� これで CSS わかる人なら
Android のレイアウトが書ける![要出典 ]