Android #11 - MaterialDesign2 (국비37일차)

 

오늘은 어제에 이어서

MaterialDesign에 대해서 더 공부할 예정이다.

 

 

1. FloatingActionButton
2. SnackBar
3. CoordinatorLayout
4. NestedScrollView
5. CollapsingToolbarLayout
6. BottomNavigation

 

 

 

1. FloatingActionButton

 

아래에 저렇게 생긴 버튼을

종종 본 적이 있을 것이다.

저런 버튼을 FloatingActionButton이라고 한다.

 

만드는 법은 간단하다.

FloatingActionButton을 만들어주고

각종 속성을 넣는다.

이때 width, height는 wrap_content를 권장하고

app:tint="@null" 은 버튼 안에 있는 아이콘의 색을 말한다.
(아이콘을 흰색으로 만들었는데 저걸 입력 안 하면 검은색으로 보임)

 

xml에서 다 쓰고 나서

자바 파일로 이동해서

참조변수를 선언하고

리스너를 까지 만들어주면 끝이다.

 

 

그럼 오른쪽 하단에 있는

floatingButton이 생긴다.

이 버튼은 조금 더 기능이 있는 버전이 있다.

위에 버튼처럼 아이콘에 글자까지 추가할 수 있는 

것이 그것이다.

 

ExtendFloatingActionButton

을 만들고 icon과 text를 추가하면 저거와 같은 버튼이 나타난다.

그리고 자바로 가서

참조변수를 선언하고 뷰를 찾아 넣어준 후

리스너를 사용해서

if문을 이용해

shrink와 extend를 해주면

 

버튼을 눌렀을 때

줄어들었다, 늘었다 하게 된다!

 

2. SnackBar

 

SnackBar는 Toast를 대체할 수 있고

거기에 버튼을 추가할 수 있어서 

사용하는 알림창 같은 것이다.

 

위의 예제에서 이어서 해보자면

아까 만든 fab 리스너에

Toast를 만들듯

Snackbar을 만들어준다.

이때 Length를 길게, 짧게, 영원히로 조절할 수 있는데

영원히로 한 경우 

Snackbar를 끄기 위해서

setAction이라는 기능을 쓰고

리스너를 만들어준다.

 

 

그럼 위와 같이 

FloatingButton을 누르면

Snackbar가 위처럼 뜨게 된다.

 

 

근데 이 스넥바가 버튼 위에 떠서

불편하니 이를 조정해보자.

액티비티 메인으로 와서

레이아웃을

CoordinatorLayout으로 바꿔준다.

 

그럼 이 레이아웃으로 인해서

버튼을 눌렀을 때

Snackbar가 나타나면

버튼은 위로 올라가게 된다.

 

 

 

 

3. CoordinatorLayout

 

CoordinatorLayout이란 

스크롤에 따라 앱바의 변화를 줄 때 사용하는 레이아웃이다.
(수많은 앱에서 사용 중)

 

 

간단하게 예를 들자면

스크롤에 따라

맨 위에 바가 사라지고 생기고 한다.

 

이렇게 앱바를 커스텀하기 위해선 기존 actionBar를 없애줘야 한다.

Themes.xml에 들어가서

<style 줄의 마지막 부분을

NoActionBar로 만들어주자.
(저번 글에 했었다...)

그리고 coordinatorLayout을 설정하고

그 안에 AppbarLayout을 만들고

또 안에 Toolbar와 Button을 만들어주자.

 

그리고 이 속성 중에 

scrollFlags에서 scroll과 enterAlwaysCollapsed를 줘서

스크롤할 때 이 툴바가

사라질 수 있도록 설정하였다.

 

그리고 메인 자바 클래스로 가서

Toolbar를 만들고

setSupportActionBar를 해주면 끝.

 

 

4. NestedScrollView

NestedScrollView는 세로로 스크롤이 가능한 뷰다.

scrollView와 같은 기능을 가졌으나

ScrollView에서 기능과 성능을 발전시킨 버전이라고 생각하면 된다.

 

 

3번 coordinatedLayout에서 사용했던 xml에서 

이어서 한번 예제를 만들어보겠다.

NestedScrollView를 만들고

그 안에 LinearLayout을 만든 후

TextView를 3개 넣었다.

 

이때 NestedScrollView안에 있는 속성 중

layout_behavior에서

scrollingviewbehavior을

만약에 설정하지 않는다면

사진이 잘린 상태로 결과가 나온다.

하지만 그 속성을 가지고 있으면

사진이 잘리지 않는다.
(즉 뷰가 짤리지 않고 나온다.)

 

원래 예전버전에선 이 속성을 안 적으면 안 된다고 

강사님이 그러셨는데 버전업이 되면서

안 써도 이 scroll이 작동은 하게 바뀐 것 같다.

 

3번에서도 말했듯

scrollFlags라는 속성에서 scroll과 enterAlwaysCollapsed를 줘서

스크롤하면 툴바가 위로 사라지는 모습을 볼 수 있다.

 

 

5. CollapsingToolbarLayout

 

이 레이아웃은

스크롤을 위로하면 툴바로 보이고

아래로 하면 확장된 툴바가 보이는 레이아웃이다.
(여기 어때 앱에서도 사용!)

 

