rksoftware

Visual Studio とか C# とかが好きです

AppCompatActivity でメニューを表示する

Xamarin.Android で AppCompatActivity をベースクラスにした Activity でメニューを表示します。
※C# で書かれているだけで内容そのものは通常の Android アプリ開発と同じだと思います。

■ 完成図

右上の端に縦に並んだ三つの点があります。こことタップすると

メニューが表示されます。

Android アプリで昔よく見た UI ですね。最近は見かけなくなった気がしますけれども。

■ 作業前

作業前の Activity のソースは次のようになってるとします。

[Activity(Label = "Activity", MainLauncher = true, Icon = "@mipmap/icon", Theme = "@style/AppTheme")]
public class MainActivity : Android.Support.V7.App.AppCompatActivity
{
    protected override void OnCreate(Bundle savedInstanceState)
    {
        base.OnCreate(savedInstanceState);
        SetContentView(Resource.Layout.Main);
    }
}

■ 表示されるメニューのレイアウトを定義

今回は Xamarin.Android でメニュー付きで作られるテンプレートに倣って Resource フォルダの中に menu フォルダを作り、その中に menu_main.xml というファイルを作成しました。

<menu 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">
  <item
      android:id="@+id/action_settings01"
      android:title="メニューアイテム01"/>
  <item
      android:id="@+id/action_settings02"
      android:title="メニューアイテム02"/>
</menu>

■ Activity で OnCreateOptionsMenu メソッドを実装

Activity クラスでオーバーライド可能な状態で定義されている OnCreateOptionsMenu(Android.Views.IMenu) メソッドを実装します。

    public override bool OnCreateOptionsMenu(Android.Views.IMenu menu)
    {
        MenuInflater.Inflate(Resource.Menu.menu_main, menu);
        return true;
    }

実装後のコード

[Activity(Label = "Activity", MainLauncher = true, Icon = "@mipmap/icon", Theme = "@style/AppTheme")]
public class MainActivity : Android.Support.V7.App.AppCompatActivity
{
    protected override void OnCreate(Bundle savedInstanceState)
    {
        base.OnCreate(savedInstanceState);
        SetContentView(Resource.Layout.Main);
    }

    public override bool OnCreateOptionsMenu(Android.Views.IMenu menu)
    {
        MenuInflater.Inflate(Resource.Menu.menu_main, menu);
        return true;
    }
}

これで縦の三つの点が出ました。

レイアウトを設定しない場合

ここで、return true; が気になったので試しに MenuInflater.Inflate(Resource.Menu.menu_main, menu); をコメントにしてみました。

    public override bool OnCreateOptionsMenu(Android.Views.IMenu menu)
    {
        //MenuInflater.Inflate(Resource.Menu.menu_main, menu);
        return true;
    }

縦の三つの点は出なくなりました。

レイアウトの設定はサボれませんでした。

■ メニュー選択時の処理を追加する

メニュー表示時の処理と同様にオーバーライド可能な状態で定義されている OnOptionsItemSelected(Android.Views.IMenuItem) メソッドを実装します。

    public override bool OnOptionsItemSelected(Android.Views.IMenuItem item)
    {
        var id = item.ItemId;
        if (id == Resource.Id.action_settings01)
        {
            var toast = Toast.MakeText(this, "一つ目のオプション", ToastLength.Long); toast.SetGravity(Android.Views.GravityFlags.Top, 0, 0); toast.Show();
            return true;
            }
        if (id == Resource.Id.action_settings02)
        {
            var toast = Toast.MakeText(this, "二つ目のオプション", ToastLength.Long); toast.SetGravity(Android.Views.GravityFlags.Top, 0, 0); toast.Show();
            return true;
        }

        return base.OnOptionsItemSelected(item);
    }

実装後のコード

[Activity(Label = "Activity", MainLauncher = true, Icon = "@mipmap/icon", Theme = "@style/AppTheme")]
public class MainActivity : Android.Support.V7.App.AppCompatActivity
{
    protected override void OnCreate(Bundle savedInstanceState)
    {
        base.OnCreate(savedInstanceState);
        SetContentView(Resource.Layout.Main);
    }

    public override bool OnCreateOptionsMenu(Android.Views.IMenu menu)
    {
        MenuInflater.Inflate(Resource.Menu.menu_main, menu);
        return true;
    }

    public override bool OnOptionsItemSelected(Android.Views.IMenuItem item)
    {
        var id = item.ItemId;
        if (id == Resource.Id.action_settings01)
        {
            var toast = Toast.MakeText(this, "一つ目のオプション", ToastLength.Long); toast.SetGravity(Android.Views.GravityFlags.Top, 0, 0); toast.Show();
            return true;
            }
        if (id == Resource.Id.action_settings02)
        {
            var toast = Toast.MakeText(this, "二つ目のオプション", ToastLength.Long); toast.SetGravity(Android.Views.GravityFlags.Top, 0, 0); toast.Show();
            return true;
        }

        return base.OnOptionsItemSelected(item);
    }
}

これで、メニュー選択後に

選択結果がトースト表示されるようになりました。