[Xamarin.Android] 自定义控件

前言

软件项目开发的过程中，免不了遇到一些无法使用内建控件就能满足的客户需求，例如：时速表、折线图...等等。这时开发人员可以透过自定义控件的方式，为项目量身打造控件，来提供更加贴近用户需求的使用界面。本篇文章介绍在开发Xamarin.Android项目的时候，如何建立自定义控件，为自己留个纪录也希望能帮助到有需要的开发人员。

建立自定义控件

在Xamarin.Android项目中，有许多种方式可以建立自定义控件，本篇文章的范例采用继承View、覆写OnDraw的方式来实作自定义控件。

首先在Xamarin.Android项目中，加入一个类别：「CountMeter」，并且让CountMeter继承Android.Views.View以及实作对应Android.Views.View的建构子。

public sealed class CountMeter : View

{

    // Constructors

    public CountMeter(Context context) : base(context) { }

    public CountMeter(Context context, IAttributeSet attributeSet) : base(context, attributeSet) { }

    public CountMeter(Context context, IAttributeSet attributeSet, int defaultStyle) : base(context, attributeSet, defaultStyle) { }        

    // ......

}

接着在CountMeter类别中，覆写Android.Views.View的OnMeasure方法，让自定义控件能够正确显示android:layoutwidth、android:layoutheight...等等尺寸设定。

public sealed class CountMeter : View

{

    // Fields

    private readonly int _defaultWidth = 400;

    private readonly int _defaultHeight = 210;

    // Methods

    protected override void OnMeasure(int widthMeasureSpec, int heightMeasureSpec)

    {

        // Base

        base.OnMeasure(widthMeasureSpec, heightMeasureSpec);

        // Size

        this.SetMeasuredDimension(this.MeasureSize(widthMeasureSpec, _defaultWidth), this.MeasureSize(heightMeasureSpec, _defaultHeight));

    }

    private int MeasureSize(int measureSpec, int defaultSize)

    {

        // Size

        var specSize = MeasureSpec.GetSize(measureSpec);

        // Measure

        switch (MeasureSpec.GetMode(measureSpec))

        {

            case MeasureSpecMode.AtMost: return Math.Min(specSize, defaultSize);

            case MeasureSpecMode.Exactly: return specSize;

            default: return defaultSize;

        }

    }

    // ......

}

接着在CountMeter类别中，覆写Android.Views.View的OnDraw方法，使用程序代码的方式来描绘自定义控件呈现在接口上的显示外观。而针对如何描绘控件外观，开发人员可以参考下列资料，学习如何透过Xamarin.Android所提供的绘图类别来使用图形描绘功能：「Xamarin>Android>Other UX>Drawing」。

public sealed class CountMeter : View

{

    // Fields

    private readonly int _defaultWidth = 400;

    private readonly int _defaultHeight = 210;

    // Methods

    protected override void OnDraw(Canvas canvas)

    {

        // Base

        base.OnDraw(canvas);

        // Background

        canvas.DrawColor(Color.White);

        // Paint

        var paint = new Paint();

        paint.Color = Color.Red;

        paint.StrokeWidth = 10;

        // Size

        var x = 0;

        var y = 0;

        var width = this.Width;

        var height = this.Height - 10;

        var ellipseWidth = width;

        var ellipseHeight = height * 2;

        var scaleLength = 20;

        var spaceLength = 10;

        // Scale

        paint.Color = Color.Red;

        for (int scaleCount = 0; scaleCount <= 100; scaleCount += 10)

        {

            var scaleAngle = 180f / 100f * scaleCount;

            var scaleOffset = scaleLength;

            var scalePoint1 = this.GetEllipsePoint(x, y, ellipseWidth, ellipseHeight, scaleAngle);

            var scalePoint2 = this.GetEllipsePoint(x + scaleOffset, y + scaleOffset, ellipseWidth - scaleOffset * 2, ellipseHeight - scaleOffset * 2, scaleAngle);

            canvas.DrawLine(scalePoint1.X, scalePoint1.Y, scalePoint2.X, scalePoint2.Y, paint);

        }

    }

    // ......

}

自定义控件除了呈现静态数据之外，更大的功用是用来呈现动态数据，例如：目前时速、目前温度、载货量...等等。要完成呈现动态数据的功能，开发人员必须要在自定义控件中加入对象属性、对象方法来提供外部程序输入动态数据。而控件内部程序，在更新数据之后，就可以依照资料内容来在画面上描绘出对应的显示图形。

public sealed class CountMeter : View

{

    // Fields

    private int _count = 0;

    // Properties

    public int Count

    {

        get

        {

            // Get

            return _count;

        }

        set

        {

            // Set

            _count = value;

            // Refresh

            this.Invalidate();

        }

    }

    // Methods

    protected override void OnDraw(Canvas canvas)

    {

        // Base

        base.OnDraw(canvas);

        // Background

        canvas.DrawColor(Color.White);

        // Paint

        var paint = new Paint();

        paint.Color = Color.Red;

        paint.StrokeWidth = 10;

        // Size

        var x = 0;

        var y = 0;

        var width = this.Width;

        var height = this.Height - 10;

        var ellipseWidth = width;

        var ellipseHeight = height * 2;

        var scaleLength = 20;

        var spaceLength = 10;

        // Needle

        paint.Color = Color.Gold;

        var needleAngle = 180f / 100f * _count;

        var needleOffset = scaleLength + spaceLength;

        var needlePoint1 = this.GetEllipsePoint(x + needleOffset, y + needleOffset, ellipseWidth - needleOffset * 2, ellipseHeight - needleOffset * 2, needleAngle);

        var needlePoint2 = new PointF(width / 2, height);

        canvas.DrawLine(needlePoint1.X, needlePoint1.Y, needlePoint2.X, needlePoint2.Y, paint);

    }

    // ......

}

使用自定义控件

完成建立自定义控件的开发步骤后，接下来就是将自定义控件加入到项目之中。在Xamarin.Android项目中，有许多种方式可以将自定义控件，加入到实际处理用户接口Activity类别之中，本篇文章的范例采用直接加入axml档案的方式，在项目中使用自定义控件。

Main.axml

<CustomControlSample.CountMeter

    android:id="@+id/MyCountMeter1"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:layout_marginTop="20dp" />

透过加入axml档案方式将自定义控制向加入项目之后，在实际处理用户接口Activity类别中，就可以跟内建控件一样透过FindViewById方法来取得控件，并且操作控件所提供方法、属性、事件，来提供更加贴近用户需求的使用界面。

MainActivity.cs

[Activity(Label = "CustomControlSample", MainLauncher = true, Icon = "@drawable/icon")]

public class MainActivity : Activity

{

    // Fields

    private int _count = 0;

    // Methods

    protected override void OnCreate(Bundle bundle)

    {

        // Base

        base.OnCreate(bundle);

        // View

        this.SetContentView(Resource.Layout.Main);

        // CountMeter

        var countMeter1 = FindViewById<CountMeter>(Resource.Id.MyCountMeter1);

        // UpButton

        var upButton = FindViewById<Button>(Resource.Id.UpButton);

        upButton.Click += delegate

        {

            _count += 10;

            countMeter1.Count = _count;

        };

        // DownButton

        var downButton = FindViewById<Button>(Resource.Id.DownButton);

        downButton.Click += delegate

        {

            _count -= 10;

            countMeter1.Count = _count;

        };

    }

}

范例下载

范例程序代码：点此下载