[안드로이드] 기본위젯과 드로어블

텍스트 뷰

• text 속성에 직접 글자를 넣을 수도 있지만, /res/values 폴더 안에 들어있는 strings.xml에 넣어둔 태그의 값으로 설정할 수 있다
• text 속성의 값으로 @string/태그네임 으로 넣어줄 수 있다. 

위 방식은 다국어를 설정할 때 유용하다.

/res/values-en 폴더와 /res/values-ko 폴더를 만들고 그 안에 strings.xml 파일을 같이 넣어주었다면 @string/name으로 참조하는 글자는 단말의 Locale에 따라 달라집니다. 

단말이 한국어로 설정되어 있다면 /res/values-ko/strings.xml 파일 안에 들어있는 name 태그의 값을 가져옵니다.

---

버튼 

• 텍스트뷰를 상속하여 만들어졌기 때문에 TextView에서 Button으로 바꾸기만 해도 버튼이 화면에 보이게 된다.
• 텍스트뷰의 속성외에 추가적인 기능이나 속성을 가지고 있다.
• 라디오 버튼이나 체크박스 등으로 나누어 사용될 수 있다.
• 라디오 버튼은 라디오그룹을 이용해 하나의 그룹으로 묶어줄 수 있다. ( 체크박스: 중복선택, 라디오버튼:단일선택)

라디오버튼을 그룹으로 만들기

<RadioGroup
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:orientation="horizontal">
  
  <RadioButton
    android:id="@+id/radio1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="남자" />
  <RadioButton
    android:id="@+id/radio2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="여자" />
    
</RadioGroup>

---

EditText (PlainText)

• 텍스트를 입력받고 처리하는 기능을 제공
• inputType을 지정할 수 있다.
• hint 속성을 이용하여 안내글을 표시할 수 있다.

---

이미지 뷰 

• 이미지를 보여준다.
• Drawable폴더에 이미지를 넣을 때 이미지 파일의 이름은 소문자와 특수기호 중 언더스코어만 넣을 수 있다는 점에 주의해야 한다.
• 이미지 파일의 확장자는 jpg, png, gif 등이 가능하며, 그중에서 png형식의 이미지를 권장한다.
• scaleType속성은 이미지가 영역을 꽉 채울 것인지 아니면 이미지 원본의 크기대로 보여줄 것인지 등을 결정하는데 사용된다.

---

뷰가 background속성을 이용하면 배경색을 지정할 수도 있고 /res/drawable 폴더에 넣어둔 이미지 파일을 배경으로 할 수도 있다. 그런데 배경으로 설정하면 이미지는 아무런 변화가 없다. 버튼이 눌렸을 때 눌린 이미지가 보이도록 하고 싶은 경우에는 드로어블을 사용하면 된다.

드로어블을 사용하면 뷰나 화면 일부를 그래픽으로 그리는 기능을 XML로 만들 수 있다.

 

드로어블 ( Drawable )

• Drawable은 뷰에 설정할 수 있는 객체이며 그래픽으로 그릴 수 있다.
• Drawable은 소스 코드에서 만들 수도 있지만 XML로 만들어 사용하는 경우가 많다.
• /res/drawable 폴더에서 우클릭 -> New -> Drawable resource file로 파일을 만들고 코드를 작성한다.
• 이미지 파일을 보여주는 상태 드로어블, 두 개의 드로어블 간에 바뀌도록 만드는 전환 드로어블, 색상과 그라데이션을 포함하여 도형 모양을 정의할 수 있는 쉐이프 드로어블 등이 있다.
• 지정한 거리만큼 안쪽으로 들어오도록 만들 수 있는 인셋 드로어블(InsetDrawable)은 뷰가 실제 범위보다 작은 백그라운드가 필요할 때 유용하게 사용된다.
• 다른 드로어블을 클리핑하는 클립 드로어블은 진행률 표시 줄과 같은 항목을 구현하는데 많이 사용한다.
• 그 외로 다른 드로어블의 크기를 바꿀 수 있는 스케일 드로어블도 있다.

---

상태 드로어블 ( StateListDrawable )

• 뷰의 상태에 따라 보여줄 그래픽을 다르게 지정할 수 있도록 한다.
• 최상위 태그는 <selector>이다.

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true"  
	 android:drawable="@drawable/up_selected" />

    <item android:drawable="@drawable/up" />
</selector>

 

state_ 로 시작하는 속성은 상태를 나타낸다. pressed는 눌린 상태를의미하고 focused는 포커스를 받은 상태를 의미한다.

속성이 지정되지 않으면 drawable 속성에 up이미지가 디폴트 이미지로 보여진다.

<Button
    android:id="@+id/button"
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:background="@drawable/up" />

/res/drawable 폴더 안에 up.xml 을 배경으로 설정하면 적용 된다.

---

쉐이프 드로어블 (Shape Drawable)

• 최상위 태그를 <shape>로 바꾸면 도형 하나를 정의할 수 있다.
• Design탭에서 작성한 모양을 확인할 수 있다.
• shape태그에 shape속성을 이용해 모양을 설정할 수도 있다.
• <stroke>는 테두리 선의 속성을 지정하며, width는 선의 굵기, color는 선의 색상을 설정한다.
• <solid>는 도형의 안쪽을 채울 때 사용한다.
• <gradient>는 그라데이션을 줄 때 사용한다.

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <size android:width="200dp" android:height="120dp"/>
    <stroke android:width="1dp" android:color="#0000ff"/>
    <solid android:color="#aaddff" />
    <padding android:bottom="1dp" />

</shape>

<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <gradient
        android:startColor="#7288DB"
        android:centerColor="#3250B4"
        android:endColor="#254095"
        android:angle="90"
        android:centerY="0.5"
        />

    <corners android:radius="2dp" />

</shape>

 

테두리만 있는 버튼 배경

• 최상위 태그는 <layer-list>이며, 여러 그래픽을 하나의 XML 파일에 넣을 수 있다.
• <layer-list>안에 <item> 태그가 여러개 들어갈 수 있으며, <item>태그 안에는 <shape> 태그가 들어갈 수 있어 각각을 도형으로 정의할 수 있다.
• 버튼의 테두리만 보이게 하는 드로어블을 만들고 싶다면 도형 안쪽을 투명하게 채우고 테두리 선만 색상을 주면 된다.
• 여러 개의 그래픽으로 나누면 그래픽을 중첩시켜서 좀 더 예쁜 배경을 만들 수 있다.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <shape android:shape="rectangle">
            <stroke android:width="1dp" android:color="#BE55DA" />
            <solid android:color="#00000000" />
        </shape>
    </item>

    <item android:top="1dp" android:bottom="1dp" 
          android:right="1dp" android:left="1dp">
        <shape android:shape="rectangle">
            <stroke android:width="1dp" android:color="#BE55DA" />
            <solid android:color="#00000000" />
        </shape>
    </item>

</layer-list>

---

Reference

• https://www.edwith.org/boostcourse-android/joinLectures/13158

[부스트코스] 안드로이드 프로그래밍 강좌소개 : edwith