記事一覧

リンクボタン(ハイパーリンク)を作成する方法 | Xamarin.Forms


今回はXamarinでリンクボタン(LinkButtonまたはHyperLinkと同等)のコントロールを表示する方法をご紹介いたします。Xamarinではリンクボタンが用意されておりません。そこでカスタムコントロールとカスタムプロパティによりブラウザを表示する機能を実装し、カスタムレンダラーで下線を表示することが可能です。ブラウザでURLを表示する方法については以前の記事でご紹介しておりますのでご確認ください。アプリ内で表示をしたい場合はWebViewでも実装可能なので、お好みに応じて変更してください。


iPhone7 iOS10
xamarin_linkbutton_01.png
Android4
xamarin_linkbutton_02.png




前提条件
・Windows10 Pro 64Bit
・Visual Studio 2015 Community Update3
・Xamarin 4.4.0.34 (NuGet Xamarin.Forms 2.3.4.247)
・macOS Sierra 10.12.4 / Xcode8.3.1 / Xamarin.iOS 10.8.0.1



1.PCLの記述方法

ベースとなるラベルコントロールを使用し、必要なプロパティを実装します。

BaseLinkButton.cs
using Xamarin.Forms;
namespace AppName.Controls
{
    public class BaseLinkButton : Label
{
public BaseLinkButton() : base()
{
//初期値
this.IsUnderline = true;
this.IsDisabled = false;
base.BackgroundColor = Color.Transparent;

//リンクをタップした際の動作を設定
var tgr = new TapGestureRecognizer();
tgr.Tapped += this.OnClicked;
this.GestureRecognizers.Add(tgr);
}

public static BindableProperty UrlProperty = BindableProperty.Create(
propertyName: "Url",
returnType: typeof(string),
declaringType: typeof(BaseLinkButton),
defaultValue: "",
defaultBindingMode: BindingMode.TwoWay);

public static BindableProperty IsUnderlineProperty = BindableProperty.Create(
propertyName: "IsUnderline",
returnType: typeof(bool),
declaringType: typeof(BaseLinkButton),
defaultValue: true,
defaultBindingMode: BindingMode.TwoWay);

//URLを設定するプロパティ
public string Url
{
get
{
return (string)GetValue(UrlProperty); ;
}
set
{
SetValue(UrlProperty, value);
}
}
//下線を表示するかどうか
public bool IsUnderline
{
get
{
return (bool)GetValue(IsUnderlineProperty); ;
}
set
{
SetValue(IsUnderlineProperty, value);
}
}
//有効無効の設定(IsEnabledがoverrideできないため)
public bool IsDisabled
{
get
{
return !base.IsEnabled;
}
set
{
base.IsEnabled = !value;
OnEnabledChange(null, null);
}
}
//無効の場合に文字色を変更する
void OnEnabledChange(object sender, EventArgs e)
{
if (!base.IsEnabled)
{
this.TextColor = Color.Gray;
}
else
{
this.TextColor = Color.Blue;
}
}
//タップ時の動作
void OnClicked(object sender, EventArgs e)
{
//無効の場合はタップ時の動作をしない
if (!base.IsEnabled)
{
return;
}

//URL未設定の場合は処理を終了する
if (String.IsNullOrEmpty(this.Url))
{
return;
}

string err = String.Empty;
//外部ブラウザを起動しURLのサイトを表示する
DependencyService.Get<IWebBrowserService>().Open(new Uri(this.Url), err);
}
}
}



2.iOSのカスタムレンダラー

iOSプロジェクト内に下線を表示するカスタムレンダラーを作成します。

