<안드로이드 액션바 + 탭 구현>
안드로이드에서 제공되는 Action Bar에서 Navigation Tab Mode로 변경하여 제작하는것이 금일 포스팅의 목표입니다. 안드로이드가 요즘 목표가 액션바에 네비게이션 탭을 둬서 유저에게 제공하는 UI를 제공하는거죠. 또한, 프래그먼트 사용을 적극 권장하고 있는 추세인것 같습니다. 다중의 액티비티를 만들어내는 것보다 프래그먼트를 도입하여 하나의 액티비티에서 여러기능들을 수행할 수 있도록 유도하고 있는것 같습니다.
실제로 이러한 움직임은 불과 몇 년전의 web 에서와 비슷하다고 할 수 있는데요. web page 시장도 예전에는 frame이라는 태그가 있었고, 여러 html 파일들로 나뉘어 져있었어요. 그런데 w3c에서 frame 태그를 없애더니 하나의 페이지에서 여러 정보를 전개할 수 있는 ajax등을 권장하고 있는 추세이지요.
아무쪼록 액션바에 네비게이션 탭모드로 설정하고 프래그먼트와 연동하는 안드로이드 실습 포스팅 진행하도록 하겠습니다.
금일 실습해볼 과제의 최종결과물 먼저 보도록 하겠습니다.
두번째 그림은, 첫번쨰 프래그먼트 상태인데 중복으로 눌렀을 경우, 다시한번 선택되었다는 토스트가 뜨도록 구현한 사항입니다. 구현사항이 궁금하시면, MainActivity.java 의 onTabReselected 오버라이드 메서드를 참고하시면 되겠습니다.
먼저 탭이동에 따른 프래그먼트 먼저 생성하겠습니다.
Fragment1.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="First Fragment"
android:textColor="#ff000000"
android:gravity="center" />
</LinearLayout>
|
첫번째 프래그먼트가 생성되었을때, inflate를 전개하는 코드입니다. inflater를 통해서, 전개하는 과정의 코드가 있습니다.
FragmentOne.java
package com.android.jinss.dando;
import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
/**
* Created by PARK on 2017-07-08.
*/
public class FragmentTwo extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment1, container, false);
}
} |
2번째 프래그먼트 xml파일입니다.
Fragment2.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="Second Fragment"
android:textColor="#ff000000"
android:gravity="center" />
</LinearLayout>
|
두번째 프래그먼트가 생성되었을때, inflate를 전개하는 코드입니다.
FragmentTwo.java
package com.android.jinss.dando;
import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
/**
* Created by PARK on 2017-07-08.
*/
public class FragmentTwo extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment2, container, false);
}
}
|
그리고 fragment가 펼쳐질 activty_main.xml을 살펴보시겠습니다.두 fragment가 들어갈 부분을 LinearLayout으로 지정해놓고, id를 fragment로 추가하였습니다.
fragemetOne, Two 프래그먼트가 해당 Id가 fragment인 LinearLayout 부분에 들어가서 전개되는것을 확인하실 수 있습니다.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.android.jinss.dando.MainActivity"
>
<LinearLayout
android:id="@+id/fragment"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout> |
마지막으로 Actionbar.TabListner를 implements하는 MainActivty를 살펴보시겠습니다. Fragment전개 역시 Main에서 합니다.
MainActivtiy.java
package com.android.jinss.dando;
import android.app.ActionBar;
import android.app.Activity;
import android.app.Fragment;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.widget.Toast;
public class MainActivity extends Activity implements ActionBar.TabListener {
Fragment frag1, frag2;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ActionBar ab = getActionBar();
ab.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
//타이틀바는빼고 탭만 보여주기위해 작성.
ab.setDisplayShowTitleEnabled(false);
ab.setDisplayShowHomeEnabled(false);
frag1 = new FragmentOne();
frag2 = new FragmentTwo();
ab.addTab(ab.newTab().setText("Text Fragment")
.setTabListener(this));
ab.addTab(ab.newTab().setText("Image Fragment")
.setTabListener(this));
}
@Override
public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {
ft.replace(R.id.fragment, tab.getPosition() == 0 ? frag1 : frag2);
}
@Override
public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction ft) {
ft.remove(tab.getPosition() == 0 ? frag1 : frag2);
}
@Override
public void onTabReselected(ActionBar.Tab tab, FragmentTransaction ft) {
Toast.makeText(this, "Reselected!", Toast.LENGTH_LONG).show();
}
}
|
액션바에 네비게이션 탭을 add하여 전개하는 코드들을 살펴보았습니다. 근데 하면서, 탭의 height을 늘리고싶었는데 도무지 방법을 모르겠더라구요.
그럴때는 개발자가 직접 custom theme style.xml을 직접 작성하여서 해야하는 것같던데 자세한 방법을 찾아보다가 지쳐서 일단 pending 상태입니다.
혹시 아시는 아이디어가 있으시다면 댓글로 달아주시면 고맙겠습니다. 이상으로 안드로이드 액션바에 네비게이션 tab mode와 fragment 동시 구현에 대한 포스팅을 마치도록 하겠습니다. 감사합니다.
