今回はToast(トースト)を表示する方法をご紹介いたします。Androidでは標準でToastという画面にメッセージを表示する機能がありますが、iOSでは標準ではそのような機能は無い為、カスタムビューを作成することにより実現しています。AndroidとiOSで共通で使用できるようにDependencyServiceでの記述となっています。iOSでのToastは下記参考URLの実装方法を参考にさせて頂いておりますが、メッセージを再描画した際の挙動がおかしかったり、横幅の調整がなされていませんでしたので、私の方で修正させていただいております。
iPhone7 iOS10

Android5

前提条件
・Windows10 Pro 64Bit
・Visual Studio 2015 Community Update3
・Xamarin 4.3.0.795 (NuGet Xamarin.Forms 2.3.4.247)
・macOS Sierra 10.12.4 / Xcode8.3.1 / Xamarin.iOS 10.6.0.10
1.PCLの記述方法
PCLプロジェクトにDependencySerivceから呼び出せるようにインターフェースを実装します。
IToastService.cs
namespace AppName.Services
{
//DependencyServiceから利用する
public interface IToastService
{
//画面にメッセージを表示する
void Show(string message);
}
}
2.Androidの実装方法
Androidプロジェクト内に以下のファイルを記述します。
ToastService.cs
using Android.App;
using Android.Content;
using Android.Views;
using Android.Widget;
using Xamarin.Forms;
using AppName.Services;
using AppName.Droid.Services;
[assembly: Dependency(typeof(ToastService))]
namespace AppName.Droid.Services
{
public class ToastService : IToastService
{
//Toastを表示する
public void Show(string message)
{
Toast ts = Toast.MakeText(Android.App.Application.Context,
message,
ToastLength.Short);
ts.Show();
}
}
}
Androidでは標準のToastを呼び出す関数をコールするだけです。
3.iOSの実装方法
iOSプロジェクト内に以下のファイルを記述します。
ToastService.cs
using System;
using System.Linq;
using UIKit;
using CoreGraphics;
using Xamarin.Forms;
using AppName.Services;
using AppName.iOS.Services;
[assembly: Dependency(typeof(ToastService))]
namespace AppName.iOS.Services
{
public class ToastService : IToastService
{
private Toast _toast = null;
//Toastを表示する
public void Show(string message)
{
var view = UIApplication.SharedApplication.KeyWindow.RootViewController.View;
if (_toast != null)
{
//既にToast表示中の場合は処理を中止させる
if (_toast.IsShowing(view))
{
_toast.Cancel();
}
}
//新たにToastを表示する
_toast = new Toast();
_toast.Show(view, message);
}
}
//独自のトーストビュークラス
public class Toast
{
//トーストビュー本体
private UIView _view;
// 文字列を表示するためのラベル
private UILabel _label;
//トーストのサイズ(可変)
private nfloat _margin = 30;
private nfloat _height = 40;
private nfloat _width = 0;
//Cancelフラグ
private bool _isCancel = false;
public Toast()
{
//トーストビューの生成
if (_view == null)
{
_view = new UIView(new CGRect(0, 0, 0, 0))
{
BackgroundColor = UIColor.Black,
};
}
//トーストの角を丸くする
_view.Layer.CornerRadius = (nfloat)20.0;
//メッセージ表示用のラベル
_label = new UILabel(new CGRect(0, 0, 0, 0))
{
TextAlignment = UITextAlignment.Center,
TextColor = UIColor.White
};
_view.AddSubview(_label);
}
//Toastを表示する
public async void Show(UIView parent, string message)
{
//まずはメッセージをセットする
_label.Text = message;
//メッセージの文字列からToastのラベル横幅を取得し、設定する
CGSize maxSize = new CGSize(parent.Bounds.Width, _height);
CGSize fitSize = _label.SizeThatFits(maxSize);
_width = fitSize.Width;
//横幅ピッタリの表示だと違和感があるので、余白を設定する
if (parent.Bounds.Width >= _width + 30)
{
_width += 30;
}
//透過率80%で表示する
_view.Alpha = (nfloat)0.8;
//親Viewからトーストのサイズを調整する
_view.Frame = new CGRect(
(parent.Bounds.Width - _width) / 2,
parent.Bounds.Height - _height - _margin,
_width,
_height);
//ラベルのサイズを再設定する
_label.Frame = new CGRect(0, 0, _width, _height);
parent.AddSubview(_view);
//2秒待機
await System.Threading.Tasks.Task.Delay(2000);
while (true)
{
//5%ずつ透過する
_view.Alpha -= (nfloat)0.05;
await System.Threading.Tasks.Task.Delay(50);
//キャンセルの場合または透明になった場合は処理を終了する
if (_isCancel ||
_view.Alpha <= 0)
{
break;
}
}
//親ビューから削除する
_view.RemoveFromSuperview();
}
public bool IsShowing(UIView parent)
{
if (parent == null ||
parent.Subviews == null)
{
return false;
}
//既に表示中の場合は、処理を停止するため
if (parent.Subviews.Contains(_view))
{
//先に動作したスレッドを中止する
return true;
}
return false;
}
public void Cancel()
{
if (_view != null)
{
_isCancel = true;
// 親ビューから削除する
_view.RemoveFromSuperview();
}
}
}
}
iOSではカスタムビューにラベルを表示して、透過率をコントロールしてToastのように見せかけています。尚、連続してメッセージを表示した場合は、前回のメッセージは非表示にしています。また表示する文字列の長さに応じて表示幅を変化させています。
4.使用方法
PCLプロジェクトの中の任意のページに記述します。
引数のメッセージ文字列を渡して呼び出すだけです。
TestPage.xaml.cs
void OnToastClick(object sender, EventArgs e)
{
//Toastを表示する
DependencyService.Get<IToastService>().Show("Toast Message Message");
}
参考URL
http://dev.classmethod.jp/smartphone/xamarin-forms-toast-dependencyservice/
最後までお読みいただきありがとうございます。
当ブログの内容をまとめた Xamarin逆引きメニュー は以下のURLからご覧になれます。
http://itblogdsi.blog.fc2.com/blog-entry-81.html
- 関連記事
-