[2017.12.05] 82. CustomView 개념과 실습

도입 

이번 포스팅에서는 개발자의 의도대로 생성하는 CustomView를 알아보고 CustomView를 생성하는 방법을 실습할 예정이다.

왜 CustomView를 사용할까?

말 그대로이다. CustomView를 사용하는 이유는 

1) 안드로이드에서 제공하는 View 외에 개발자의 의도에 따라 자신만의 View를 만들기 위함

2) 해당 View를 반복해서 사용 할 경우, 코드 중복을 방지하기 위함

이라고 생각한다. 

CustomView를 사용하지 않을 경우 문제점 - 코드 중복

현재 개발하고 있는 앱에서 로그인 기능이 필요하다. 그래서 로그인 기능을 아래와 같이 만들었다. 

그러나 코드를 확인하게 되면 같은 코드가 많이 중복되는 것을 확인할 수 있다.

<?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"
    android:orientation="vertical"
    android:gravity="center"
    tools:context="com.heepie.customview.MainActivity">
    // 코드 중복
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center"
        android:layout_margin="4dp"
        android:padding="4dp"
        android:background="@color/google_bg"
        >
        <ImageView
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@drawable/google"
            />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:text="Sign in with Google"
            android:textColor="@color/google_red"
            android:layout_gravity="center"
            android:textStyle="bold"
            />
    </LinearLayout>
    // 코드 중복
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center"
        android:layout_margin="4dp"
        android:padding="4dp"
        android:background="@color/face_bg"
        >
        <ImageView
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@drawable/facebook"
            />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:text="Sign in with Facebook"
            android:textColor="@color/face_while"
            android:layout_gravity="center"
            android:textStyle="bold"
            />
    </LinearLayout>
    // 코드 중복
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center"
        android:layout_margin="4dp"
        android:padding="4dp"
        android:background="@color/email_bg"
        >
        <ImageView
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@drawable/email"
            />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:text="Sign up with Email"
            android:layout_gravity="center"
            android:textStyle="bold"
            android:textColor="@color/colorBlack"
            />
    </LinearLayout>
</LinearLayout>

이러한 중복 코드를 CustomView와 View Attribute(속성)로 해결 할 수 있다.

실습

Step1. 중복되는 속성 Attribute로 설정하기

해당 코드를 확인하면 로그인 레이아웃에서 변수는

1) Layout의 Background

2) ImageView의 src

3) TextView의 text, textColor

이며 나머지 코드는 동일하다. 그렇다면 해당 코드를 Attribute로 설정해보자.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- Reference는 "@string/.."과 같은 참조값을 의미 -->
    <declare-styleable name="SignBtn">
        <attr name="bg" format="reference|integer" />
        <attr name="imgSrc" format="reference|integer" />
        <attr name="text" format="reference|string" />
        <attr name="textColor" format="reference|integer" />
    </declare-styleable>
</resources>

옵션으로 해당 View의 style 설정

<style name="SignBtnStyle">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:orientation">horizontal</item>
    <item name="android:gravity">center</item>
    <item name="android:layout_margin">4dp</item>
</style>

Step2. CustomView Java코드와 Xml 설정

CutomSignButton

public class CustomSignButton extends LinearLayout {
    LinearLayout background;
    ImageView imgView;
    TextView text;
 
    public CustomSignButton(Context context) {
        super(context);
        initView();
    }
 
    public CustomSignButton(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        initView();
        getAttrs(attrs);
    }
 
    public CustomSignButton(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView();
        getAttrs(attrs, defStyleAttr);
    }
 
    private void initView() {
        LayoutInflater inflater 
                = (LayoutInflater) getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View view = inflater.inflate(R.layout.custom_sign_btn, this, false);
 
        addView(view);
 
        background = findViewById(R.id.background);
        imgView = findViewById(R.id.imgView);
        text = findViewById(R.id.text);
    }
 
    private void getAttrs(AttributeSet attrs) {
        TypedArray typedArray = getContext().obtainStyledAttributes(attrs, R.styleable.SignBtn);
        setTypeArray(typedArray);
    }
 
    private void getAttrs(AttributeSet attrs, int defStyle) {
        // 3번째 인자는 해당 View의 스타일, 4번째 인자는 Style에 대한 Default 값
        TypedArray typedArray 
                = getContext().obtainStyledAttributes(attrs, R.styleable.SignBtn, defStyle, 0);
        setTypeArray(typedArray);
    }
 
 
    // Attribute를 해당 View에 설정하는 메소드
    private void setTypeArray(TypedArray typedArray) {
        // 1. typeArray에 전달 받은 값을 꺼낸다. (2번째 인자는 디폴드 값)
        int bg_resId = typedArray.getResourceId(R.styleable.SignBtn_bg, R.color.email_bg);
 
        // 2. 꺼낸 값 설정
        background.setBackgroundResource(bg_resId);
 
        int imgView_resId = typedArray.getResourceId(R.styleable.SignBtn_imgSrc, R.drawable.email);
        imgView.setImageResource(imgView_resId);
 
        int textColor = typedArray.getColor(R.styleable.SignBtn_textColor, 0);
        text.setTextColor(textColor);
 
        String text_value = typedArray.getString(R.styleable.SignBtn_text);
        text.setText(text_value);
 
        // typedArray를 재사용하기 위한 설정
        typedArray.recycle();
    }
 
    void setBg(int bg_resId) { background.setBackgroundResource(bg_resId); }
 
    void setImgView(int img_resId) { imgView.setImageResource(img_resId); }
 
    void setTextColor(int color) { text.setTextColor(color); }
 
    void setText(String text_string) { text.setText(text_string); }
 
    void setText(int text_resId) { text.setText(text_resId); }
 
}

Custom_sign_btn.xml (CustomView에서 Default로 사용하는 xml)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    android:id="@+id/background"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:gravity="center"
    android:padding="4dp"
    >
 
    <ImageView
        android:id="@+id/imgView"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:src="@drawable/google"

        />
 
    <TextView
        android:id="@+id/text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:text="Sign in with Google"
        android:textColor="@color/google_red"
        android:layout_gravity="center"
        android:textStyle="bold"
        />
 
</LinearLayout>

스크린 샷

스크린 샷

추가 코드

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40     // 기본 Layout으로 생성 X 3     <LinearLayout         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:orientation="horizontal"         android:gravity="center"         android:layout_margin="4dp"         android:padding="4dp"         android:background="@color/email_bg"         >           <ImageView             android:layout_width="30dp"             android:layout_height="30dp"             android:src="@drawable/email"             />           <TextView             android:layout_width="match_parent"             android:layout_height="wrap_content"             android:layout_marginLeft="10dp"             android:layout_marginRight="10dp"             android:text="Sign up with Email"             android:layout_gravity="center"             android:textStyle="bold"             android:textColor="@color/colorBlack"             />       </LinearLayout>       // CustomView로 생성     <com.heepie.customview.CustomSignButton         style="@style/SignBtnStyle"         app:bg="@color/google_bg"         app:imgSrc="@drawable/google"         app:text="CustomView"         app:textColor="@color/google_red"         >     </com.heepie.customview.CustomSignButton> cs

#CustomView #CustomView 생성 #CustomView 만들기