CustomLinkButtonRenderer.cs
using UIKit;
using Foundation;
using System.ComponentModel;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
using AppName.Controls;
[assembly: ExportRenderer(typeof(BaseLinkButton), typeof(CustomLinkButtonRenderer))]
namespace AppName.iOS.Renderer
{
    public class CustomLinkButtonRenderer : LabelRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
{
base.OnElementChanged(e);
var view = (BaseLinkButton)Element;

UpdateUi(view, Control);
}

protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
{
base.OnElementPropertyChanged(sender, e);
var view = (BaseLinkButton)Element;

if (e.PropertyName == BaseLinkButton.IsUnderlineProperty.PropertyName)
{
UpdateUi(view, Control);
}
}

private static void UpdateUi(BaseLinkButton view, UILabel control)
{
var labelTitle = new NSMutableAttributedString(control.Text);

if (view.IsUnderline)
{
labelTitle.AddAttribute(UIStringAttributeKey.UnderlineStyle,
NSNumber.FromInt32((int)NSUnderlineStyle.Single),
new NSRange(0, labelTitle.Length));
}

control.AttributedText = labelTitle;
}
}
}



3.Androidのカスタムレンダラー

Androidプロジェクト内に下線を表示するカスタムレンダラーを作成します。

CustomLinkButtonRenderer.cs
using Android.Widget;
using Android.Graphics;
using System.ComponentModel;
using Xamarin.Forms.Platform.Android;
using Xamarin.Forms;
using AppName.Controls;
[assembly: ExportRenderer(typeof(BaseLinkButton), typeof(AppName.Droid.Renderer.CustomLinkButtonRenderer))]
namespace AppName.Droid.Renderer
{
    public class CustomLinkButtonRenderer : LabelRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
{
base.OnElementChanged(e);

var view = (BaseLinkButton)Element;
var control = Control;

UpdateUi(view, control);
}

protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
{
base.OnElementPropertyChanged(sender, e);
var view = (BaseLinkButton)Element;

if (e.PropertyName == BaseLinkButton.IsUnderlineProperty.PropertyName)
{
Control.PaintFlags = view.IsUnderline ? Control.PaintFlags | PaintFlags.UnderlineText : Control.PaintFlags &= ~PaintFlags.UnderlineText;
}
}

static void UpdateUi(BaseLinkButton view, TextView control)
{
if (view.FontSize > 0)
{
control.TextSize = (float)view.FontSize;
}

if (view.IsUnderline)
{
control.PaintFlags = control.PaintFlags | PaintFlags.UnderlineText;
}
}
}
}



4.使用方法

XAMLページに今回作成したBaseLinkButtonコントロールを配置し、そのプロパティを設定するだけでとても簡単です。

TestPage.xaml
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:base="clr-namespace:AppName.Controls;assembly=AppName" >
    <base:BaseLinkButton x:Name="linkButton1" Url="http://www.google.com/" Text="有効なリンク" IsDisabled="False" IsUnderline="True" HorizontalOptions="Center" />
<base:BaseLinkButton x:Name="linkButton2" Url="http://www.google.com/" Text="無効なリンク" IsDisabled="True" IsUnderline="True" HorizontalOptions="Center" />
<base:BaseLinkButton x:Name="linkButton3" Url="http://www.google.com/" Text="下線非表示リンク有効" IsDisabled="False" IsUnderline="False" HorizontalOptions="Center" />
<base:BaseLinkButton x:Name="linkButton4" Url="http://www.google.com/" Text="下線非表示リンク無効" IsDisabled="True" IsUnderline="False" HorizontalOptions="Center" />

<ContentPage>




当ブログの内容をまとめた Xamarin逆引きメニュー は以下のURLからご覧になれます。
http://itblogdsi.blog.fc2.com/blog-entry-81.html


関連記事

コメント

コメントの投稿

アルバム

広告

プロフィール

石河 純


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

IT関連の知識はざっくりとこんな感じです。
【OS関連】
WindowsServer: 2012/2008R2/2003/2000/NT4
Windows: 10/8/7/XP/2000/me/NT4/98
Linux: CentOS RedHatLinux9
Mac: macOS Sierra 10.12 / OSX Lion 10.7.5 / OSX Snow Leopard 10.6.8
【言語・データベース】
VB.net ASP.NET C#.net Java VBA
Xamarin.Forms
Oracle10g SQLServer2008R2 SQLAnywhere8/11/16
ActiveReport CrystalReport ReportNet(IBM)
【ネットワーク関連】
CCNP シスコ技術者認定
Cisco Catalyst シリーズ
Yamaha RTXシリーズ
FireWall関連
【WEB関連】
SEO SEM CSS IIS6/7 apache2

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