CheeseSquare
새로운 안드로이드 디자인 library 를 활용한 예제이다. 여기에도 tab 이 같이 들어가 있다.
구체적으로 어떤 기능을 제공하는지는 영상을 확인하자.
TabLayout
아래같은 tab 을 사용 해 보자. 예전에 이녀석을 구현하기 위해서 SlidingLayout 등을 사용했는데, 이제는 android 에서 TabLayout 을 제공한다.
구현
- xml 에 TabLayout 과 ViewPager을 넣어주고,
- Activity 에서 TabLayout event 발생시 ViewPager 를 이용하도록 listener 를 설정한다.
- ViewPager 에서는 Fragment 를 호출하는 부분을 만들어 준다.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:id="@+id/main_layout"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.v7.widget.Toolbar
android:id="@+id/rcvr_toolbar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:height="?actionBarSize"
android:background="@color/colorPrimaryDeepDark"
android:theme="@style/ToolbarTheme"
app:popupTheme="@style/ToolbarPopupTheme"
/>
<android.support.design.widget.TabLayout
android:id="@+id/rcvr_tl_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/rcvr_toolbar"
android:background="?attr/colorPrimary"
android:elevation="6dp"
android:minHeight="?attr/actionBarSize"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
<android.support.v4.view.ViewPager
android:id="@+id/rcvr_vp_pager"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_below="@id/rcvr_tl_tabs"/>
</RelativeLayout>
CoordinatorLayout, AppBarLayout 과 함께 TabLayout 사용할 때
AndroidStudio 에서 기본적으로 만들어주는 template 에 CoordinatorLayout 와 AppBarLayout 이 사용된다. 여기에 TabLayout 을 추가하고 싶은 경우에 아래처럼 하면 된다. code는 위의 cheesesquare 에서 가져왔다.<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways|snap" />
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="@dimen/fab_margin"
android:src="@drawable/ic_done" />
</android.support.design.widget.CoordinatorLayout>
PagerAdapter.java
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
public class PagerAdapter extends FragmentStatePagerAdapter {
int _numOfTabs;
public PagerAdapter(FragmentManager fm, int numOfTabs) {
super(fm);
this._numOfTabs = numOfTabs;
}
@Override
public Fragment getItem(int position) {
switch (position) {
case 0:
MyTabFragment1 tab1 = new MyTabFragment1(); // Fragment 는 알아서 만들자
return tab1;
case 1:
MyTabFragment2 tab2 = new MyTabFragment2();
return tab2;
case 2:
MyTabFragment3 tab3 = new MyTabFragment3();
return tab3;
default:
return null;
}
}
@Override
public int getCount() {
return _numOfTabs;
}
}
MainActivity.java
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.rcvr_toolbar);
setSupportActionBar(toolbar);
TabLayout tabLayout = (TabLayout) findViewById(R.id.rcvr_tl_tabs);
tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
final ViewPager viewPager = (ViewPager) findViewById(R.id.rcvr_vp_pager);
final PagerAdapter adapter = new PagerAdapter
(getSupportFragmentManager(), tabLayout.getTabCount());
viewPager.setAdapter(adapter);
viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
viewPager.setCurrentItem(tab.getPosition());
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
}
...
}
댓글 없음:
댓글 쓰기