[Xuni:Input]iOSアプリの入力領域を角丸の枠線で囲む方法（Xamarin.Forms）

文書番号 : 81977 文書種別 : 使用方法登録日 : 2017/02/13 最終更新日 : 2017/02/13

対象製品

Xuni

詳細

オートコンプリート、コンボボックスなどXuniで提供している入力用コントロールInputは、
iOSアプリではEntry領域として枠線のついたボックスで表示されます。
Androidアプリでは下線のある入力領域です。

Xamarin.Formsでは同じコントロールを利用している場合でも、
プラットフォームのAPIに置き換わりますので、外観が異なるケースがあります。
下図はXuniのInputコントロールをXamarin.Formsで利用し、
Android、iOSアプリでそれぞれ動作した例です。

このようにプラットフォームに合わせた形で表示した場合、他領域のデザインと合わせてカスタマイズする場合がでてきます。

その場合、プラットフォーム固有の実装をする方法をXamarin.Formsはいくつか用意していますが、
以下ではそのひとつEffecs機能を使いiOSアプリ側のみ外観をカスタマイズする方法を説明します。

手順は以下です。

1. iOSプロジェクトにEffects用のクラスを作る
　プラットフォーム固有のカスタマイズを行うために、iOSプロジェクトに
　PlatformEffectクラスを継承したクラスを作ります。

サンプルコード
C#（Xamarin.Forms）

[assembly: ResolutionGroupName("Effects")]
[assembly: ExportEffect(typeof(RoundedEffect), "RoundedEffect")]
namespace Xuni_QuickStart.iOS
{
    public class RoundedEffect : PlatformEffect
    {
        public RoundedEffect()
        {
        }
        protected override void OnAttached()
        {
        }
        protected override void OnDetached()
        {
        }
    }
}

2.　作成したクラスのメソッドを実装する
　実際にXamarin.Forms側でEffectを適用した場合のコードを、
　OnAttachedメソッドをオーバーライドして記述します。
　適用を外す場合の処理はOnDetachedメソッドに記述しますがここでは省略します。

サンプルコード
C#（Xamarin.Forms）

    protected override void OnAttached()
    {
        // 境界線の幅と色を指定
        Control.Layer.BorderWidth = 3f;
        Control.Layer.BorderColor = Color.FromRgb(181, 15, 82).ToCGColor();
        // 角丸の角度を指定
        Control.Layer.CornerRadius = 10;

        // XuniAutoComplete に特化した設定
        if (Control.GetType().Equals(typeof(Xuni.iOS.Input.XuniAutoComplete)))
        {
            // XuniAutoCompleteにキャスト
            var xuniinput = (Xuni.iOS.Input.XuniAutoComplete)Control;
            // ドロップダウン部分の枠線と背景色を設定
            xuniinput.DropDownBorderColor = UIKit.UIColor.FromRGB(181, 15, 82);
            xuniinput.DropDownBackgroundColor = UIKit.UIColor.FromRGB(142, 142, 147);
        }
    }

3.　PCLプロジェクトでEffectsを適用する
　表示する画面のコントロールに対してEffectsを適用するコードを
　コードビハインドに記述します。

サンプルコード
C#（Xamarin.Forms）

public partial class Xuni_QuickStartPage : ContentPage
{
    public Xuni_QuickStartPage()
    {
        InitializeComponent();
        // Autocomplete の表示データを設定
        this.autoComplete.ItemsSource = Country.GetCountries();

        // 既定の境界線幅を0に設定して非表示
        this.autoComplete.HeaderBorderWidth = 0d;
        // ハイライトする文字の背景色を設定
        this.autoComplete.HighlightBackgroundColor = Color.FromHex("#F1D7E0");
        // iOSプロジェクト内に作成したRoundedEffectを、コントロールに追加(Attach)
        this.autoComplete.Effects.Add(Effect.Resolve("Effects.RoundedEffect"));
    }
}

これで完成です。
2で設定した内容が、iOSアプリに適用されて角丸の枠線がコントロールの周りに表示されました。
ドロップダウン部分の枠線と背景色も変更が適用されています。

Webサイト「クイックスタート」では、Xuniの利用準備を整えたプロジェクトを評価用ライセンス付きで公開しています。
上記のカスタマイズはこのプロジェクトを利用して実装すると確認できます。
プロジェクトは以下からダウンロード可能です。

Xuni　＞技術情報　＞クイックスタート

Xuni　＞ Xamarin プラットフォーム　＞ Input

[Xuni:Input]iOSアプリの入力領域を角丸の枠線で囲む方法 （Xamarin.Forms）

対象製品

詳細

関連情報

[Xuni:Input]iOSアプリの入力領域を角丸の枠線で囲む方法（Xamarin.Forms）