200行代码在Xamarin.Form中实现散开按钮效果

最新推荐文章于 2024-07-26 00:39:07 发布

初夏de遐想

最新推荐文章于 2024-07-26 00:39:07 发布

阅读量748

点赞数 2

分类专栏： Xamarin.Forms 文章标签： Xamarin.Forms 散开按钮

本文链接：https://blog.csdn.net/weixin_38138153/article/details/90271442

版权

目录如下

效果演示
相关代码
注意事项

一、效果演示
在这里插入图片描述
本人前段时间用Xamarin.Forms写一了个小应用，里面用到了这样的一个点击散开的按钮控件。这里记录并分享一下实现过程，希望可以帮到更多新入坑的小伙伴。
注意这里只支持以母按钮为圆心90度扩散，若你想180度扩散则需要稍微改改代码。

二、相关代码
这里需要说明一下，该控件以xaml自定义控件的方式实现，理论上在Xamarin.Forms中可以实现跨平台使用。本人的Android手机亲测可用，ios方面因为没有苹果手机所以没有测试。
首先看一下我们需要准备的东西。
在这里插入图片描述
我们只需要在项目中添加SplashButton.xaml和对应的cs文件即可，养成良好的习惯，自定义的控件统一放在Conpoments命名空间里。

SplashButton.xaml

<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SplashBtnExample.Component.SplashButton" 
             VerticalOptions="End" HorizontalOptions="Start">
    <Button x:Name="MenuBtn" HorizontalOptions="Start" VerticalOptions="End"/>
</RelativeLayout>

SplashButton.cs

namespace SplashBtnExample.Component
{
    /// <summary>
    /// 子按钮
    /// </summary>
    public class SubButton
    {
        /// <summary>
        /// 点击事件
        /// </summary>
        public Action<object, EventArgs> Action { get; set; }

        /// <summary>
        /// 图片地址
        /// </summary>
        public string ImageUrl { get; set; }
    }
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class SplashButton : RelativeLayout
    {
        private int diameter;
        /// <summary>
        /// 按钮直径(px)默认30
        /// </summary>
        public int ButtonDiameter
        {
            get { return diameter; }
            set
            {
                diameter = value;
                //MenuBtn.CornerRadius = diameter;
                MenuBtn.HeightRequest = diameter;
                MenuBtn.W