Xamarin.iOS에서 테이블 모양 사용자 지정

표의 모양을 변경하는 가장 간단한 방법은 다른 셀 스타일을 사용하는 것입니다. 메서드 GetCell 에서 UITableViewSource각 셀을 만들 때 사용되는 셀 스타일을 변경할 수 있습니다.

셀 스타일

네 가지 기본 제공 스타일이 있습니다.

• 기본값 – .을 UIImageView지원합니다.
• 부제 - 부제와 부제가 지원됩니다 UIImageView .
• Value1 – 오른쪽에 정렬된 부제는 .을 UIImageView지원합니다.
• Value2 – 제목은 오른쪽 맞춤이고 부제목은 왼쪽 맞춤(이미지 없음)입니다.

이러한 스크린샷은 각 스타일이 표시되는 방식을 보여 줍니다.

샘플 CellDefaultTable에는 이러한 화면을 생성하는 코드가 포함되어 있습니다 . 셀 스타일은 다음과 같이 생성자에서 UITableViewCell 설정됩니다.

cell = new UITableViewCell (UITableViewCellStyle.Default, cellIdentifier);
//cell = new UITableViewCell (UITableViewCellStyle.Subtitle, cellIdentifier);
//cell = new UITableViewCell (UITableViewCellStyle.Value1, cellIdentifier);
//cell = new UITableViewCell (UITableViewCellStyle.Value2, cellIdentifier);

그런 다음 셀 스타일의 지원되는 속성을 설정할 수 있습니다.

cell.TextLabel.Text = tableItems[indexPath.Row].Heading;
cell.DetailTextLabel.Text = tableItems[indexPath.Row].SubHeading;
cell.ImageView.Image = UIImage.FromFile("Images/" + tableItems[indexPath.Row].ImageName); // don't use for Value2

Accessories

셀은 보기 오른쪽에 다음 액세서리를 추가할 수 있습니다.

• 확인 표시 – 표에서 다중 선택을 나타내는 데 사용할 수 있습니다.
• DetailButton – 셀의 나머지 부분과 독립적으로 터치에 응답하여 셀 자체를 터치하는 다른 기능을 수행할 수 있습니다(예: 팝업을 열거나 스택의 UINavigationController 일부가 아닌 새 창 열기).
• DisclosureIndicator – 일반적으로 셀을 터치하면 다른 보기가 열리도록 나타내는 데 사용됩니다.
• DetailDisclosureButton – 및 DisclosureIndicator.DetailButton

다음과 같습니다.

이러한 액세서리 중 하나를 표시하려면 메서드에서 AccessoryGetCell 속성을 설정할 수 있습니다.

cell.Accessory = UITableViewCellAccessory.Checkmark;
//cell.Accessory = UITableViewCellAccessory.DisclosureIndicator;
//cell.Accessory = UITableViewCellAccessory.DetailDisclosureButton; // implement AccessoryButtonTapped
//cell.Accessory = UITableViewCellAccessory.None; // to clear the accessory

DetailButton 표시되거나 DetailDisclosureButton 표시되면 터치 시 일부 작업을 수행하도록 재정의 AccessoryButtonTapped 해야 합니다.

public override void AccessoryButtonTapped (UITableView tableView, NSIndexPath indexPath)
{
    UIAlertController okAlertController = UIAlertController.Create ("DetailDisclosureButton Touched", tableItems[indexPath.Row].Heading, UIAlertControllerStyle.Alert);
    okAlertController.AddAction(UIAlertAction.Create("OK", UIAlertActionStyle.Default, null));
    owner.PresentViewController (okAlertController, true, null);

    tableView.DeselectRow (indexPath, true);
}

샘플 CellAccessoryTable 은 액세서리를 사용하는 예제를 보여 줍니다.

셀 구분 기호

셀 구분 기호는 표를 구분하는 데 사용되는 표 셀입니다. 속성은 테이블에 설정됩니다.

TableView.SeparatorColor = UIColor.Blue;
TableView.SeparatorStyle = UITableViewCellSeparatorStyle.DoubleLineEtched;

구분 기호에 흐림 또는 진동 효과를 추가할 수도 있습니다.

