Androidでタブを画面下に表示する

下タブの是非は置いておきましょう。

[Design Support Library](http://developer.android.com/tools/support-library/features.html#design)の[TabLayout](http://developer.android.com/reference/android/support/design/widget/TabLayout.html)を利用すると割りと簡単にタブを画面したに表示できたのでメモ。

## 依存関係

```groovy
dependencies {
    compile 'com.android.support:appcompat-v7:22.2.0'
    compile 'com.android.support:design:22.2.0'
}
```

`ViewPager`を利用するのでSupport Libraryも必要です。


## レイアウト

```xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent">
    <android.support.v7.widget.Toolbar
        android:id="@+id/tool_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="?attr/actionBarSize"
        android:layout_alignParentTop="true"
        />
    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        />
    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_below="@id/tool_bar"
        android:layout_above="@id/tab_layout"
        />
</RelativeLayout>
```

`ViewPager`を`TabLayout`の上に配置してあげればOK。

## Activity

```java
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);
        tabLayout = (TabLayout)findViewById(R.id.tab_layout);
        viewPager = (ViewPager)findViewById(R.id.view_pager);
        final Toolbar mainBar = (Toolbar)findViewById(R.id.tool_bar);
        if (mainBar != null) {
            setSupportActionBar(mainBar);
        }
        initTabLayout();
    }

    private void initTabLayout() {
        final PagerAdapter adapter = new PagerAdapter(getSupportFragmentManager());
        viewPager.setAdapter(adapter);
        viewPager.addOnPageChangeListener(adapter);
        tabLayout.setTabsFromPagerAdapter(adapter);
        tabLayout.setupWithViewPager(viewPager);
    }

    private static class PagerAdapter extends FragmentPagerAdapter implements ViewPager.OnPageChangeListener {

        private final int[] colors = {android.R.color.black, android.R.color.holo_red_light, android.R.color.holo_blue_bright};

        public PagerAdapter(FragmentManager fragmentManager) {
            super(fragmentManager);
        }

        @Override
        public Fragment getItem(final int position) {
            return new Fragment(){
                @Nullable
                @Override
                public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
                    final TextView content = new TextView(getActivity());
                    content.setText("page  " + position);
                    return content;
                }
            };
        }
        
        /** 省略 */

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

        @Override
        public CharSequence getPageTitle(int position) {
            return "Tab" + position;
        }
    }
}
```

雑ですが。

## できあがり

![CHWnCehUkAA7VK4.png](https://qiita-image-store.s3.amazonaws.com/0/6756/e1b62f01-af3b-7772-78d4-1fcdf70b81d4.png)

簡単でした。