Android自定义控件

里面包括了自定义图文框，自定义的仿ios菊花样式的ProgressBar，两种方法，一种是自己出来的，通过重写view，自己实现，其实这个重写就是自定义View的过程，另一种是网络上传的，直接通过定义动画转动实现，第一种方式拓展性比较好，做复杂点可以实现各种样式，当然仅仅是一个菊花的进度条，并不需要这么大费周章的写一个类。我练的是方法。

自定义控件，大体上的流程分为两种，一种是已有的控件，进行组合，一种是自己手动绘画出一个控件，当然，这里的绘画可以导入图片资源文件，通过转化为bitmap的对象再操作，如果是图片的适应操作，安卓官方文档有给出例子，我自己也认真看了下，感觉里面都是精华把。可以多看。我的笔记如下：

http://blog.csdn.net/u013755250/article/details/50224219

我看过箭头抽屉的开源项目，其实它也是写了这么一个Drawable的View，里面是通过画笔直接绘制图形，，再通过线性排插法进行变化，进行变化。

自定义控件，去google搜下，都有流程，大体是，measure，layout，draw。相对应的就是，测量，然后布局控件位置，再就是把控件的样子画出来。

我写组合控件的时候就深有体会。因为组合就不需要重写上述的三种方法，只要在构造方法中完成业务逻辑。这就有个问题了，构造方法是在new的时候就执行，它比View中的任何其他方法都要早执行。意味着，在构造方法中写控件，难免要用到控件的总的大小，可这时的所有getter方法获取的只都为0，因为根本就没测量过，就不会有数据。这时如何获取宽高呢？

我本来是想模仿自定属性时的方式，通过获取attrs.xml中属性定义的方式，来获取android：开头的属性，可是，肯能是思路有错，研究了好久，还是没找到正确的。后面想了个折中的方法，在dimens.xml中事先定义一个控件所要用的宽高，在UI的xml中设置时，就直接引用dimen的。这样就不存在重复定义的问题了，只要改一个地方的值，就可以整体适配，利于多次利用

个人觉得，写每个类的时候，都应该往多次利用的方向上靠。这样才复合继承的思想，可以多次利用，省去许多重复的业务。

效果图：

图文输入框：

package com.hs.cv;

import android.annotation.TargetApi;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.drawable.Drawable;
import android.os.Build;
import android.text.InputType;
import android.text.method.PasswordTransformationMethod;
import android.util.AttributeSet;
import android.view.Gravity;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.LinearLayout;

import com.hs.customview.R;
import com.hs.cv.utils.BitmapUtil;

/**
 * 图文加载控件
 * 		使用方法，最好在dimen中第一控件的宽高，并且在xml中统一使用
 * 		一些属性设置，可以引用对象，重新设置
 *
 * @author Holy-Spirit
 *
 */
@TargetApi(Build.VERSION_CODES.JELLY_BEAN_MR1)
public class CustomImageTxtView extends LinearLayout {

    /*
     * 控件内EditText对象
     */
    private EditText mText = null;
    /*
     * 控件内ImageView对象
     */
    private ImageView mImage = null;

    public CustomImageTxtView(Context context) {
        super(context);
    }

