Android #10 - MaterialDesign (국비36일차)

오늘은 안드로이드 팀이 만들어서 제시한

MaterialDesign의 일부를 알아볼 예정이다.

 

 

◎MaterialDesign

1. Toolbar
2. ActionBarLayout
3. NavigationDrawer
4. TextInputLayout

 

오늘 공부할 것들을

그림으로 표현한 것이다.

 

Toolbar, AppBarLayout, Drawer Layout, TextInputLayout에 

대해서 알아보자.

 

1. Toolbar

기존의 ActionBar를 내가 마음대로 

커스텀하기 위해서는

기존의 액션바를

먼저 제거해야 한다.

 

우선 res - values - themes 폴더 안에 있는

themes.xml을 들어가자.

 

그러면 2번째 줄에 쓰여 있는

<style 줄 끝부분에

DarkActionBar라고 쓰여있는데

 

이를 지우고 NoActionBar로 고쳐주자.

 

그럼 잠시 뒤 미리 보기에서도
(show System UI 보기 설정했을 때)

액션바가 사라진 것을 볼 수 있다.

 

그 후 Toolbar를 찾아서

속성값을 부여한다.
(보통 핸드폰의 툴바의 높이값은 56dp라고 한다.)

 

그 후 자바로 와서

Toolbar를 찾아 참조 변수에 넣어주고

setSupportActionBar를 하여 액션바로 설정해 주자.

 

그럼 우선 내가 커스텀한 것이

툴바로 설정되었다.

 

이제 여기에 메뉴까지 더해보자.

menu 폴더가 따로 필요하니

res를 오른쪽으로 눌러

위의 표시된 항목을 누르자.

 

그리고 Resource type에서 menu를 찾아

menu 폴더를 만들어주자.

그리고 만들어진 menu 폴더에

새로운 파일을 만든다.

 

여기서 내가 추가할

메뉴 아이템들을 넣고
(title 값은 필수!)

 

메인 자바 파일로 와서 

onCreatOptionsMenu 메소드를 만들어

inflater 해주자.

그럼 우측 상단에 옵션까지 나오는 것을

볼 수 있다.

그런데 색이 검은색이어서 잘 보이지 않는다.

그럴 땐 

themes.xml 파일로 다시 가서

아랫부분에 

Customize your theme here 이란 부분 다음에

<item name = "colorControlNormal">을 적고

내가 원하는 색을 넣어준다.

그럼 설정한 대로

 옵션 부분의 색이 표시된다.

 

 

 

 

2. ActionBarLayout

 

위의 영역을 포함하고 있는 부분을

ActionBar라고 할 수 있다.
(Toolbar를 포함하는 약간 더 큰 범위)

이 부분을 아예 내 마음대로 커스텀하고

더 나아가 아래 사진들처럼

탭바도 넣어 원하는 페이지와 연동시켜 보자.

 

 

우선 액션바가 없어야 하니

themes.xml로 가서 

<style 줄 마지막 부분을

NoActionBar로 바꿔주자.

 

 

그 후 액티비티 메인 xml 파일로 와서

내가 원하는 레이아웃으로 설정한 뒤

 

AppBarLayout을 열어준다.

그리고 그 안에 Toolbar를 넣어주고
(이때 height에서 
?attr/actionBarSize 는
알아서 크기를 맞춰주는 코드다.)

탭바도 만들어주자.

tabTextColor는 탭의 기본색

tabSelectedTextColor는 탭이
선택되었을 때의 색

tabIndicatorcolor는 탭바
아랫부분에 나오는 바의 색

tabIndicatorHeight는
탭인디케이터의 두께

tabIndicatorFullWidth는
탭인디케이터가 조그맣게 나올 건지
한 영역을 다 차지 하게 크게 나올 건지
선택하는 것이다.

마지막으로 tabmode에서 scrollable은 탭이 많을 때 옆으로 스와이프 형식으로 보이는 방식이다.

scrollable 모습

 

 

그리고 그 아랫부분에

탭바와 연결할 

ViewPager도 만들어주자.

 

그 후 각각의 탭바와 연결할

fragment들을 만들려고 하는데

이에 대해서 모른다면

2023.02.20 - [Android journey/Android] - Android #9 - ViewPager, Fragment (국비 35일 차)

Android #9 - ViewPager, Fragment (국비35일차)

이 글을 참조하고 오자.

 

자 우선 fragment_tab1. xml을 만들고

2개를 더 복사하자.

 

 

그리고 fragment_tab1번과 연결할

자바 클래스를 만들고

2개를 더 복사해 주자.

 

그다음에 어답터 클래스를 만들어서

fragment 배열에 

Tab1Fragment 객체를 만들어서 넣어주고

아래 2개의 메소드에

각각의 값을 넣어준다.

 

이제 메인 자바파일로 가서

참조변수를 선언해 주고

툴바를 활성화시킨 다음

참조변수들에 뷰를 찾아 넣어주고

setAdapter를 해준다.

 

그리고 탭바의 이름들을 정해서

Sring배열에 넣고

TabLayoutMediator 객체로 탭과 페이저를

연결시켜 준다.
(이때 익명클래스 생성)

