30日 5月 2016

Xamarin.Froms カウンターアプリ（AbsoluteLayout を使用）

AbsoluteLayoutを使用したカウンターアプリです。全てコード指定ですが非常に簡単にレイアウトが出来るので楽ですね。

AbsoluteLayout を使うと画像の上にボタンやラベルといったコントロールを重ねることができデバイスサイズや縦横に関わらず View の中心に配置したり非常に簡単に書けますのでお勧めです。

Android Windows Phone エミレーター表示

ファイル --> 新規作成 --> プロジェクト(P)... --> Cross-Platform --> Xamarin-Forms で作成

Counter01

HomePage.cs 追加

HomePage.cs の書き換え

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;

namespace Counter01
{

public partial class HomePage : ContentPage
{
int counter { get; set; }

public HomePage()
{
InitializeComponent();

// バックグランドカラー
BackgroundColor = Color.White;

AbsoluteLayout absoluteLayout = new AbsoluteLayout
{
VerticalOptions = LayoutOptions.FillAndExpand
};

// カウンター表示Labelを生成する
Label label = new Label
{
Text = "0",
//BackgroundColor = Color.Blue,
FontSize = 220,
TextColor = Color.Red,
};

// カウンターButton を生成する
var button1 = new Button
{
Text = "Counter",
FontSize = 20,
BackgroundColor = Color.Silver,
TextColor = Color.Blue,
BorderWidth = 1,
BorderRadius = 10,
//Image = new FileImageSource() { File = "xxxxx.png" },
};

// カウンターButtonのイベント
button1.Clicked += (s, e) => {
counter++;
// カウンター数字をラベルに表示
label.Text = counter.ToString();
};

// カウンタークリアーButton を生成する
var button2 = new Button
{
Text = "リセット",
FontSize = 20,
BackgroundColor = Color.Silver,
TextColor = Color.Blue,
BorderWidth = 1,
BorderRadius = 10,
};

// カウンタークリアーButton　0にリセット
button2.Clicked += (s, e) => {

// カウンター数字を0にリセット
counter = 0;
label.Text = counter.ToString();
};

// ラベルとボタンを配置
absoluteLayout.Children.Add(label); // カウンター表示Label
absoluteLayout.Children.Add(button1); // カウンターButton
absoluteLayout.Children.Add(button2); // カウンタークリアーButton

// カウンター表示Label
AbsoluteLayout.SetLayoutFlags(label, AbsoluteLayoutFlags.PositionProportional);
// X Y Width Height
AbsoluteLayout.SetLayoutBounds(label, new Rectangle(0.5, 0.25, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));

// カウンターButton
AbsoluteLayout.SetLayoutFlags(button1, AbsoluteLayoutFlags.PositionProportional);
// X Y Width Height
AbsoluteLayout.SetLayoutBounds(button1, new Rectangle(0.2, 0.6, 150, 40));
//AbsoluteLayout.SetLayoutBounds(button1, new Rectangle(0.2, 0.6,

AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));

// カウンタークリアーButton
AbsoluteLayout.SetLayoutFlags(button2, AbsoluteLayoutFlags.PositionProportional);
// X Y Width Height
AbsoluteLayout.SetLayoutBounds(button2, new Rectangle(0.85, 0.6, 150, 40));
//AbsoluteLayout.SetLayoutBounds(button2, new Rectangle(0.8, 0.6,

AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));

// absoluteLayoutを配置
Content = absoluteLayout;
}
}
}

App.cs の書き換え

App.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using Xamarin.Forms;

namespace Counter01
{
public class App : Application
{
public App()
{
// The root page of your application
MainPage = new HomePage();
}

}
}