Переключаемая кнопка сохранения в Android Xamarin

Question

Я создал макет, который перечисляет Список объектов в RecyclerView. Я хотел бы добавить опцию для пользователя, чтобы сохранить определенный объект, но я понятия не имею, как добиться чего-то вроде приведенного ниже макета. Мне нужна кнопка, которую можно переключать, и если пользователь нажмет ее, она заполнит сердечную кнопку красным, в противном случае она будет пустой. Спасибо.

Компоновка

Answer 1

Вы можете определить фон сердца с помощью 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;
        }
    }

Answer 2

Если вы хотите, чтобы это сердце заполнялось с нуля до полноты, используя какую-то анимацию, я бы посоветовал заглянуть в 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, который будет использовать ваше измененное свойство и, следовательно, увеличит высоту заливки при перерисовке холста.