Question

我创建了一个列出#templates/holiday-hours.hbs {{#each model as |holidayHour|}} {{holiday-hour holiday=holidayHour shouldDisplayDeleteIcon=true}} {{/each}}中对象列表的布局。我想为用户添加保存某个对象的选项，但我不知道如何实现类似布局的方式。我需要一个可以切换的按钮，如果用户点击它，它将用红色填充心形按钮，否则它将为空。谢谢。

布局

[locale.numpunct]/2

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代码中计算内部零件的高度。

最后，当你想要填满你的图标时，你会创建一个动画，然后改变之前创建的属性：

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>

Here，我已经在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;
        }
    }

Xamarin Android中的Toggleable保存按钮

2 个答案:

更新