Hinzufügen eines Welleneffekts für die Ansicht in onClick

Lesezeit: 7 Minuten

Benutzeravatar von Rodriquez
Rodriquez

Hallo, ich versuche, einen Ripple-Effekt für die Click-Methode für View hinzuzufügen, aber dieser funktioniert nicht. Alle meine Artikel haben eine ID, aber ich weiß nicht, wie ich sie nennen soll

Hier ist ein Code.

 @Override
public void onClick(View v) {
    int[] attrs = new int[]{R.attr.selectableItemBackground};
    TypedArray typedArray = getActivity().obtainStyledAttributes(attrs);
    int backgroundResource = typedArray.getResourceId(0, 0);
    v.setBackgroundResource(backgroundResource);

    switch (v.getId()) {
        case ACTION_PLAY_ID:
            Log.d(MainActivity.TAG, getString(R.string.detail_action_play));
            v.setBackgroundResource(backgroundResource);
            Intent intent = new Intent(getActivity(), PlayerActivity.class);
            intent.putExtra(Video.VIDEO_TAG, videoModel);
            startActivity(intent);

            break;
        case ACTION_BOOKMARK_ID:
            if (bookmarked) {
                v.setBackgroundResource(backgroundResource);
                deleteFromBookmarks();
                ((ImageView) v).setImageDrawable(res.getDrawable(R.drawable.star_outline));
            } else {
                v.setBackgroundResource(backgroundResource);
                addToBookmarks();
                ((ImageView) v).setImageDrawable(res.getDrawable(R.drawable.star));
            }
            break;
        case ACTION_REMINDER_ID:
            if (!isReminderSet) {
                createReminderDialog((ImageView) v);
            } else {
                cancelReminder(liveTvProgram.getProgramId());
                ((ImageView) v).setImageDrawable(res.getDrawable(R.drawable.alarm));
            }
            break;
    }
}

Für Lubomir

Ich habe so etwas, funktioniert aber auch nicht:

 @Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle
        savedInstanceState) {
    View view = inflater.inflate(R.layout.item_detail, container, false);
    ButterKnife.bind(this, view);

    View myView = view.findViewById(R.id.actions_container);
    int[] attrs = new int[]{R.attr.selectableItemBackground};
    TypedArray typedArray = getActivity().obtainStyledAttributes(attrs);
    int backgroundResource = typedArray.getResourceId(0, 0);
    myView.setBackgroundResource(backgroundResource);

    loadImage();
    init();

    return view;
}

ImageViews(actionbuttons) erstellt in Java für LinearLayout actions_container

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

    <ImageView
        android:id="@+id/header_image"
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:layout_alignParentLeft="true"
        android:layout_marginLeft="10dp"
        android:layout_marginStart="10dp"
        android:layout_marginTop="@dimen/detail_image_1_state"
        android:elevation="8dp"/>

    <RelativeLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="@dimen/detail_bottom_margin"
        android:layout_marginTop="@dimen/detail_top_margin"
        android:background="@color/primary_color">

        <LinearLayout
            android:id="@+id/actions_container"
            android:layout_width="match_parent"
            android:layout_height="@dimen/detail_actions_height"
            android:layout_alignParentTop="true"
            android:background="@drawable/ripple_effect_image"
            android:elevation="2dp"
            android:orientation="horizontal"
            android:paddingLeft="300dp"
            android:paddingStart="300dp"/>

        <LinearLayout
            android:id="@+id/content_container"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/actions_container"
            android:orientation="vertical"
            android:paddingLeft="300dp"
            android:paddingStart="300dp">

            <TextView
                android:id="@+id/title"
                style="@style/TextTitleStyle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>

            <TextView
                android:id="@+id/subtitle"
                style="@style/TextSubtitleStyle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:visibility="gone"/>

            <TextView
                android:id="@+id/duration"
                style="@style/TextSubtitleStyle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>

            <TextView
                android:id="@+id/season"
                style="@style/TextDescriptionStyle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:visibility="gone"/>

            <TextView
                android:id="@+id/episode"
                style="@style/TextDescriptionStyle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:visibility="gone"/>

            <TextView
                android:id="@+id/description"
                style="@style/TextDescriptionStyle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:maxLines="7"/>

        </LinearLayout>

        <FrameLayout
            android:id="@+id/recommended_frame"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:layout_alignParentBottom="true">

            <android.support.v17.leanback.widget.HorizontalGridView
                android:id="@+id/recommendation"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:clipChildren="false"
                android:clipToPadding="false"
                android:paddingLeft="10dp"
                android:paddingRight="10dp"/>
        </FrameLayout>

        <TextView
            android:id="@+id/recommended_text"
            style="@style/TextHeaderStyle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_above="@id/recommended_frame"
            android:text="@string/related_programs"/>

    </RelativeLayout>


</RelativeLayout>

Auch meine XML-Ripple-Effekt-Datei ist wie folgt:

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/dark_primary_color">
    <item>
        <color android:color="@color/dark_primary_color" />
    </item>
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="?android:colorAccent" />
        </shape>
    </item>
</ripple>

  • github.com/traex/RippleEffect Verwenden Sie diese Bibliothek

    – DKV

    28. Juli 2016 um 6:32 Uhr

  • hast du das gecheckt

    – DKV

    28. Juli 2016 um 6:38 Uhr

Benutzeravatar von Lubomir Babev
Lubomir Babev

Anklickbare Ansichten

