Xamarin, Android : Action ToolBar 등록 및 메뉴 설정

안드로이드 앱의 상단에 메뉴바를 등록해 보자.

일단 프로젝트 하나 등록.

메인에다 툴바를 등록 할 예정.
원래 아무 툴바다 달 수 있지만, 요즘 대세인 메터리얼 디자인의 툴바를 등록할 예정이다.

NuGet 패키지 관리자에 가서...

support.design 을 검색해 "Xamarin.Android.Support.Desig" 을 설치 함.

그럼 뭔가가 많이 설치되는데, 정상임.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <android.support.v7.widget.Toolbar xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/toolbar"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:minHeight="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

</LinearLayout>

이렇게 Main.axml 에 툴바를 등록한다.

이렇게 쉽게 툴바가 등록되어 줬으면 좋겠지만, 그렇게는 안되고...

"value" 디렉토리에 파일을 하나 추가.

여기에다 "Style.xml" 이라는 스타일 파일을 하나 등록한다.

<?xml version="1.0" encoding="utf-8" ?>
<resources>

  <style name="MyTheme" parent="Theme.AppCompat.Light">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="colorPrimary">#2196F3</item>
  </style>

</resources>

주의 할점은 스타일 이름은 아무거나 줘도 되지만, "parent" 속성에는 "Theme.AppCompat" 계열의 스타일을 지정해야 하며, "windowNoTitle" 속성에 "true" 를 지정해야 한다.

using Android.App;
using Android.Widget;
using Android.OS;

using Android.Support.V7.App;
using SupportActionBar = Android.Support.V7.App.ActionBar;
using SupportFragment = Android.Support.V4.App.Fragment;
using System.Collections.Generic;
using Android.Support.V7.Widget;

namespace son10001app
{
    [Activity(Label = "son10001app", MainLauncher = true, Icon = "@drawable/icon", Theme = "@style/MyTheme")]
    public class MainActivity : AppCompatActivity
    {
        private Android.Support.V7.Widget.Toolbar mToolbar;

        protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);

            SetContentView(Resource.Layout.Main);

            mToolbar = FindViewById<Android.Support.V7.Widget.Toolbar>(Resource.Id.toolbar);
            SetSupportActionBar(mToolbar);
            SupportActionBar.Title = @"son10001 & 액션바 테스트";
        }
    }
}

그런다음 "MainActivity" 에 액션바를 사용할 수 있도록 세팅하면...

이렇게 깔끔한 디자인의 액션바가 등록된다.

다음으로 메인 아이콘 등록.

프로젝트를 생성한 디렉토리의 "drawable" 폴더에 아이콘 파일을 하나 추가하고...

파일 크기는 대충 24x24 정도.

그냥은 솔루션 탐색기에서 안보이니... "모든 파일 보기" 설정을 한 후, "프로젝트에 포함" 을 해 줘야 프로젝트에서 쓸 수 있다. (물론 이렇게 귀찮게 하지 않고, 그냥 탐색기에서 파일을 드래그해 솔루련 탐색기에서 원하는 디렉토리에 넣어주면 그냥 쓸수도 있다.)

SupportActionBar ab = SupportActionBar;
ab.SetHomeAsUpIndicator(Resource.Drawable.icon_menu);
ab.SetHomeButtonEnabled(true);
ab.SetDisplayHomeAsUpEnabled(true);

암튼 이렇게 하고 소스에 액션바 설정을 추가하면...

요렇게 메인 아이콘이 추가됨.

마지막으로 메뉴 추가.

프로젝트의 "Resources" 폴더에 "menu" 폴더를 하나 추가한다.

거기에 메뉴 스타일을 지정할 xml 파일을 하나 생성.

<menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:myapp="http://schemas.android.com/apk/res-auto">

  <item android:id="@+id/action_search"
        android:icon="@drawable/icon_search"
        android:title="Reply"
        myapp:showAsAction="always"/>
 
  <item android:id="@+id/action_setting"
       android:title="Setting"
       myapp:showAsAction="never"/>

</menu>

거기에 메뉴 설정을 등록해 놓는다.

아이콘도 하나 추가 해 넣어 주고...

주의 해야 할 점은 "showAsAction" 항목.
"always" 면 항상 메뉴에 노출이 되고, "never" 면 메뉴 맨끝에 "..." 이라는 아이콘을 클릭시 뜨는 팝업에 등록되어 평소에는 보이지 않게 된다.

public override bool OnCreateOptionsMenu(IMenu menu)
{
MenuInflater.Inflate(Resource.Menu.action_menu, menu);
return base.OnCreateOptionsMenu(menu);
}

암튼 이렇게 하고 "OnCreateOptionsMenu" 를 override 로 등록하면...

이렇게 액션 메뉴가 등록된다. 저기서 "..."아이콘을 클릭하면 "showAsAction" 에 "never" 로 등록한 메뉴들이 나타난다.

        public override bool OnOptionsItemSelected(IMenuItem item)
        {
            int id = item.ItemId;

            if (id == Resource.Id.action_search)
            {
                Toast.MakeText(this, "click Search!!", ToastLength.Short).Show();
                return true;
            }

            return base.OnOptionsItemSelected(item);
        }

메뉴를 클릭했을 경우 액션을 지정할려면 "OnOptionsItemSelected()" 를 override 를 하면 됨.

using Android.App;
using Android.Views;
using Android.OS;
using Android.Support.V7.App;
using SupportActionBar = Android.Support.V7.App.ActionBar;
using Android.Widget;

namespace son10001app
{
    [Activity(Label = "son10001app", MainLauncher = true, Icon = "@drawable/icon", Theme = "@style/MyTheme")]
    public class MainActivity : AppCompatActivity
    {
        private Android.Support.V7.Widget.Toolbar mToolbar;

        protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);

            SetContentView(Resource.Layout.Main);

            mToolbar = FindViewById<Android.Support.V7.Widget.Toolbar>(Resource.Id.toolbar);
            SetSupportActionBar(mToolbar);
            SupportActionBar.Title = @"son10001 & 액션바 테스트";

            SupportActionBar ab = SupportActionBar;
            ab.SetHomeAsUpIndicator(Resource.Drawable.icon_menu);
            ab.SetHomeButtonEnabled(true);
            ab.SetDisplayHomeAsUpEnabled(true);

        }

        public override bool OnCreateOptionsMenu(IMenu menu)
        {
            MenuInflater.Inflate(Resource.Menu.action_menu, menu);
            return base.OnCreateOptionsMenu(menu);
        }

        public override bool OnOptionsItemSelected(IMenuItem item)
        {
            int id = item.ItemId;

            if (id == Resource.Id.action_search)
            {
                Toast.MakeText(this, "click Search!!", ToastLength.Short).Show();
                return true;
            }

            return base.OnOptionsItemSelected(item);
        }
    }
}