자알못 자마린 – Xamarin.Forms Navigation 기초 2

Table of Content

Carousel Page

Carousel Page는 회전목마처럼 Page를 좌우로 스와이프하여 이동할 수 있는 Page다. Carousel Page는 구현 방법이 Tabbed Page와 비슷하지만 Carousel Page 내에 Tabbed Page와 Navigation Page를 추가할 수는 없다. 또한 제목이나 아이콘은 굳이 설정할 필요가 없다.

아래 예제는 Carousel Page를 직접 구현한 Page와 외부 Page를 참조하여 구현한 예제.

MainPage.xaml

<?xml version="1.0" encoding="utf-8"?>
<!-- TabbedPage 내에 외부 Page를 추가하기 위해 XML 네임스페이스 선언(xmlns:local) 추가. 
     표준 XAML이 아닌 형식을 사용하기 때문. -->
<CarouselPage 
    xmlns:local="clr-namespace:MyFirstXamarinApp" 
    xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MyFirstXamarinApp.MainPage">
    
    <!-- Page 직접 구현 -->
    <ContentPage Title="Tap 1" Icon="clock.png">
        <Label Text="Carousel Page 1" VerticalOptions="Center" HorizontalOptions="Center"></Label>    
    </ContentPage>
    
    <!-- 외부 Page 참조 -->
    <local:WelcomePage />
    
</CarouselPage>

MainPage.xaml.cs

using Xamarin.Forms;

namespace MyFirstXamarinApp
{
    public partial class MainPage : CarouselPage
    {
        public MainPage()
        {
            InitializeComponent();
        }
    }
}

실행화면

 

경고창(Alert Dialog) 띄우기

특정 작업을 수행할 것인지 묻는 경고창을 띄우려면 DisplayAlert() 메소드를 사용한다. 이 메소드는 반환 형식에 따라 2가지로 오버로드 되어있다.

MainPage.xaml

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MyFirstXamarinApp.MainPage">
    <Button Text="Click Me!" Clicked="Handle_Clicked" HorizontalOptions="Center" VerticalOptions="Center"></Button>
</ContentPage>

MainPage.xaml.cs

using Xamarin.Forms;

namespace MyFirstXamarinApp
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        async void Handle_Clicked(object sender, System.EventArgs e)
        {
            // 호출을 기다리고 응답결과를 저장
            var response = await DisplayAlert("경고!", "계속 진행하겠습니까?", "예", "아니오");

            if (response)
                await DisplayAlert("완료됨", "진행되었습니다!", "확인"); // 이 뒤에 코드가 없으므로 await를 써도 별 의미는 없음...
        }
    }
}

실행화면

 

액션 시트(Action Sheet) 띄우기

액션 시트(Action Sheet)는 일종의 명령 묶음집(?)이다. 액션 시트를 띄우려면 DisplayActionSheet() 메소드를 사용한다. 이 메소드의 주요 매개변수는 다음과 같다.

  • 세 번째 매개변수(string destruction): 삭제 등의 행동을 특별하게 표시하기 위해 사용하는 매개변수
  • 네 번째 매개변수(params string[] buttons): 특정 행동을 할 여러 버튼을 정의하는 매개변수. params 형식이므로 매개변수 개수에 제한이 없다.

MainPage.xaml

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MyFirstXamarinApp.MainPage">
    <Button Text="Click Me!" Clicked="Handle_Clicked" HorizontalOptions="Center" VerticalOptions="Center"></Button>
</ContentPage>

MainPage.xaml.cs

using Xamarin.Forms;

namespace MyFirstXamarinApp
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        async void Handle_Clicked(object sender, System.EventArgs e)
        {
            var response = await DisplayActionSheet("Title", "Cancel", "Delete", "Copy", "Message", "Email");

            switch(response){
                case "Delete":
                    var del = await DisplayAlert("경고!", "정말 지우시겠습니까?", "예", "아니오");
                    if (del)
                        await DisplayAlert("삭제 완료", "삭제되었습니다!", "OK");
                    break;
                case "Copy":
                    await DisplayAlert(response, "복사 완료!", "OK");
                    break;
                case "Message":
                    await DisplayAlert(response, "메시지 전송 완료!", "OK");
                    break;
                case "Email":
                    await DisplayAlert(response, "이메일 전송 완료!", "OK");
                    break;
                default:
                    break;
            }
        }
    }
}

실행화면

 

Toolbar Icon 띄우기

Toolbar Icon은 Navigation Page 상단에 나타나는 아이콘이다. 안드로이드와 iOS에서 Toolbar Icon이 나타나는 방식은 서로 미묘하게 차이가 있다.

주요 이벤트

  • Activated: Toolbar Icon을 터치했을 때 발생하는 이벤트

아래 예제는 Primary 툴바 아이콘과 Secondary 툴바 아이콘을 띄우는 예제.

MainPage.xaml

<?xml version="1.0" encoding="utf-8"?>
<ContentPage 
    Title="Contacts"
    xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MyFirstXamarinApp.MainPage">
    
    <!-- 속성요소구문(Property Element Syntax) 사용 -->
    <ContentPage.ToolbarItems>
        
        <!-- Order="Primary"인 항목은 Icon만 표시될 뿐 Text가 표시되지 않음 -->
        <ToolbarItem Icon="plus.png" Text="New" Activated="Handle_Activated" Order="Primary"></ToolbarItem>
        
        <!-- Order="Secendary"인 항목운 Icon과 Text 모두 표시됨 -->
        <ToolbarItem Icon="plus.png" Text="New" Activated="Handle_Activated" Order="Secondary"></ToolbarItem>
        
    </ContentPage.ToolbarItems>
    
</ContentPage>

MainPage.xaml.cs

using Xamarin.Forms;

namespace MyFirstXamarinApp
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        void Handle_Activated(object sender, System.EventArgs e)
        {
            DisplayAlert("활성화됨", "툴바가 활성화되었습니다.", "OK");
        }
    }
}

App.xaml.cs

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

[assembly: XamlCompilation(XamlCompilationOptions.Compile)]
namespace MyFirstXamarinApp
{
    public partial class App : Application
    {
            public App()
        {
            InitializeComponent();

            // 툴바 아이콘은 내비게이션 Page에서 구현됨
            MainPage = new NavigationPage(new MainPage());
        }

        // ...
    }
}

실행결과

 

연습문제: 코코아톡(?) 만들어보기

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

댓글 남기기