Android लॉलीपॉप CardView पर लहर प्रभाव


190

एंड्रॉइड डेवलपर्स पेज पर यहां बताए अनुसार एक्टिविटी एक्सएमएल फाइल में एंड्रॉइड: बैकग्राउंड एट्रैक्शन में टच करने पर मैं रिप्पल इफेक्ट दिखाने के लिए कार्डव्यू प्राप्त करने की कोशिश कर रहा हूं , लेकिन यह काम नहीं कर रहा है। कोई एनीमेशन नहीं है, लेकिन ऑनक्लिक में विधि कहा जाता है। मैंने भी यहाँ सुझाव के रूप में एक रिपल.एक्सएमएल फ़ाइल बनाने की कोशिश की है , लेकिन वही परिणाम।

यह गतिविधि की XML फ़ाइल में प्रकट होने वाला CardView:

<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="155dp"
    android:layout_height="230dp"
    android:elevation="4dp"
    android:translationZ="5dp"
    android:clickable="true"
    android:focusable="true"
    android:focusableInTouchMode="true"
    android:onClick="showNotices"
    android:background="?android:attr/selectableItemBackground"
    android:id="@+id/notices_card"
    card_view:cardCornerRadius="2dp">

</android.support.v7.widget.CardView> 

मैं Android विकास के लिए अपेक्षाकृत नया हूं, इसलिए मैंने कुछ स्पष्ट गलतियां की हो सकती हैं।
अग्रिम में धन्यवाद।

जवाबों:


592

आपको निम्नलिखित जोड़ना चाहिए CardView:

android:foreground="?android:attr/selectableItemBackground"
android:clickable="true"

8
रिपल इफेक्ट के साथ लॉलीपॉप पर काम करता है लेकिन पुराने प्लेटफॉर्म पर चलने पर केवल ठोस रंग देता है। मेरे लिए काफी अच्छा है :)
मच

16
थोड़ा अवलोकन: मैंने नोट किया कि क्लिक करने योग्य विशेषता आवश्यक नहीं है और यहां तक ​​कि कुछ चीजें भी टूट सकती हैं! मेरे पास क्लिक करने योग्य CardView से भरा हुआ GridView था और श्रोता ठीक से काम नहीं कर रहा था। मैंने एक्सएमएल से क्लिक करने योग्य टैग को हटा दिया और सब कुछ अब निर्दोष रूप से काम करता है
जोआक्विन इचुक

2
क्लिक करने के बिना
@joaquin

2
?android:attr/selectableItemBackgroundएपीआई स्तर 11 की आवश्यकता है
प्रतीक बुटानी

9
बिना काम किए android:clickable="true"
सीन

30

अपने कार्ड व्यू पर रिपल इफेक्ट देने के लिए इन दोनों लाइन कोड को अपने xml व्यू में जोड़ें।

android:clickable="true"
android:foreground="?android:attr/selectableItemBackground"

बहुत बढ़िया! foregroundएक आकर्षण की तरह कस्टम पृष्ठभूमि विचारों के साथ काम करता है! अच्छा!
सूद 24००

24

मैंने कार्डव्यू पर रिपल इफ़ेक्ट पाने में कामयाब रहे:

<android.support.v7.widget.CardView 
    xmlns:card_view="http://schemas.android.com/apk/res-auto" 
    android:clickable="true" 
    android:foreground="@drawable/custom_bg"/>

और कस्टम_बग के लिए जिसे आप उपरोक्त कोड में देख सकते हैं, आपको लॉलीपॉप (ड्रॉबल-वी 21 पैकेज में) और प्री-लॉलीपॉप (ड्रॉबल पैकेज में) दोनों के लिए एक एक्सएमएल फाइल को परिभाषित करना होगा। custom_bg के लिए drawable-v21 पैकेज में कोड है:

<ripple 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?android:attr/colorControlHighlight">
<item
    android:id="@android:id/mask"
    android:drawable="@android:color/white"/>
</ripple>

