Android #4 - CompoundButton, RelativeLayout, FrameLayout (국비30일차)

 

 

오늘은 compoundButton과 각종 레이아웃에 대해서 알아보려고 한다.

 

1. CompoundButton

     1. checkbox
     2. toggle  
     3. radiobutton
     4. ratingbar

2. Layout

     1. RelativeLayout
     2. FrameLayout
     3. TableLayout
     4. GridLayout
     5. ConstraintLayout
     6. ScrollView

 

 

 

 

 

위 사진은

레이아웃과 뷰들의 부모 자식 관계를 나타낸 표다.

자식들은 부모를 상속받아 기능을 추가한 것이다.

 

 

 

 

1. CompoundButton

 

우선 간단하게 CompoundButton에 대해서 알아보자.

 

     1. checkbox

체크박스는 여러 개의 선택지 중

내가 원하는 것을 중복으로 선택할 수 있는 것을 말한다.

위의 사진과 같이 코딩을 하면

 

이와 같이 체크 박스가 하나 나타난다.

 

그리고 이런 방식으로 여러 개의 체크박스와

버튼, 텍스트 뷰를 만들면

 

이렇게 생긴 결과물이 나타난다.

 

그런데 체크박스를 클릭하고

확인 버튼을 눌렀을 때

텍스트 뷰에 반응이 오게하려면

리스너 객체를 이용하면 된다.

 

버튼에 setOnClickListener 기능을 사용하며

익명 클래스를 만들어

체크박스가 체크가 된 상태라면

텍스트뷰에 뜨게 한다.

 

하지만 setText를 하는 순간

set의 특성상 하나의 값 밖에 표시되지 않는다.

 

우리가 원하는 상황은

체크한 모든 것이 텍스트뷰에 다 나오는 것이다.

이럴 땐 String 참조변수를 만들고

각각의 체크박스가 체크되면 

그 String 참조변수에 더해지게 만든 후

그 String 참조변수를 setText 해주면 된다.

 

 

체크된 상태로 보이기 checked

그리고 체크박스를 만들 때

아예 체크박스가 체크된 상태로 처음 나타나게 할 수 있는데

checked를 사용하면 된다.

 

java에서도 위와 같은 코드로

똑같이 구현가능하다.

 

 

 

그리고 체크상태가 변경될 때마다 실시간으로

반응하는 리스너를 만들려면

checkedChangeListener라는 특별한 

Listener를 만들어줘야 한다.

리스너를 멤버 함수 형태로 선언해 주고

아까 String 참조변수의 형태를

그대로 복 붙해주면 

체크를 할 때마다

그리고 없앨 때마다

결과창에 결과가 바뀐다.

 

 

     2. toggle  

 

토글은 약간 예전에 많이 썼던

방식으로 누를 때 켜짐과 꺼짐이

번갈아서 나타나는 방식이다.
(요즘은 switch를 많이 씀)

ToggleButton을 xml에 만들어서

꺼졌을 땐 어떤 text가 나오는지

켜졌을 땐 어떤 text가 나오는지 

입력해 주면 

위와 같은 형태가 나타난다.

그리고 setOnCheckedChangeListener은

어떤 compundbutton 이냐에 따라

파라미터가 다르게 나온다.

토글버튼은 불린 자료형의 파라미터를 가진다.

 

 

 

 

     3. radiobutton

 

라디오 버튼은 여러 개의 선택지 중

하나를 선택하는 선택 버튼이다.

라디오버튼을 만들 때 주의해야 할 점은

라디오그룹을 만든 후 그 안에 넣어줘야 한다.
(그중 하나만 선택을 해야 하기에...)

참조변수를 멤버변수로 만들고

onCreate() 안에 그 참조변수를

findViewById를 통해 xml과 연결시켜 주는 것은 

모두 동일하다.

 

그리고 RadioButton 중 선택된 녀석의 글씨를 얻어오려면

getCheckedRadioButton을 사용하여 인트형으로 

받아와서

라디오 버튼객체를 통해 참조하여

이를 텍스뷰에 출력해줘야 한다.

 

 

