Xamarin.Formsで縦書きアプリ

1,357 views

Published on

Xamarin.Formsで縦書きアプリ

Published in: Software
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,357
On SlideShare
0
From Embeds
0
Number of Embeds
875
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Xamarin.Formsで縦書きアプリ

  1. 1. 「Xamarin.Formsで縦組みアプリを作る」 JXUGC#17 お前の(開発中の)Xamarinアプリを見せてみろ! 2016.10.15 株式会社ケイ・ジェイ・システムズ 藤森 智
  2. 2. 自己紹介 名前:藤森 智(ふじもり さとる) 所属:株式会社ケイ・ジェイ・システムズ 仕事:古典データの検索サービス、辞書・辞典や電子書籍の データ製作・WEB製作など Xamarin歴:2年ほど(ライセンス歴)。スマホ開発未経験。Xamarinを始めてみて 己のC#のレベルの低さを痛感する日々。LINQ,async,XAML,MVVM,NuGet,github 等々まったく知らないところから開始。 趣味:料理、おでんづくり Twitter:@masatoru Blog:http://masatoru.hatenadiary.jp/
  3. 3. Xamarin.Formsで縦組みアプリ SkiaSharpを使って縦組みを実現 CustomRendererの実装 Viewと各コントロールの関係(MVVM,Binding)
  4. 4. SkiaSharp Cross-Platform 2D Graphics Library Xamarinが推奨 日本語情報が少ない https://skia.org/
  5. 5. SkiaSharpを使って縦組みで書く 1文字ずつX,Yを指定して文字を描画する ルビ、半角数字の縦中横、禁則、上付、下付等 SkiaSharp.SKCanvas.DrawTextメソッド public void DrawText(string text, float x, float y, SKPaint paint); public void DrawText(IntPtr buffer, int length, SKPoint[] points, SKPaint paint); //GlyphID用 縦組みの文字を描画する(括弧、句読点、用促音など) TypeLoader(https://github.com/espresso3389/TypeLoader) →TategumiViewを作った
  6. 6. TategumiViewとRendererの関係 NativeView Draw() NativeView OnDraw() NativeView UpdateBitmap() ネイティブ側 TategumiVie w Draw() iOS Android UWP Forms側 Renderer RendererRenderer BindableProperty →PageIndex(ページ番号) CurrentPage(組版ページ) Width,Height (VisualElement) Touch(Android) UITapGestureRecognizer(iO S) →タップしたらページ移動 NextPage,PreviousPage OnElementPropertyChange d →組版ページが来たら描画 Invalidate(Android) SetNeedsDisplay(iOS)
  7. 7. TategumiViewとその他のコント ロールの関係(Binding) ・タグ(XML)の読み込み ・デバイスのサイズ に合わせて組版 ・ページを描画する ユーザーの操作 例)目次を選択→本文を表示 ページを切り替え 等々 Model(BookManage r) ViewMode l View(TategumiView ) Event PageLis t ParagraphList 組版 1ページ分 Compos e Read View ・目次の読み込み ・フォントサイズ、行間
  8. 8. XAML <?xml version="1.0" encoding="utf-8" ?> <ContentPage SizeChanged="HonbunPage_OnSizeChanged" …> <StackLayout …> <local:TategumiView VerticalOptions="FillAndExpand" CurrentPage="Binding CurrentPage.Value}" ←組版ページ PageIndex="{Binding Path=PageIndex.Value,Mode=TwoWay}" ←ページ情 報 Width="{Binding TateViewWidth.Value} " ←View高さ Height="{Binding TateViewHeight.Value}"> ←View幅 </local:TategumiView> <StackLayout Orientation="Horizontal" VerticalOptions="End"> <Slider VerticalOptions="Center" HorizontalOptions="FillAndExpand" Minimum="0" Value="{Binding Path=PageIndex.Value,Mode=TwoWay}"/> <Label Text="{Binding PageIndex.Value}"/><Label Text="/"/> <Label Text="{Binding PageNum.Value}"/> </StackLayout> </StackLayout> </ContentPage>
  9. 9. ユーザーの操作からBindingして Viewに表示するまで 目次を選択して本文を表示する Viewをタップしたらページを移動する 環境設定で文字サイズを大きくしたらViewの文字を大きくする 回転したらデバイスの高さに合わせて再描画する
  10. 10. 最後に #Xamarinはいいぞ ReSharperがあればなおgood #JXUGはすばらしくいいぞ
  11. 11. ご清聴ありがとうございました。

×