कस्टम पैकेज में custom_bg के लिए, कोड है:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_pressed="true">
    <shape>
        <solid android:color="@color/colorHighlight"></solid>
    </shape>
</item>
<item>
    <shape>
        <solid android:color="@color/navigation_drawer_background"></solid>
    </shape>
</item>
</selector>

इसलिए प्री-लॉलीपॉप डिवाइसों पर आपके पास एक ठोस क्लिक प्रभाव होगा और लॉलीपॉप डिवाइसों पर आप कार्डव्यू पर एक लहर प्रभाव डालेंगे।


1
नमस्ते, मुझे कार्डव्यू के अग्रभूमि पर चयनकर्ता (या लहर) लगाने से पता चलता है, यह बच्चों को कार्ड व्यू में ही ब्लॉक कर देगा - stackoverflow.com/questions/33763403/… क्या मुझे पता है कि जैसा मैंने किया था वैसा ही आपका सामना होगा? या, मुझे कुछ भी याद नहीं है? धन्यवाद।
चोक यान चेंग

@CheokYanCheng: मैं आपके ऐसे किसी भी मुद्दे का सामना नहीं कर रहा हूं, लेकिन मैं व्यक्तिगत अनुभव से कहूंगा कि कार्ड-व्यू में प्री-लॉलीपॉप के लिए कुछ कीड़े हैं। कार्डव्यू का उपयोग करने से बचें: प्री-लॉलीपॉप में उन्नयन की संपत्ति। उपरोक्त मेरे और अन्य उत्थान के लिए ठीक काम करता है।
राहुल आहूजा

क्या मुझे पता है, आपके colorHighlight & navigation_drawer_background का मूल्य क्या है। यदि आपने पारदर्शिता के बिना अपने स्वयं के परिभाषित रंग का उपयोग किया है, तो क्या आप अभी भी अपने कार्ड के बच्चों को देख सकते हैं?
चोक यान चेंग

@CheokYanCheng: मान इस प्रकार हैं, <color name = "navigation_drawer_background"> ​​# FFFFFF </ color> <color name = "colorHighlight"> # FF8A65 </ color
राहुल आहूजा

मैं अपने मामले के लिए काम नहीं करता। मैं आपके चयनकर्ता को अग्रभूमि के रूप में उपयोग करता हूं। जैसा कि अपेक्षित था, ठोस सफेद रंग (नेविगेशन_ट्रैकर_बैकग्राउंड), जो कार्ड व्यू फोरग्राउंड के रूप में उपयोग किया जाता है, सभी बच्चों की दृश्यता को अवरुद्ध कर देगा - i.imgur.com/CleYh5B.png यह है कि यह चयन को अग्रभूमि के रूप में लागू किए बिना कैसा दिखता है - i.imgur। com / ZXk5Aoq.png
यान चेंग

14

रिप्पल प्रभाव को अप्पकॉम सपोर्ट लाइब्रेरी में छोड़ा गया था जो आप उपयोग कर रहे हैं। अगर आप रिपल को एंड्रॉइड L वर्जन का उपयोग करते हुए देखना चाहते हैं और इसे Android L डिवाइस पर टेस्ट करना चाहते हैं। प्रति AppCompat v7 साइट:

"प्री-लॉलीपॉप पर कोई रिपल क्यों नहीं हैं? बहुत से जो RippleDrawable को आसानी से चला सकते हैं, वह Android 5.0 का नया RenderThread है। Android के पिछले संस्करणों पर प्रदर्शन के लिए ऑप्टिमाइज़ करने के लिए, हमने Ripplewrawable को अभी के लिए छोड़ दिया है।"

अधिक जानकारी के लिए इस लिंक को यहाँ देखें


वह यही होगा। धन्यवाद!
अक्रेटिक क्रिटिक

39
लेकिन आप एंड्रॉइड लॉलीपॉप के लिए कार्ड व्यू पर रिपल इफेक्ट कैसे डालेंगे?
Android डेवलपर

