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