Viewの共通化方法まとめ short ver

【第15回】potatotips(iOS/Android開発Tips共有会)
http://connpass.com/event/12140/

でLTした内容です。

Transcript

1. 7JFXͷڞ௨Խํ๏·ͱΊ ʢ໦ʣ
   QPUBUPUJQT
   খ੢
   ༟հ
2. !LPOJGBS w "OESPJE࡞ͬͯ·͢ɻ
   w ಙౡݝࠤಹՏ಺ଜग़਎ɻ
 4BOTBOਆࢁΦϑΟεͷྡͷଜ
3. 5BQUSJQ w IUUQBQQNBSLFUJOHMBCPOFUUBQUSJQ
4. 7JFXͷڞ௨Խํ๏  EJNFOTYNMɺDPMPSTYNM
    ESBXBCMF
   YNM
    TUZMFTYNM
    JODMVEF
   
    $VTUPN7JFX
5. 7JFXͷڞ௨Խํ๏  EJNFOTYNMɺDPMPSTYNM
    ESBXBCMF
   YNM
    TUZMFTYNM
    JODMVEF
   
    $VTUPN7JFX ˡ
   ࠓ೔͸͜͜ͷ࿩
6. TUZMFTYNM <TextView android:textColor="@color/grey600" android:gravity="center_vertical" android:layout_width="match_parent" android:layout_height="wrap_content" android:maxLines="2" android:textSize="@dimen/text_small" />
7. TUZMFTYNM <TextView android:textColor="@color/grey600" android:gravity="center_vertical" android:layout_width="match_parent" android:layout_height="wrap_content" android:maxLines="2" android:textSize="@dimen/text_small" />
8. TUZMFTYNM <TextView style="@style/TextSub" android:layout_width="match_parent" android:layout_height="wrap_content" /> <style name="TextSub"> <item name="android:textSize">@dimen/text_small</item> <item name="android:textColor">@color/grey600</item> <item name=“android:gravity">center_vertical</item> <item name="android:maxLines">2</item> </style>
9. TUZMFTYNM <!-- Extends --> <style name="TextSub.Big"> <item name="android:textSize">@dimen/text_medium</item> </style> <style name="TextSub"> <item name="android:textSize">@dimen/text_small</item> <item name="android:textColor">@color/grey600</item> <item name=“android:gravity">center_vertical</item> <item name="android:maxLines">2</item> </style>
10. TUZMFTYNM TUZMFT͸ෳ਺ͷYNMʹ෼͚ͯ؅ཧͨ͠ํ͕͍͍͔΋͠Ε·ͤΜ
    ྫ
    TUZMFT@IPNFYNMɺTUZMFT@EFUBJMTYNM
    ! ৄ͘͠͸<຋༁>
    BOESPJE
    CFTU
    QSBDUJDFΛࢀরɻ
    IUUQRJJUBDPNLHNZTIJOJUFNTBE⒎CDE
11. JODMVEF
     <RelativeLayout android:layout_width="match_parent" android:layout_height=“wrap_content”> ! <ImageView … /> ! <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView … /> <TextView … /> <TextView … /> </RelativeLayout> ! </RelativeLayout>
12. JODMVEF
     <RelativeLayout android:layout_width="match_parent" android:layout_height=“wrap_content”> ! <ImageView … /> ! <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView … /> <TextView … /> <TextView … /> </RelativeLayout> ! </RelativeLayout>
13. JODMVEF
     <RelativeLayout android:layout_width="match_parent" android:layout_height=“wrap_content”> ! <ImageView … /> ! <include layout=“@layout/part_character_info" /> ! </RelativeLayout> 7JFXͷωετ͕ଟ͘ͳΓ͕ͪͳͷͰɺNFSHFͷ࢖͍ํΛ֮͑ͯ ͓͘ͱΑ͍ɻ
    㱺
    8IBU
    JT
    UIF
    QVSQPTF
    PG
    "OESPJET
    UBH
    JO
    9.-
    MBZPVUT
14. $VTUPN7JFX <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content"> ! <FrameLayout android:id="@+id/triangle" android:background=“@drawable/left_triangle" … /> ! <TextView android:id=“@+id/txt_balloon"
 android:background="@drawable/bg_word_balloon" … /> ! </RelativeLayout>
