[Xamarin.Android] 自定义控件

前言

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

前言01

建立自定义控件

在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;
        }
    }

    // ......
}

建立01

接着在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);
        }
    }

    // ......
}

建立02

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

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

    // ......
}

建立03

使用自定义控件

完成建立自定义控件的开发步骤后，接下来就是将自定义控件加入到项目之中。在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;
        };
    }
}

使用01

范例下载

范例程序代码：点此下载

posted @ 2014-10-22 13:34 Clark159 阅读(1764) 评论(0) 编辑收藏举报

刷新页面返回顶部

昏睡領域

Clark的心得筆記

[Xamarin.Android] 自定义控件

[Xamarin.Android] 自定义控件

前言

建立自定义控件

使用自定义控件

范例下载

公告