Xamarin.iOS'ta Tablonun Görünümünü Özelleştirme

Tablonun görünümünü değiştirmenin en basit yolu farklı bir hücre stili kullanmaktır. 'nin GetCell yönteminde her hücreyi oluştururken hangi hücre stilinin UITableViewSourcekullanılacağını değiştirebilirsiniz.

Hücre Stilleri

Dört yerleşik stil vardır:

• Varsayılan – bir UIImageViewdestekler.
• Alt başlık – ve alt yazıyı UIImageView destekler.
• Değer1 – sağa hizalanmış alt başlık, destekler UIImageView.
• Değer2 – başlık sağa hizalanır ve alt başlık sola hizalanır (ancak resim yoktur).

Bu ekran görüntüleri, her stilin nasıl göründüğünü gösterir:

Örnek CellDefaultTable , bu ekranları üretmek için gereken kodu içerir. Hücre stili oluşturucuda UITableViewCell şöyle ayarlanır:

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

Ardından hücre stilinin desteklenen özellikleri ayarlanabilir:

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

Aksesuarlar

Hücrelerde görünümün sağ tarafından aşağıdaki donatılar eklenebilir:

• Onay işareti : Bir tabloda birden çok seçimi göstermek için kullanılabilir.
• DetailButton : Dokunmaya hücrenin geri kalanından bağımsız olarak yanıt verir ve hücrenin kendisine dokunmak için farklı bir işlev gerçekleştirmesine olanak tanır (örneğin, bir açılan pencere veya yığının parçası olmayan yeni bir UINavigationController pencere açma).
• DisclosureIndicator – normalde hücreye dokunmanın başka bir görünüm açacağını belirtmek için kullanılır.
• DetailDisclosureButton – ve DisclosureIndicatorbirleşimidirDetailButton.

Bu şekilde görünürler:

Bu aksesuarlardan birini görüntülemek için yönteminin Accessory özelliğini GetCell ayarlayabilirsiniz:

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

veya DetailDisclosureButton gösterildiğindeDetailButton, dokunulduğunda AccessoryButtonTapped bazı eylemler gerçekleştirmek için öğesini de geçersiz kılmalısınız.

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

Örnek CellAccessoryTable aksesuarları kullanan bir örneği gösterir.

Hücre Ayırıcıları

Hücre ayırıcıları, tabloyu ayırmak için kullanılan tablo hücreleridir. Özellikler Tablo'da ayarlanır.

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

Ayırıcıya bulanıklık veya canlılık efekti eklemek de mümkündür:

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

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

Ayırıcının bir başlangıcı da olabilir:

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

Özel Hücre Düzenleri Oluşturma

Tablonun görsel stilini değiştirmek için görüntülenmesi için özel hücreler sağlamanız gerekir. Özel hücrenin farklı renkleri ve denetim düzenleri olabilir.

CellCustomTable örneği, farklı yazı tipleri ve renklerle özel bir s düzenini UILabeltanımlayan bir UIImage alt sınıf uygularUITableViewCell. Sonuçta elde edilen hücreler şöyle görünür:

Özel hücre sınıfı yalnızca üç yöntemden oluşur:

• Oluşturucu – kullanıcı arabirimi denetimlerini oluşturur ve özel stil özelliklerini ayarlar (ör. yazı tipi yüzü, boyut ve renkler).
• UpdateCell , hücrenin özelliklerini ayarlamak için UITableView.GetCell kullanılacak bir yöntemdir.
• LayoutSubviews – Kullanıcı arabirimi denetimlerinin konumunu ayarlayın. Örnekte her hücre aynı düzene sahiptir, ancak daha karmaşık bir hücre (özellikle de farklı boyutlarda olanlar) görüntülenen içeriğe bağlı olarak farklı düzen konumlarına ihtiyaç duyabilir.

CellCustomTable > CustomVegeCell.cs tam örnek kodu aşağıdaki gibidir:

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

özel GetCell hücreyi UITableViewSource oluşturmak için yönteminin değiştirilmesi gerekir:

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