Augmented Usamimi

it { is_expected.to be_blog.written_by(izumin5210) }

第17回 #potatotips でborder-leftの話をしてきた

Android Event

#potatotips でLTしてきた

いってきました．しゃべりました． connpass.com

potatotipsといえば関西にいる頃からずっと憧れていた勉強会の1つだった． 関東での初登壇がまさかここになるとは思いもしなかったので緊張したけど，なんとかなったような気がする．

他の方たちの発表については色んなブログ等でまとめられていたのでそちらを見ていただくといいと思います:

余談ですが，僕はいまこの「美人司会者」がいるオフィスでアルバイトしています．余談です．

border-left: 1dp solid #666666;

TL;DR

  • Androidでborder-leftとかつけるの大変だよね
  • 全周のborderひいて，ネガティブオフセットつければ不要な辺を排除できるよね
  • 毎回似たようなコード書くのも面倒だからライブラリにしたよ

Androidでborder-leftつらい問題

例えばこういうデザインにしたいとき:

f:id:izumin5210:20150515012156p:plain

CSSだとborder-rightとborder-bottomを設定するだけでOK.

border-right: 1px solid #99ffffff;
border-bottom: 1px solid #99ffffff;

でもAndroidだと超めんどくさいよねって話． 一応やりかたは色々あって，例えば背景画像としてしまう，幅1dpのViewを配置するなど． でもどれもとてもつらみを感じる．

本発表では全周のborderをひいて，それに負のオフセットをつけることで不要な辺を見せないという手法を紹介した． このやり方自体は1年半ぐらい前にQiitaに投稿してあった．当時はあまり伸びなかったけど，月1〜2程度のペースでストック数が増えていたので需要自体は感じていた． 今回の発表で新しい点としては，このネガティブオフセットを用いた手法を簡単に利用できるライブラリ的なのをつくったことである．

github.com

こいつを使ってやると，たとえばさっきの画像のViewだと次のように書ける:

<com.example.android.AwesomeView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:border_right_width="1dp"
    app:border_bottom_width="1dp"
    app:border_color="#99ffffff"
    />

結構直感的になったと思う（僕がCSS得意ってのもあるかもだけど）． Qiita記事のやり方だとViewの数だけdrawable/*.xmlが増殖するのですごく鬱陶しいうえにxml自体の見づらさもある．その点が解消できているのは個人的にも満足している．

現状だと独自Viewにしか適用できないのが欠点ではあるけど，コンストラクタのsuperのあとに1行追記するだけであとはよしなにやってくれるので楽だと思う．

あとがき

Wantedly

冒頭にも書きましたが，ぼくはいまWantedlyでアルバイトしています．すごいいいタイミングだったんだなあ． ちなみにAndroidエンジニアじゃなくWebエンジニアとして働いています． 当日はずっとJavaScript書いてました．

Wantedlyでは一緒に働ける人を募集しているそうです．興味がある方は遊びに行ってみるといいと思います． www.wantedly.com

ちなみにぼくも遊びに行ったらアルバイトできることになった人です:D

Android

Android開発，楽しいです．

References