Xamarin.iOS의 행 높이 자동 크기 조정

  • 아티클

Warning

iOS 디자이너는 Visual Studio 2019 버전 16.8 및 Mac용 Visual Studio 2019 버전 8.8에서 사용이 중단되었으며 Visual Studio 2019 버전 16.9 및 Mac용 Visual Studio 버전 8.9에서 제거되었습니다. iOS 사용자 인터페이스를 빌드하는 권장 방법은 Xcode의 Interface Builder를 실행하는 Mac에서 직접 빌드하는 것입니다. 자세한 내용은 Xcode를 사용하여 사용자 인터페이스 디자인을 참조하세요.

iOS 8부터 Apple은 자동 레이아웃, 크기 클래스 및 제약 조건을 사용하여 콘텐츠 크기에 따라 지정된 행의 높이를 자동으로 늘리고 축소할 수 있는 테이블 뷰(UITableView)를 만드는 기능을 추가했습니다.

iOS 11에는 행이 자동으로 확장되는 기능이 추가되었습니다. 이제 내용에 따라 머리글, 바닥글 및 셀의 크기가 자동으로 조정될 수 있습니다. 그러나 iOS Designer, Interface Builder에서 테이블을 만들거나 행 높이가 고정된 경우 이 가이드에 설명된 대로 셀 크기 조정을 수동으로 사용하도록 설정해야 합니다.

iOS 디자이너의 셀 레이아웃

iOS 디자이너에서 행의 크기를 자동으로 조정하려는 테이블 뷰의 스토리보드를 열고 셀의 프로토타입 을 선택하고 셀 레이아웃을 디자인합니다. 예시:

The Cell's Prototype design

프로토타입의 각 요소에 대해 테이블 뷰의 크기가 회전 또는 다른 iOS 디바이스 화면 크기에 맞게 조정되므로 요소를 올바른 위치에 유지하는 제약 조건을 추가합니다. 예를 들어 셀 콘텐츠 Title 보기의 위쪽, 왼쪽 및 오른쪽에 고정합니다.

Pinning the Title to the top, left and right of the Cells Content View

예제 테이블의 경우 작은 Label 필드(아래 Title)는 줄여서 행 높이를 늘리거나 줄일 수 있는 필드입니다. 이 효과를 얻으려면 다음 제약 조건을 추가하여 레이블의 왼쪽, 오른쪽, 위쪽 및 아래쪽을 고정합니다.

These constraints to pin the left, right, top and bottom of the label

이제 셀의 요소를 완전히 제한했으므로 확장해야 하는 요소를 명확히 해야 합니다. 이렇게 하려면 Properties Pad의 레이아웃 섹션에서 필요에 따라 콘텐츠 포옹 우선 순위 및 콘텐츠 압축 저항 우선 순위를 설정합니다.

The Layout section of the Properties Pad

확장 하려는 요소를 허깅 우선 순위 값이 낮 고 압축 저항 우선 순위 값이 낮도록 설정합니다.

다음으로 셀 프로토타입을 선택하고 고유한 식별자를 제공해야 합니다.

Giving the Cell Prototype a unique Identifier

예제의 경우 . GrowCell 나중에 테이블을 채울 때 이 값을 사용합니다.

Important

표에 둘 이상의 셀 형식(프로토타입)이 포함된 경우 자동 행 크기 조정이 작동하려면 각 형식에 고유한 형식 Identifier 이 있는지 확인해야 합니다.

셀 프로토타입의 각 요소에 대해 C# 코드에 노출할 이름을 할당합니다. 예시:

Assign a Name to expose it to C# code

다음으로 , UITableView 및 (프로토타입)에 대한 UITableViewController사용자 지정 클래스를 UITableCell 추가합니다. 예시:

Adding a custom class for the UITableViewController, the UITableView and the UITableCell

마지막으로 모든 예상 콘텐츠가 레이블에 표시되도록 하려면 Lines 속성을 다음으로 0설정합니다.

The Lines property set to 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설정해야 합니다. 또한 .에서 UITableViewController속성을 설정 EstimatedRowHeight 해야 합니다. 예시:

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 ();
}

이 예상치는 정확할 필요는 없으며 테이블 뷰에서 각 행의 평균 높이에 대한 대략적인 추정치일 뿐입니다.

이 코드를 사용하면 앱이 실행되면 셀 프로토타입의 마지막 레이블 높이에 따라 각 행이 축소되고 증가합니다. 예시:

A sample table run