[Doit! 안드로이드 앱 프로그래밍] ActionBar&Tab

1 분 소요


참고서적: Doit 안드로이드 앱 프로그래밍


앞서 배운 프래그먼트를 응용하여 ActionBar 와 상하단 Tab을 만들어보자.

ActionBar

메뉴에는 옵션메뉴,컨텍스트메뉴,팝업메뉴 들로 구성되는데, ActionBar 속에 옵션메뉴가 포함되어진다. 액션바를 알기전에 옵션메뉴에 대한 간략한 지식이 필요하다.

속성 설명
옵션 메뉴 시스템 ‘메뉴’ 버튼이 눌렷을때 나타나는 메뉴로 각 화면마다 설정할수있는 주요메뉴
컨텍스트 메뉴 화면을 길게 누르면 나타나는 메뉴로 뷰에 설정하여 나타나게함. 텍스트뷰의 편집상태를 바꿀때 사용

보통 점3개로 구성된 아이콘을 누르면 나타나는 부분이 메뉴 이다.

ActionBar는 앱의 상단부분에있는 Title과 Menu로 구성된 작은 Bar이다. 이 작은Bar에 메뉴를 추가시켜 프래그먼트를 응용하여 메뉴에설정된 프래그먼트를 보여줘서 프래그먼트의 전환을 야기하거나 하는등의 이벤트를 발생시켜 UI를 구성할수있다.

Menu 구성하기

  1. Menu 에 해당하는 XML을 만든다.

/app/res 경로에 Menu 폴더를 만들고, main_menu.xml 을 만들어준다. (반드시 이폴더안에 있어야한다.)

< item > 태그로 메뉴속의 각각의 item들을 정의해준다. 그중 대표적인것들을 정리해보자면,

속성 설명
title 옵션의 제목
icon 옵션의 아이콘
showAsAction 언제 보일것인가 혹은 안보일것인가 를 설정

2.onCreateOptionsMenu(Menu menu) 메소드 Override

이메소드는 main_menu.xml을 inflation하는 부분이다. menu의 inflater 객체를 가져오는 메소드인 getMenuInflater()로 inflate()하며, 반환값은 true로 한다.

3.onOptionsItemSelected(MenuItem item)메소드 Override하기

이메소드 에서 파라미터로 받아온 item의 item값들을 가져오기위해 getItemId() 메소드를 변수에 할당하고 그값에따라(메뉴에따라) 원하는 동작을 구현한다.

ActionBar 객체는 getActionBar() 를통해서 객체를 가져올수있다. 가져온 ActionBar 객체에 여러가지 속성들을 지정하는 메소드를 호출하여 타이틀과 메뉴로 구성된 ActionBar를 변화시킬수있다.

Tab

Tab은 네비게이션 위젯이라고 불리기도 하며, 상단과 하단Tab으로 구분한다.

상단Tab

상단Tab은 보통 ActionBar에 Tab기능을 넣어 보여주는 방법으로 제공된다. 상단 Tab을 구현하고 Tab에 들어있는 menu에 따라 하단의 layout에 Fragment의 전환으로 화면을 보여주는 UI를 만들어보자.

  1. main.xml에 AppBarLayout,ToolBar,Tablayout,FrameLayout을 추가한다.
  2. onCreateView() 메소드를 Override 하여 fragment를 inflation한다.
  3. 자바소스파일에서 setSupoortActionBar(Toolbar) 를 하여 Toolbar를 액션바로 설정한다. setSupportActionBar()는 액티비티에 디폴트로 만들어진 액션바가 없을때 동작한다. 하지만 프로젝트를 만들때 액티비티에는 자동으로 테마에 액션바가 설정되어있다. 따라서 테마를 변경하기위해 /app/res/values/styles.xml 을 열고 AppTheme의 name속성을가진 Style태그의 parent에 NoActionBar로 변경한다.

  4. TabLayout 객체를 할당하고, addTab()을통해 탭을 추가한다.
  5. Tab의 selected 리스너를 등록하여 탭이 선택되었을때 프래그먼트가 전환되도록 구성한다. 프래그먼트의 전환은 트렌젝션에서 replace()를 commit() 하면된다.

tab

하단Tab

하단Tab은 별도의 BottomNavigationView 위젯으로 만들수있다. 하단Tab의 ItemSelected 리스너를 등록하여 Tab의 selected에의해 선택된 menu item에 해당하는 프래그먼트로 전환하는 UI를 만들어보자.

  1. main.xml에 BottomNavigationView위젯을 넣어 구성한다.
  2. onCreateView() 메소드를 Override 하여 fragment를 inflation한다.
  3. 자바소스파일에서 BottomNevigationView 객체를만들고 setOnNavigationItemSelectedListner()를 구현하여 이벤트가 발생했을때 프래그먼트의 전환을 야기하도록 구현한다.

tab2

모든 소스코드는 깃허브주소 에 있다.

태그:

카테고리:

업데이트:

댓글남기기