boxviewの美味しい食べ方

11
2014.11.22 2Japan Xamarin User Group Conference 東日本編 Xamarin.Formsのグラフィック描画の考慮事項について BoxViewの美味しい食べ方

Upload: sin-furuya02

Post on 02-Jul-2015

560 views

Category:

Software


1 download

DESCRIPTION

2014.11.22 第2回 Japan Xamarin User Group Conference 東日本編

TRANSCRIPT

Page 1: BoxViewの美味しい食べ方

2014.11.22 第2回 Japan Xamarin User Group Conference 東日本編

Xamarin.Formsのグラフィック描画の考慮事項について

BoxViewの美味しい食べ方

Page 2: BoxViewの美味しい食べ方

自己紹介

識別子 SIN/札幌ワークス

Twitter @furuya02

仕事 某社でシステムサポート

スタッフ CLR/H

ブログ SIN@SAPPOROWORKSの覚書

Microsoft MVP for Visual C# (2013/1~)

フリーソフト BlackJumboDog

Page 3: BoxViewの美味しい食べ方

Xamarin.Formsでの描画考慮しなけれならない事項が2つあります

1 デバイスごとの画面サイズの違いモバイルアプリで共通の問題

2 PCLとレンダラーでのサイズの違いXamarin.Formsの特有の問題

本日は、こちらの話だけ・・

Page 4: BoxViewの美味しい食べ方

Xamarin.FormsのBoxView矩形しか描けない、最弱のコントロール(すいません)

何か描きたいときは、レンダラーで拡張してください

Page 5: BoxViewの美味しい食べ方

PCLとレンダラー側のサイズを検証するノーマルのBoxViewとBoxViewを継承したMyBoxViewを並べてみる

Android iOS WindowsPhone

BoxView

MyBoxView

Page 6: BoxViewの美味しい食べ方

レンダラーを実装するXamarin.Forms上のコントロールのWidth/Heightを使用する

PCL側public class MyBoxView : BoxView { }

レンダラー側(例:Android)

[assembly: ExportRenderer(typeof(MyBoxView), typeof(MyBoxViewRenderer))]

namespace App1.Droid {

class MyBoxViewRenderer :BoxRenderer{

public override void Draw(Canvas canvas){var myBoxView = (MyBoxView)Element; //Xamarin.Forms側のオブジェクトの取得

using (var paint = new Paint()){

var rect = new RectF(0, 0, (float)myBoxView.Width, (float)myBoxView.Height);paint.Color = myBoxView.Color.ToAndroid(); //塗りつぶしの色を指定canvas.DrawRoundRect(rect,0,0, paint); //四角形描画(塗りつぶし)

}}

Forms側オブジェクトのWidth/Heightを使用する

Forms側オブジェクトのColorを使用する

Page 7: BoxViewの美味しい食べ方

サイズが合わないBoxViewそのままと、レンダラーで描画する拡張BoxViewを比べると・・・XX

Android iOS WindowsPhone

Androidだけサイズが違う

BoxView

MyBoxView

Page 8: BoxViewの美味しい食べ方

Width/Heightの値が違うAndroidだけの問題

Forms側のサイズ値を使用する場合は、倍率を処理する

必要がある

Page 9: BoxViewの美味しい食べ方

比率を取得してPCL側のサイズに乗ずるこれで、すべて解決・・安心してサイズを使用してください

Page 10: BoxViewの美味しい食べ方

続きはブログで・・・SIN@SAPPOROWORKSの覚書 http://furuya02.hatenablog.com/

Page 11: BoxViewの美味しい食べ方

ご清聴ありがとうございました

札幌ワークス

http://www.sapporoworks.ne.jp/spw