इसलिए मुझे appcompat का उपयोग करके या Android कोर से कक्षाओं का उपयोग करते हुए, लेकिन एपीआई 21 में खुद को सीमित करते हुए, पिछड़े संगतता के बीच निर्णय लेना है?
उर्स रिपुके

आप 21 के लिए 2 APK का एक और 21 के लिए दूसरा बना सकते हैं। या 21+ के बाद से कोड को विभाजित करें supportActionbar आदि का उपयोग नहीं किया जाएगा। बहुत परेशानी की तरह लग सकता है, लेकिन यह है कि मेरा विश्वास है।
मैथिज्स सीजर्स

1
यही कारण है कि "शुद्ध" एंड्रॉइड एल एप्लिकेशन लिखना इस समय व्यवहार्य नहीं है। जुलाई 2015 तक आप 12% Android उपयोगकर्ता आधार को लक्षित करेंगे।
ग्लेन बेच

10

यदि आप जिस ऐप पर minSdkVersionकाम कर रहे हैं, वह स्तर 9 है, तो आप इसका उपयोग कर सकते हैं:

android:foreground="?selectableItemBackground"
android:clickable="true"

इसके बजाय, स्तर 11 से शुरू, आप उपयोग करते हैं:

android:foreground="?android:attr/selectableItemBackground"
android:clickable="true"

प्रलेखन से:

क्लिक करने योग्य - परिभाषित करता है कि क्या यह दृश्य घटनाओं पर क्लिक करने के लिए प्रतिक्रिया करता है। बूलियन मान होना चाहिए, या तो "सच" या "गलत"।

अग्रभूमि - सामग्री पर आकर्षित करने के लिए drawable को परिभाषित करता है। इसे ओवरले के रूप में इस्तेमाल किया जा सकता है। अग्रगामी पठनीयता सामग्री की गद्दी में भाग लेती है यदि गुरुत्वाकर्षण को भरने के लिए सेट किया गया है।


Android का उपयोग करना: अग्रभूमि = "! Android: attr / selectableItemBackground" AndroidX संगतता के लिए काम किया, धन्यवाद!
डायनाकारेंम्स

6

मेरे लिए, जोड़ने foregroundके लिए CardViewकिया था नहीं काम (कारण अज्ञात: /)

इसे उसी तरह से जोड़ना है जैसे कि बच्चे के लेआउट ने किया था।

कोड:

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:focusable="true"
    android:clickable="true"
    card_view:cardCornerRadius="@dimen/card_corner_radius"
    card_view:cardUseCompatPadding="true">

    <LinearLayout
        android:id="@+id/card_item"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:foreground="?android:attr/selectableItemBackground"
        android:padding="@dimen/card_padding">

    </LinearLayout>
</android.support.v7.widget.CardView>

2
ऐसा इसलिए है क्योंकि बच्चा घटना को स्वीकार करता है, यदि आप कार्डव्यू (20dp जैसी कोई चीज) में पैडिंग को जोड़ने की कोशिश करते हैं, और आप उस हिस्से पर क्लिक करते हैं जहां पैडिंग होगी, तो आप बच्चे के बिना भी रिपल इफेक्ट देखेंगे। अग्रभूमि विशेषता सेट
Cruces

1
नए सामग्री घटकों का उपयोग करते हुए इसने मेरे लिए भी काम किया: com.google.android.material.card.MaterialCardView। मेरे पास ऊंचाई को समायोजित करने के लिए कार्ड व्यू के लिए एक एलिवेशन स्टेटलिस्टअनिमेटर था और क्लिक करने योग्य विशेषता के बिना अग्रभूमि में चयन योग्य आइटम पृष्ठभूमि के साथ आंतरिक बाधा लेआउट पर लागू तरंग।
पैटी पी

मुझे यह अब याद नहीं है, लेकिन बच्चे के विचारों को क्लिक करने की घटना पर प्रतिक्रिया नहीं करने का एक तरीका है
कोई व्यक्ति कहीं

3

बटन, रैखिक लेआउट, या कार्ड व्यू जैसे किसी भी दृश्य के लिए इन दो कोड को एक आकर्षण की तरह जोड़ें। बस इन दो पंक्तियों को डालें और जादू देखें ...