    public CustomImageTxtView(Context context, AttributeSet attrs) {
        super(context, attrs);

		/*
		 * 控件的宽
		 */
        final int vWidth = context.getResources().getDimensionPixelSize(
                R.dimen.defWidth);
		/*
		 * 控件的高
		 */
        final int vHeight = context.getResources().getDimensionPixelSize(
                R.dimen.defHeight);
		/*
		 * 控件内imag的高
		 */
        final int imgHeight = vHeight * 3 / 10;
		/*
		 * 控件内imag的宽
		 */
        final int imgWidth = imgHeight;
		/*
		 * 控件内imag的与其他控件的间隔
		 */
        final int imgMargin = vHeight / 5;

		/*
		 * 控件内容放置的重心
		 */
        final int contentGra = Gravity.CENTER_VERTICAL;

		/*
		 * 控件内txt文本的宽度
		 */
        final int txtWidth = vWidth - 2 * imgMargin - imgWidth;

		/*
		 * 控件内txt文本的高度
		 */
        final int txtHeight = vHeight;

		/*
		 * 属性的id
		 */
        int resId = -1;

		/*设置整个View的重心*/
        this.setGravity(contentGra);

		/*获取自定义的属性数组*/
        TypedArray mArray = context.obtainStyledAttributes(attrs,
                R.styleable.CustomImageTxtView);

		/*设置Image*/
        mImage = new ImageView(context);
        this.setImageLayoutParams(imgWidth, imgHeight, imgMargin);

		/*设置Edit*/
        mText = new EditText(context);
        this.setTextGravity(contentGra);
        this.setTextLayoutParams(txtWidth, txtHeight);
        this.hideBottomLine(context.getResources().getDrawable(
                R.drawable.round_background));
        this.setIsSingleLine(true);


		/*获取xml中设置的属性*/
        int length = mArray.getIndexCount();
        for (int i = 0; i < length; i++) {

            int attr = mArray.getIndex(i);
            switch (attr) {
                case R.styleable.CustomImageTxtView_Oriental:
				/*设置方向*/
                    resId = mArray.getInt(R.styleable.CustomImageTxtView_Oriental, 0);
                    this.setOrientation((resId == 1) ? LinearLayout.HORIZONTAL
                            : LinearLayout.VERTICAL);
                    break;

                case R.styleable.CustomImageTxtView_Text:
				/*设置文本内容*/
                    resId = mArray.getResourceId(R.styleable.CustomImageTxtView_Text, 0);
                    mText.setText(resId > 0 ? mArray.getResources().getText(resId)
                            : mArray.getString(R.styleable.CustomImageTxtView_Text));
                    break;

                case R.styleable.CustomImageTxtView_Src:
				/*设置图片资源*/
                    resId = mArray.getResourceId(R.styleable.CustomImageTxtView_Src, 0);

                    mImage.setImageBitmap(resId > 0 ? BitmapUtil
                            .decodeSampleBitmapFromResource(getResources(), resId,
                                    imgWidth, imgHeight) : BitmapUtil
                            .decodeSampleBitmapFromResource(getResources(),
                                    R.drawable.ic_launcher, imgWidth, imgHeight));
                    break;

                case R.styleable.CustomImageTxtView_Content:
				/*设置文本类型*/
                    resId = mArray.getInt(R.styleable.CustomImageTxtView_Content, 1);
                    if (resId == 1) {
                        this.setTextInputType(InputType.TYPE_TEXT_VARIATION_EMAIL_ADDRESS);
                    } else if (resId == 2) {
                        this.setTextInputType(InputType.TYPE_TEXT_VARIATION_PASSWORD);
                        this.setTextTransformationMethod();
                    } else {
                        this.setTextInputType(InputType.TYPE_CLASS_TEXT);
                    }
                    break;
                case R.styleable.CustomImageTxtView_TextColor:
				/*设置文字颜色*/
                    resId = mArray.getResourceId(
                            R.styleable.CustomImageTxtView_TextColor, 0);
                    if (resId > 0)
                        this.setTextColor(context.getResources().getColor(resId));
                    break;

                case R.styleable.CustomImageTxtView_TextSize:
				/*设置文字大小*/
                    resId = mArray.getResourceId(
                            R.styleable.CustomImageTxtView_TextSize, 0);
                    if (resId > 0)
                        this.setTextSize(context.getResources()
                                .getDimensionPixelSize(resId));
                    break;
                default:
                    break;
            }
        }

		/*添加控件到父控件*/
        addView(mImage);
        addView(mText);


		/*回收资源*/
        mArray.recycle();

    }


    /*
     * 设置密码输入
     */
    public void setTextTransformationMethod() {
        mText.setTransformationMethod(PasswordTransformationMethod
                .getInstance());

    }



    /*
     * 设置内容类型
     */
    public void setTextInputType(int type) {
        mText.setInputType(type);
    }



    /*
     * 设置内容字体大小
     */
    public void setTextSize(int size) {
        mText.setTextSize(size);

    }



    /*
     * 设置内容字体颜色
     */
    public void setTextColor(int color) {
        mText.setTextColor(color);
    }


    /*
     * 设置Imag布局
     */
    public void setImageLayoutParams(int reqWidth, int reqHeight, int margin) {
        LinearLayout.LayoutParams mParams = new LayoutParams(reqWidth,
                reqHeight);
        mParams.setMargins(margin, margin, margin, margin);
        mImage.setLayoutParams(mParams);
    }


    /*
     * 设置文本单行
     */
    public void setIsSingleLine(boolean isSingleLine) {
        mText.setSingleLine(isSingleLine);
    }


    /*
     * 隐藏原本EditText的下划线
     */
    public void hideBottomLine(Drawable bg) {
        mText.setBackground(bg);
    }


    /*
     * 设置文本内容重心
     */
    public void setTextGravity(int gravity) {
        mText.setGravity(gravity);
    }


    /*
     * 设置文本布局
     */
    public void setTextLayoutParams(int txtWidth, int txtHeight) {

        mText.setLayoutParams(new LayoutParams(txtWidth, txtHeight));

    }
}

自定义菊花样式ProgressBar：

基本的实现策略是在ondraw中画出菊花的图形，通过颜色轮转重画实现感觉图形一直在动的效果，你可以任意定义一组颜色，打到你想要的效果。可以在UI线程中定义一个handler，定时刷新

package com.hs.cv;

