[2017.12.05] 82. CustomView 개념과 실습

컴퓨터/이론: 안드로이드 2017. 12. 5. 00:20

도입

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

왜 CustomView를 사용할까?

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

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

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

이라고 생각한다.

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

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

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

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<?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>
Colored by Color Scripter
cs

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

실습

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

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

1) Layout의 Background

2) ImageView의 src

3) TextView의 text, textColor

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

1
2
3
4
5
6
7
8
9
10
<?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>
Colored by Color Scripter
cs

옵션으로 해당 View의 style 설정

1
2
3
4
5
6
7
<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>
Colored by Color Scripter
cs

Step2. CustomView Java코드와 Xml 설정

CutomSignButton

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
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); }
 
}
Colored by Color Scripter
cs

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

스크린 샷

추가 코드

    // 기본 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>

#CustomView #CustomView 생성 #CustomView 만들기

저작자표시 비영리 변경금지

'컴퓨터 > 이론: 안드로이드' 카테고리의 다른 글

[2017.12.10] 84. RxJava - Observable 중지 시키기 (0)	2017.12.10
[2017.12.06] 83. 가변적인 JSON 데이터 처리 (0)	2017.12.06
[2017.11.29] 81. NavigationView 개념과 실습 (0)	2017.11.29
[2017.11.23] 78. 안드로이드 개발자 등록 (0)	2017.11.23
[2017.11.23] 77. 안드로이드 Sample Api Demo 코드 (0)	2017.11.23

작성자

Posted by heepie

Oh! Heepie Day!

본문