[build.gradle]
아래 내용 추가
dependencies {
compile fileTree(include: ['*.jar'], dir: 'libs')
testCompile 'junit:junit:4.12'
compile 'com.android.support:appcompat-v7:23.4.0'
compile 'com.android.support:design:24.0.0'
}
[styles.xml]
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
</resources>
[tab_fragment_1.xml] 2~3도 생성 필요
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="This is Tab 1111"
android:textAppearance="?android:attr/textAppearanceLarge"/>
</RelativeLayout>
[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="org.example.farmkim.tabbase02.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" />
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
[TabFragment1 ~ 3]
- 아래는 1만 존재 2,3을 생성해서 하면 됨
package org.example.farmkim.tabbase02;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
/**
* Created by Junyoung on 2016-06-23.
*/
public class TabFragment1 extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
return inflater.inflate(R.layout.tab_fragment_1, container, false);
}
}
[MainActivity]
package org.example.farmkim.tabbase02;
import android.graphics.Color;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.util.Log;
public class MainActivity extends AppCompatActivity {
private TabLayout tabLayout;
private ViewPager viewPager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//-----------------------------------------------------------
// Adding Toolbar to the activity
//-----------------------------------------------------------
// 아래 두 문장이 있어야 상단 toolbar 영역에 title이 조회 됨
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setTitle("farmer Toolbar"); //Toolbar title명
toolbar.setTitleTextColor(Color.BLUE); //타이틀 글자 색
toolbar.setSubtitle("난 sub title"); //타이틀 아래 작은 글씨로 부제목 표시
toolbar.setSubtitleTextColor(Color.MAGENTA); //부제목의 글자색
toolbar.setNavigationIcon(R.mipmap.ic_launcher); //좌측에 메뉴(네비게이션)아리콘 설정
setSupportActionBar(toolbar);
//-----------------------------------------------------------
// Tab 추가
// Initializing the TabLayout
//-----------------------------------------------------------
tabLayout = (TabLayout) findViewById(R.id.tabLayout);
tabLayout.addTab(tabLayout.newTab().setText("Tab One"));
tabLayout.addTab(tabLayout.newTab().setText("Tab Two"));
tabLayout.addTab(tabLayout.newTab().setText("Tab Three"));
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
//-----------------------------------------------------------
// Initializing ViewPager
//-----------------------------------------------------------
viewPager = (ViewPager) findViewById(R.id.pager);
// Creating TabPagerAdapter adapter
TabPagerAdapter pagerAdapter = new TabPagerAdapter(getSupportFragmentManager(), tabLayout.getTabCount());
// 이때 첫번째 tab에 대한 page가 조회 됨
// viewPager.setAdapter() : 메소드는 ViewPager에 pagerAdapter를 연결시켜준다.
// 질문 : 그런데, 맨 처음 왜 첫번째페이지가 조회 되는지 모르겠음 ????
viewPager.setAdapter(pagerAdapter);
// 주석 처리 해도 현재 플젝에서는 정상작동
// addOnTabSelectedListener()가 먼저 수행되고 addOnPageChangeListener()가 수행 됨
// 상세설명 : http://itpangpang.tistory.com/290
viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout)
{
/*
스크롤 효과가 나는 동안 계속해서 호출되는 부분이다
position(0) = 첫번째 탭이었다가
position(1) = 두번째 탭으로 이동되는 순간1로 변한다.
*/
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels)
{
Log.d("ITPANGPANG","onPageScrolled : "+position);
}
/*
이 놈은 포지션(페이지 위치)과는 전혀 상관이 없다.
위의 로그찍은걸 보면 매개변수값으로 state값을 받는다.
그냥 페이지의 상태자체입다.
state는(0,1,2) 총 3가지 값이 존재합니다.
0 : SCROLL_STATE_IDLE
1 : SCROLL_STATE_DRAGGING
2 : SCROLL_STATE_SETTLING
IDLE = 뜻은 가동되지 않은(즉 종료시점이라고 볼 수 있다.)
DRAGGING = 뜻 그대로 드래그 되고 있다(Swipe 될 때 호출됩니다. 조금 있다가 확인)
SETTLING = 뜻은 고정(정해졌다)이라는 뜻
사용자가 Swipe로 화면을 끄는것이 아니라서 1(DRAGGING)은 찍히지 않는다.
0 -> 2 : 두번째 탭을 누르는 순간 탭은 확실히 2번째라고 결정났으니
(0을) 먼저 찍어주고 그 다음 가동이 종료되면 (남은 페이지 넘어가는효과(스크롤되는중)가 없는 순간) 2번을 찍어준다.
*/
@Override
public void onPageScrollStateChanged(int state)
{
Log.d("ITPANGPANG","onPageScrollStateChanged : "+state);
}
/*
역시나 Log찍은 코드를 보면 매개변수로 position을 받는다.
즉, 선택된 페이지를 알려준다.
Log를 보면 onPageScrollStateChanged : 2 -> 바로 다음에 onPageSelected : 1 가 찍힌 것을 확인 할 수 있다.
onPageSelected는 ScrollStateChanged = 2라고 결정난 후에야 호출된다.
2라는 뜻이 무조건 그 페이지가 선택되었다
고정(정해졌다)이라는 뜻이므로 그때서야 포지션에 맞게 로그를 찍어주는 것이다.
(단 Swipe가 아닌 선택으로 넘겼을때)
*/
@Override
public void onPageSelected(int position)
{
Log.d("ITPANGPANG","onPageSelected : "+position);
}
});
// Set TabSelectedListener
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
//새로운 tab을 클릭 시 호출 됨
//이때 ViewPager에 새로운 페이지를 보여줌.
@Override
public void onTabSelected(TabLayout.Tab tab) {
Log.d("ITPANGPANG","---onTabSelected : "+tab.getPosition());
//Toast.makeText(getApplicationContext(), "onTabSelected 11 ", Toast.LENGTH_SHORT).show();
viewPager.setCurrentItem(tab.getPosition());
}
//다른 tab을 클릭 시 호출 됨 (신규 tab에 대한 onTabSelected()메소드 호출 전에 아래 메소드가 먼저 호출 됨)
@Override
public void onTabUnselected(TabLayout.Tab tab) {
//Toast.makeText(getApplicationContext(), "onTabUnselected 22", Toast.LENGTH_SHORT).show();
Log.d("ITPANGPANG","---onTabUnselected : "+tab.getPosition());
}
//현재 활성화 되어 있는 tab을 클릭 시 호출
@Override
public void onTabReselected(TabLayout.Tab tab) {
//Toast.makeText(getApplicationContext(), "onTabReselected 33", Toast.LENGTH_SHORT).show();
Log.d("ITPANGPANG","---onTabReselected : "+tab.getPosition());
}
});
}
public static class TabPagerAdapter extends FragmentStatePagerAdapter {
// Count number of tabs
private int tabCount;
public TabPagerAdapter(FragmentManager fm, int tabCount) {
super(fm);
this.tabCount = tabCount;
}
@Override
public Fragment getItem(int position) {
// Returning the current tabs
// - tab 갯수 만큼 case문장도 동일해야 됨. 그렇지 않으면 [viewPager.setAdapter(pagerAdapter);]에서 오류 발생
// case비교값도 0,1,2,3... 와 같이 순차적이여야 함.
// - 느낌이 [viewPager.setAdapter(pagerAdapter);]할때 getItem()메소드를 tabCount만큼 수행하는거 같음
// 즉, Fragment 를 모두 만들어 놓음
// 그런후, onTabSelected(TabLayout.Tab tab) -> viewPager.setCurrentItem(tab.getPosition())를 하게 되면 화면이 변경 됨
switch (position) {
case 0:
TabFragment1 tabFragment1 = new TabFragment1();
return tabFragment1;
case 1:
TabFragment2 tabFragment2 = new TabFragment2();
return tabFragment2;
case 2:
TabFragment3 tabFragment3 = new TabFragment3();
return tabFragment3;
default:
return null;
}
}
@Override
public int getCount() {
return tabCount;
}
}
}
