(Xamarin) 나만의 상단 Tool Bar 만들기

어플을 만들게 되면 아래 그림과 같이 상단에 Bar 가 하나 자리잡고 있습니다.

(Action Bar 가 없는 테마를 선택한 경우 보이지 않습니다.)

테마를 선택해서 없앨수는 있지만 이자리에 내가 만든 Tool Bar 를 넣는 방법을 소개하고자 합니다.

 

1. 테마 만들기

나만의 테마를 하나 만듭니다. 테마를 만드는 이유는 Action Bar 를 없애기 위해서라고 보면됩니다.

솔루션의 Resources/values/Style.xml 파일에 아래 코드를 작성합니다.

<?xml version="1.0" encoding="utf-8" ?>
<resources>
  <style name="MyTheme" parent="@android:style/Theme.Material.Light.DarkActionBar">
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowActionBar">false</item>
    <item name="android:toolBarColor">#5A8622</item>
  </style>
</resources>

핵심은 windowActionBar 를 false 로 하여 기존 Action Bar 를 제거하는것입니다.

windowNoTitle 는 제목 표시줄을 표시 않할꺼냐 인데 표지 안할꺼니 true 입니다. (NoTitle..)

toolBarColor 는 Tool Bar 의 배경색이 될 항목입니다.

Properties/AndroidManifest.xml 파일의 내용에서 아래 내용을 추가하여 위 정의한 테마를 적용시킵니다.

<application android:label="SMSConvey" android:theme="@style/MyTheme"></application>

기존 application 테그가 존재하면 굵게 표시된 부분만 추가하면 됩니다.

label 은 정의한 Tool Bar 에 표시될 내용입니다.

 

2. 상단에 보여질 Tool Bar 를 디자인 합니다.

Resources/layout 에 toolbar.xml 만들어 아래코드를 작성합니다.

<?xml version="1.0" encoding="utf-8"?>
<Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?android:attr/actionBarSize"
    android:background="?android:attr/toolBarColor"
    android:theme="@android:style/ThemeOverlay.Material.Dark.ActionBar"/>

minHeight="?android:attr/actionBarSize" 는 기존 제거한 Action Bar 의 높이와 동일하게 설정하라는 의미입니다.

background="?android:attr/toolBarColor" 는 배경색을 위 테마만들때 설정한 배경색을 가져옵니다.

 

3. 정의한 Tool Bar Include

Resources/layout/Main.axml 에서 아래 굴게 표시된 부분을 추가합니다.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <include
        android:id="@+id/toolbar"
        layout="@layout/toolbar" />
    ...
    ...
 </RelativeLayout> 

 

4. ToolBar 활성화

 MainActivity.cs 에서 OnCreate 부분에 아래 코딩을 추가합니다.

(아래 코딩은 빌드 단에서 에러가 안나므로 반드시 include 되었는지 확인합니다.)

var toolbar = FindViewById<Toolbar>(Resource.Id.toolbar);
SetActionBar(toolbar);
ActionBar.Title = "SMSConvey";

이렇게 하게되면 아래 처럼 내가 정의한 툴바가 나타나게 됩니다.

다음시간에는 Tool Bar 에 메뉴를 넣어보겠습니다.