对实际边界的涟漪效应

Question

我创建了一个列表视图并为其添加了一个边框。

类似的东西：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:baselineAligned="false"
    android:orientation="horizontal"
    android:background="@drawable/listviewborderbox"
    android:padding="10dp" >

    <LinearLayout
        android:id="@+id/sharedbyyouNameLayout"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight=".70"
        android:gravity="center"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/sharedbyyoutext"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="left"
            android:text="@string/sampletext1"
            android:textColor="@color/blackText"
            android:textSize="14sp" />

        <TextView
            android:id="@+id/sharedbyyouselected"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="left"
            android:text="@string/sampletext2"
            android:textColor="@color/blackText"
            android:textSize="16sp"
            tools:ignore="RtlHardcoded" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/sharedbyyouLayoutforarrow"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight=".10"
        android:gravity="center"
        android:orientation="vertical" >

        <ImageView
            android:id="@+id/arrow"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_next"
            tools:ignore="RtlSymmetry,RtlHardcoded,ContentDescription" />
    </LinearLayout>
</LinearLayout> 

我在Drawable-v21中有这样的涟漪效应值：

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@android:color/white"> <item android:drawable="@color/footercolor"/> </ripple>

drawable文件夹中的边框形状xml是：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <solid android:color="@color/colorforbodybox" />
    <corners android:radius="10dip"/>
    <stroke android:width="2dip" android:color="@color/colorforborder" />
</shape>

涟漪效应有效但涟漪效果显示在我绘制的边界线之外。请查看下面的图片：

如何使涟漪效果不越过列表视图中的边界？

Answer 1

要实现圆角涟漪效果，请将涟漪 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="@android:color/white"
    tools:targetApi="lollipop">

    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <corners android:radius="10dp"/>
            <solid android:color="@color/footercolor"/>
        </shape>
    </item>

</ripple>

Answer 2

我遇到的问题是我的视图的角半径不是固定值，因此使用建议的 xml 对我不起作用。

我需要一种无论使用何种形状都能每次都能适应涟漪效应的东西...

我使用了一个简单的视图扩展：

fun View.addRippleEffect(rippleColorId: Int = R.color.rippleColor) { // Here you can pass the color you want for the ripple effect and assign a "default" value
    val rippleColor = ColorStateList.valueOf(ContextCompat.getColor(App.context(), rippleColorId))
    this.background = RippleDrawable(
        rippleColor, // This is the color of the effect and needs to be a ColorStateList
        this.background, // ( = content ) With this you use your view's background as the content of the ripple effect 
        this.background) // ( = mask ) With this the ripple will take the shape of the background and not "spill over". (Could be null IF you did set the previous variable "content = this.background")
}

或者，如果您想将两层分开：

fun View.addRippleEffect(rippleColorId: Int = R.color.rippleColor) { 
    val rippleColor = ColorStateList.valueOf(ContextCompat.getColor(App.context(), rippleColorId))
    this.foreground = RippleDrawable( //Using the foreground allows you to give the view whatever background you need
        rippleColor, 
        null, //Whatever shape you put here will cover everything you've got underneath so you probably want to keep it "null"
        this.background)
}

基本上你给一个视图一个背景（在你的情况下带有边框的圆角矩形）然后你可以简单地在你的活动/片段中调用扩展：

whateverView.addRippleEffect()
//or
whateverView.addRippleEffect(R.color.red)

见：https://developer.android.com/reference/android/graphics/drawable/RippleDrawable

Answer 3

1。创建包含背景形状的波纹可绘制对象

<Button
    style="?borderlessButtonStyle"                          //remove the default shadow
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/background_button"        //here
    android:text="Sign up"
    android:textAllCaps="false"
    android:textColor="@android:color/white" />

2。将Drawable应用于视图并删除阴影

from keras import models
from keras import layers
import tensorflow as tf


def build_model():
    model = models.Sequential()
    model.add(layers.Dense(64, activation='relu', input_shape=(train_data.shape[1],), kernel_initializer='normal', bias_initializer='zeros'))
    model.add(layers.Dropout(0.5))
    model.add(layers.Dense(64, activation='relu'))
    model.add(layers.Dropout(0.5))
    model.add(layers.Dense(64, activation='relu'))
    model.add(layers.Dropout(0.5))
    model.add(layers.Dense(2, activation='sigmoid'))
    model.compile(loss='categorical_crossentropy',
                 optimizer='Adam',
                 metrics=['accuracy'])
    return model
k = 3
num_val_samples = len(train_data) // k
num_epochs = 100
all_scores = []
for i in range(k):
    print('processing fold #', i)
    #検証データの準備
    val_data = train_data[i * num_val_samples: (i+1) * num_val_samples]
    val_labels = train_labels[i * num_val_samples: (i+1) * num_val_samples]
    #訓練データの準備
    partial_train_data = np.concatenate([train_data[:i * num_val_samples], train_data[(i+1) * num_val_samples:]], axis=0)
    partial_train_labels = np.concatenate([train_labels[:i * num_val_samples], train_labels[(i+1) * num_val_samples:]], axis=0)

model = build_model()
history = model.fit(partial_train_data,
                    partial_train_labels,
                    epochs=num_epochs,
                    batch_size=1,
                   validation_data=(val_data,val_labels))