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.