Android:自定义控件和使用方法

以Android Calculator源码为例，自定义一个ColorButton，这个ColorButton具有自定义的UI和事件响应能力：

/* * Copyright (C) 2008 The Android Open Source Project * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * *      http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */package com.android.calculator2;import android.content.Context;import android.graphics.Canvas;import android.graphics.Paint;import android.graphics.Paint.Style;import android.util.AttributeSet;import android.widget.Button;import android.view.View.OnClickListener;import android.view.View;import android.view.MotionEvent;import android.content.res.Resources;/** * Button with click-animation effect. */class ColorButton extends Button implements OnClickListener {    int CLICK_FEEDBACK_COLOR;    static final int CLICK_FEEDBACK_INTERVAL = 10;    static final int CLICK_FEEDBACK_DURATION = 350;    float mTextX;    float mTextY;    long mAnimStart;    OnClickListener mListener;    Paint mFeedbackPaint;    public ColorButton(Context context, AttributeSet attrs) {        super(context, attrs);        Calculator calc = (Calculator) context;        init(calc);        mListener = calc.mListener;        setOnClickListener(this);    }    public void onClick(View view) {        mListener.onClick(this);    }    private void init(Calculator calc) {        Resources res = getResources();        CLICK_FEEDBACK_COLOR = res.getColor(R.color.magic_flame);        mFeedbackPaint = new Paint();        mFeedbackPaint.setStyle(Style.STROKE);        mFeedbackPaint.setStrokeWidth(2);        getPaint().setColor(res.getColor(R.color.button_text));        mAnimStart = -1;    }    @Override    public void onSizeChanged(int w, int h, int oldW, int oldH) {        measureText();    }    private void measureText() {        Paint paint = getPaint();        mTextX = (getWidth() - paint.measureText(getText().toString())) / 2;        mTextY = (getHeight() - paint.ascent() - paint.descent()) / 2;    }    @Override    protected void onTextChanged(CharSequence text, int start, int before, int after) {        measureText();    }    private void drawMagicFlame(int duration, Canvas canvas) {        int alpha = 255 - 255 * duration / CLICK_FEEDBACK_DURATION;        int color = CLICK_FEEDBACK_COLOR | (alpha << 24);        mFeedbackPaint.setColor(color);        canvas.drawRect(1, 1, getWidth() - 1, getHeight() - 1, mFeedbackPaint);    }    @Override    public void onDraw(Canvas canvas) {        if (mAnimStart != -1) {            int animDuration = (int) (System.currentTimeMillis() - mAnimStart);            if (animDuration >= CLICK_FEEDBACK_DURATION) {                mAnimStart = -1;            } else {                drawMagicFlame(animDuration, canvas);                postInvalidateDelayed(CLICK_FEEDBACK_INTERVAL);            }        } else if (isPressed()) {            drawMagicFlame(0, canvas);        }        CharSequence text = getText();        canvas.drawText(text, 0, text.length(), mTextX, mTextY, getPaint());    }    public void animateClickFeedback() {        mAnimStart = System.currentTimeMillis();        invalidate();    }    @Override    public boolean onTouchEvent(MotionEvent event) {        boolean result = super.onTouchEvent(event);        switch (event.getAction()) {            case MotionEvent.ACTION_UP:                animateClickFeedback();                break;            case MotionEvent.ACTION_DOWN:            case MotionEvent.ACTION_CANCEL:                invalidate();                break;        }        return result;    }}

在main.xml中引用该自定义控件（ com.android.calculator2.ColorButton ）：

<?xml version="1.0" encoding="utf-8"?><!--/* * Copyright (C) 2008, The Android Open Source Project * * Licensed under the Apache License, Version 2.0 (the "License");  * you may not use this file except in compliance with the License.  * You may obtain a copy of the License at  * *     http://www.apache.org/licenses/LICENSE-2.0  * * Unless required by applicable law or agreed to in writing, software  * distributed under the License is distributed on an "AS IS" BASIS,  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.  * See the License for the specific language governing permissions and  * limitations under the License. */--><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"              android:orientation="vertical"              android:layout_width="match_parent"              android:layout_height="match_parent"              android:background="#ff000000">    <LinearLayout         android:layout_width="match_parent"         android:layout_height="0dp"         android:layout_weight="2"         >        <com.android.calculator2.CalculatorDisplay             android:id="@+id/display"             android:layout_width="0dp"             android:layout_weight="5"             android:layout_height="match_parent"             maxDigits="@integer/max_digits">            <com.android.calculator2.CalculatorEditText                style="@style/display_style" />            <com.android.calculator2.CalculatorEditText                style="@style/display_style" />        </com.android.calculator2.CalculatorDisplay>        <ImageButton android:id="@+id/overflow_menu"            android:layout_width="48dip"            android:layout_height="match_parent"            android:src="@drawable/ic_menu_overflow"            android:background="@android:color/transparent"            android:layout_marginLeft="8dip"            android:visibility="gone"/>        <FrameLayout            android:layout_width="0dp"            android:layout_weight="1"            android:layout_height="match_parent">            <!-- marginRight has to be 0 to catch border-touch -->            <<com.android.calculator2.ColorButton                 android:id="@+id/clear"                 android:text="@string/clear"                 android:layout_width="match_parent"                 android:layout_height="match_parent"                 android:layout_marginRight="0dp"                 android:textSize="15dp"                 style="@style/button_style"                 />            <!-- marginRight has to be 0 to catch border-touch -->            <com.android.calculator2.ColorButton                 android:id="@+id/del"                 android:text="@string/del"                 android:layout_width="match_parent"                 android:layout_height="match_parent"                 android:layout_marginRight="0dp"                 android:textSize="15dp"                 style="@style/button_style"                 />        </FrameLayout>    </LinearLayout>    <android.support.v4.view.ViewPager         android:id="@+id/panelswitch"         android:layout_width="match_parent"         android:layout_height="0dp"         android:layout_weight="4"         /></LinearLayout>

通过自定义控件，能够很方便的实现较复杂的控件设计和复用。

官方教程：http://developer.android.com/guide/topics/ui/custom-components.html

更多相关文章

随机推荐