투폭네

출처 : http://www.edwith.org/boostcourse-android/lecture/20420/

상태 드로어블

상태 드로어블은 뷰의 상태에 따라 뷰에 보여줄 그래픽을 다르게 지정할 수 있도록 합니다.

/res/drawable 폴더 안에 새로운 XML 파일을 만들면 최상위 태그는 <selector>가 됩니다.

그 안에 <item> 태그를 넣을 수 있으며 drawable 속성에는 이미지나 다른 그래픽을 설정하여 화면에 보이도록 할 수 있습니다.

state_ 로 시작하는 속성은 상태를 나타내는데 예를 들어 state_pressed 속성은 눌린 상태를 의미하고 state_focused는 포커스를 받은 상태를 의미합니다.

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

    <item android:state_pressed="true"  
android:drawable="@drawable/ic_thumb_up_selected" />

    <item android:drawable="@drawable/ic_thumb_up" />

</selector>

상태 속성이 지정되지 않은 <item> 태그에는 drawable 속성에 ic_thumb_up 이미지가 설정되어 있으므로 디폴트 이미지로 보이게 됩니다.

state_pressed 속성이 설정된 <item> 태그에는 ic_thumb_up_selected 이미지가 설정되어 있으며 이 이미지는 뷰가 눌렸을 때 보이게 됩니다.

이렇게 만든 XML 파일은 뷰의 background 속성으로 설정될 수 있습니다.

/res/drawable 폴더 안에 thumb_up.xml 이라는 이름의 파일을 만들었다면 다음과 같이 버튼의 배경으로 설정할 수 있습니다.

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

생각해보기

1. 소스 코드로 드로어블을 만드는 것보다 XML로 드로어블을 만들어 사용하면 얼마나 더 편리해지는 걸까요?
   - 확실히 편하다. 소스에서 조건문을걸거나 그럴필요없이 바로 xml에서 할수 있기 때문에 한눈에 알아보기 편하다.
2. XML로 드로어블을 만들고 레이아웃의 배경으로 설정하면 카드 모양의 배경을 만들 수 있을까요?
   - 카드모양이라는게 명확하지는않지만 패턴이있는 무늬모양이라면 가능할것 같다.

출처 : http://www.edwith.org/boostcourse-android/lecture/17045/

텍스트뷰 (TextView)

프로젝트를 처음 만들었을 때부터 화면 레이아웃 안에는 텍스트뷰가 들어 있습니다.

텍스트뷰는 화면에 글자를 표시하도록 해줍니다.

텍스트뷰에 글자를 표시할 때는 text 속성에 직접 글자를 넣어줄 수도 있지만 /res/values 폴더 안에 들어있는 strings.xml 파일 안에 넣어둔 태그의 값으로 설정할 수도 있습니다.

다음과 같이 name 속성의 값을 strings.xml 파일 안에 넣어줍니다.

<resources>
  <string name="name">John</string>
</resources>

그러면 텍스트뷰의 text 속성 값으로 @string/name 을 넣어줄 수 있습니다.

이 방식은 다국어를 설정할 때도 유용합니다.

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

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

텍스트뷰에는 text속성과 함께 textColor, textSize, textStyle 속성도 많이 사용됩니다.

버튼 (Button)

버튼은 텍스트뷰를 상속하여 만들어졌기 때문에 XML 레이아웃에 들어있는 태그의 이름을 TextView에서 Button으로 바꾸기만 해도 버튼이 화면에 보이게 됩니다.

즉, 버튼은 텍스트뷰의 속성을 모두 가지고 있으면서 추가적인 기능이나 속성을 더 가지고 있습니다.

버튼은 다시 라디오버튼(RadioButton)이나 체크박스(CheckBox) 등으로 나누어 사용될 수 있습니다.

그중에서 라디오버튼은 라디오그룹(RadioGroup)을 이용해 하나의 그룹으로 묶어줄 수 있습니다.

남자와 여자를 선택하는 라디오버튼을 화면에 넣고 싶다면 다음과 같이 그룹으로 묶어줍니다.

<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)

에디트텍스트는 입력상자의 역할을 합니다.

사용자가 입력한 글자를 받고 처리하는 기능을 제공하므로 상당히 많이 사용됩니다.

이 위젯에서 많이 사용되는 속성으로 inputType을 들 수 있습니다.

inputType은 어떤 유형의 글자를 입력할 지를 결정하는 속성으로 이 속성을 어떤 값으로 설정했는가에 따라 키패드의 형태가 달라집니다.

hint 속성을 설정하면 글자를 입력하지 않았을 때 희미하게 보이는 안내글을 표시해줍니다.

<EditText
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:inputType="number"
  android:hint="아이디" />

이미지뷰 (ImageView)

이미지뷰는 이미지를 보여줍니다.

프로젝트의 res 폴더 안에는 drawable 폴더가 들어있는데 이 폴더 안에 이미지 파일을 넣고 이미지뷰에 설정할 수 있습니다.

Drawable 폴더에 이미지를 넣을 때 이미지 파일의 이름은 소문자와 특수기호 중 언더스코어(_)만 넣을 수 있다는 점에 주의해야 합니다. 이미지 파일의 확장자는 jpg, png, gif 등이 가능하며 그중에서 png 형식의 이미지를 권장합니다.

예를 들어, drawable에 넣은 이미지 파일의 이름이 house.png라면 다음과 같이 src 속성으로 설정할 수 있습니다.

android:src="@drawable/house"

scaleType 속성은 이미지가 이미지뷰가 가지는 영역을 꽉 채울 것인지 아니면 이미지 원본의 크기대로 보여줄 것인지 등을 결정하는 데 사용됩니다. 직접 scaleType 속성의 값을 이것저것 바꾸어가면서 화면에 보이는 결과를 확인해보세요.

생각해보기

1. 다른 사람들이 Play스토어에 올려놓은 앱의 화면에서 볼 수 있는 버튼이나 텍스트뷰에는 얼마나 많은 속성이 
   설정되어 있을까요?
   -쉬운 버튼은 가볍게 몇개정도만 되어있을수있지만 가능한속성값들이 엄청나게 많기때문에 그에따라서 또 다를것 같다.
2. 버튼의 background 속성을 이용해 배경으로 이미지를 설정하면 이미지뷰의 src 속성을 이용해 
   이미지를 보여주었을 때와 다른 점이 있을까요?
   - 다음에 수정이 필요할때 수정하는방법에서 차이가 나는것 같다. 버튼자체를 수정하는것과 이미지뷰자체를 수정하는것
3. 원본 이미지의 해상도가 각각 다른 여러 이미지를 하나의 이미지뷰에 번갈아 가면서 보여주려 할 때 
   이미지뷰의 scaleType 을 어떻게 설정해야 제대로 보여줄 수 있을까요?
   -fitCenter를 이용하여 해주면 가운데에서 딱맞게 fit을 해주어서 잘 보여줄수 있을것 같다.