결과는 위와 같다.

 

 

     4. ratingbar

 

ratingbar는 우리가 아는

평점을 말한다.

처음 rating의 기본값을 정할 수 있고

또 별 만점을 몇 개로 할지도 정할 수 있으며

별점의 단위도 정할 수 있다.
(ex. 0.5개씩 오르게 하거나, 1개씩 오르게 하거나...)

 

다른 뷰들의 이벤트 처리와 같이

객체를 만들고

리스너를 통해

setText를 해주면

쉽게 사용이 가능하다.

별점화면

위는 별점 화면의 예시다.

 

 

 

2. Layout

     1. RelativeLayout

 

이제 여러 Layout에 대해 알아보자.

위와 같이 화면을 구성한다고 했을 때

기존의 LinearLayout으로 하기엔 골치가 아프다.

이럴 때 사용할 수 있는 게 RelativeLayout이다.

이름에서도 알 수 있듯

요소들 간의 상대적인 위치를 따져서

만들 수 있는 레이아웃이다.

 

우선 RelativeLayout을 선언해 준다.

이렇게 버튼을 배치하고 싶다면 어떻게 해야 할까?

엄청 간단하다.

alignParent를 사용하면 된다.

각각 왼쪽, 오른쪽, 위쪽, 아래쪽의 값을 true로 주면 되고

가운데는 centerInParent 값을 주면 된다.

 

 

저 5개의 버튼들을

기준으로 그 옆이나

아래에 버튼들을 추가해 보자.

위와 같은 버튼들을 만들어 볼 것이다.

 

b6는 vertical의 center값을 지니고 있고

부모(여기선 activity)의 오른쪽 값을 줘서

정중앙에서 오른쪽에 위치한 것을 알 수 있다.

 

b7은 below를 사용하여 b1 바로 아래에 자리하게 만들었다.

 

b8은 toRightOf를 사용해 b1 바로 옆에 있게 하였으며

 

b9는 b5(정중앙 버튼)의 바로 위에 있게 하고

수평선 가운데에 있게 했다.

 

그리고 b10은 b5(정중앙버튼) 바로 아래에 있게 설정하고

b5와 서로 왼쪽시작점이 일치하게 적용한 것이다.

 

 

 

 

그리고 원래는 나중에 작성한 뷰가

기존 뷰를 덮는 것이 일반적이지만

Button은 클릭되는 뷰이기에 

만일 image뷰와 겹치더라도 순서 상관없이

앞에 놓이게 된다.

 

화면을 보면

이미지는 버튼 뒤로 가있는 것을 알 수 있다.

 

 

 

     2. FrameLayout

 

FrameLayout은 자식으로 추가된 여러 뷰 중 하나를 

Layout의 전면에 표시할 때 사용하는 

레이아웃이다.

만일 이런 화면이 있고

버튼을 누를 때마다

그 도시에 일치하는 사진이 나오는 앱이 있다고 하자.

 

우선 제일 큰 레이아웃을 LinearLayout으로 설정해 주고

버튼을 3개 만들어준 후

FrameLayout을 만든다.

그리고 3개의 화면을 넣을

각각의 레이아웃을 xml로 만들어주었다.
(2,3번째 화면 레이아웃의 형태는 첫 번째와 같음)

그리고 자바로 와서

버튼을 클릭했을 때 작동하도록

리스너를 만들어준다.

간단하게 생각하면 위와 같이

각 버튼을 클릭했을 때

어떤 것은 켜지고 어떤 것은 gone 되게 설정할 수 있지만

저렇게 코딩을 하면 버튼이 많아졌을 때 

엄청 힘들고 귀찮은 코드가 될 것이다.

하지만 위의 사진처럼

모든 visibility 값을 gone으로 설정하고

각 버튼이 눌렸을 때 

해당버튼만 보이게 하는 코드를 쓰면

훨씬 쉽게 코드를 작성할 수 있다.

 

 

     3. TableLayout

 

이 사진과 같이

일정한 표 같은 레이아웃이 필요할 때

사용하는 레이아웃이다.

TableLayout을 우선 만들어주고

