在 Android 和 iOS 上点击自定义按钮时，实现“突出显示效果”而不是“涟漪效果”

Posted 2023-05-06

【中文标题】在 Android 和 iOS 上点击自定义按钮时，实现“突出显示效果”而不是“涟漪效果”

【英文标题】：Implementing the "highlight effect" instead of the "ripple effect" to a custom button when tapped on Android and iOS

【发布时间】：2021-07-19 05:43:24

【问题描述】：

我的Xamarin.Forms 应用程序中有一个自定义按钮，通过继承ContentView 类创建，并且我希望在此自定义视图时实现类似于ios 平台的“突出显示效果”（如图所示）被点击。

我知道，在 android 平台上，可以在自定义视图中实现 Android 特定的涟漪效果，方法是创建一个特定于自定义视图的自定义渲染器并将RippleDrawable 对象添加到本机控件，如下所示：

class CustomButtonRenderer
            : ViewRenderer
                <CustomButton,
                 Android.Views.View>
    
        public DescriptiveButtonRenderer(Context context)
                : base(context)
         

        protected override void OnElementChanged(ElementChangedEventArgs<CustomButton> e)
        
            LayoutInflater viewInflater;
            Android.Views.View view;
            GradientDrawable drawnBackground;
            StateListDrawable drawableStateList;
            RippleDrawable drawableRippleEffect;

            base.OnElementChanged(e);

            if (this.Control == null)
            
                // Implement the Android specific resource pertaining to
                // the Android specific XML layout of the custom button
                viewInflater = (LayoutInflater)this.Context
                                .GetSystemService(
                                  Context
                                    .LayoutInflaterService);
                view = viewInflater.Inflate
                                     (Resource.Layout.CustomButton,
                                     null,
                                     false);

                // For ripple effect
                drawnBackground = new GradientDrawable
                                   (GradientDrawable.Orientation.LeftRight,
                                    new int[] 
                                    this.Element.BackgroundColor.ToAndroid(),
                                    this.Element.BackgroundColor.ToAndroid()
                                    );
                drawableStateList = new StateListDrawable();
                drawableRippleEffect = new RippleDrawable
                                        (ColorStateList.ValueOf
                                            (Android.Graphics.Color.White),
                                         drawnBackground,
                                         null);
                drawableStateList.AddState
                                   (new int[] 
                                       Android.Resource
                                         .Attribute.StateEnabled ,
                                       drawableRippleEffect);
                view.Background = drawableStateList;

                this.SetNativeControl(view);
            
        
    

很遗憾，无法使用与上述解决方案类似的方法，因为 API 库中没有促进“突出显示效果”的类。

我还知道，在 Android 平台中，可以通过实现类似于下面的自定义渲染来从 Button 中移除波纹效果，该渲染将 null 值设置为原生的 StateListAnimator 属性控制如下：

class ButtonCustomRenderer
            : ButtonRenderer
    
        public ButtonCustomRenderer(Context context) : base(context)  

        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Button> e)
        
            base.OnElementChanged(e);

            // Remove the ripple effect
            if (this.Control != null && e.NewElement != null)
            
                if (Build.VERSION.SdkInt > BuildVersionCodes.Lollipop)
                    this.Control.StateListAnimator = null;
                else
                    this.Control.Elevation = 0;
            
        
    

为了使用上述方法，我查看了与 Android.Animation.StateListAnimator 类型相关的内置动画师，但找不到任何满足要求的动画师。

我最初也是唯一的直觉是，当按下或点击视图时，手动将视图的背景颜色更改为“突出显示的颜色”，但我相信这不是一个优雅的方法解决方案，因为从自定义按钮的背景颜色模拟本机“突出显示颜色”非常费力。

提前致谢。

【参考方案1】：

在 Android 中，您只需要使用选择器动画设置按钮背景。

在你的Resources/drawable中创建一个highlightbutton.xml

<?xml version="1.0" encoding="utf-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
   <!--press-->
   <item android:state_pressed="true" android:state_enabled="true">
     <shape >
       <solid android:color="#c00"/>
     </shape>
   </item>

   <!--normal-->
   <item android:state_pressed="false" android:state_enabled="false">
      <shape >
        <solid android:color="#f00"/>
      </shape>
   </item>
</selector>

然后在您的客户渲染器中：

class ButtonCustomRenderer
          : ButtonRenderer

    public ButtonCustomRenderer(Context context) : base(context)  

    protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Button> e)
    
        base.OnElementChanged(e);

        if (this.Control != null && e.NewElement != null)
        
            Control.SetBackgroundResource(Resource.Drawable.highlightbutton);