[안드로이드 스튜디오] Ch5. 위젯과 실습 (Widget & Practice)

2019년 8월 21일 (수)

 

창업의 길로 가기 위한 두번째 걸음, [안드로이드 스튜디오]로 향해보자!

 

*질적으로 많이 부족한 글입니다. 지적 및 조언 환영합니다.

*이 글에선 "안드로이드 스튜디오"를 줄여서 "안스" 라고 표현합니다. 참고 바랍니다.

 

우선, 본인은 학원에서 'JAVA' 기초 수업을 선수강했다. 안드로이드 스튜디오를 배우기 위해선 피할 수 없는 언어이기 때문이다.

(물론 Kotlin 도 있지만, 대한민국에선 아직 JAVA의 파워가 어마어마 하다고..)

 

이번글에서는 디자인 파트의 중요 도구 약 6가지들에 대해 알아보고 마지막으로는 모든것을 실습을 통해 숙지하고자 한다.

 

 

---

<차례>

1. 위젯 알아보기

2. 총정리 실습

---

 

1. 위젯 알아보기

 

(1.1) CheckBox and RadioButton

  우선 '버튼'은 말 그대로 화면에 버튼을 만드는 뷰다. 그리고 안스에서는 이러한 '버튼'의 종류를 정말 다양하게 제공하는데,

그 중에서도 CheckBox와 RadioButton을 알아보자.

 

사진1

 

우선 체크 박스(CheckBox)는 버튼중에서도 유일하게 중복선택이 가능한 버튼이다. 

예를 들어 인터넷 설문조사에 응할때 중복선택이 가능한 질문들을 많이 보았을 것 이다.

그 역할을 해주는 것이 바로 이 '체크박스' 이다.

 

불러오는 방법은 간단한 2가지다: activity_main의 하단쪽 text 또는 design 선택하기.

text 는 CheckBox를 태그해주고, design은 왼쪽에 보이는 도구들 중에서 Button -> CheckBox 를 클릭하여 손수 드레그 해주면 되겠다.

 

사진2

 

다음으로는 라디오버튼(RadioButton) 이다. 라디오버튼은 위의 체크박스와는 다른점이 두가지 있는데,

첫번째! 다중선택이 불가능하다는 점이다. 하나만 체크가 가능해서, 실제로 성별 구분과 같이 획일적으로 선택해야 하는 기능을 넣어줄때 사용된다.

두번째! 그룹핑(grouping)을 해줘야 한다는것이다. 위의 설명대로 중복이 불가능한 만큼, 이 라디오버튼들은 그룹으로 묶어줘야만 그 기능을 정확히 수행할 수 있는 것 이다. 이를 코딩하면

 

사진3

 

이런 모습이 나온다. 라디오버튼이라는 그룹안에 라디오 버튼이 들어가 있는것을 볼 수 있다.

 

(1.2) Android: autoLink:"(option)"

 

사진4

 

사진4를 보면, 같은 웹사이트 '텍스트뷰'임에도 불구하고 다른모습을 볼 수 있는데,

밑의 경우는 우리가 평소 보던 클릭도 가능한 링크의 모습이라면... 위의 경우엔 링크라기보다는 '그냥' 텍스트다.

 

바로 이런 링크적 차이를 만들어주는것이  Android: autoLink:"(option)" 로직이다.

밑의 사진5 코딩을 참고 하자.

 

사진5

 

(1.3) EditText + hint

 글자 그대로 EditText는 "텍스트를 편집한다"는 기능이다. 즉, 사용자가 직접 이 구간에 타이핑을 가능하도록 두는 텅빈 공간이다.

그리고 hint라는 기능도 있는데, 실제 우리의 일생생활 속 어플 또는 웹 사용시, 특히 회원가입시 많이 보았던 기능이다.

예를 들어 아이디: 를 입력하는 공간에서 희색의 희미한 글자로 "아이디를 입력하세요"를 보았을 것 이다. 바로 그거다.

 

