[안드로이드 스튜디오 독학#22] CustomView

이 게시물은 다음 링크를 참조하여 학습했습니다.

[안드로이드 스튜디오 정리#7] CustomView

위 링크에서 정리한 내용을 바탕으로 CustomView를 만들어보았다.

Canvas, Paint, Bitmap의 내용을 최대한 담으려고 노력했다.

 

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical"
    android:gravity="center_horizontal">
 
    <com.example.customviewjava.views.CustomView
        android:id="@+id/cv"
        android:layout_width="match_parent"
        android:layout_height="350dp"/>
    <Button
        android:id="@+id/btn_swap"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="SWAP COLOR"/>
 
    <ImageView
        android:id="@+id/iv_bm"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@drawable/bm_smile"
        android:layout_margin="10dp"/>
 
</LinearLayout>

MainActivity.java

package com.example.customviewjava;
 
import androidx.appcompat.app.AppCompatActivity;
 
import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Matrix;
import android.graphics.drawable.BitmapDrawable;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
 
import com.example.customviewjava.views.CustomView;
 
public class MainActivity extends AppCompatActivity {
    private CustomView customView;
    private Button btn_swap;
    private ImageView iv_bm;
 
    private Bitmap bitmap;
    private Matrix matrix;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        customView = (CustomView)findViewById(R.id.cv);
        btn_swap = (Button)findViewById(R.id.btn_swap);
        iv_bm = (ImageView)findViewById(R.id.iv_bm);
        //비트맵 크기, 회전각 조정을 위한 Matrix
        matrix = new Matrix();
        matrix.postScale(2,2);
        matrix.postRotate(180);
        //Bitmap을 ImageView로부터 받아서 Matrix를 이용해 크기, 회전각을 조정 후 ImageView에 다시 셋팅
        bitmap = ((BitmapDrawable)iv_bm.getDrawable()).getBitmap();
        bitmap = Bitmap.createBitmap(bitmap,0,0,bitmap.getWidth(),bitmap.getHeight(),matrix,true);
        iv_bm.setImageBitmap(bitmap);
 
 
        btn_swap.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                customView.swapColor();
            }
        });
    }
}

CustomView.java

package com.example.customviewjava.views;
 
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
 
import androidx.annotation.Nullable;
 
import com.example.customviewjava.R;
 
public class CustomView extends View {
    private static final int SQUARE_SIZE = 100;
    private Rect mRectSquare;
    private Paint mPaintSquare;
    private Bitmap mBitmap;
    private Context mContext;
 
    private float leftPoint;
    private float TopPoint;
 
    public CustomView(Context context) {
        super(context);
        mContext = context;
        init(null);
    }
 
    public CustomView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        mContext = context;
        init(attrs);
    }
 
    public CustomView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mContext = context;
        init(attrs);
    }
 
    public CustomView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        mContext = context;
        init(attrs);
    }
    //초기설정
    public void init(@Nullable AttributeSet set){
        mRectSquare = new Rect();
        mPaintSquare = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaintSquare.setColor(Color.RED);
        mPaintSquare.setTextSize(100);
        mBitmap = BitmapFactory.decodeResource(mContext.getResources(), R.drawable.bm_smile);
 
        leftPoint = 500;
        TopPoint = 500;
    }
 
    public void swapColor(){
        mPaintSquare.setColor( mPaintSquare.getColor() == Color.RED ? Color.BLUE: Color.RED);
        postInvalidate();
    }
 
    @Override
    protected void onDraw(Canvas canvas) {
        //canvas.drawColor(Color.GREEN);
 
        mRectSquare.left = 50;
        mRectSquare.top = 50;
        mRectSquare.right = mRectSquare.left + SQUARE_SIZE;
        mRectSquare.bottom = mRectSquare.top + SQUARE_SIZE;
        canvas.drawRect(mRectSquare,mPaintSquare);
        canvas.drawBitmap(mBitmap,leftPoint,TopPoint,null);
        canvas.drawText("seminzzang", 500,150,mPaintSquare);
    }
    //마우스 클릭으로 Bitmap 이동
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                leftPoint = event.getX() - (mBitmap.getWidth()/2);
                TopPoint = event.getY() - (mBitmap.getHeight()/2);
                break;
            case MotionEvent.ACTION_MOVE:
                leftPoint = event.getX() - (mBitmap.getWidth()/2);
                TopPoint = event.getY() - (mBitmap.getHeight()/2);
                break;
            case MotionEvent.ACTION_UP:
                leftPoint = event.getX() - (mBitmap.getWidth()/2);
                TopPoint = event.getY() - (mBitmap.getHeight()/2);
                break;
        }
        invalidate();
        return true;
    }
}
 

CustomView 에서는 drawRect를 이용한 사각형과 , drawText를 이용한 텍스트를 구현하였고, 

Bitmap을 넣어주고 onTouchEvent를 이용해서 터치될 때 Bitmap이 이동하도록 구현했다.

전체 화면에서 CustomView 밑에 ImageView를 하나 구현해서 Matrix이용해 크기와 각도를 조절하는 했다.

크기는 원래 크기의 2배 회전각은 180도로 주었다.

CustomView 초기화면

CustomView 색상 변환

CustomView 비트맵 이동

CustomView를 구현하면서 Bitmap을 Matrix를 통해 크기와 각도를 변환하고 다시 ImageView에 넣어주는 기능을 MainActivity에 구현했는데,

이를 외부 클래스에 구현하려 했으나 실패했다....

이 부분은 더 공부해서 할 수 있는지 없는지 알아내고 구현할 수 있는 부분이라면 새로 구현해야겠다. :)