MOTO+4 Applocations のブログ

弊方では車、バイクの点検記録モバイルアプリを計画中です。点検選択メニューはイマドキはアイコン画像表示でありましょう。Xamarinでは、FlexLayout を採用すると、ImageButtonを流込みで、左から右、右をはみ出す場合は次の行と自動で並べてくれます、端末表示を横方向の場合にも追従してくれます。

アイコンメニューが並んでいると、その順序は変更したくなります。タップしてドラック移動くらい標準で備わっているかと思いきや、それはありません。ドラッグイベントさえありません。マジですか、、、. Xamarinの後継 NET MAUI ではドラックがサポートされるとよいのですが、、、

とりいそぎ順序変更はできるようにします。弊方では以下のように対応しました。

1. 操作モードに「移動モード」を追加。
2. 移動モード時に切替えると、上/下/左/右ボタンを表示する。
3. 移動対象のメニュー項目をユーザに選択させる。選択されているメニュー項目はImageButton のboderWidth で境界線を付ければよいでしょう。
4. 上/下/左/右ボタンのそれぞれに、移動イベントを追加。
5. FlexLayout では子GUIに対して、追加、挿入、削除のみのサポートです。よって、移動前のImageButton は Children.Removeメソッドで一度削除します。
6. 削除した ImageButton を再生成し、Children.Insert メソッドで移動位置に追加します。
7. 後は FlexLayout が自動で並べ替えてくれます。

以上のように一見は簡単そうですが、

• 現実には、ImageButton だけでアイコンメニューを構築することはないでしょう。弊方でも、メニュータイトルやステータスを付与しているため、それらをまとめる Grid で配置しています。GridやLabel たちのUIインスタンスの管理の必要性が生じます。
• 画面生成時は全メニュー項目を生成し、移動時は指定メニュー項目を生成できるように、画面クラスのメソッド構造にしておくことも必要です。後から移動を追加する場合は、画面クラス内部の組換えに手間を要すでしょう。
• メニューの表示順は通常はデータベースに保存することになるでしょう。移動の都度、全メニュー項目の表示順を一括更新することとなります。移動操作が短時間内に素早く行われると負荷が高くくなってしまいます。Sleepでディレイ時間を設けるなど工夫が必要です。
• 移動確定後に一回まとめDB更新を行う方法もありますが、ユーザ操作も増えてしまいますし、キャンセルや途中でエラーが発生したときのリカバリ処理が面倒です。

以下画面の実行例です。コード例は割愛します。

上下左右ボタンの矢印は、仮で文字の矢印にしてあります。Androidではややチープですが、iOSでは結構見れるクオリティでした。

以上苦肉の策でした。Xamarinの後継 NET MAUI ではドラックがサポートされているとよいのですが、、、

Xamarin にて、ImageButton をに .cs 使から画像を .Source に設定し画面を表示すると、一瞬ちらっと何かがせ見えます。iPhone より Andoird の方が顕著です。よく凝視すると、ImageButton に載せた画像が、ボタンのサイズを超えて描画されているようです。

GUIシステムの創成期だった1990年代ならまだしも、イマドキこんなあからさまな事象があるなんて。。。HTMLだってそんなことはないでしょう。

以下のようにトライしてみましたがダメでした。

• 昔よくやったGUI描画中隠し：isVisbile=false して表示寸前で isVisbile=true の効果もなし。
• 通常のImageでは発生しませんが、Xamarin ではタップイベントが未サポ。
• NuGetのFFImageLoadingライブラリの CachedImage でも同じ。
• .cs 内で、WidthRequest で強制しても効かず。

面倒ですが、ImageButton のサイズに合わせて画像を縮小して、設定するしかないようです。しかし画像の縮小は Xamarin.Form では書けないようです。 Android 、iOS側のそれぞれのコードで書く必要があるようです。以下URLにサンプルコードがありました。

https://github.com/xamarin/xamarin-forms-samples/blob/main/XamFormsImageResize/XamFormsImageResize/ImageResizer.cs

上記コードを、Project.Android/MainActivity.cs と Project.iOS/Main.cs に、サービスとして分けて実装します。 当方は、.NETのStremクラス に置き替えて実装しました。 実用には各所でnullチェックが必要です。

AndroidのMainActivity.csの場合：

[assembly: Dependency( typeof( ResizeImageService   ) ) ]

