如何在 android 上创建 ios 开关的标准设计？

Question

我想在 android 上创建一个看起来像标准 ios 开关的自定义开关。

请帮我做一下

Answer 1

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

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项目下为tracker创建一个drawable。

Answer 2

我们可以使用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();

        }
    }
}

现在在表单中我们需要使用设备 class 在 iOS 和 Android 上添加不同的元素。

 <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");
    }
     
}

如何在 android 上创建 ios 开关的标准设计？

How to create standard design of ios switch on android?

c#

custom-renderer

xamarin.android

xamarin

xamarin.forms

在表格中

在 Android 项目中