質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.34%

  • Xamarin

    557questions

    Xamarin(ザマリン)は、iPhoneなどのiOSやAndroidで動作し、C# 言語を用いてアプリを開発できるクロスプラットフォーム開発環境です。Xamarin Studioと C# 言語を用いて、 iOS と Android の両方の開発を行うことができます。

カスタムセルのHorizontalTextAlignment = TextAlignment.Endを指定したラベルの表示位置

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 684

otaota

score 22

前提・実現したいこと

添付したソースのままだと、下図のように各セルの右上に小さい文字が期待通り表示されるのですが、
イメージ説明

return new ViewCellのところをコメントアウトしている方に切り替えて、横2段組になるように表示すると、小さい文字が下の文字列の長さに合わせて表示されてしまっています。(上図のように右上に表示させたい)
イメージ説明

2段組の上の図のように右上に表示させるためにはどのようにすればよろしいでしょうか?

該当のソースコード

using System;
using System.Collections.Generic;

using Xamarin.Forms;

namespace XXXXX
{
    public class Test2Page : ContentPage
    {
        struct Data {
            public string textA { get; set; }
            public string textB { get; set; }
            public string time { get; set; }
        };

        public Test2Page()
        {
            var ar = new List<Data>();
            ar.Add( new Data {
                    textA = "あいうえおかきくけこ",
                    textB = "阿",
                    time = "1970-01-01 00:00:00",
                });
            ar.Add( new Data {
                    textA = "さしすせそ",
                    textB = "伊",
                    time = "1980-02-02 22:22:22",
                });
            ar.Add( new Data {
                    textA = "いろはにほへと",
                    textB = "宇",
                    time = "1990-03-03 03:33:33",
                });

            var listView = new ListView
            {
                ItemsSource = ar,
                HasUnevenRows = true,
            };

            listView.ItemTemplate = new DataTemplate(() =>
            {
                var textA = new Label()
                {
                    FontSize = 20,
                };
                textA.SetBinding(Label.TextProperty, "textA");
                var textB = new Label()
                {
                    FontSize = 20,
                };
                textB.SetBinding(Label.TextProperty, "textB");
                var time = new Label()
                {
                    FontSize = 10,
                    HorizontalTextAlignment = TextAlignment.End,
                };
                time.SetBinding(Label.TextProperty, "time");

                return new ViewCell
                {
                    //View = new StackLayout
                    //{
                    //    Orientation = StackOrientation.Horizontal,
                    //    Children = {
                    //        textB,
                    //        new StackLayout {
                    //            Children = {
                    //                time,
                    //                textA,
                    //            },
                    //        },
                    //    },
                    //},
                    View = new StackLayout
                    {
                        Children = {
                            time,
                            textA,
                            textB,
                        },
                    },
                };
            });

            Content = new StackLayout
            {
                Children = {
                    listView,
                },
            };

        }
    }
}

     

試したこと  

                    View = new StackLayout
                    {
                        Children = {
                            time,
                            new StackLayout
                            {
                                Orientation = StackOrientation.Horizontal,
                                Children = {
                                    textB,
                                    new StackLayout {
                                        Children = {
                                            textA,
                                        },
                                    },
                                },
                            },
                        },                        
                    },

   のように上下2段、かつ下段を左右2段に分ける方法ではうまくいくので、左右2段のままできるかの質問になります。     

補足情報(言語/FW/ツール等のバージョンなど)  

Xamarin 6.3(build 864)    Mac Note Pro    OS X Yosemite(10.10.5)

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

元のソースコードの場合、入れ子になっている方のStackLayoutのHorizontalOptionsをFillAndExpandに変更すると実現できます。

View = new StackLayout
{
    Orientation = StackOrientation.Horizontal,
    Children = {
        textB,
        new StackLayout {
            // ↓この行を追加
            HorizontalOptions = LayoutOptions.FillAndExpand,
            Children = {
                time,
                textA,
            },
        },
    },
},

ただ、StackLayoutの入れ子はレイアウトのコストが高く、よりコストの低いGridAbsoluteLayoutを使用した方が高速になります。
同等のレイアウトをGridで再現すると以下のようなコードとなります。

var grid = new Grid
{
    ColumnDefinitions ={
        new ColumnDefinition{ Width = GridLength.Auto  },
        new ColumnDefinition{ Width = GridLength.Star },
    },
    RowDefinitions = {
        new RowDefinition{ Height = GridLength.Auto },
        new RowDefinition{ Height = GridLength.Auto },
    },
    RowSpacing = 0,
    ColumnSpacing = 0,
};

grid.Children.Add(textB, 0, 0);
Grid.SetRowSpan(textB, 2);
grid.Children.Add(time, 1, 0);
grid.Children.Add(textA, 1, 1);

return new ViewCell
{
    View = grid,
};

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/07/07 11:27

    ありがとうございます。
    早速試してみてどちらの方法もうまくいきました。
    Gridの方が高速ということで今回はそちらを採用しようと思います。

    ただ、現在、Gridを使った別パターンで似たような問題ではまっていることがあり、
    (今回の質問で一緒に解決することを期待していたのですが)そちらはまだ解決しないので
    簡単なサンプルを作ってまた質問させていただきたいと思います。

    キャンセル

同じタグがついた質問を見る

  • Xamarin

    557questions

    Xamarin(ザマリン)は、iPhoneなどのiOSやAndroidで動作し、C# 言語を用いてアプリを開発できるクロスプラットフォーム開発環境です。Xamarin Studioと C# 言語を用いて、 iOS と Android の両方の開発を行うことができます。