[Xamarin][CrossPlatform][Control] ContentView

ContentViewは、コントロールを1つだけ配置することができるコントロールです。

配置したコントロールはContentViewのサイズと同じになります。ContentViewはサイズに変更があった場合にはSizeChangedイベントが発生します。

以下は、Gridを配置して1行目にStackLayoutを、2行目にContentViewを配置する例です。

2行目はContentViewの高さを200に設定しているのですが、内側に配置したLabelの高さはContentViewの高さに合わせて広がります。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ContentViewSample"
             x:Class="ContentViewSample.MainPage">

  <Grid Margin="10,30,10,10">
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    
    <StackLayout Orientation="Horizontal" Grid.Row="0">
      <Label x:Name="lblContent1" Text="Hello Xamarin!" BackgroundColor="Lime" />
    </StackLayout>

    <ContentView Grid.Row="1"
      x:Name="contentView" Padding="10,30,10,10"
      HeightRequest="200">
      <Label x:Name="lblContent2" Text="Hello Xamarin!" BackgroundColor="Aqua" />
    </ContentView>
  </Grid>


</ContentPage>

実行例を以下に示します。

ContentViewの例

[Xamarin][CrossPlatform][Control] MasterDetailPage

MasterDetailPageは、ページをMasterとDetailの2ページで構成するためのものです。

Masterには項目の一覧を、Detailには項目の詳細を表示します。

新規プロジェクトとしてBlank Xaml App(Xamarin.Forms.Portable)を作成してください。

プロジェクト名は、MasterDetaiPageSmapleとします。

MasterPageの作成

はじめにMasterPageを作成します。

ソリューションエクスプローラーには複数のプロジェクトがぶら下がっていますが、共通プロジェクトである「MasterDeitailPageSample(移植可能)」に、MasterPageという名前で新規にクラスを追加します。

MsterPageクラスの追加

MasterPage.csのファイルには以下のようなコードが記述されています。

using Xamarin.Forms;

namespace MasterDetailPageSample
{
    public class MasterPage : ContentPage
    {
        public MasterPage()
        {
            Content = new StackLayout
            {
                Children = {
                    new Label { Text = "Hello Page" }
                }
            };
        }
    }
}

上記はContentPageを継承しているのですが、MasterDetailPageを継承するように変更し、コンストラクタ内を削除します(以下のように編集します)。

using Xamarin.Forms;

namespace MasterDetailPageSample
{
    public class MasterPage : MasterDetailPage
    {
        public MasterPage()
        {

        }
    }
}

続いて、上記のコンストラクタ(MasterPage)を以下のように編集してマスターページを作成します。

public MasterPage()
{
    // メニューに表示する文字列の作成
    var menu = new[] { "メインメニュー", "メニュー1", "メニュー2", "メニュー3" };

    // メニュー用のListView
    ListView listView = new ListView
    {
        // メニューを追加
        ItemsSource = menu,
        // メニュー部分の背景色を白に設定
        BackgroundColor = Color.White,
    };

    // マスターページの作成
    Master = new ContentPage
    {
        BackgroundColor = Color.White,
        Padding = new Thickness(0, 20, 0, 0),
        Title = "メニュー", // 必須 
        Content = listView
    };

    // あとからコードを追加します
}

マスターページに表示する項目は、文字配列として作成します。

上記の例では、menuという文字配列に、「メインメニュー」「メニュー1」「メニュー2」「メニュー3」の文字列を格納します。この文字列はListViewのItemSourceへ設定しています。

続いてマスターページを作成します。MasterDetailPageを継承したクラスはMasterというメンバーを持ちます。このMasterがマスタページを表しています。

MasterはContentPageとして作成し、MasterがもつContentには先ほど作成したlistViewを設定することで、menu配列に設定した文字列が表示されるようになります。

DetailPageの作成

続いてMasterPageに表示した項目に結びつけるDetailPageを作成します。

MasterDetailPageを使用するアプリケーションでは、画面に常に表示されるのは今から作成するDetailPageの方になります。