Im Allgemeinen funktioniert der Ripple-Effekt für normale Schaltflächen standardmäßig in API 21 und für andere berührbare Ansichten kann er durch Angabe erreicht werden

android:background="?android:attr/selectableItemBackground"

In Code:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.your_layout);

    View myView = findViewById(R.id.myView);
    int[] attrs = new int[]{R.attr.selectableItemBackground};
    TypedArray typedArray = getActivity().obtainStyledAttributes(attrs);
    int backgroundResource = typedArray.getResourceId(0, 0);
    myView.setBackgroundResource(backgroundResource);
}

  • Ja, ich weiß über ?android:attr/selectableItemBackground Bescheid, aber das Problem ist, dass meine Elemente im Java-Code generisch sind und wie addActon hinzugefügt werden

    – Rodriquez

    28. Juli 2016 um 6:35 Uhr

  • Wie rufe ich View item auf, um mit Java-Code wirksam zu werden?

    – Rodriquez

    28. Juli 2016 um 6:36 Uhr

  • Das Problem ist, dass ich es für diesen Hintergrund nicht ändern kann, weil meine Hintergrundfarben völlig falsch sind.

    – Rodriquez

    28. Juli 2016 um 7:31 Uhr

  • musste ich hinzufügen android:clickable="true" um einen Effekt zu sehen android:background="?android:attr/selectableItemBackground"

    – Nicolai Weitkemper

    21. September 2018 um 11:21 Uhr

  • Sie sollten auch hinzufügen: android:clickable="true" android:focusable="true"

    – FireZenk

    15. November 2018 um 12:00 Uhr


Wie in Lubomir Babevs Antwort angegeben, fügt hinzu android:background="?android:attr/selectableItemBackground" macht den Trick.

Wenn Ihre Ansicht jedoch bereits einen Hintergrund hat, können Sie denselben auf der verwenden android:foreground Attribut stattdessen:

android:background="@color/anyColor"
android:foreground="?android:attr/selectableItemBackground"

android:foreground wird jedoch nur von API 23+ unterstützt.

Wellenhintergrund erstellen

view_background.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/blue" >
    <item android:drawable="@drawable/view_normal">
    </item>
</ripple>

view_noraml.xml //So sieht Ihre Ansicht normal aus

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

    <corners
        android:radius="@dimen/button_corner"/>
    <solid
        android:color="@android:color/transparent"/>
    <stroke
        android:width="0.5dp"
        android:color="@color/white"/>

</shape>

Stellen Sie nun den view_background auf Ihre Ansicht ein

Beispiel

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="120dp"
    android:foreground="@drawable/view_background"
    android:clickable="true"
    android:focusable="true"
    >
    <ImageView
        android:id="@+id/grid_item_imageView"
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:layout_gravity="center"
        android:scaleType="centerInside"
        />
</FrameLayout>

Ich weiß, dass dies ein ziemlich alter Thread ist, aber für den Fall, dass die obigen Antworten nicht funktioniert haben, würde ich Ihnen empfehlen, den folgenden Code auszuprobieren, da er für mich funktioniert hat:

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="?android:attr/selectableItemBackground"
    android:clickable="true"
    android:focusable="true"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

Das Wichtigste, was zu beachten ist, sind die anklickbaren und fokussierbaren.

Die Lösung dafür ist einfach einfach in meiner Seite.

Hier ist der Welleneffekt:

    <?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#BFB3F7">
    <item android:id="@android:id/mask">
        <shape android:shape="oval">
            <solid android:color="@color/button_background_color" />
        </shape>
    </item>
</ripple>

und als nächstes muss ich in der Klasse nach der Funktion setBackground suchen

Dann muss ich ihm ein Drawable Item deklarieren. etwas wie das:

 @Override
public void onFocusChange(View v, boolean hasFocus) {

    if (hasFocus) {
        v.setBackground(res.getDrawable(R.drawable.ripple_effect_for_buttons));
        scrollContainer(false);
    } else {
        v.setBackground(null);
        if (recommendation.getFocusedChild() != null) {
            scrollContainer(true);
        }

    }
}

Und YUPII funktioniert

  • Sie können verwenden android:color="?android:attr/colorControlHighlight als Wellenfarbe.

    – Wadim Kotow

    3. November 2020 um 14:48 Uhr

Benutzeravatar von cheng
cheng

Du kannst hinzufügen:

 <ImageView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:clickable="true"
  android:background="@drawable/ripple"/>   

  • Sie können verwenden android:color="?android:attr/colorControlHighlight als Wellenfarbe.

    – Wadim Kotow

    3. November 2020 um 14:48 Uhr

Benutzeravatar von Dmitry Mersiyanov
Dmitri Mersiyanov

In Kotlin könnte man das problemlos mit Erweiterungsfunktionen bewerkstelligen.

fun TypedArray.use(block: TypedArray.() -> Unit) {
    try {
        block()
    } finally {
        this.recycle()
    }
}
    
fun Context.getStyledAttributes(@StyleableRes attrs: IntArray, block: TypedArray.() -> Unit) =
        this.obtainStyledAttributes(attrs).use(block)

fun View.setClickableRipple() {
    val attrs = intArrayOf(R.attr.selectableItemBackground)
    context.getStyledAttributes(attrs) {
        val backgroundResource = getResourceId(0, 0)
        setBackgroundResource(backgroundResource)
    }
}

1431870cookie-checkHinzufügen eines Welleneffekts für die Ansicht in onClick

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy