スライドでタブを切り替えられるUI作成

※この記事はAndroid開発初心者が模索しながら開発した時に、行ったことを書いた(or 説明した)記事なので、誤り等が多々とあると思います。ですので誤り等があったら優しく指摘してくれることを願っています。

イメージ

イメージとしてはTwiiterやLINEみたいな感じ。画面に複数のタブがあり、タブタップとスワイプによってタブを切り替えるUIを作成したい。

イメージ

これを実装しようとした時に調べていたら、なんか難しそうな記事ばかり出てきて自分みたいなFragmentもわかっていない(今もなんとなくだけど)完全な初心者にとっては優しくなかったです。

よく見かけるUIだから簡単にできるのではと思い、そういえばAndroid Studioに元々用意されているActivityを全く見ていなかったなと思い見てみるとありました。

だから簡潔に言ってしまえばデフォルトで用意されているテンプレートみたいなの使えば終わりです。

見よう見まねですが説明させていただきます。

環境

Android Studio Version 2.2.3

java バージョン8

macOS Sierra バージョン10.12.2

手順

まずAndroid Studioを起動して、「Start a new Android Studio project」を選択します。

次に、プロジェクト名やプロジェクトの保存先を決めて、右下にあるNextボタンを押します。

押したら、次の画面に移ると思います。ここでAPIを13以上に設定します。そうしないと今回紹介する方法では出来ません(理由等は未調査)。APIを設定したら先ほどと同じくNextボタンをクリックします。

次は下のような画面になると思います。ここでテンプレのActivityを選択することができます。(Activityに関してはこちら)

その中から一番下にあるTabbed Activityを選択してNextを押します。

そうすると、次のような画面になります。この画面の真ん中あたりにある「Navigation Style」を変更するとタブを切り替えるUIのタイプを変更できます。

ここで変更できるタイプは３種類ありますが、今回はスライドでタブを切り替えられるUI作成なのでAction Bar Tabs (with ViewPager)だけにさせていただきます。

 選択するとプロジェクトが作成されます。

作成されたプロジェクトをビルドするとこのようになると思います。

 これでスワイプでタブを切り替えられるUIの作成が完了しました。

カスタマイズ(?)

スワイプでタブを切り替えられるUIを作成したとはいえ、タブの名前や数を変えたい、タブごとに対応した画面を表示したいなどあると思います。

・タブの名前を変える

MainActivity.javaの下の方にあるgetPageTitleを変更します。

ここで引数のpositionは、今見ている(表示されている?)タブの番号で、左から順に0,1,2...です。このposition変数に合わせて変更したいタブの名前を戻り値として返してあげればその名前になります。

・タブの数を変える

getPageTitleの上の方にある(であろう)getCountを変更します。

ここでタブの数を戻り値として返してあげればその数タブができます。

デフォルトは3が戻り値となっており、この場合タブは3つです。

・タブごとに対応した画面を表示する

getCountの上にある(であろう)getItemを変更します。

ここでもgetPageTitleと同じようにpositionに対応したFragmentを戻り値として渡してあげれば良いです。(Fragmentについてはこちら)

これで一通りの説明を終わらせていただきます。

最初の方にも書いた通り、詳しく分かっていないところだらけなので間違い等がございましたら指摘お願いいたします。

また疑問に思ったことなどもよろしくお願いします。

順序が逆になってしまいましたが次はAndorid Studioでプロジェクト作成する方法をまとめてみます。

mito.