탭(Tab) 쉽게 만들어 보자
구성을 설명하자면 뼈대가 되는 Activity 위에 Fragment로 화면을 변경해 주는 것이다.
프로젝트를 생성한다. Blank Activity로 생성!
1. gradle의 dependencies에 코드를 추가한다.
dependencies {
compile fileTree(include: ['*.jar'], dir: 'libs')
compile 'com.android.support:appcompat-v7:23.4.0'
compile 'com.android.support:support-v4:23.4.0'
testCompile 'junit:junit:4.12'
compile 'com.android.support:design:25.2.0'
}
2. TabFragment1, TabFragment2, TabFragment3와 BlankFragment 의 이름으로 Fragment 4개를 생성한다.
TabFragment1, TabFragment2, TabFragment3는 화면 전환이 되면 알아 볼 수 있도록 TextView 등을 추가한다.
BlankFragment에는 빈 화면이 되도록 구성한다.
3. MainActivity에 다음과 같이 작성한다.
public class MainActivity extends AppCompatActivity {
private TabLayout tabLayout;
private android.support.v4.app.Fragment fragment;
private android.support.v4.app.FragmentManager fragmentManager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Tab
fragmentManager = getSupportFragmentManager();
// Adding Toolbar to the activity
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
// Initializing the TabLayout
tabLayout = (TabLayout) findViewById(R.id.tabLayout);
tabLayout.addTab(tabLayout.newTab().setText("First"));
tabLayout.addTab(tabLayout.newTab().setText("Second"));
tabLayout.addTab(tabLayout.newTab().setText("Third"));
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
fragment = new TabFragment1();
fragmentManager.beginTransaction().replace(R.id.content_main, fragment).commit();
// Set TabSelectedListener
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
switch (tab.getPosition()) {
case 0:
fragment = new TabFragment1();
fragmentManager.beginTransaction().replace(R.id.content_main, fragment).commit();
break;
case 1:
fragment = new TabFragment2();
fragmentManager.beginTransaction().replace(R.id.content_main, fragment).commit();
break;
case 2:
fragment = new TabFragment3();
fragmentManager.beginTransaction().replace(R.id.content_main, fragment).commit();
break;
default:
fragment = new TabFragment1();
fragmentManager.beginTransaction().replace(R.id.content_main, fragment).commit();
}
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
}
}
4. layout의 activity_main.xml을 다음과 같이 작성한다.
<?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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.sauce.mytablayout.MainActivity">
<!--Custom Toolbar-->
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
<fragment
android:id="@+id/content_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:name="com.sauce.mytablayout.BlankFragment" />
</LinearLayout>
