次の方法で共有

Xamarin.iOS での行の高さの自動サイズ設定

  • [アーティクル]

警告

iOS Designer は、Visual Studio 2019 バージョン 16.8 および Visual Studio 2019 for Mac バージョン 8.8 で非推奨とされ、Visual Studio 2019 バージョン 16.9 および Visual Studio for Mac バージョン 8.9 から削除されています。 iOS のユーザー インターフェイスについては、Xcode の Interface Builder が実行されている Mac で直接ビルドすることをお勧めします。 詳細については、「Xcode を使用したユーザーインターフェイスの設計」を参照してください。

iOS 8 以降、Apple は、自動レイアウト、サイズ クラス、制約を使用して、コンテンツのサイズに基づいて、特定の行の高さを自動的に拡大/縮小できるテーブル ビュー (UITableView) を作成する機能を追加しました。

iOS 11 では、行を自動的に展開する機能が追加されました。 ヘッダー、フッター、セルは、既定でコンテンツに基づいて自動的にサイズ設定されるようになりました。 ただし、テーブルが iOS Designer、Interface Builder で作成されている場合、または行の高さが固定されている場合は、このガイドで説明するように、セルのサイズ設定を手動で有効にする必要があります。

iOS Designer のセル レイアウト

iOS Designer で行の自動サイズ設定を行うテーブル ビューのストーリーボードを開き、セルの [プロトタイプ] を選択し、セルのレイアウトを設計します。 次に例を示します。

セルのプロトタイプ設計

プロトタイプの各要素に対して、テーブル ビューが回転したり、iOS デバイスの画面サイズが変更しても、その要素を正しい位置に保持するための制約を追加します。 たとえば、セルのコンテンツ ビューの上、左、右に Title をピン留めします。

セル コンテンツ ビューの上、左、右にタイトルをピン留めする

この例のテーブルの場合、小さい Label (Title の下にあります) は、行の高さを増減するために縮小/拡大できるフィールドです。 この効果を実現するには、ラベルの左、右、上、下をピン留めするために次の制約を追加します。

ラベルの左、右、上、下にピン留めするためのこれらの制約

セル内の要素を完全に制約したので、どの要素を伸縮する必要があるかを明確にする必要があります。 これを行うには、Properties Pad の [レイアウト] セクションで必要に応じて [コンテンツのハギング優先度] と [コンテンツの圧縮抵抗優先度] を設定します。

Properties Pad の [レイアウト] セクション

展開する要素を、低いハギング優先度の値と低い圧縮抵抗の優先度の値に設定します。

次に、セル プロトタイプを選択し、一意の識別子を指定する必要があります。

セル プロトタイプに一意の識別子を与える

この例の場合は、GrowCell です。 この値は、後でテーブルに入力するときに使用します。

重要

テーブルに複数のセルの種類 (プロトタイプ) が含まれている場合は、行の自動サイズ変更を機能させるために、それぞれの種類に一意の Identifier があることを確認する必要があります。

セル プロトタイプの要素ごとに、[名前] を割り当てて C# コードに公開します。 次に例を示します。

名前を割り当てて C# コードに公開する

次に、UITableViewController、UITableView、UITableCell (プロトタイプ) のカスタム クラスを追加します。 次に例を示します。

UITableViewController、UITableView、および UITableCell のカスタム クラスを追加する

最後に、想定されるすべてのコンテンツがラベルに表示されるようにするには、[行] プロパティを 0 に設定します。

Lines プロパティが 0 に設定されています

UI を定義したので、行の高さの自動サイズ変更を有効にするコードを追加しましょう。

高さの自動サイズ変更の有効化

テーブル ビューのデータソース (UITableViewDatasource) またはソース (UITableViewSource) のいずれかで、セルをデキューする場合は、デザイナーで定義した Identifier を使用する必要があります。 次に例を示します。

public string CellID {
    get { return "GrowCell"; }
}
...

public override UITableViewCell GetCell (UITableView tableView, Foundation.NSIndexPath indexPath)
{
    var cell = tableView.DequeueReusableCell (CellID, indexPath) as GrowRowTableCell;
    var item = Items [indexPath.Row];

    // Setup
    cell.Image = UIImage.FromFile(item.ImageName);
    cell.Title = item.Title;
    cell.Description = item.Description;

    return cell;
}

既定では、テーブル ビューは行の高さを自動でサイズ変更するように設定されます。 これを確認するには、RowHeight プロパティを UITableView.AutomaticDimension に設定する必要があります。 また、EstimatedRowHeight プロパティを UITableViewController に設定する必要があります。 次に例を示します。

public override void ViewWillAppear (bool animated)
{
    base.ViewWillAppear (animated);

    // Initialize table
    TableView.DataSource = new GrowRowTableDataSource(this);
    TableView.Delegate = new GrowRowTableDelegate (this);
    TableView.RowHeight = UITableView.AutomaticDimension;
    TableView.EstimatedRowHeight = 40f;
    TableView.ReloadData ();
}

この見積もりは正確である必要はなく、テーブル ビューの各行の平均的な高さを大まかに見積もったものにすぎません。

このコードを配置すると、アプリの実行時に、セル プロトタイプの最後のラベルの高さに基づいて、各行が縮小/拡大されます。 次に例を示します。

サンプル テーブルの実行