如何在android上创建标准的ios开关设计？ 形式在Android项目中

问题描述

我想在android上创建一个类似于标准ios开关的自定义开关。

请帮我做

解决方法

我们可以使用 Custom Renderer

来实现它

形式

创建自定义按钮

public class CustomSwitch : Button
    {

        public bool IsToggle { get; set; }


        public event EventHandler Toggled;

        public void OnToggled() =>
        Toggled?.Invoke(this,null);

    }

在Android项目中

首先，我们需要从Nuget安装软件包Xamarin.Android.SwitchButton。

在ButtonRenderer中

using Android.Content;

using Android.Widget;

using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

using App14.Droid;
using Com.Kyleduo.Switchbutton;
using App14;

[assembly:ExportRenderer(typeof(CustomSwitch),typeof(MySwitchRenderer))]
namespace App14.Droid
{
    public class MySwitchRenderer : ButtonRenderer
    {

        Context context { get;}

        public MySwitchRenderer(Context context) : base(context)
        {
            this.context = context;
        }

        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Button> e)
        {
            base.OnElementChanged(e);

            if(Control!=null)
            {
                SwitchButton switchButton = new SwitchButton(context);

                //  switchButton.SetHighlightColor(Android.Graphics.Color.Green);

                switchButton.CheckedChange += SwitchButton_CheckedChange;

                SetNativeControl(switchButton);

            }

        }

        private void SwitchButton_CheckedChange(object sender,CompoundButton.CheckedChangeEventArgs e)
        {
            var customSwitch = Element as CustomSwitch;
            customSwitch.IsToggle = e.IsChecked;

            customSwitch.OnToggled();

        }
    }
}

现在在表单中，我们需要使用Device类在iOS和Android上添加不同的Element。

 <StackLayout VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">

   
        <OnPlatform x:TypeArguments="View">
           <On Platform="Android">
            <local:CustomSwitch Toggled="CustomSwitch_Toggled" />
          </On>
             <On Platform="iOS">
            <Switch Toggled="Switch_Toggled" />
         </On>
            
        </OnPlatform>
   

</StackLayout>


public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
    }

   

    private void Switch_Toggled(object sender,ToggledEventArgs e)
    {
      
        Switch _switch = sender as Switch;
        ToggledChanged(_switch.IsToggled);
    }

    private void CustomSwitch_Toggled(object sender,EventArgs e)
    {
        CustomSwitch customSwitch = sender as CustomSwitch;
        ToggledChanged(customSwitch.IsToggle);
    }

  
    void ToggledChanged(bool isToggle)
    {
        DisplayAlert("Title",$"IsToggled{isToggle}","OK");
    }
     
}

,

您需要为开关创建自定义渲染器；

public class CustomSwitchRenderer : SwitchRenderer
{
    public CustomSwitchRenderer(Context context) : base(context)
    {
    }

    protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Switch> e)
    {
        base.OnElementChanged(e);
        if (e.OldElement != null || e.NewElement == null)
            return;
       /*
        Control.TrackDrawable.MinimumWidth holds the value of the tracker size.
        to change it,you need a new shape for tracker.
        */
        Control.SetTrackResource(Resource.Drawable.tracker);
    }
}

因此您需要在android项目下为跟踪器创建一个可绘制对象。