android:foreground="?android:attr/selectableItemBackground"
android:clickable="true"

2

यदि कोई मूल लेआउट है जैसे कि RelativeLayout या LinearLayout, जिसमें CardView में एडॉप्टर आइटम के सभी घटक शामिल हैं, तो आपको उस रूट लेआउट में पृष्ठभूमि विशेषता सेट करना होगा। पसंद:

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="122dp"
android:layout_marginBottom="6dp"
android:layout_marginLeft="6dp"
android:layout_marginRight="6dp"
card_view:cardCornerRadius="4dp">

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/touch_bg"/>
</android.support.v7.widget.CardView>

2

Android Cardviewनियंत्रण के लिए तरंग घटना :

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:foreground="?android:attr/selectableItemBackground"
    android:clickable="true"
    android:layout_marginBottom="4dp"
    android:layout_marginTop="4dp" />

1

मैं AppCompat से खुश नहीं था, इसलिए मैंने अपना CardView और backported रिपल लिखा। यहां यह जिंजरब्रेड के साथ गैलेक्सी एस पर चल रहा है, इसलिए यह निश्चित रूप से संभव है।

गैलेक्सी एस पर रिपल का डेमो

अधिक जानकारी के लिए स्रोत कोड की जाँच करें ।


लिंक टूट गया है
temirbek

1

अपने xml में निम्न जोड़ें:

android:clickable="true"
android:focusable="true"
android:background="?android:attr/selectableItemBackground"

और अपने एडॉप्टर में जोड़ें (यदि यह आपका मामला है)

    override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
            val attrs = intArrayOf(R.attr.selectableItemBackground)
            val typedArray = holder.itemView.context.obtainStyledAttributes(attrs)
            val selectableItemBackground = typedArray.getResourceId(0, 0)
            typedArray.recycle()

            holder.itemView.isClickable = true
            holder.itemView.isFocusable = true
            holder.itemView.foreground = holder.itemView.context.getDrawable(selectableItemBackground)
        }
    }

0

उन लोगों के लिए, जो प्रोग्राम के रूप में बनाए गए कार्ड व्यू (या मेरे मामले में कस्टम दृश्य जो कार्ड व्यू का विस्तार करता है) पर काम नहीं कर रहे हैं, के समाधान के लिए एक RecyclerView में दिखाया जा रहा है, निम्नलिखित ने मेरे लिए काम किया। मूल रूप से XML लेआउट फ़ाइल में घोषित अन्य उत्तरों में वर्णित XML विशेषताओं को मूल रूप से घोषित करते हुए कोई प्रोग्राम कार्डव्यू के लिए काम नहीं करता है, या कोई कस्टम लेआउट से बनाया गया है (भले ही रूट दृश्य कार्ड व्यू या मर्ज तत्व का उपयोग किया जाता है), इसलिए उन्हें प्रोग्रामेटिक रूप से सेट करना होगा:

private class MadeUpCardViewHolder extends RecyclerView.ViewHolder {
    private MadeUpCardView cardView;

    public MadeUpCardViewHolder(View v){
        super(v);

        this.cardView = (MadeUpCardView)v;

        // Declaring in XML Layout doesn't seem to work in RecyclerViews
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
            int[] attrs = new int[]{R.attr.selectableItemBackground};
            TypedArray typedArray = context.obtainStyledAttributes(attrs);
            int selectableItemBackground = typedArray.getResourceId(0, 0);
            typedArray.recycle();

            this.cardView.setForeground(context.getDrawable(selectableItemBackground));
            this.cardView.setClickable(true);
        }
    }
}

भाग के लिए इस जवाब के लिए कहां MadeupCardView extends CardViewकुदोस ।TypedArray


0
  android:foreground="?android:attr/selectableItemBackgroundBorderless"
   android:clickable="true"
   android:focusable="true"

केवल कार्यशील एप 21 और इसका उपयोग इस सूची पंक्ति कार्ड दृश्य का उपयोग न करें

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.