// blur effect
TableView.SeparatorEffect =
    UIBlurEffect.FromStyle(UIBlurEffectStyle.Dark);

//vibrancy effect
var effect = UIBlurEffect.FromStyle(UIBlurEffectStyle.Light);
TableView.SeparatorEffect = UIVibrancyEffect.FromBlurEffect(effect);

구분 기호는 다음을 삽입할 수도 있습니다.

TableView.SeparatorInset.InsetRect(new CGRect(4, 4, 150, 2));

사용자 지정 셀 레이아웃 만들기

표의 비주얼 스타일을 변경하려면 표시할 사용자 지정 셀을 제공해야 합니다. 사용자 지정 셀에는 다양한 색과 컨트롤 레이아웃이 있을 수 있습니다.

CellCustomTable 예제는 s의 UITableViewCell 사용자 지정 레이아웃 UILabel과 다른 글꼴 및 색을 UIImage 사용하는 서브클래스를 구현합니다. 결과 셀은 다음과 같습니다.

사용자 지정 셀 클래스는 다음 세 가지 방법으로 구성됩니다.

• 생성자 – UI 컨트롤을 만들고 사용자 지정 스타일 속성(예: 글꼴 얼굴, 크기 및 색)을 설정합니다.
• UpdateCell – 셀의 속성을 설정하는 데 사용하는 방법입니다 UITableView.GetCell .
• LayoutSubviews – UI 컨트롤의 위치를 설정합니다. 예제에서 모든 셀의 레이아웃은 동일하지만 더 복잡한 셀(특히 크기가 다른 셀)은 표시되는 콘텐츠에 따라 다른 레이아웃 위치가 필요할 수 있습니다.

CellCustomTable > CustomVegeCell.cs 전체 샘플 코드는 다음과 같습니다.

public class CustomVegeCell : UITableViewCell  {
    UILabel headingLabel, subheadingLabel;
    UIImageView imageView;
    public CustomVegeCell (NSString cellId) : base (UITableViewCellStyle.Default, cellId)
    {
        SelectionStyle = UITableViewCellSelectionStyle.Gray;
        ContentView.BackgroundColor = UIColor.FromRGB (218, 255, 127);
        imageView = new UIImageView();
        headingLabel = new UILabel () {
            Font = UIFont.FromName("Cochin-BoldItalic", 22f),
            TextColor = UIColor.FromRGB (127, 51, 0),
            BackgroundColor = UIColor.Clear
        };
        subheadingLabel = new UILabel () {
            Font = UIFont.FromName("AmericanTypewriter", 12f),
            TextColor = UIColor.FromRGB (38, 127, 0),
            TextAlignment = UITextAlignment.Center,
            BackgroundColor = UIColor.Clear
        };
        ContentView.AddSubviews(new UIView[] {headingLabel, subheadingLabel, imageView});

    }
    public void UpdateCell (string caption, string subtitle, UIImage image)
    {
        imageView.Image = image;
        headingLabel.Text = caption;
        subheadingLabel.Text = subtitle;
    }
    public override void LayoutSubviews ()
    {
        base.LayoutSubviews ();
        imageView.Frame = new CGRect (ContentView.Bounds.Width - 63, 5, 33, 33);
        headingLabel.Frame = new CGRect (5, 4, ContentView.Bounds.Width - 63, 25);
        subheadingLabel.Frame = new CGRect (100, 18, 100, 20);
    }
}

GetCell 사용자 지정 셀을 UITableViewSource 만들려면 이 메서드를 수정해야 합니다.

public override UITableViewCell GetCell (UITableView tableView, NSIndexPath indexPath)
{
    var cell = tableView.DequeueReusableCell (cellIdentifier) as CustomVegeCell;
    if (cell == null)
        cell = new CustomVegeCell (cellIdentifier);
    cell.UpdateCell (tableItems[indexPath.Row].Heading
            , tableItems[indexPath.Row].SubHeading
            , UIImage.FromFile ("Images/" + tableItems[indexPath.Row].ImageName) );
    return cell;
}

관련 링크

• WorkingWithTables(샘플)