ripple-implement

AndroidのRippleについてpotato tips#54で話しました。

Transcript

1. 3JQQMF࣮૷ʹ͍ͭͯ 1PUBUPUJQT
    BOE
   GBDUPSZגࣜձࣾ
   ॕഭળ౎
2. ࣗݾ঺հ w ॕഭ
   ળ౎ʢ:PTIJUP
   *XBJTBLP
   
   !ZTU@J
   w "OESPJEΤϯδχΞ
   w BOE
   GBDUPSZ
   גࣜձࣾ
   w ϚϯΨ1BSL
   w "OESPJEΤϯδχΞืूதͰ͢ʂ
   w .BUFSJBM
   %FTJHO޷͖Ͱ͢ʂ
3. ࿩͍ͨ͜͠ͱ w 3JQQMFͷ࣮૷
   w 3JQQMFΛίʔυͰ࣮૷͢Δ
4. ಈ࡞؀ڥ w DPNQJMF4EL7FSTJPO
   
   w NJO4EL7FSTJPO
   
   w UBSHFU4EL7FSTJPO
   
   w TVQQPSU-JCSBSZ7FSTJPO
   
5. 3JQQMF
6. .BUFSJBM
   %FTJHOͷλον ϑΟʔυόοΫ
7. 3JQQMF
   αϯϓϧ
8. *NQMFNFOU
9. ΍Γ͍ͨ͜ͱ w -PMJQPQҎ্͸3JQQMFΛදࣔɺ,JULBU͸ผͷλονϑΟʔ υόοΫΛදࣔɻ
   w 7JFX(SPVQͷ֊૚ΛͰ͖Δ͚ͩઙ͘͢Δ
10. αϯϓϧ
    σβΠϯ wᶃɿ
    ը૾ɻશମʹ3JQQMFΛදࣔ͢Δ
    wᶄɿ
    λΠτϧͱઆ໌จɻશମʹ3JQQMFΛදࣔ͢Δ
    wᶅɺᶆɿ
    SFBEϘλϯɺUSJBMϘλϯɻϘλϯ಺ͷΈ 3JQQMFΛදࣔ͢Δ ᶃ ᶅ ᶄ ᶆ
11. ϨΠΞ΢τ <android.support.v7.widget.CardView android:foreground="@drawable/foreground_ripple"> <RelativeLayout> <ImageView/> <RelativeLayout> <RelativeLayout> <TextView android:id="@+id/title"/> <TextView android:id=“@+id/update_info"/> </RelativeLayout> <LinearLayout> <android.support.v7.widget.CardView android:id="@+id/read_button_wrapper" android:foreground="@drawable/foreground_ripple"> <TextView android:id="@+id/read_button_text"/> </android.support.v7.widget.CardView> <android.support.v7.widget.CardView android:id="@+id/trial_button_wrapper" android:foreground="@drawable/foreground_ripple"> <TextView android:id="@+id/trial_button_text"> </android.support.v7.widget.CardView> </LinearLayout> </RelativeLayout> </RelativeLayout> </android.support.v7.widget.CardView>
12. ϨΠΞ΢τ 1. <android.support.v7.widget.CardView 2. android:foreground=“@drawable/foreground_ripple” 3. <!— android:foreground=“?android:attr/selectableItemBackground”> —> 4. <RelativeLayout> 5. <ImageView/> 6. <RelativeLayout> 7. <RelativeLayout> 8. <TextView 9. android:id="@+id/title"/> 10. <TextView 11. android:id=“@+id/update_info"/> 12. </RelativeLayout> 13. <LinearLayout> 14. <android.support.v7.widget.CardView 15. android:id="@+id/read_button_wrapper" 16. android:foreground="@drawable/foreground_ripple"> 17. <TextView 18. android:id="@+id/read_button_text"/> 19. </android.support.v7.widget.CardView> 20. <android.support.v7.widget.CardView 21. android:id="@+id/trial_button_wrapper" 22. android:foreground="@drawable/foreground_ripple"> 23. <TextView 24. android:id="@+id/trial_button_text"> 25. </android.support.v7.widget.CardView> 26. </LinearLayout> 27. </RelativeLayout> 28. </RelativeLayout> 29.</android.support.v7.widget.CardView>
    ίʔυଆͰTFU0O$MJDL-JTUFOFS ΋ඞཁ
    
    3FMBUJWF-BZPVUͷGPSFHSPVOEʹ3JQQMFΛηοτͯ͠΋-PMJQPQ ͩͱಈ͔ͳ͍
13. 3JQQMF
    9.- 1. <?xml version="1.0" encoding="utf-8"?> 2. <ripple xmlns:android="http://schemas.android.com/apk/res/android" 3. android:color="@color/red"> 4. <item 5. android:id="@android:id/mask" 6. android:drawable="@android:color/white"/> 7. </ripple> ࢠཁૉͷJUNͷNBTLʹESBXBCMFΛࢦఆ͠ͳ͍ͱɺࢦΛ཭ ͨ͠λΠϛϯάͰ3JQQMF͕දࣔ͞Ε·ͤΜͰͨ͠ɻ
15. 3JQQMFΛίʔυͰ࣮૷͢Δ 1.holder.root.setOnClickListener { _ -> } 3. if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { 4. val rippleColors = intArrayOf(R.color.colorAccent, R.color.colorPrimary, R.color.colorPrimaryDark, 5. R.color.medium_turquoise_cc, R.color.eclipse, R.color.malibu 6. ) 8. val i = Random().nextInt(rippleColors.size) 9. val mask = ContextCompat.getDrawable(context, R.drawable.mask) 10. val color = ContextCompat.getColor(context, rippleColors[i]) 11. holder.root.foreground = RippleDrawable(ColorStateList.valueOf(color), null, mask).mutate() 12.} 14. 
    $PMPSͱ%SBXBCMFΛ࡞੒
    
    
    ̎
    NBTL༻ͷ%SBXBCMFΛ࡞੒
    
    
    
    3JQQMF%SBXBCMFΛ7JFXͷGPSFHSPVOEʹηοτ TFU0ODMJDL-JTUFOFS Λઃఆ ͢Δ͔ɺ9.-ʹzDMJDLBCMF
    
    USVFzͷઃఆ͕ඞཁͰ͢
17. ·ͱΊ w ,JULBUΛಈ࡞ର৅֎ͱ͢ΔΞϓϦ͕૿͖͑ͯ·͕ͨ͠ɺ -PMJQPQ͸͠͹Β͘ରԠ͕ଓ͖ͦ͏Ͱ͢ɻ
    w -PMJQPQͰ3JQQMFΛදࣔ͢Δʹ͸ɺ$BSE7JFX΍ 'SBNF-BZPVUΛར༻ͯ͠ϨΠΞ΢τΛߟ͑Δඞཁ͕͋Γ ͦ͏Ͱ͢ɻ
    w 1MBJEͰ͸3FMBUJWF-BZPVUͷTFU'PSFHSPVOEΛόοΫϙʔ τ͍ͯ͠ΔΑ͏Ͱ͢ɻ
18. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·͠ ͨʂ