import android.annotation.SuppressLint;
import android.annotation.TargetApi;
import android.content.Context;
import android.content.res.Resources;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.os.Build;
import android.util.AttributeSet;
import android.view.View;

import com.hs.customview.R;

/**
 * 自定义菊花样式的Progress
 * UI线程定义handler定时刷新
 *
 * @author Holy-Spirit
 */

@TargetApi(Build.VERSION_CODES.HONEYCOMB)
@SuppressLint("DrawAllocation")
public class CustomProgressBar extends View
{

    /*
     * 画笔
     */
    private Paint mPaint = null;

    /*
     * 每个指针的颜色
     */
    private static final int[] colors = new int[]{R.color.color_top,
            R.color.color_right_top, R.color.color_right,
            R.color.color_right_bottom, R.color.color_bottom,
            R.color.color_left_bottom, R.color.color_left,
            R.color.color_left_top};

    /*
     * android res资源对象
     */
    private Resources res = null;

    /*
     * 颜色值轮转指针
     */
    private int i = 0;

    public CustomProgressBar(Context context)
    {
        super(context);

    }

    public CustomProgressBar(Context context, AttributeSet attrs)
    {
        super(context, attrs);
        res = context.getResources();// 获取资源对象，用来获取color值
    }

    public void refreshView()
    {
        invalidate();// 触发onDraw（）方法，重绘Progress
    }

    /*
     * color循环变化
     */
    private int calculateIndex(int in)
    {
        return in % (colors.length - 1);
    }

    /*
     * 设置指针颜色
     */
    public void setLineColor(int index)
    {
        mPaint.setColor(res.getColor(colors[calculateIndex(index)]));
    }

    @Override
    protected void onDraw(Canvas canvas)
    {
        super.onDraw(canvas);

        final float roundWidth;
        final int width = canvas.getWidth();
        final int height = canvas.getHeight();
        roundWidth = width > height ? height : width;
        final float halfRoundWidth = roundWidth / 2;// 获取画布的半长
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setStrokeWidth(roundWidth / 15);// 设置为画布的十五分之一
        float f1 = halfRoundWidth / 5;
        float f2 = (float) Math.sqrt(f1 * f1 / 2);// 中心点到指针的长度在x，y轴上的投影
        float f3 = (float) Math.sqrt(f1 * f1 * 9) / 2;//指针长在x，y轴上的投影
        float f5 = halfRoundWidth - f3 - f1;//画布四哥点到指针的长度在x，y轴上的投影

        // top
        this.setLineColor(0 + i);
        canvas.drawLine(halfRoundWidth, halfRoundWidth / 5, halfRoundWidth,
                halfRoundWidth / 5 * 4, mPaint);

        // right top
        this.setLineColor(1 + i);
        canvas.drawLine(roundWidth - f5, f5, halfRoundWidth + f2,
                halfRoundWidth - f2, mPaint);

        // right
        this.setLineColor(2 + i);
        canvas.drawLine(halfRoundWidth / 5 * 9, halfRoundWidth,
                halfRoundWidth / 5 * 6, halfRoundWidth, mPaint);

        // right bottom
        this.setLineColor(3 + i);
        canvas.drawLine(roundWidth - f5, roundWidth - f5, halfRoundWidth + f2,
                halfRoundWidth + f2, mPaint);

        // bottom
        this.setLineColor(4 + i);
        canvas.drawLine(halfRoundWidth, halfRoundWidth / 5 * 9, halfRoundWidth,
                halfRoundWidth / 5 * 6, mPaint);

        // left bottom
        this.setLineColor(5 + i);
        canvas.drawLine(f5, roundWidth - f5, halfRoundWidth - f2,
                halfRoundWidth + f2, mPaint);

        // left
        this.setLineColor(6 + i);
        canvas.drawLine(halfRoundWidth / 5, halfRoundWidth,
                halfRoundWidth / 5 * 4, halfRoundWidth, mPaint);
        // // left top
        this.setLineColor(7 + i);
        canvas.drawLine(f5, f5, halfRoundWidth - f2, halfRoundWidth - f2,
                mPaint);

        i++;
    }

}

通过定义的动画的方式实现菊花样式的Progressbar：

第一步：

<?xml version="1.0" encoding="utf-8"?>
<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/pic_rotate"
    android:pivotX="50%"
    android:pivotY="50%" />

引用的图片就是你要让它动的图片

第二部在UI的xml中引用

   <ProgressBar
        android:id="@+id/logining"
        android:layout_width="15dp"
        android:layout_height="15dp"
        android:indeterminateDrawable="@drawable/circle_loading"
        android:layout_alignTop="@+id/cancel"
        android:layout_alignRight="@+id/count"
        android:layout_alignEnd="@+id/count"/>

demo下载：

http://download.csdn.net/detail/u013755250/9341283