사진6

 

밑의 사진7은 위 사진6의 코딩 로직 이다.

 

사진7

 

(1.4) ImageView

 이미지는뷰는 전 글에서도 어느정도(?) 배웠으나, 추가된 내용도 있고 복습겸 올려본다.

 

사진8

 

  (1.4.1) 이미지뷰(ImageView)가 무엇이냐? 이미지를 띄워주는 뷰

 

  (1.4.2) 그런데 이 이미지를 어떻게 가져올 것 인가?  android: src = "@drawable/아이디"

****물론, 이를 위해선 미리 사진파일을 res폴더에 넣어야 한다.

 

  (1.4.3) 사진들의 크기가 제각각 일텐데,  어떻게 조정하는가? maxWidth:maxHeight

 

 

(1.5) ProgressBar

'프로그래스 바'는 진행 수치 같은 것을 보여줄 수 있는 바이다. 종류로는 원형과 바형이 존재한다.

사진9

위 사진9 속 보이는 회색의 긴 바가 '바형 프로그래스바'. 밑에 보이는 빨간색의 원이 '원형 프로그래스바'이다.

예시 사진을 위해 두 TEXT와 DESIGN 면에서 모두 설정해봤지만, 프로그래스바는 DESIGN내 드레그를 통한 수동 설정이 좀 더 편하다.

(1.6)Spinner

스피너란 목록에서 원하는 것을 선택할수 있게 도와주는 도구이다. 

사진10

그런데 사실 스피너를 추가시키면 저렇게 아이템이 뜨지 않을것이다. 그 이유는 스피너는 디자인적 요소일뿐

그안에 리스트를 추가하는건 본인의 몫이기 때문이다. 그럼 저 아이템은 어떻게 추가시키는가?

 

사실 필자도 학원에서 이걸 퀴즈라고 내서 구글링을 해봤는데, (실제론 초보자에게 구글링은 비추랍니다)

여러가지 방법이 많았고, 특히 기능파트로 가서 배열을 선언하는 방법이 가장 많이 쓰이는 듯 하다.

 

그런데 우리는 좀 다른 방식으로 스피너의 리스트를 추가시킬것이다.

바로 res.value.String이다!

 

사진10

저 안에서 아이템을 생성해줄수 있다.

바로 이렇게...

사진11

먼저 string-array 를 추가해주고 그 안에 <style> 태그, 그리고 그 안에 원하는 아이템을 입력해주는 식이다.

사진11

마지막으로는 android:entries="@array/title" 를 이용해서 저장된 리스트를 호출한다.

 

2. 총정리 실습

 이제 위에서 배운 모든 위젯들을 활용해서 특정 뷰를 디자인해보고자 한다. 

이름, 성별, 결혼 여부, 혈액형, 그리고 프로필 사진 등을 위의 위젯들을 적절히 이용해서 표현해보자.

사진12

 

사진12의 코딩은 밑에 붙여 놓았다.

밑을 보기 전 꼭! 스스로 시도 해보자.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
tools:context=".MainActivity">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Name : "
android:textSize="30dp" />

<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="plesase type your name"
android:inputType="text"
android:textSize="20dp" />
</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Gender : "
android:textSize="30dp" />

<RadioGroup
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start|center"
android:orientation="horizontal">

<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="male" />

<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="female" />

</RadioGroup>

</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Married : "
android:textSize="30dp" />

<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="married"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="*if you are not married, do not check this box"/>


</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Blood Type : "
android:textSize="30dp"

/>

<Spinner
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:entries="@array/Blood_Type"

>


</Spinner>

</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
>

<ImageView
android:layout_width="150dp"
android:layout_height="150dp"
android:gravity="center"
android:src="@drawable/profile"

/>

</LinearLayout>

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Add Picture"
android:textSize="15dp"/>


</LinearLayout>


</LinearLayout>

</android.support.constraint.ConstraintLayout>