【Xamarin】【Android】Tabbed Layoutなアプリ

Xamarin.Androidを使ってTabbedなレイアウトのアプリケーションを作成してみたので,その方法を記録して起きたいと思います.

環境

  • Xamarin.Android
  • Android 8.0
  • Xamarin.Android.Support.Design
  • Xamarin.Android.Support.V4

必要なモジュールのインストール

今回,Tabbedなレイアウトを実装するにあたって,Android.Support.V4Android.Support.Designを使用します.そのため,Nugetを用いてこいつらをインストールする必要があります.

各ページのレイアウトを実装する

レイアウトを作成する(axml)

まず,各タブで使用するレイアウトファイルを実装します.

別にaxmlファイルを用いてグラフィカルに実装しなくても,動的にやるぞ!!!って意気込んでもらっても全然構いません.

そんな方はこのセクションを飛ばして次のセクションに進んじゃってください.


	

フラグメントを作成する

レイアウトを作成したら,それを各タブページと結びつけるためのFragmentというものを実装します.

まずはコードをみてみましょう

using Android.OS;
using Android.Views;
using Android.Widget;
namespace Sample.Fragment {
  public class Fragment1 : Android.Support.V4.App.Fragment {
    public override void OnCreate(Bundle savedInstanceState) {
      base.OnCreate(savedInstanceState);
        // Create your fragment here
        // ここに,レイアウトが作成された時に実行するコードを書きます.
        // Activity.OnCreate()でやっていることと本質的には同じです.
    }
    public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
      // Use this to return your custom view for this Fragment
      // ここでは,Viewを作成して返します.
      // Viewに何かしらの操作を加える場合にはこの関数内で実装します.
      var view = inflater.Inflate(Resource.Layout.Fragment1, container, false);
      var button = view.FindViewById

Fragmentは,Android.Support.V4.Fragmentを継承して作成します.

基本的には,OnCreateView()をオーバーライドしてあげるだけでいいと思います.この関数内では,そのタブでのレイアウトを定義します.

LayoutInflaterが引数として渡されるので,そいつを使って任意のレイアウトをInflateしましょう.

万一,そのレイアウトに例えばボタンとかがあってそいつを操作したいとか言った場合には,inflateしたviewを通じて操作するよにしましょう.

Fragmentのアダプタの作成

Fragmentを実装したら,今度はそれを割り振るためのアダプタを作成します.一瞬です.

まずはコードを見てみましょう.

using System;
using Android.Content;
using Android.Runtime;
using Android.Support.V4.App;
using Java.Lang;
namespace TabLayoutSample {
	public class FragmentAdapter : FragmentPagerAdapter {
		string[] tabTitles_ = {
			"Tab1",
			"Tab2",
			"Tab3"
		};
		public FragmentAdapter(FragmentManager _fm) : base(_fm) {
		}
		public FragmentAdapter(IntPtr javaReference, JniHandleOwnership transfer) : base(javaReference, transfer) {
		}
		public override int Count => 3;
		public override Android.Support.V4.App.Fragment GetItem(int _position) {
			switch(_position) {
			case 0:
				return new Fragment1();
			case 1:
				return new Fragment2();
			case 2:
				return new Fragment3();
			}
			return null;
		}
		public override ICharSequence GetPageTitleFormatted(int position) {
			return new Java.Lang.String(tabTitles_[position]);
		}
	}
}

どのページが選択されているのかが引数として与えられる(GetItem)ので,ページに対応したFragmentのインスタンスを返してあげるだけ.

タブ本体の実装

メインとなるレイアウトの記述

タブページを実装するにあたって,まずはメインとなるレイアウトの記述を行います.

ここでは,TabLayoutViewPagerを利用しています.



 
    

アダプタをセット

そしたら,先ほど作ったアダプタを反映させましょ.

using Android.App;
using Android.OS;
using Android.Support.V7.App;
using Android.Runtime;
using Android.Widget;
using Android.Support.V4.App;
using Android.Support.V4.View;
using Android.Support.Design.Widget;
namespace TabLayoutSample {
	[Activity(Label = "@string/app_name", Theme = "@style/AppTheme", MainLauncher = true)]
	public class MainActivity : AppCompatActivity {
		protected override void OnCreate(Bundle savedInstanceState) {
			base.OnCreate(savedInstanceState);
			Xamarin.Essentials.Platform.Init(this, savedInstanceState);
			// Set our view from the "main" layout resource
			SetContentView(Resource.Layout.activity_main);
			var tabLayout = FindViewById(Resource.Id.tab_layout);
			var viewPager = FindViewById(Resource.Id.view_pager);
			viewPager.Adapter = new FragmentAdapter(SupportFragmentManager);
			tabLayout.SetupWithViewPager(viewPager);
		}
	}
}

とまぁここまで来たらあとはビルドして実行するだけですかね

サンプルを置いておくので参考までにどうぞ

https://github.com/koron0902/TabLayoutSample.git

おすすめ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です