15. $VTUPN7JFX <com.konifar.whovoice.views.WordBalloonView android:id="@+id/balloon_word" android:layout_width="match_parent" android:layout_height=“wrap_content" />
16. $VTUPN7JFX public class WordBalloonView extends RelativeLayout { ... public WordBalloonView(Context context, AttributeSet attrs) { super(context, attrs); inflate(context, R.layout.ui_word_balloon, this); ButterKnife.inject(this); ! TypedArray a = context.obtainStyledAttributes( attrs, R.styleable.WordBalloonView); try { balloonText = a.getString( R.styleable.WordBalloonView_balloonText); } finally { a.recycle(); } ! mTxtBalloon.setText(balloonText); } ! public void setBalloonText(String balloonText) { mTxtBalloon.setText(balloonText); } }
17. $VTUPN7JFX public class WordBalloonView extends RelativeLayout { ... public WordBalloonView(Context context, AttributeSet attrs) { super(context, attrs); inflate(context, R.layout.ui_word_balloon, this); ButterKnife.inject(this); ! TypedArray a = context.obtainStyledAttributes( attrs, R.styleable.WordBalloonView); try { balloonText = a.getString( R.styleable.WordBalloonView_balloonText); } finally { a.recycle(); } ! mTxtBalloon.setText(balloonText); } ! public void setBalloonText(String balloonText) { mTxtBalloon.setText(balloonText); } }
18. $VTUPN7JFX public class WordBalloonView extends RelativeLayout { ... public WordBalloonView(Context context, AttributeSet attrs) { super(context, attrs); inflate(context, R.layout.ui_word_balloon, this); ButterKnife.inject(this); ! TypedArray a = context.obtainStyledAttributes( attrs, R.styleable.WordBalloonView); try { balloonText = a.getString( R.styleable.WordBalloonView_balloonText); } finally { a.recycle(); } ! mTxtBalloon.setText(balloonText); } ! public void setBalloonText(String balloonText) { mTxtBalloon.setText(balloonText); } }
19. $VTUPN7JFX public class WordBalloonView extends RelativeLayout { ... public WordBalloonView(Context context, AttributeSet attrs) { super(context, attrs); inflate(context, R.layout.ui_word_balloon, this); ButterKnife.inject(this); ! TypedArray a = context.obtainStyledAttributes( attrs, R.styleable.WordBalloonView); try { balloonText = a.getString( R.styleable.WordBalloonView_balloonText); } finally { a.recycle(); } ! mTxtBalloon.setText(balloonText); } ! public void setBalloonText(String balloonText) { mTxtBalloon.setText(balloonText); } }
20. $VTUPN7JFX public class WordBalloonView extends RelativeLayout { ... public WordBalloonView(Context context, AttributeSet attrs) { super(context, attrs); inflate(context, R.layout.ui_word_balloon, this); ButterKnife.inject(this); ! TypedArray a = context.obtainStyledAttributes( attrs, R.styleable.WordBalloonView); try { balloonText = a.getString( R.styleable.WordBalloonView_balloonText); } finally { a.recycle(); } ! mTxtBalloon.setText(balloonText); } ! public void setBalloonText(String balloonText) { mTxtBalloon.setText(balloonText); } }
21. $VTUPN7JFX $VTUPN7JFX͸ᇪༀɻ
    ա৒ͳڞ௨ԽʹΑΔ$VTUPN7JFXཚཱʹ͸஫ҙ
22. ·ͱΊ EJNFOTYNM
    DPMPSTYNM
    ESBXBCMFYNM Կ౓΋ग़ͯ͘Δ ϨΠΞ΢τ͔ JODMVEF
     $VTUPN7JFX ෳ਺ͷ7JFXͰ ߏ੒͞Ε͍ͯΔ͔ ϩδοΫؚ͕· ΕΔ͔ ϨΠΞ΢τYNMʹ௚઀هड़ /P :FT /P :FT /P :FT σβΠϯʹ߹Θͤͯ࢖༻ TUZMFTYNM $VTUPN7JFX
23. ͋Γ͕ͱ͏͍͟͝·ͨ͠
    ٩ ๑❛ᴗ❛๑ ۶ גࣜձࣾحฌୂ
    ΤϯδχΞେืूதͰ͢