在 Xamarin.iOS 中自定義數據表的外觀

發行項
03/22/2017

變更表格外觀最簡單的方式是使用不同的儲存格樣式。您可以變更在方法中UITableViewSourceGetCell建立每個儲存格時所使用的儲存格樣式。

儲存格樣式

有四種內建樣式：

預設值 – 支援 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。

這就是他們的樣子：

若要顯示下列其中一個配件，您可以在方法中GetCell設定 Accessory 屬性：

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 範例會顯示使用配件的範例。

單元格分隔符

單元格分隔符是用來分隔數據表的表格單元格。屬性是在 Table 上設定的。

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 範例會 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;
}

共用方式為

在 Xamarin.iOS 中自定義數據表的外觀

儲存格樣式

Accessories

單元格分隔符

建立自定義儲存格版面配置

其他資源