Personalizzazione dell'aspetto di una tabella in Xamarin.iOS

Il modo più semplice per modificare l'aspetto di una tabella consiste nell'usare uno stile di cella diverso. È possibile modificare lo stile della cella utilizzato durante la creazione di ogni cella nel UITableViewSourcemetodo del GetCell .

Stili cella

Esistono quattro stili predefiniti:

• Impostazione predefinita : supporta un oggetto UIImageView.
• Sottotitolo : supporta un UIImageView sottotitolo e .
• Value1 : sottotitolo allineato a destra, supporta un oggetto UIImageView.
• Value2 : il titolo è allineato a destra e il sottotitolo è allineato a sinistra (ma nessuna immagine).

Questi screenshot mostrano come viene visualizzato ogni stile:

L'esempio CellDefaultTable contiene il codice per produrre queste schermate. Lo stile della cella viene impostato nel UITableViewCell costruttore, come illustrato di seguito:

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

È quindi possibile impostare le proprietà supportate dello stile di cella:

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

Accessori

Le celle possono avere gli accessori seguenti aggiunti a destra della visualizzazione:

• Segno di spunta : può essere usato per indicare la selezione multipla in una tabella.
• DetailButton : risponde al tocco indipendentemente dal resto della cella, consentendo di eseguire una funzione diversa per toccare la cella stessa (ad esempio aprendo un popup o una nuova finestra che non fa parte di uno UINavigationController stack).
• DisclosureIndicator : in genere usato per indicare che il tocco della cella aprirà un'altra visualizzazione.
• DetailDisclosureButton : combinazione di DetailButton e DisclosureIndicator.

Questo è l'aspetto seguente:

Per visualizzare uno di questi accessori, è possibile impostare la Accessory proprietà nel GetCell metodo :

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

DetailButton Quando viene visualizzato o DetailDisclosureButton , è necessario eseguire anche l'override di AccessoryButtonTapped per eseguire un'azione quando viene toccato.

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

L'esempio CellAccessoryTable mostra un esempio di utilizzo degli accessori.

Separatori di cella

I separatori di cella sono celle di tabella utilizzate per separare la tabella. Le proprietà vengono impostate in Table.

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

È anche possibile aggiungere un effetto sfocatura o vibrancy al separatore:

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

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

Il separatore può anche avere un inset:

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

Creazione di layout di celle personalizzati

Per modificare lo stile di visualizzazione di una tabella, è necessario specificare celle personalizzate da visualizzare. La cella personalizzata può avere colori e layout di controllo diversi.

L'esempio CellCustomTable implementa una UITableViewCell sottoclasse che definisce un layout personalizzato di s e un UIImage oggetto con tipi di UILabelcarattere e colori diversi. Le celle risultanti hanno un aspetto simile al seguente:

La classe cella personalizzata è costituita solo da tre metodi:

• Costruttore : crea i controlli dell'interfaccia utente e imposta le proprietà dello stile personalizzate, ad esempio il viso, le dimensioni e i colori del carattere.
• UpdateCell : metodo da usare per UITableView.GetCell impostare le proprietà della cella.
• LayoutSubviews : impostare la posizione dei controlli dell'interfaccia utente. Nell'esempio ogni cella ha lo stesso layout, ma una cella più complessa (in particolare quelle con dimensioni variabili) potrebbe richiedere posizioni di layout diverse a seconda del contenuto visualizzato.

Il codice di esempio completo in CellCustomTable > CustomVegeCell.cs segue:

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

Il GetCell metodo dell'oggetto UITableViewSource deve essere modificato per creare la cella personalizzata:

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