Dostosowywanie wyglądu tabeli na platformie Xamarin.iOS

Najprostszym sposobem zmiany wyglądu tabeli jest użycie innego stylu komórki. Możesz zmienić styl komórki używany podczas tworzenia każdej komórki w metodzie UITableViewSourceGetCell .

Style komórki

Istnieją cztery wbudowane style:

• Wartość domyślna — obsługuje element UIImageView.
• Podtytuł — obsługuje podtytuł UIImageView i .
• Value1 — wyrównany do prawej podtytuł, obsługuje element UIImageView.
• Value2 — tytuł jest wyrównany do prawej, a podtytuł jest wyrównany do lewej (ale bez obrazu).

Te zrzuty ekranu pokazują, jak wygląda każdy styl:

Przykładowa tabela CellDefaultTable zawiera kod do utworzenia tych ekranów. Styl komórki jest ustawiany w konstruktorze UITableViewCell w następujący sposób:

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

Następnie można ustawić obsługiwane właściwości stylu komórki:

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

Akcesoria

Komórki mogą mieć następujące akcesoria dodane z prawej strony widoku:

• Znacznik wyboru — może służyć do wskazywania wielokrotnego zaznaczenia w tabeli.
• DetailButton — reaguje na dotyk niezależnie od pozostałej części komórki, umożliwiając jej wykonywanie innej funkcji dotykania samej komórki (np. otwarcie okna podręcznego lub nowego okna, które nie jest częścią stosu UINavigationController ).
• DisclosureIndicator — zwykle używany do wskazywania, że dotknięcie komórki spowoduje otwarcie innego widoku.
• DetailDisclosureButton — kombinacja elementów DetailButton i DisclosureIndicator.

Wygląda to następująco:

Aby wyświetlić jedno z tych akcesoriów, można ustawić Accessory właściwość w metodzie GetCell :

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

Po wyświetleniu DetailButton elementu lub DetailDisclosureButton należy również przesłonić AccessoryButtonTapped element , aby wykonać jakąś akcję po dotknięciu.

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

Przykład cellAccessoryTable przedstawia przykład użycia akcesoriów.

Separatory komórek

Separatory komórek to komórki tabeli używane do oddzielania tabeli. Właściwości są ustawiane w tabeli.

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

Istnieje również możliwość dodania efektu rozmycia lub vibrancy do separatora:

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

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

Separator może również zawierać zestaw:

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

Tworzenie niestandardowych układów komórek

Aby zmienić styl wizualizacji tabeli, musisz podać komórki niestandardowe do wyświetlenia. Komórka niestandardowa może mieć różne kolory i układy kontrolek.

Przykład CellCustomTable implementuje podklasę UITableViewCell , która definiuje niestandardowy układ UILabels i z UIImage różnymi czcionkami i kolorami. Wynikowe komórki wyglądają następująco:

Niestandardowa klasa komórek składa się tylko z trzech metod:

• Konstruktor — tworzy kontrolki interfejsu użytkownika i ustawia niestandardowe właściwości stylu (np. twarz czcionki, rozmiar i kolory).
• UpdateCell — metoda UITableView.GetCell służąca do ustawiania właściwości komórki.
• LayoutSubviews — ustawianie lokalizacji kontrolek interfejsu użytkownika. W przykładzie każda komórka ma ten sam układ, ale bardziej złożona komórka (szczególnie te o różnych rozmiarach) może wymagać różnych pozycji układu w zależności od wyświetlanej zawartości.

Kompletny przykładowy kod w tabeli CellCustomTable > CustomVegeCell.cs następujący:

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

Aby GetCell utworzyć komórkę niestandardową, należy zmodyfikować metodę 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;
}