Bitmap Button 만들기

ButtonImg.zip

1. Bitmap button을 사용하는 이유

나인패치(9-patch) 이미지를 적용하는 대표적인 경우가 버튼인데, 

배경 부분을 이미지로 지정하여 만든 버튼은 눌러도 이미지의 변화가 없어 

사용자가 버튼을 눌렀는지 안 눌렀는지 알 수 없다는 단점이 있다.

비트맵 이미지를 이용하여 버튼의 상태를 이벤트로 구분해 표시할 수 있다.

2. 실행 결과 화면

기본 화면과 터치 시 화면

   

3. BitmapButton.java

버튼을 상속해서 새로운 버튼을 생성한다.

터치된 상태에 따라 배경 이미지를 바꾸어주기 위해 터치 이벤트를 이용해 처리한다.

invalidate 메소드를 사용하여 바뀐 이미지를 화면을 갱신한다.

package com.tistory.qlyh8.pracitice;
 
import android.content.Context;
import android.graphics.Color;
import android.support.v7.widget.AppCompatButton;
import android.util.AttributeSet;
import android.view.MotionEvent;
 
public class BitmapButton extends AppCompatButton {
    public BitmapButton(Context context) {
        super(context);
        init(context);
    }
 
    public BitmapButton(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }
 
    private void init(Context context){
        setBackgroundResource(R.drawable.btn1);
        setTextSize(context.getResources().getDimension(R.dimen.text_size));
        setTextColor(Color.RED);
    }
 
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        super.onTouchEvent(event);
        int action = event.getAction();
 
        switch (action){
            case MotionEvent.ACTION_DOWN:
                setBackgroundResource(R.drawable.btn2);
                break;
            case MotionEvent.ACTION_UP:
                setBackgroundResource(R.drawable.btn1);
                break;
        }
        invalidate();
 
        return true;
    }
}
 

4. values/dimens.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="text_size">25dp</dimen>
</resources>

5. activity_main.xml

뷰를 상속해서 새로운 뷰를 만든 경우에는 XML 레이아웃에 추가할 때 패키지 명까지 같이 넣어준다.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context="com.tistory.qlyh8.pracitice.MainActivity">
   
   <qlyh8.tistory.com.pracitice.BitmapButton
       android:id="@+id/button"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Hello World!"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toTopOf="parent" />
 
</android.support.constraint.ConstraintLayout>
 

출처: https://www.edwith.org/boostcourse-android/lecture/17055/