그 안에 TableRow를 만들어준다.

이때 특이한 점은 width, height는 자동으로 설정이 되기에

생략이 가능하다.

그리고 이 Row 안에 내가 원하는 만큼 Button이든

TextView든 추가해 주면 된다.

 

여기서 Layout_span은 몇 칸을 차지할 것인지를 말한다.

 

위의 화면처럼 결과가 나오며

굳이 weight 같은 것을 사용하지 않아도 돼서 편리하다.

 

 

 

     4. GridLayout

 

GridLayout은

TableLayout의 단점을 개선한 레이아웃으로

TableLayout과 비슷하다.(격자 배치)

GridLayout

그렇기에 이렇게 생긴 

레이아웃을 만들 수 있다.

Gridlayout 역시 width, height가 자동으로 설정되어

생략이 가능하며

layout_width를 통해 마음대로 너비를 조절할 수 있다.

또 칸이나 줄의 위치를

layout_row나 layout_column을 통해 설정할 수 있다.

 

그리고 엑셀이나 한글에서 많이 했듯

칸 병합도 가능하며
(layout_columnSpan과 layout_gravity를 이용)

줄 병합도 가능하다.
(위 사진 거의 마지막 부분 줄 병합 참조)

 

 

그리고 칸의 너비를 균등하게 만들어 줄 수도 있다.

여기선 weightsum을 사용하지 않고

columnCount/rowCount를 사용한다.

 

그리고 그 안에서 만든

버튼 혹은 뷰들에 

columnWeight/rowWeight를 주면 된다.

 

위의 사진은 일정하게 columnWeight을

일정하게 부여한 결과다.

 

 

     5. ConstraintLayout

 

 

프로젝트를 처음 만들어

xml파일 code를 열어보면 설정되어 있는 레이아웃이다.

Design모드 사용성을 개선한 것이다.

디자이너 혹은 개발자들이

좌상단의 Palette에서 필요한 뷰 혹은 버튼들을

클릭해서 화면으로 가져다 쓰면 된다.
(이렇게 생각하면 편리..)

하지만 코드에선

각 뷰 혹은 버튼들에

constraint방향.. 등에 대한 작업을 해줘야 한다.

예를 들어 AA라 쓰여 있는 버튼은

constraintleft_toRightOf=b1 버튼으로

설정되어 있다.

자신의 왼쪽이 b1의 오른쪽에 있다는 것을 말하는 것이다.

그럼 center라 쓰여있는 정중앙에 있는 버튼은

자신의 왼쪽이 parent의 왼쪽 부분에 있고

나머지 3방향 역시 해당 방향에 있는 것을 말한다.

그래서 각각의 방향에서 적용되어

위와 같이 가운데에 있는 것이다.

 

그리고 bias를 적용하면

어느 쪽으로 더 치우치게 가능하다. (0~1 사이 값)

(여기선 0.4를 줘서 약간 더 왼쪽에 위치해 있다.)

 

 

     6. ScrollView

 

 

스크롤 뷰는 

우리가 흔히 쓰는 것으로

내용이 많을 때 위아래로 

스크롤하며 많은 정보를 볼 수 있는 형태다.

스크롤 뷰에 자식을 배치할 땐 절대 규칙이 2개가 있다.

1. 자식뷰는 오직 1개만 있어야 하고

2. 높이값은 무조건 wrap_content여야 한다.

 

그러면 자식뷰가 오직 1개면 하나의 콘텐츠만 있어야 하는 건가?

아니다. 그 안에 Linearlayout 같은 것을 넣어서

여러 뷰나 버튼을 넣어주면 된다.

 

그리고 스크롤 뷰는 기본적으로

세로다.

그래서 가로스크롤 뷰가 따로 있다.

HorizontalScrollView가 그것이다.

 

 

그리고 가로 세로 모두 스크롤을 사용할 수 있다.

2개의 스크롤 뷰를 중첩하면 된다.

맨 위는 세로 스크롤뷰(ScrollView)

2번째는 가로 스크롤뷰(HorizontalScrollView)

3번째는 2개를 중첩한 뷰다.