[android] TabLayout 예제

기본 설정은 http://susemi99.kr/3377 를 참고해야 한다.

<LinearLayout
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical">

  <android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.design.widget.TabLayout
      android:id="@+id/tabs"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      app:tabMode="scrollable"/>
  </android.support.design.widget.AppBarLayout>

  <android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>
</LinearLayout>

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import java.util.ArrayList;
import java.util.List;

public class MyAdapter extends FragmentPagerAdapter
{
  private final List<Fragment> mFragments = new ArrayList<>();
  private final List<String> mFragmentTitles = new ArrayList<>();

  public MyAdapter(FragmentManager fm)
  {
    super(fm);
  }

  public void addFragment(Fragment fragment, String title)
  {
    mFragments.add(fragment);
    mFragmentTitles.add(title);
  }

  @Override
  public Fragment getItem(int position)
  {
    return mFragments.get(position);
  }

  @Override
  public int getCount()
  {
    return mFragments.size();
  }

  @Override
  public CharSequence getPageTitle(int position)
  {
    return mFragmentTitles.get(position);
  }
}

mport android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class MyFragment extends Fragment
{
  @Nullable
  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
  {
    int resId = R.layout.fragment_1;
    return inflater.inflate(resId, null);
  }

  @Override
  public void onActivityCreated(@Nullable Bundle savedInstanceState)
  {
    super.onActivityCreated(savedInstanceState);
  }
}

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity
{
  @Override
  protected void onCreate(Bundle savedInstanceState)
  {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
    MyAdapter adapter = new MyAdapter(getSupportFragmentManager());
    adapter.addFragment(new MyFragment(), "Category 1");
    adapter.addFragment(new MyFragment(), "Category 2");
    adapter.addFragment(new MyFragment(), "Category 3");
    adapter.addFragment(new MyFragment(), "Category 4");
    adapter.addFragment(new MyFragment(), "Category 5");
    adapter.addFragment(new MyFragment(), "Category 6");
    viewPager.setAdapter(adapter);

    TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
    tabLayout.setupWithViewPager(viewPager);
  }
}

이렇게 표시된다.

tabMode는 fixed와 scrollable 이 있는데, 양이 많을 때는 scrollable로 해놓는게 좋다.

<android.support.design.widget.TabLayout
  android:id="@+id/tabs"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  app:tabMode="fixed"/>

탭 갯수가 적을 때는 tabGravity 라는 걸로 꽉차게할 지 가운데로 모을지도 정할 수 있다.

<android.support.design.widget.TabLayout
  android:id="@+id/tabs"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  app:tabGravity="fill"
  app:tabMode="fixed"/>

<android.support.design.widget.TabLayout
  android:id="@+id/tabs"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  app:tabGravity="center"
  app:tabMode="fixed"/>

[android] TabLayout 예제

관련