본문

[2017.12.05] 82. CustomView 개념과 실습

도입 

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


왜 CustomView를 사용할까?

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

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

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

이라고 생각한다. 


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

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

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


이러한 중복 코드를 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>
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>
cs


Step2. CustomView Java코드와 Xml 설정

CutomSignButton

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



스크린 샷

스크린 샷

추가 코드

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 만들기

공유

댓글 0