[Android] FragmentTabhost를 이용한 카카오톡 페이지 만들기

 

안녕하세요. 지난시간에 ViewPager를 이용해 카카오톡 페이지를 만들어 보았습니다.

ViewPager는 간단하고 구현이 편리하다는 장점이 있습니다.

카카오톡 페이지의 모든 면을 보여준 것 같지만 그렇지 않습니다.

 

카카오톡 페이지는 상단 버튼 부분에 아래 현재 위치한 Contents의 위치를 보여주는 상태바가 존재합니다.

ViewPager는 이 기능을 지원하지 않습니다. 개인이 능력이 되서 클릭할때 표시는 가능하겠으나 구현되어있는

오픈소스도 존재하며 편리하게 사용이 가능하게 많이 제공되고 있습니다.

 

오늘 포스팅 내용은 안드로이드에서 FragmentTabhost를 이용하여 카카오톡 페이지를 만들어 보겠습니다.

FragmentTabhost는 위치하고있는 fragment Activity를 보여줍니다.

 

글로 아무리 읽어보아도 실제로 한번 해보는게 좋습니다. 시작합니다.

 

 

1. activitiy_main.xml

 

<?xml version="1.0" encoding="utf-8"?> <android.support.v4.app.FragmentTabHost xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/tabhost" android:layout_width="match_parent" android:layout_height="match_parent" > <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TabWidget android:id="@android:id/tabs" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_gravity="bottom"/> <FrameLayout android:id="@android:id/tabcontent" android:layout_width="fill_parent" android:layout_height="0dp" android:layout_weight="1" /> </LinearLayout> </android.support.v4.app.FragmentTabHost>

 

2. fragment_layout.xml

 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center_horizontal" android:orientation="vertical" android:background="#eaecee"> <TextView android:id="@+id/text" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center_vertical|center_horizontal" android:text="Hello World" android:textAppearance="?android:attr/textAppearanceMedium" /> </LinearLayout>

 

3. MainActivitiy.java

 

import android.support.v4.app.FragmentActivity; import android.support.v4.app.FragmentTabHost; import android.os.Bundle; public class MainActivity extends FragmentActivity { private FragmentTabHost mTabHost; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost); mTabHost.setup(this, getSupportFragmentManager(), android.R.id.tabcontent); mTabHost.addTab( mTabHost.newTabSpec("tab1").setIndicator("Tab 1", null), FragmentTab.class, null); mTabHost.addTab( mTabHost.newTabSpec("tab2").setIndicator("Tab 2", null), FragmentTab.class, null); mTabHost.addTab( mTabHost.newTabSpec("tab3").setIndicator("Tab 3", null), FragmentTab.class, null); } }

 

4. FragmentTab.java

 

import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.TextView; /** * Created by YooJongHyeok on 2017-09-08. */ public class FragmentTab extends Fragment { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View v = inflater.inflate(R.layout.fragment_layout, container, false); TextView tv = (TextView) v.findViewById(R.id.text); tv.setText(this.getTag() + " Content"); return v; } }

 

소스설명은 간단해서 생략하겠습니다.

 

결과입니다.

 

 

 

다음에는 진짜 카카오톡 페이지 같은 PagerSlidingTabStrip를 사용해보겠습니다.

 

오픈소스 라이브러리를 이용한 방법입니다. 되도록이면 PagerSlidingTabStrip를 사용하길 권장합니다.

 

감사합니다.