Nativescript-Ripple

此插件旨在在 Android 和 iOS 上实现原生（或接近原生）的水波纹效果。Android 版本使用 RippleDrawable，同时保留之前的背景以及 CSS 样式。

安装

tns plugin add @edusperoni/nativescript-ripple

使用方法

此插件仅在 Android Lollipop 5.0 或更高版本以及任何版本的 iOS 上工作。

XML

确保将触摸监听器绑定到子元素，否则在 Android 上将不会工作。

<Page class="page"
    navigatingTo="onNavigatingTo" 
    xmlns="http://schemas.nativescript.org/tns.xsd"
    xmlns:RL="@edusperoni/nativescript-ripple">
    <ActionBar class="action-bar"><Label class="action-bar-title" text="Home"></Label></ActionBar>
    <ScrollView>
        <StackLayout>
            <RL:Ripple rippleColor="#d50000">
                <Label text="Red Ripples!!!" class="message" textWrap="true" tap="dummy" />
            </RL:Ripple>

            <RL:Ripple rippleColor="#fff000">
                <Image src="~/home/images/batman.png" margin="10" stretch="aspectFit" tap="dummy"/>
            </RL:Ripple>

            <RL:Ripple>
                <Label text="Default Ripple" class="message" textWrap="true" tap="dummy"/>
            </RL:Ripple>

            <RL:Ripple rippleColor="#fff">
                <GridLayout backgroundColor="#FF4081" borderRadius="30" height="60" width="60" tap="dummy">
                    <Label text="B" fontSize="30" color="#fff" verticalAlignment="center" horizontalAlignment="center" textWrap="true"/>
                </GridLayout>
            </RL:Ripple>

            <RL:Ripple rippleColor="#c8c8c8">
                <Label class="label-button" text="Lighter Ripple" textWrap="true" tap="dummy"/>
            </RL:Ripple>

            <RL:Ripple rippleColor="#f5f5f5">
                <Label text="Possibilities" color="#fff" padding="10" textWrap="true" tap="tapEvent" class="dark-button"/>
            </RL:Ripple>

        </StackLayout>
    </ScrollView>
</Page>

水波纹选项

rippleColor 设置水波纹颜色。示例："#ffffff" | "rgba(255,255,255,0.5)"。

rippleColorAlpha 设置水波纹颜色的透明度（乘法）。默认：0.25。注意：这是对原生类 RippleDrawable 给出的 0.5 透明度的乘法。在 iOS 中此值被硬编码以使两个平台的行为一致。

rippleLayer 设置水波纹应用到的层（仅限 Android）。允许的值：foreground（默认 API>=23）| background。将此设置为 background 将使水波纹仅在视图的背景上显示（例如，不会显示在图像之前）。

rippleEnabled 可以设置为 "false"（《rippleEnabled="false"》）以禁用水波纹。这也会禁用具有原生水波纹效果的视图（如 Button）的水波纹效果。

Angular

导入 NgRippleModule

如果您正在使用其他更改背景的模块（如 https://github.com/Especializa/nativescript-ng-shadow），请确保最后导入它，否则水波纹背景将被覆盖。

import { NgRippleModule } from '@edusperoni/nativescript-ripple/angular';

@NgModule({
    imports: [
        NgRippleModule,
        // ...
    ],
    // ...
})
export class MyModule { }

在模板中使用

确保绑定触摸监听器，否则在 Android 上将不会工作。

<Label ripple text="我的标签文本" (tap)="tapfn()"></Label>

<StackLayout ripple rippleColor="#00ff00" style="padding: 30; border-radius: 10;" (tap)="tapfn()">
<Label text="this is inside the layout!"></Label>
</StackLayout>

实现细节

在 Android 上，如果视图没有背景，我们将分配一个透明的背景。否则，关闭屏幕然后再次打开会使背景与遮罩颜色（黑色）相同。

水波纹选项

rippleColor 设置水波纹颜色。示例："#ffffff" | "rgba(255,255,255,0.5)"。

rippleColorAlpha 设置水波纹颜色的透明度（乘法）。默认：0.25。注意：这是对原生类 RippleDrawable 给出的 0.5 透明度的乘法。在 iOS 中此值被硬编码以使两个平台的行为一致。

rippleLayer 设置水波纹应用到的层（仅限 Android）。允许的值：foreground（默认 API>=23）| background。将此设置为 background 将使水波纹仅在视图的背景上显示（例如，不会显示在图像之前）。

将 ripple 设置为 "off"（《ripple="off"》）可以禁用水波纹。这也会禁用具有原生水波纹效果的视图（如 Button）的水波纹效果。

已知问题

Android 上没有水波纹

如果您的水波纹在 Android 上不起作用，请尝试以下操作

1. 验证您要应用水波纹的视图有 tap 事件
2. 如果视图是类似文本的视图（按钮、标签等），当 textWrap 不为 true 且 textAlignment 为 center 或 right 时，存在一个错误，阻止任何 foreground 被应用到它。有多个修复方法（只需一个即可）
   1. 将视图包裹在另一个布局中（如 GridLayout）
   2. 将 rippleLayer 更改为 background
   3. 使用 textWrap="true"
   4. 禁用视图的 HorizontallyScrolling（《yourLabel.android.setHorizontallyScrolling(false);》）。警告：每次更改 textAlignment 时都会将其设置为 true

许可证

Apache 许可证版本 2.0，2004 年 1 月