Xamarin Android中的可切换保存按钮

Question

我创建了一个列出RecyclerView的对象列表的布局。 我想为用户添加保存特定对象的选项，但是我不知道如何实现类似波纹管这样的功能。 我需要一个可以切换的按钮，如果用户单击它，它将用红色填充心脏按钮，否则它将为空。 谢谢。

布局

Answer 1

如果您希望使用某种动画将心脏从无到有填满，我建议您查看SkiaSharp（ https://blog.xamarin.com/deep-dive-skiasharp-xamarin-forms/ ），然后使用动画类（ https://xamarinhelp.com/custom-animations-in-xamarin-forms/ ）以动画填充高度。

简而言之，您必须创建一个自定义视图，并在其中添加SKCanvasView：

<skia:SKCanvasView x:Name="PrimaryCanvas" PaintSurface="OnPaintSurface" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"/>

在您的view.xaml.cs中添加一个新功能

OnPaintSurface(object sender, SkiaSharp.Views.Forms.SKPaintSurfaceEventArgs e) { ... }

在此函数内部，您需要编写一些代码来吸引您的心。 我建议您先画一个轮廓，然后再画一个应该填充的轮廓。 您可能想要添加一个可绑定的属性，其中包含要填充的金额的值，可能以百分比表示。 使用此属性可以计算OnPaintSurface代码中内部零件的高度。

最后，当您要填充图标时，创建一个Animation，然后更改先前创建的属性：

new Animation((value) =>
{
    FillHeightProperty = value;
    PrimaryCanvas.InvalidateSurface();
}).Commit(this, "fillAnimation", length: 350, repeat: () => false);

请注意，您需要使PrimaryCanvas曲面无效。 这将导致再次调用OnPaintSurface，它将使用更改后的属性，并因此在重新绘制画布时增加填充的高度。

Answer 2

您可以使用vector和path定义心脏背景：

<?xml version="1.0" encoding="utf-8" ?>
<vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="250dp"
    android:width="250dp"
    android:viewportHeight="32"
    android:viewportWidth="32" >
    <path
        android:name="heart"
        android:fillColor="#f9f7f7"
        android:strokeColor="#090808"
        android:strokeWidth="1"
        android:pathData="M20.5,9.5
                        c-1.955,0,-3.83,1.268,-4.5,3
                        c-0.67,-1.732,-2.547,-3,-4.5,-3
                        C8.957,9.5,7,11.432,7,14
                        c0,3.53,3.793,6.257,9,11.5
                        c5.207,-5.242,9,-7.97,9,-11.5
                        C25,11.432,23.043,9.5,20.5,9.5z"/>
</vector> 

在这里 ，我已经在github上发布了我的演示，您可以看到一个带有selector背景的按钮，该按钮允许您通过按钮的状态更改按钮的背景，而另一个按钮则使用SVG背景。

更新：

我在按钮上添加了动画。

    private void Mbt_Click(object sender, System.EventArgs e)
    {
        if (isClick)
        {
            mbt.SetBackgroundResource(Resource.Drawable.heart);
            isClick = false;
        }else {
            mbt.SetBackgroundResource(Resource.Drawable.heart_press);
            ObjectAnimator animator = ObjectAnimator.OfFloat(mbt, "scaleY", 1f, 1.2f, 1f);
            animator.SetDuration(1000);
            animator.Start();

            ObjectAnimator animator1 = ObjectAnimator.OfFloat(mbt, "scaleX", 1f, 1.2f, 1f);
            animator1.SetDuration(1000);
            animator1.Start();
            isClick = true;
        }
    }