共通プロジェクトである「MasterDeitailPageSample(移植可能)」に、Page1という名前で新規に「Forms Xaml Page」追加します。このクラスはMasterPageのメニュー1に紐付けることとします。

同様にしてPage2とPage3のクラスを作成します。

最初に表示されるページの設定とメニュータップ時の処理

以上で必要なページは揃いました。

続いて画面に最初に表示されるページの設定とメニュー項目タップ時の処理を作成します。

MainPage.xaml.csを開き、「MasterPageの作成」の項に示したコードの最後にある「あとからコードを追加します」の部分に以下のコードを挿入します。

// 最初に表示されるページ
Detail = new NavigationPage(new Page1()); ・・・①

// メニュー項目タップ時の処理
listView.ItemTapped += (sender, e) => ・・・②
{

    ContentPage newPage;

    // タップされたメニュー項目をswitchで判断
    switch (e.Item.ToString())
    {

        case "メニュー1":
            newPage = new Page1();
            break;
        case "メニュー2":
            newPage = new Page2();
            break;
        case "メニュー3":
            newPage = new Page3();
            break;
        default:
            newPage = new Page1();
            break;
    }

    // 選択ページを表示
    Detail = new NavigationPage(newPage); ・・・③

    // 選択ページのリセット
    ((ListView)sender).SelectedItem = null; ・・・④

    // メニューを閉じる
    IsPresented = false; ・・・⑤

};

①はアプリ起動時に最初に表示されるページの設定です。ここではPage1が表示されるようにしています。

②はlistViewに表示されている項目がタップされたときの処理です。switch文を使用してタップされた項目の文字列を判断し、表示するページを決定しています。ここで決定したページをDetailにセットすることで、詳細ページとして表示します(③)。

④は選択されたページのリセットを行います。これはlistViewで選択された項目が残ってしまうことを避けるための処理です。

最後に⑤でメニューを閉じる処理を行います。この処理を省略した場合は、項目を選択してもメニューが表示されたままとなってしまいます。

起動時の設定

最後に起動時の設定を行います。

App.xaml.csを開き、コードを以下のように編集します。

①の部分で、画面起動にMasterPageが表示されるようにします。

public partial class App : Application
{
    public App()
    {
        InitializeComponent();

        MainPage = new MasterPage(); ・・・①
    }

    protected override void OnStart()
    {
        // Handle when your app starts
    }

    protected override void OnSleep()
    {
        // Handle when your app sleeps
    }

    protected override void OnResume()
    {
        // Handle when your app resumes
    }
}

コードの編集が完了したら、実行して動作を確認してみましょう。

画面の上部には「メニュー」という文字が表示され、タップするとメニューが表示されます。
またメニューで項目を選択すると、対応するページが開きます。

初期画面はPage1が表示される

Masterページ

[Visual Studio][Xamarin][CrossPlatform] Android SDKをインストールする

Xamarin.Formsアプリのビルド時に「No resource found that matches xxxx」という警告が発生することがあります。これはAndroidのものです。

判断方法は簡単でプロジェクト名の後ろに.Droidが付いているかどうかです。

Android系の警告

たいていの場合はAndroid SDKをインストールすることで解決できるようです。

Android SDKのインストールは、Visual Studioの[ツール]-[Android]-[Android SDK Manager…]を選択します。

Andoroid SDKのインストール

続いて、Android SDK Managerが表示されます。

Android SDK Manager

あとは、必要なSDKにチェックを付けてインストールを行います。

以下のものはインストールしておきましょう。
Tools
・Android SDK Tools
・Android SDK Tools Platform-tools
・Android SDK Build-tools 23.0.3

Android 6.0(API 23)
・SDK Platform

Android 5.1.1(API 22)
・SDK Platform

Android 5.0.1(API 21)
・SDK Platform

Android 4.4.2(API 19)
・SDK Platform

Android 4.1.2(API 16)
・SDK Platform

Android 4.0.3(API 15)
・SDK Platform

Extras
・Android Support Repository
・Intel x86 Emulator Accelerator (Haxm Installer)