16. TabLayout(ViewPager 사용) 구현

TabLayout  구현

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="kr.co.devatom.mytablayout1">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.AppCompat.NoActionBar">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

: android:theme 를  NoActionBar로 설정하자. Toolbar 를 actionBar로 이용하기 위함 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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/toolbar"
        android:background="@android:color/holo_blue_dark"
        android:layout_width="match_parent"
        android:layout_height="50dp"/>

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_below="@+id/toolbar"
        android:background="@android:color/holo_blue_dark"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_below="@+id/tabs"
        android:background="@android:color/white"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</RelativeLayout>

: android.support.v7.widget.Toolbar 는 ActionBar를 더욱 유연하게 만든 것이다. 레이아웃 파일 내에서 다른 UI 요소와 함께 배치할 수 

있기 때문이다. 

Toolbar 와 ViewPager 를 연계하고 연결은 자바코드로 한다. 

public class MainActivity extends AppCompatActivity {

    Toolbar mToolbar;
    TabLayout mTabLayout;
    ViewPager mViewPager;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mToolbar = findViewById(R.id.toolbar);
        mTabLayout = findViewById(R.id.tabs);
        mViewPager = findViewById(R.id.viewpager);


        // Toolbar를 ActionBar로써 이용
        final MyFragmentPagerAdapter adapter = new MyFragmentPagerAdapter(this, getSupportFragmentManager());
        mViewPager.setAdapter(adapter);
        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                // 페이지가 스크롤됐을 때
            }

            @Override
            public void onPageSelected(int position) {
                // 페이지가 선택됐을 때
            }

            @Override
            public void onPageScrollStateChanged(int state) {
                // 페이지가 스크로 상태
            }
        });

        mTabLayout.setupWithViewPager(mViewPager);

        //아래 설정으로도 TabLayout과 ViewPager를 연결할 수 있습니다
        //mTabLayout.setTabsFromPagerAdapter(adapter);
        //mViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(mTabLayout));
        //mTabLayout.setOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(mViewPager));

        // 탭 레이아웃에 탭을 설정(ViewPager를 이용하지 않는 경우)
        // mTabLayout.addTab(mTabLayout.newTab().setText(R.string.tab_label1));
        // mTabLayout.addTab(mTabLayout.newTab().setText(R.string.tab_label2));
        // mTabLayout.addTab(mTabLayout.newTab().setText(R.string.tab_label3));

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.action_settings:
                Toast.makeText(this, "item [ " + item + " ]  selected", Toast.LENGTH_SHORT).show();
                return true;
        }

        return false;
    }

}

public class MyFragmentPagerAdapter extends FragmentPagerAdapter {

    private Context mContext;
    private static final int MAX_ITEM_COUNT = 3;

    public MyFragmentPagerAdapter(Context context, FragmentManager fm) {
        super(fm);
        mContext = context;
    }

    @Override
    public Fragment getItem(int position) {
        return MyFragmentFactory.getsInstance().create(position + 1);
    }

    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        String tabPrefix = "탭";
        return tabPrefix + (position + 1);
    }

    @Override
    public int getCount() {
        return MAX_ITEM_COUNT;
    }
}

class MyFragmentFactory {

    private static MyFragmentFactory sInstance = new MyFragmentFactory();

    private MyFragmentFactory() {}

    public static synchronized MyFragmentFactory getsInstance() {
        if (sInstance == null) {
            sInstance = new MyFragmentFactory();
        }
        return sInstance;
    }

    public MyFragment create(int index) {
        return MyFragment.createInstance(index);
    }
}

@SuppressLint("ValidFragment")
public class MyFragment extends Fragment{

    private static final String ARGS_KEY_INDEX = "index";
    TextView mTextView;

    public MyFragment() {}

    // Fragment 를 생성하고 인수를 설정
    public static MyFragment createInstance(int index) {
        MyFragment fragment = new MyFragment();
        Bundle args = new Bundle();
        args.putInt(ARGS_KEY_INDEX, index);
        fragment.setArguments(args);
        return fragment;
    }

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        int index = getArguments().getInt(ARGS_KEY_INDEX);
        View view = inflater.inflate(R.layout.fragment_my, null);
        mTextView = view.findViewById(R.id.my_text);
        mTextView.setText("this tab is index " + index);
        return view;
    }
}