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

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

でLTした内容です。

Transcript

1. 7JFXͷڞ௨Խํ๏·ͱΊ
   ʢ໦ʣ
   QPUBUPUJQT
   খ੢༟հ
   

   View Slide

2. !LPOJGBS
   w "OESPJE࡞ͬͯ·͢ɻ
   w ಙౡݝࠤಹՏ಺ଜग़਎ɻ

   4BOTBOਆࢁΦϑΟεͷྡͷଜ
   
   

   View Slide

3. 5BQUSJQ
   w IUUQBQQNBSLFUJOHMBCPOFUUBQUSJQ
   

   View Slide

4. 7JFXͷڞ௨Խํ๏
   EJNFOTYNMɺDPMPSTYNM
   ESBXBCMFYNM
   TUZMFTYNM
   JODMVEF
   $VTUPN7JFX
   

   View Slide

5. 7JFXͷڞ௨Խํ๏
   EJNFOTYNMɺDPMPSTYNM
   ESBXBCMFYNM
   TUZMFTYNM
   JODMVEF
   $VTUPN7JFX
   ˡࠓ೔͸͜͜ͷ࿩
   

   View Slide

6. TUZMFTYNM
   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"
   />
   

   View Slide

7. TUZMFTYNM
   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"
   />
   

   View Slide

8. TUZMFTYNM
   style="@style/TextSub"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   />
   <br/><item name="android:textSize">@dimen/text_small</item><br/><item name="android:textColor">@color/grey600</item><br/><item name=“android:gravity">center_vertical</item><br/><item name="android:maxLines">2</item><br/>
   

   View Slide

9. TUZMFTYNM
   
   <br/><item name="android:textSize">@dimen/text_medium</item><br/>
   <br/><item name="android:textSize">@dimen/text_small</item><br/><item name="android:textColor">@color/grey600</item><br/><item name=“android:gravity">center_vertical</item><br/><item name="android:maxLines">2</item><br/>
   

   View Slide

10. TUZMFTYNM
    TUZMFT͸ෳ਺ͷYNMʹ෼͚ͯ؅ཧͨ͠ํ͕͍͍͔΋͠Ε·ͤΜ
    ྫ
    TUZMFT@IPNFYNMɺTUZMFT@EFUBJMTYNM
    !
    ৄ͘͠͸<຋༁>BOESPJECFTUQSBDUJDFΛࢀরɻ
    IUUQRJJUBDPNLHNZTIJOJUFNTBE⒎CDE
    

    View Slide

11. JODMVEF
    android:layout_width="match_parent"
    android:layout_height=“wrap_content”>
    !
    
    !
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    
    
    
    
    !
    
    

    View Slide

12. JODMVEF
    android:layout_width="match_parent"
    android:layout_height=“wrap_content”>
    !
    
    !
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    
    
    
    
    !
    
    

    View Slide

13. JODMVEF
    android:layout_width="match_parent"
    android:layout_height=“wrap_content”>
    !
    
    !
    
    !
    
    7JFXͷωετ͕ଟ͘ͳΓ͕ͪͳͷͰɺNFSHFͷ࢖͍ํΛ֮͑ͯ
    ͓͘ͱΑ͍ɻ
    㱺8IBUJTUIFQVSQPTFPG"OESPJETUBHJO9.-MBZPVUT
    

    View Slide

14. $VTUPN7JFX
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    !
    android:id="@+id/triangle"
    android:background=“@drawable/left_triangle"
    … />
    !
    android:id=“@+id/txt_balloon"

    android:background="@drawable/bg_word_balloon"
    … />
    !
    
    

    View Slide

15. $VTUPN7JFX
    android:id="@+id/balloon_word"
    android:layout_width="match_parent"
    android:layout_height=“wrap_content" />
    

    View Slide

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);
    }
    }
    

    View Slide

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);
    }
    }
    

    View Slide

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);
    }
    }
    

    View Slide

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);
    }
    }
    

    View Slide

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);
    }
    }
    

    View Slide

21. $VTUPN7JFX
    $VTUPN7JFX͸ᇪༀɻ
    ա৒ͳڞ௨ԽʹΑΔ$VTUPN7JFXཚཱʹ͸஫ҙ
    

    View Slide

22. ·ͱΊ
    EJNFOTYNM DPMPSTYNM
    ESBXBCMFYNM
    Կ౓΋ग़ͯ͘Δ
    ϨΠΞ΢τ͔
    JODMVEF
    $VTUPN7JFX
    ෳ਺ͷ7JFXͰ
    ߏ੒͞Ε͍ͯΔ͔
    ϩδοΫؚ͕·
    ΕΔ͔
    ϨΠΞ΢τYNMʹ௚઀هड़
    /P
    :FT
    /P
    :FT
    /P
    :FT
    σβΠϯʹ߹Θͤͯ࢖༻
    TUZMFTYNM $VTUPN7JFX
    

    View Slide

23. ͋Γ͕ͱ͏͍͟͝·ͨ͠
    ٩ ๑❛ᴗ❛๑
    ۶
    גࣜձࣾحฌୂ
    ΤϯδχΞେืूதͰ͢
    

    View Slide