Basit düzende dalgalanma efekti nasıl oluşturulur


112

Düzene dokunurken basit bir doğrusal / göreceli düzende nasıl dalgalanma efektine sahip olabilirim?

Bir düzenin arka planını aşağıdaki gibi ayarlamayı denedim:

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

    <item android:drawable="@android:color/white"/>

</ripple>

Ancak düz beyaz bir arka plan görüyorum ve düzene dokunduğumda dalgalanma etkisi görmüyorum. Neyi yanlış yapıyorum?

Düzenle:

Referans için, işte düzen xml dosyam:

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:background="@drawable/test"
        android:clickable="true">
    </RelativeLayout>

2
Dalgayı barındıran görünümün etkinleştirilmesi ve tıklanabilir veya odaklanabilir olması gerekir.
— alanv

Teşekkürler Alanv, cevabım için aşağıya bakın. Temel olarak, düzenimi işaretliyorum Dalgalanma efektinin tıklanabilir olmasını istiyorum, ancak yine de çalışmıyor.
— Zach

Ayrıca, kaldırırsam iyi çalışıyor <item android:drawable="@android:color/white"/> bölümü . Bu nedenle, mizanpajda bir arka plan rengi istersem bunun nasıl çalışacağından emin değilim. Bunu arka plan rengiyle başka bir düzenin üzerine yerleştirmek de işe yaramaz!
— Zach

4
Sizin görünümünüzde dalgalanma hangi renkte çiziliyor, ör. ColorControlHighlight hangi renge dönüşüyor?
— alanv

Yanıtlar:


260

Düzeninizde bu özellikleri ayarlayın (düzeniniz varsayılan beyaz / açık arka plana sahipse):

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

Bu durumda özel bir çekmeceye ihtiyacınız yok.

Ancak, düzeninizin siyah / koyu bir arka planı varsa, bunun gibi kendi dalgalanma çekilebilirinizi oluşturmanız gerekir:

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

Ve sonra bu dalgalanma çekilebilirliğini androidiniz olarak ayarlayın : arka plan özelliği.

Bu tür dalgalanmaların birçok örneğini AOSP'de görebilirsiniz: burada


11
arka plan olarak farklı bir renk vermem gerekirse ne olur? O zaman en iyi yaklaşım ne olmalı?
— Anuj Sharma

1
@AnujSharma için renk kaynağı vermeyi denediniz backgroundmi?
— IgorGanapolsky


31
Başka bir arka plan rengi istiyorsanız, bu rengi arka plan olarak ayarlayabilir ve android olarak "? Attr / selectableItemBackground"
— yazabilirsiniz

2
Vaov! bu harika. Bu cevap olarak işaretlenmelidir +1
— Zia Ur Rahman

59

Bunu, Igor Ganapolsky'nin cevabına ek olarak , birinin farklı renkte bir düzene sahip olmak ve aynı zamanda bir dalgalanma etkisine sahip olmak istemesi durumunda ekliyorum . Şunun gibi çekilebilir öğelerde bir dalgalanma efekti yaratmanız yeterlidir:

ripple.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="@color/rippleColor"
    tools:targetApi="lollipop"> <!-- ripple effect color -->
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <solid android:color="@color/backgroundColor" /> <!-- background color -->
        </shape>
    </item>
</ripple>

sonra onu düzeninizin arka planı veya Igor Ganapolsky'nin cevabında belirttiği gibi herhangi bir düğme olarak verin .

android:clickable="true"
android:background="@drawable/ripple"

37

Herhangi bir widget'ta ( TextView/ Button) aşağıdaki kod parçacığını değiştirmeniz gerekir ve Ripple Efekti uygulayabilirsiniz :

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

Ve gitmekte iyisin.


hmm ön plan? bu harika!
— Badr

Zaten bir android: background = "@ color / colorAccent" setiniz varsa bu yararlıdır
— aero

@aero Herhangi bir arka plan ayarlamasanız bile yararlıdır.
— Pankaj Lilan

1
bu, widget'lara ek olarak düzenler ve özel görünümler üzerinde çalışır.
— anoo_radha

1
@MichaelKern Evet, haklısınız, aynı zamanda herkesin kodundaki gereksinimine dayanıyor.
— Pankaj Lilan

20

Görünüşe göre bu amaçlandığı gibi çalışıyor. Standart Malzeme teması colorControlHighlight değeri #40ffffff. Yani beyaz bir arka planda bu görünmeyecek. Vurgu rengini başka bir şeye değiştirmek işe yarar ve / veya nesnenin arka plan rengini değiştirir.

Hepinize teşekkürler (özellikle beni doğru yönü gösterdiği için Alanv).


Görünümümde android: background = "? attr / selectableItemBackground" kullanıyorsam, nesnenin arka planını nasıl değiştirebilirim?
— codeskraps

1
Nevermind SelectableItemBackground varsayılan durumunun şeffaf olduğunu buldum. Bu yüzden altına istediğim renkle bir manzara koydum.
— codeskraps

1
Kısa not: değiştirebileceğiniz colorControlHighlightGözlerinde farklı styles.xml. Örneğin, özel temanıza ekleyin.
— Nuhman


5

Bu, dalgalanma efektli örnek bir düzene tıklamak için bir örnektir:

 <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/selectableItemBackground"
    android:clickable="true"
    android:focusable="true"
    android:orientation="vertical">

Bu kadar basit ve bu kadar basit ve basit gerçeği Just Works ™.
— Machado

4
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="#cfd8dc"
    tools:targetApi="lollipop">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="#d1c4e9" />
        </shape>
    </item>
</ripple>

Bu ripple.xml dosyasını Drawable klasöründe kullanın , ardından bunu View's

robot: arka plan = "@ çekilebilir / dalgalanma"

android: tıklanabilir = "true"


2

Varsayılan dalgalanma efekti ekleyin. android:background="?selectableItemBackground"

Sevmek:

<LinearLayout
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:background="?selectableItemBackground"
            android:clickable="true"
            >

           ...

</LinearLayout>

0

Bunu düzeninize ekleyin:

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

Not: API belgelerinde bir hata var. Sadece üzerinde çalışacak API> = 23

İçin tüm API seviyelerinde kullanmak Çözüm


2
Bağlantınız aynı sayfayı yeniden yönlendir
— TSR

Ayrıca android: background = "? Attr / selectableItemBackgroundBorderless" kullanma seçeneğiniz olduğunu da unutmayın. Kenarlık daha az olduğu için Dalgalanma efekti ana görünüme yayılacaktır. Bu, birçok durumda daha iyi görünebilir.
— Michael Kern

0

Tüm bu cevapları denedim ve hiçbir şey benim için işe yaramadı, bu yüzden aşağıdaki stili oluşturmayı çözdüm:

<style name="Button.Borderless" parent="Base.Widget.AppCompat.Button.Borderless">
    <item name="android:minHeight">0dp</item>
    <item name="android:minWidth">0dp</item>
    <item name="android:layout_marginLeft">-6dp</item>
    <item name="android:layout_marginRight">-6dp</item>
    <item name="android:paddingTop">0dp</item>
    <item name="android:paddingBottom">0dp</item>
    <item name="android:paddingLeft">6dp</item>
    <item name="android:paddingRight">6dp</item>
</style>

Ve sonra, doğrusal düzenime uyguladım:

<LinearLayout
      android:id="@+id/ll_my_ripple"
      style="@style/Button.Borderless">
</LinearLayout>
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.