CollapsingToolbarLayout 사용 모습

 

액션바를 커스텀해야 할 땐

themes.xml로 가서 NoActionBar로 바꿔주는 것 잊지 말자.

그리고 액티비티 메인 xml로 이동해

CoordinatorLayout으로 레이아웃을 설정하자.

 

그다음 AppBarLayout을 만들고

그 안에 CollapsingToolbarLayout을 만들어준다.

이제 이안엔 내가 넣고 싶은 이미지라든가

원하는 뷰를 넣고

툴바까지 만들어주면 된다.

 

그 후 메인 자바 파일로 toolbar 참조변수를 만들어

뷰를 넣고 

setSupportActionBar를 해주면 된다.

분명 미리 보기에선 툴바가 저렇게

statusbar 바로 아래에 위치할 것이다.

하지만 run 시켜보면

title이 이 레이아웃 아랫부분에 뜬다.

 

이게 이 레이아웃에 가장 큰 특징이다.

 

타이틀의 색이 검은색이라서 잘 보이지 않으니

이를 고쳐보자.

 

이를 고치기 위해선

따로 속성값으로 부여하는 것이 아니라

내가 색을 xml으로 지정해줘야 한다.

themes 폴더 안에 있는

themes.xml로 들어가자.

그리고 기존 <style>이 끝나는 다음 부분에

내가 커스텀한 앱바레이아웃만의 스타일 테마를 만들어줘야 한다.

이 스타일을 appbar라고 명명하고

item을 만들어 titletextcolor를 white 값으로 주자.

 

이 외에도 앱바 레이아웃 안에 툴바를 넣었을 때 색상과

옵션메뉴 아이템의 글씨 색상등도 설정할 수 있다.

 

이제 이렇게 작성한 style을

액티비티 메인 xml로 와서

앱바레이아웃에 

theme속성을 이용해서 넣어주자.

 

 

이러면 스크롤을 내린 상태면 확장된 UI화면으로

스크롤을 위로하면 기존의 툴바 모습으로 설정이 가능하다.
(보통 이 레이아웃은 relativeLayout이나 NestedScrollView랑 쓰인다.)

 

 

 

6. BottomNavigation

 

바텀 내비게이션은 흔히

앱에서 볼 수 있는 것으로

사용자의 앱 내 페이지 이동을 편리하게 해주는 역할을 한다.

우선 액티비티 메인 xml로 가서

내가 사용할 레이아웃으로 설정을 하자.

그리고 Fragment가 놓일 뷰그룹을 넣고

그 아래 탭 버튼 뷰를 넣기 위해

BottomNavigationView를 만들어주자.

이때 menu 역시 넣어줘야 하는데

따로 xml로 작업해야 한다.

 

새로 menu라는 Resource Directory를 만들어서

bnv라는 xml을 만들었다.

그리고 여기서 item을 넣어줬다.

 

여기서 명심해야 할 부분은

내비게이션바에 최대 5개까지만 메뉴아이템이 가능하며

3~5개를 만들길 권장한다고 한다.

 

그리고 다시 액티비티 메인으로 와서

menu에 방금 만든 bnv를 넣어준다.

 

그럼 미리 보기에 위 화면처럼

탭이 생길 것이다.

 

하지만 마음대로 컬러 설정이 힘들다.

이를 제어하기 위해서

color라는 새로운 디렉터리를 만들고

 

그 안에 xml파일을 만들어줬다.

 

이 컬러 xml 파일 안에

item들을 넣어주면 되는데

 

이 속성 중에 state_selected는 선택되었을 때와 그렇지 않을 때를

나누는 속성이다.

이 속성으로 지금 선택된 탭의 색과

아닌 탭의 색을 설정할 수 있다.

 

color를 설정하고

itemTextColor과 itemIconTint 속성에

위에서 만든 xml파일을 넣어주자.

그리고 labelVisibilityMode에서 selected를

선택해 주면

선택한 탭의 라벨만 나오게 된다.

 

미리 보기 화면에서도

잘 작동하고 있다.

 

 

이제 내비게이션의 각 탭과 화면을 맞추기 위해

레이아웃 폴더를 눌러 새로운 레이아웃 xml을 만들고

 

이를 복사해서 3개를 만든다.
(내비게이션 바가 3개니까)

 

그리고 자바 클래스 역시

만들어서

inflate 시키고

복사해서 3개를 만든다.

 

그 후

메인 자바 클래스로 가서

참조변수를 선언하고

처음 시작할 때 Fragment를 먼저 보여주는 코드를 작성한다.

getSupportFragmentManager().beginTransaction().add().commit(); 

그 후

bnv(바텀네비게이션 뷰)에 뷰를 넣고

setOnItemSEelectedListener를 만든다.

그 안에 if문을 이용해

getSupportFragmentManager().beginTransaction().replace().commit(); 

문을 써주고

 

return 값으로 true를 주면 된다.
(true로 하지 않으면 변경되는 UI가 반영되지 않음)

 

Run을 하면 위의 결과물이 나오는 것을 볼 수 있다.

 

이렇게 하단 내비게이션 바와 탭을 연결한 '틀'을 완성했다.

만약 더 필요하다면 이 안에 다른 Fragment를 넣으면 된다.!