Android CardView 的自定义渲染器不显示表单组件内容答案

【问题标题】：Custom renderer for Android CardView not showing Forms component contentAndroid CardView 的自定义渲染器不显示表单组件内容
【发布时间】：2016-10-06 08:06:52
【问题描述】：

我创建了一个自定义组件，它扩展了 ContentView 和渲染器，在 Android 上渲染为 CardView。

我面临的问题是表单内容呈现在 CardView 下方。在 KitKat 上不会发生这种情况，但我认为 CardView 的实现与 Lollipop 或更新版本的不同。

将 CardView 的背景颜色设置为透明（0x00000000）会显示 CardView 下方的内容。

表单组件：

using Xamarin.Forms;

namespace CodeFest
{
    public class NativeClientProfile : ContentView
    {
        public NativeClientProfile()
        {
            var grid = new Grid
            {
                RowDefinitions = new RowDefinitionCollection {new RowDefinition()},
                ColumnDefinitions = new ColumnDefinitionCollection {new ColumnDefinition(), new ColumnDefinition()}
            };
            grid.Children.Add(new Label {Text = "FSP No"}, 0, 0);
            grid.Children.Add(new Label {Text = "12345", HorizontalTextAlignment = TextAlignment.Center}, 1, 0);
            grid.Children.Add(new Label {Text = "Risk"}, 0, 1);
            grid.Children.Add(
                new Label {Text = "Low", TextColor = Color.Green, HorizontalTextAlignment = TextAlignment.Center}, 1, 1);
            var item = new Label
            {
                Text = "Foo bar",
                HorizontalTextAlignment = TextAlignment.Center,
                FontSize = 30,
                FontAttributes = FontAttributes.Bold
            }; 
            Content = new StackLayout
            {
                Children =
                {
                    item,
                    new Label
                    {
                        Text = "Financial Services Provider",
                        HorizontalTextAlignment = TextAlignment.Center
                    },
                    grid
                }
            };
        }
    }
}

自定义渲染器：

using Android.Support.V7.Widget;
using Android.Text;
using Android.Views;
using CodeFest;
using CodeFest.Droid.ComponentRenderers;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(NativeClientProfile), typeof(NativeClientProfileRenderer))]
namespace CodeFest.Droid.ComponentRenderers
{
    class NativeClientProfileRenderer : ViewRenderer<NativeClientProfile, CardView>
    {
        protected override void OnElementChanged(ElementChangedEventArgs<NativeClientProfile> elementChangedEventArgs)
        {
            var view = new CardView(Context);
            //view.SetCardBackgroundColor(0x00000000);
            SetNativeControl(view);
        }
    }
}

我正在寻找如何在 CardView 自定义渲染器中正确渲染表单组件的示例。

【问题讨论】：

CardView 通常与 RecyclerView 一起使用。你想在 RecyclerView 之外使用它吗？如果它是独立视图，那么为什么需要 CardView？

标签： xamarin xamarin.android xamarin.forms

【解决方案1】：

您可以使用Frame 作为基类而不是ContentView。这样做的好处是，您可以使用已经在使用CardView 的Xamarin.Forms.Platform.Android.AppCompat 的现有FrameRenderer。（见：FrameRenderer.cs）。

FrameRenderer 声明

public class FrameRenderer : CardView, IVisualElementRenderer, AView.IOnClickListener, AView.IOnTouchListener

渲染器

class NativeClientProfileRenderer : Xamarin.Forms.Platform.Android.AppCompat.FrameRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<Frame> e)
    {
        base.OnElementChanged(e);
    }
}

NativeClientProfile

public class NativeClientProfile : Frame
{
    public NativeClientProfile()
    {
        // your stuff...
        Content = new StackLayout
        {
            Children =
            {
                item,
                new Label
                {
                    Text = "Financial Services Provider",
                    HorizontalTextAlignment = TextAlignment.Center
                },
                grid
            }
        };
    }
}

讨论

如果您真的想手动完成，渲染器会向您展示它需要什么。使用 FrameRenderer 会使您的代码依赖于 Xamarin 的实现。如果他们改变了为Frame 呈现的视图类型，它将破坏您的应用程序。但是，如果您查看 FrameRenderer 的实现，我会尽量避免完全从头开始创建它（简单的风险与努力评估）。

【讨论】：