fc2ブログ

記事一覧

Toast(トースト)を表示する方法 | Xamarin.Forms


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


iPhone7 iOS10
xamarin_toast_02.png
Android5
xamarin_toast_01.jpg


前提条件
・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


関連記事

コメント

Re: タイトルなし
shinogu様

先程のビューの高さと、その下に記載ありますラベルの高さを2倍にして、表示されませんでしょうか。(その分表示位置を上にする必要もあります。)
また、改行コードは、System.Environment.Newlineで大丈夫だと思います。

またご不明点等ありましたら、ご連絡くださいませ。
できました! 素早い回答ありがとうございます。

もうひとつ質問なのですが改行コード以降が表示されないのですが
2行で表示させるにはどのようにするのがよいですか?
Re: トースト表示の場所について
shinogu様

当ブログをご覧いただきありがとうございます。

トーストの表示位置につきまして

iOSの場合はShowメソッドの中にあります以下の部分の第一と第二引数を変更すれば位置を変更できます。
_view.Frame = new CGRect(横位置, 縦位置, 幅, 高さ)

Androidの場合は標準のトースト機能を使用していますので、変更はできません。変更する場合は、iOSの例の用にViewを作って自作すれば可能だと思います。
トースト表示の場所について
たいへん参考になりました。

そして質問なのですが、トーストを表示する場所を指定したい場合は
どうすれば良いのでしょうか?
コメントの投稿

※名前とタイトルが入力されていないコメントでは他のコメントとの区別ができません。

 入力されていないコメントには返信しませんのであらかじめご了承くださいませ。

※ニックネームでも良いので必ずご入力ください。

    

※必ずご入力ください。

    
    

※必ずご入力ください。

※技術的な質問には環境やエラーについて正確かつ詳細にお教えください。

・正確なエラーの内容

・Windowsのバージョン番号

・Visual Studioのバージョン

・機器の型番

・アプリやソフトのバージョン

    

カテゴリ別記事一覧

広告

プロフィール

石河 純


著者名 :石河 純
自己紹介:素人上がりのIT技術者。趣味は卓球・車・ボウリング

IT関連の知識はざっくりとこんな感じです。
【OS関連】
WindowsServer: 2012/2008R2/2003/2000/NT4
Windows: 10/8/7/XP/2000/me/NT4/98
Linux: CentOS RedHatLinux9
Mac: macOS Catalina 10.15 / Mojave 10.14 / High Sierra 10.13 / Sierra 10.12 / OSX Lion 10.7.5 / OSX Snow Leopard 10.6.8
【言語】
VB.net ASP.NET C#.net Java VBA
Xamarin.Forms
【データベース】
Oracle 10g/9i
SQLServer 2016/2008R2/2005/2000
SQLAnywhere 16/11/8
【BI/レポートツール】
Cognos ReportNet (IBM)
Microsoft PowerBI
ActiveReport (GrapeCity)
CrystalReport
【OCX関連】
GrapeCity InputMan SPREAD MultiRow GridView
【ネットワーク関連】
CCNP シスコ技術者認定
Cisco Catalyst シリーズ
Yamaha RTXシリーズ
FireWall関連
【WEB関連】
SEO SEM CSS jQuery IIS6/7 apache2

休みの日は卓球をやっています。
現在、卓球用品通販ショップは休業中です。