그리고 tab에 setText를 하여

각각의 이름을 넣어주고

mediator를 attach() 해주면 끝!

 

 

그럼 이와 같은 앱을 만들 수 있다.

 

 

 

3. NavigationDrawer

 

네비게이션Drawer는

이 화면과 같이 왼쪽 부분이 열리는 것을 말한다.

 

새 프로젝트를 만들고

themes.xml에 들어가

<style 줄 마지막 부분을

NoActionBar으로 바꾸자.

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

내가 원하는 레이아웃으로 설정하고

AppBarLayout과 Toolbar를 만들어주자.

 

그 후 서랍 레이아웃을 만들어줄 차례다.

<DrawerLayout을 만들고

그 안에 1. 콘텐츠 영역, 2. 왼쪽에 숨을 Drawer 레이아웃 영역

꼭! 이 순서대로 만들어줘야 한다.

 

여기서 왼쪽에 숨어있는 Drawer 레이아웃 속성에서는

headerLayout과 menu 쪽을 따로 작업해서 넣어야 한다.

레이아웃 폴더에서 새로 파일을 만들어

내가 원하는 해더 부분 레이아웃을 먼저 설정해 주자.

필자는 위와 같이 설정하였다.

 

그 후 새로 메뉴폴더를 만들어서

위와 같이 옵션의 아이템들을 설정하였다.

이때 sub menu를 가지면

구분선으로 그어져서 구분이 되는데

위와 같이 구분이 된다.

 

미리 보기 상으론 이렇게 나타나지만

정확한 화면이 아니니 

아이템이 잘 추가가 되었나 확인만 하는 용도로 생각하자.

 

그 후 메인 자바 파일로 돌아가서

참조변수를 선언해 주고

툴바를 만들어주고

참조변수에 뷰로 찾아 넣어주자.

 

그리고 DrawaerToggler 버튼 객체를 생성해서

각각의 맞는 값들을 넣어주고

맨뒤 2개의 파라미터엔 Strings.xml에 string을 만들어서

그걸 넣어줬다.

 

그 뒤 setDisplayHomeAsUPEnabled를 통해

이 Drawer을 열 수 있는 버튼을 만들어주고

 

햄버거버튼

SyncState()를 사용해서

뒤로 가기 되어 있는 버튼을

햄버거 버튼으로 바꿔준다.

 

마지막으로 햄버거 버튼을 누르면

뒤로가기 버튼으로 바뀌게

addDrawerlistener를 해주면 끝.

이런 결과물이 나온다.

 

4. TextInputLayout

 

TextInputLayout은

EditText를 좀 더 발전시킨 버전이라고 생각하면 편하다.

 

TextInputLayout의 기본적인 형식은

위와 같이 Layout을 만들고

 그 안에 TextInputEditText를 만드는 것이다.

 

우선 메인 xml에

TextInputLayout을 만들고

style을 TextInputLayout.OutLinedBox로 지정해 보자.

그 후 이름 입력이란 힌트를 주고

helperText도 줘보자.

여기서 countEnabled는 사용자가 입력한 숫자를 세어주는 속성이며

counterMaxLength는 최대 입력 가능한 글자수를 설정하는 것이다.
(단, 글자수가 넘으면 빨간색으로 표시됨) 

 

실행시켜 보면 위와 같이 나오며

글자를 입력하면 안에 있던 hint 문자열이

박스 위로 이동한다.

또 박스 색이 바뀐다.
(이것도 설정가능)

 

그리고 내가 설정한 글자수를 초과하면

빨간색으로 색이 바뀐다.

 

endIconMode

오른쪽에 있는 버튼은 누르면

위의 화면처럼 비밀번호처럼 표시되는데

속성 중에 endIconMode를

password_toggle로 해놓아서 그렇다.

 

endIconMode의 종류

종류에는 위와 같이 5개가 있으며

clear_text 같은 경우

clear_text

누르면 입력한 것을 다 지워버리는 기능을 가졌다.
(다른 기능은 차후에..)

 

 

 

그리고 Spinner를 대체할 수 있는

기능도 가지고 있다.
(사실 style이 너무 많아서 다 설명 불가능...)

TextInputLayout을 만들고

style을 ExposedDropdwonnMenu로 설정하자.

 

그다음 AutoCompleteeTextView를 만들어서

inputType을 none으로 설정하자.

 

그 다음 Spinner처럼 이 안에 넣을

배열을 만들어야 하니

values 폴더 안에 arrays라는 파일을 만들고

 

그 안에 아이템들을 만들어주었다.

 

이제 메인 자바 파일로 와서

참조변수를 선언하고

뷰들을 받아준다.

 

글자를 입력받는 경우 그 글자를 받아오려면

string에 getEditText().getText().tostring()을 넣어주면 된다.

 

스피너를 대체하는

actv에 그 안에 넣을 목록들을 받기 위해

string 배열을 만들어서 아까 작성한 city들을 넣어주고

아답터를 만들고 이를 이용해서

setAdapter를 해주면 된다.

 

 

그럼 위와 같이 Spinner를 대체하는 dropdown 해서 선택하는

뷰를 만들 수 있다.