ublic class ResizeImageService : IResizeImageService {
   public Stream ResizeImage(
            Stream  imgStream,        // Imageストリーム
            double  width,            // 0時は縦サイズに合わせる
            double  height            // 0時は横サイズに合わせる
   ) {
   Bitmap orgImg = BitmapFactory.DecodeStream ( imgStream );

   if ( height == 0 ) {           
       // 縦サイズ未指定のとき、幅からImgaeオリジナル縦横比率で算出する。
       height =  width  / orgImg.Width * orgImg.Height;
   }
   else if ( width == 0 ) {           
       // 幅サイズ未指定のとき、高さからImgaeオリジナル縦横比率で算出する。
        width  = height  / orgImg.Height * orgImg.Width ;
   }

   Bitmap resizImg = Bitmap.CreateScaledBitmap( orgImg, ( int )width, ( int )height, false );

   using (MemoryStream ms = new MemoryStream())
   {
      resizImg.Compress(  Bitmap.CompressFormat.Jpeg, // 画像形式 Jpeg or prg
                          100,                        // image品質 0～100
                          ms                          // 出力Stream
       );
       return new MemoryStream( ms.ToArray() );
   }
}

iOSのmain.csの場合：

[assembly: Dependency( typeof( ResizeImageService   ) ) ]

public class ResizeImageService : IResizeImageService {
    public Stream ResizeImage(
        Stream  imgStream,        // Imageストリーム
        double  width,            // 0時は縦サイズに合わせる
        double  height            // 0時は横サイズに合わせる
    ) {
        // Stream(生Data)からImage生成
        UIImage orgImg = ImageFromStream( imgStream );

        UIImageOrientation orientation = orgImg.Orientation;

        if ( height == 0 ) {           
            // 縦サイズ未指定のとき、幅からImgaeオリジナル縦横比率で算出する。
            height =  width  / orgImg.Size.Width * orgImg.Size.Height;
        }
        else if ( width == 0 ) {           
            // 幅サイズ未指定のとき、高さからImgaeオリジナル縦横比率で算出する。
            width  = height  / orgImg.Size.Height * orgImg.Size.Width ;
        }

      // create a 24bit RGB image (Apple API)
      using (CGBitmapContext context = new CGBitmapContext(
            IntPtr.Zero,        // i : dataポインタ
            (int)width,         // i : Bitmap幅
            (int)height,        // i : Bitmap縦
            8,                  // i : 1つの色のBit数。× 3 が所謂Bit深さ
            4 * (int)width,     // i : Bitmap容量
            CGColorSpace.CreateDeviceRGB(),     // i : カラースペース
            CGImageAlphaInfo.PremultipliedFirst // i : bitmapInfo
        ) ) {

        // RectangleF は Microsoft のもの。
        RectangleF imageRect = new RectangleF(0, 0, ( float )width, ( float )height );

        context.DrawImage( imageRect, orgImg.CGImage );  // draw the image

        UIKit.UIImage resizedImage = UIKit.UIImage.FromImage( 
                                             context.ToImage(), 
                                             0, 
                                             orientation );

         // save the image as a jpeg (ToStreamは未サポ)
         byte[] imgBytes = resizedImage.AsJPEG().ToArray();

        return new MemoryStream( imgBytes );    // byte[] -> Stream 変換
    }

    private static UIKit.UIImage ImageFromStream( Stream data) {
        UIKit.UIImage image;
        try {
            image = new UIKit.UIImage( Foundation.NSData.FromStream( data ) );
        }
        catch (Exception e) {
            return null;
        }
        return image;
    }
}

Xamarin.Form側：

ImageButton  newImg    = new ImageButton {
        中略
};

System.IO.Stream stream = 画像をStream変換;

Stream stream2 = DependencyService.
	Get<IResizeImageService>().ResizeImage(
		stream, 
		newImg.Width,	/* 幅: Grid幅 */
		0		/* 高さ:幅に合せ */ );

newImg.Source  = ImageSource.FromStream(() => stream2 );

ImageButton を継承して画像縮小付きの新クラスをつくるとベストですね。

画面上の任意の文字をクリックしたとき、イベント処理を行いたい場合、素の .NET C# では Label でも MouseClickイベント が指定できますが、Xamarin では Label に Clickedイベント がありません。

そこでButton にしてしまうと以下のように背景がグレーになってしまいます。

Button newLbl = new Button {
    Text = "テストテスト",
    HorizontalOptions = LayoutOptions.Start,

    FontSize = Device.GetNamedSize( NamedSize.Medium, typeof(Label))
};
newLbl.Clicked += OnClicked_Button;
	

これは boderWidth = 0 、backgroundColor=page背景色 で一見回避できます。

Button newLbl = new Button {
    Text = "テストテスト",
    HorizontalOptions = LayoutOptions.Start,
    FontSize = Device.GetNamedSize( NamedSize.Medium, typeof(Label)),
    BorderWidth = 0,
    BackgroundColor = Pageの背景色,
};
newLbl.Clicked += OnClicked_Button;

Button単体ではよいのですが、Grid に表形式に配置した場合、文字部分でけにしかタップに反応しないという問題が発生します。ユーザ側では「反応が悪い」と思われてしまいます。そこでそこでWidthRequst で幅を指定すると、、、

Button newLbl = new Button {
    Text = "テストテスト",
    WidthRequest = 300,
    HorizontalOptions = LayoutOptions.Start,
    FontSize = Device.GetNamedSize( NamedSize.Medium, typeof(Label)),
    BorderWidth = 0,
    BackgroundColor = Pageの背景色,
};
newLbl.Clicked += OnClicked_Button;

しかしHorizontalOptions =Start  を指定しても文字が中央寄せになってしまいます。文字位置は Panding の reight 量を増やして調整します。しかし増やしすぎると文字が見えなくなるため、文字数から計算して reight 量を求める必要があります。確認して背景色の標準に戻して試してみます。

Button newLbl = new Button {
    Text = "テストテスト",  
    HorizontalOptions = LayoutOptions.Start,
    FontSize = Device.GetNamedSize( NamedSize.Medium, typeof(Label)),
    BorderWidth = 0,
    //BackgroundColor = Pageの背景色,
};
// 18 は Mdemu でAndroidでの一文字サイズ実調整値0。
// 140 は 数値と単位の幅。
double rMargen = this.Width - (newLbl.Text.Length * newLbl.FontSize) - 140;
newLbl.Padding  = new Thickness( 2, 0, rMargen, 0 );
newLbl.Clicked += OnClicked_Button;

これでタップ可能な Label ができました。後は背景色を戻せばOK。フォント幅は可変長なので厳密にはズレが生じます。文字列描画幅の今日のところ算出まではおこなっていません。厳密に行う方法はあるようですが文字種をカウントして以下の式で「換算文字数」を計算して、フォント幅に掛けてあげると大体合いいます。 各乗数は逐次調整ください。

総文字数 - ( 半角英数字の桁数 × 0.5 ) - ( Wとwの桁数 × 0.8 ) - ( iとlの桁数 × 0.2 )  

ユーザさんは「簡単だろ?」「出来て当たり前」と思われるかもしれませんが、様々なプログラミングのフラットフォームにて意図とおり仕様が実現できないことが2回に1回は発生します。特にGUI系は。市販本にもWEB記事にも載っていない。プログラミングにも表には見えない苦労がたくさんあります。

もうずく開発が終了してしまう Xamarin ですが使い物にならなくなるのはも少し先です。後継の .NET MAUI への移行もも少しまった方が安定し正しいHowToも蓄積するでしょう。他WEB記事では見つからなかったプログラミング方法を覚え書きしておきたいと思います。

アプリの要件によっては、ImageButton 上に文字を表示しいシチュエーションがあります。素の Button は ImageSourceプロパティ で画像を指定し、Textプロパティ で文字も指定できますが、画像の周囲に文字は配置されます。

<Button Text="テスト" ImageSource="{local:ImageResource project.Images.oil.png}"  
 VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" />

画像の上に文字は描画するには、Grid に ImageButton → Label の順で 同じ行列位置に配置します。

<Grid  HorizontalOptions="CenterAndExpand">
     <Grid.RowDefinitions>
         <RowDefinition Height="100" />
     </Grid.RowDefinitions>
     <Grid.ColumnDefinitions>
	<ColumnDefinition Width="100" />
     </Grid.ColumnDefinitions>
     <ImageButton  Grid.Row="0" Grid.Column="0"
          Source="{local:ImageResource project.公園の船.png}" />
     <Label Grid.Row="0" Grid.Column="0" Text="テスト" FontSize="24"  
          VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" />
 </Grid>

でもこれだけだと文字が見にくいです。ポイントの大きい Label を白で Label の下に配置してあげるとGoodです。

<Grid  HorizontalOptions="CenterAndExpand">
     <Grid.RowDefinitions>
         <RowDefinition Height="100" />
     </Grid.RowDefinitions>
     <Grid.ColumnDefinitions>
	<ColumnDefinition Width="100" />
     </Grid.ColumnDefinitions>
     <ImageButton Grid.Row="0" Grid.Column="0"
                  Source="{local:ImageResource project.公園の船.png}" />
     <Label  Grid.Row="0" Grid.Column="0"
            Text="テスト" FontSize="26"  TextColor="White" FontAttributes="Bold"
            VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" />
     <Labe  Grid.Row="0" Grid.Column="0" Text="テスト" FontSize="24"  
            VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" />
  </Grid>

Android でも iOS でも 同様です。実際の実装では、.cs 側で動的に生成しています。せっかく用意したのですがボツになりました。.NET MAUI でもHowtoとして生きるとよいのですが、、、