目录如下
- 效果演示
- 相关代码
- 注意事项
一、效果演示
本人前段时间用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