Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Xamarin.Formsで縦書きアプリ

3,571 views

Published on

Xamarin.Formsで縦書きアプリ

Published in: Software
  • Login to see the comments

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. ご清聴ありがとうございました。

×