【问题标题】:Remove Ripple Effect from CollectionView从 CollectionView 中移除波纹效果
【发布时间】:2021-03-03 20:09:25
【问题描述】:

如何去除 CollectionView 选择项的涟漪效应? 单击项目时自动添加涟漪效果 这是我的代码                  

 protected override void OnAppearing()
    {
        base.OnAppearing();
        var t = new List<Test>
        {
            new Test
            {
                Title="Test"
            },
            ...
        };
        testCollection.ItemsSource = t;
    }


           <CollectionViewx:Name="testCollection" SelectionMode="Single" HeightRequest="75"  >
                 <CollectionView.ItemsLayout>
                   <LinearItemsLayout Orientation="Horizontal"  />
                 </CollectionView.ItemsLayout>
                 <CollectionView.ItemTemplate >
                   <DataTemplate  >
                      <Frame >
                        <Frame  CornerRadius="20" WidthRequest="60"  BorderColor="#f1f1f1" Padding="11,0,11,0"   Margin="9,10,0,0" >
                             <StackLayout Orientation="Horizontal" >
                               <Label Margin="5,2,0,0"   Text="{Binding Title}"/>
                              </StackLayout>
                            </Frame>
                         </Frame>
                     </DataTemplate>

                            </CollectionView.ItemTemplate>
                        </CollectionView>

【问题讨论】:

    标签: xamarin xamarin.forms xamarin.android collectionview ripple-effect


    【解决方案1】:

    您可以使用 Custom Renderer

    来实现它

    在表单中

    创建一个StackLayout的cubclass(或者Grid,Frame,由你决定)

    public class MyStackLayout:StackLayout
    {
    }
    

    在安卓中

    在文件夹Resource->drawablemy_cell_style.xml中创建一个xml文件

    <?xml version="1.0" encoding="utf-8" ?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
      <color android:startColor="@android:color/transparent"/>
    </shape>
    
    
    using Android.Content;
    
    using Xamarin.Forms.Platform.Android;
    using Xamarin.Forms;
    
    using App32;
    using App32.Droid;
    using Android.Support.V4.Content.Res;
    
    [assembly:ExportRenderer(typeof(MyStackLayout),typeof(MyLayoutRenderer))]
    
    namespace App32.Droid
    {
        public class MyLayoutRenderer : ViewRenderer
        {
            public MyLayoutRenderer(Context context) : base(context)
            {
            }
    
            protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.View> e)
            {
                base.OnElementChanged(e);
    
                if(e.NewElement!=null)
                {
                    this.SetBackground(ResourcesCompat.GetDrawable(Resources, Resource.Drawable.my_cell_style, null));
                }
    
            }
    
        }
    }
    

    现在在 xaml 中你可以像这样使用它

     <CollectionView >
    
            <CollectionView.ItemTemplate>
    
                <DataTemplate>
    
                    <local:MyStackLayout>
                        
                        //...put the element here
                        
                    </local:MyStackLayout>
    
    
                </DataTemplate>
    
            </CollectionView.ItemTemplate>
    
        </CollectionView>
    
    

    更新

    您似乎在单元格上添加了一个按钮,对吗?如果是这样,您需要在Android平台设置Button的背景。

    在表单中

    创建自定义按钮

    public class MyButton:Button
    {
    }
    

    在安卓中

    [assembly: ExportRenderer(typeof(MyButton), typeof(MyButtonRenderer))]
    namespace App11.Droid
    {
     public class MyButtonRenderer:ButtonRenderer
     {
       public MyButtonRenderer(Context context):base(context)
        {
    
        }
    
        protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
        {
            base.OnElementChanged(e);
    
            if(Control!=null)
            {
                Control.SetBackground(ResourcesCompat.GetDrawable(Resources, Resource.Drawable.my_cell_style, null));
            }
    
        }
      }
    }
    

    在xml中

    <local:MyButton Text="xxx" ...   />
    

    更新 2:

    Resources -> value ->style.xml

    中添加以下行
    <item name="android:colorControlHighlight">@android:color/transparent</item>
    

    【讨论】:

    • 这段代码只改变背景,不改变涟漪效果
    • 能否分享完整代码或将示例分享到 github,以便我可以在我这边进行测试。
    • 谢谢您,非常感谢您的帮助。有没有办法改变 CollectionViewRenderer 的内部?
    • 你想改变什么?
    • 我想在 CollectionViewRenderer 上更改 android: colorControlHighlight
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-05-01
    • 2011-11-30
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多