Le développement et la réduction UITableViewCells avec DatePicker

Les 2 réponses ci-dessus m'a permis de résoudre ce problème. Ils méritent le crédit, je suis en ajoutant ce un rappel pour moi - résumé format.

C'est ma version des réponses ci-dessus.

1. Comme indiqué ci-dessus - ajouter un sélecteur de pour une la cellule que vous souhaitez afficher /masquer.

2. Ajouter des contraintes pour le sélecteur dans interface builder - centre X /Y center /égale hauteur /largeur égale à la cellule d'affichage de contenu

3. Connectez le sélecteur de vous VC

@IBOutlet weak var dobDatePicker: UIDatePicker!

Vous pourriez aussi bien le contrôle de glisser et ajouter une méthode qui vous permettra d'enregistrer le changement de la date

@IBAction func dateChanged(sender: UIDatePicker) { 
    //updates ur label in the cell above
    dobLabel.text = "\(dobDatePicker.date)"
}

4. Dans le viewDidLoad

dobDatePicker.date = NSDate()
dobLabel.text = "\(dobDatePicker.date)" //my label in cell above
dobDatePicker.hidden = true

5. Réglage de la hauteur de cellule, dans mon exemple, la cellule, je veux élargir la section 0, ligne 3... jeu de ce à quoi vous de la cellule que vous souhaitez développer /masquer. Si vous avez un grand nombre de cellules avec différentes hauteurs ceci permet que.

override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {

    if indexPath.section == 0 && indexPath.row == 3 {
        let height:CGFloat = dobDatePicker.hidden ? 0.0 : 216.0
        return height
    }

    return super.tableView(tableView, heightForRowAtIndexPath: indexPath)
}

6. La sélection de la cellule ci-dessus pour agrandir le un ci-dessous, définissez cette option sur la cellule vous vous appuyez pour afficher la cellule ci-dessous.

override func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {

let dobIndexPath = NSIndexPath(forRow: 2, inSection: 0)
if dobIndexPath == indexPath {

    dobDatePicker.hidden = !dobDatePicker.hidden

    UIView.animateWithDuration(0.3, animations: { () -> Void in
        self.tableView.beginUpdates()
        //apple bug fix - some TV lines hide after animation
        self.tableView.deselectRowAtIndexPath(indexPath, animated: true)
        self.tableView.endUpdates()
    })
}
}

J'ai travaillé sur ça aussi, et j'ai pensé que je pourrais partager ma solution, qui est dérivée à partir de celles déjà fournies ici.

Ce que j'ai remarqué, c'est qu'il y a beaucoup de code dans les autres exemples spécifiques à chacun des éléments, et donc ce que j'ai fait était de créer un "manager" de la classe de traiter avec elle pour n'importe quel élément.

Voici ce que j'ai fait:

La CellShowHideDetail magasins de détails sur l'élément que vous souhaitez afficher ou masquer. Ces détails incluent la cellule elle est, et aussi la cellule qui seront exploitées afin de basculer l'affichage et le masquage:

public class CellShowHideDetail
{
    var item: UIView
    var indexPath_ToggleCell: IndexPath
    var indexPath_ItemCell: IndexPath
    var desiredHeight: CGFloat

    init(item: UIView, indexPath_ToggleCell: IndexPath, indexPath_ItemCell: IndexPath, desiredHeight: CGFloat)
    {
        self.item = item
        self.indexPath_ToggleCell = indexPath_ToggleCell
        self.indexPath_ItemCell = indexPath_ItemCell
        self.desiredHeight = desiredHeight

        //By default cells are not expanded:
        self.item.isHidden = true
    }
}

Noter que UIView est un parent de la classe de la plupart (tous?) Éléments de l'INTERFACE utilisateur.

Ensuite, nous avons le manager, qui va traiter le plus grand nombre de ces éléments que vous le souhaitez:

import Foundation
import UIKit

public class CellShowHideManager
{
    var cellItems: [CellShowHideDetail]

    init()
    {
        cellItems = []
    }

    func addItem(item: CellShowHideDetail)
    {
        cellItems.append(item)
    }

    func getRowHeight(indexPath: IndexPath) -> (match: Bool, height: CGFloat)
    {
        for item in cellItems
        {
            if indexPath.section == item.indexPath_ItemCell.section
                && indexPath.row == item.indexPath_ItemCell.row
            {
                return (match: true, height: item.item.isHidden ? 0.0 : item.desiredHeight)
            }
        }

        return (match: false, height: 0)
    }

    func rowSelected(indexPath: IndexPath) -> Bool
    {
        var changesMade = false

        for item in cellItems
        {
            if item.indexPath_ToggleCell == indexPath
            {
                item.item.isHidden = !item.item.isHidden

                changesMade = true
            }
            else
            {
                if item.item.isHidden == false
                {
                    changesMade = true
                }

                item.item.isHidden = true
            }
        }

        return changesMade
    }
}

Vous pouvez créer facilement un CellShowHideManager sur toute UITableViewController catégorie, ajouter les éléments que vous souhaitez à bascule-mesure:

var showHideManager = CellShowHideManager()

override func viewDidLoad()
    {
        super.viewDidLoad()

        let item1ToShowHide = CellShowHideDetail(item: datePicker, indexPath_ToggleCell: IndexPath(row: 0, section: 0), indexPath_ItemCell: IndexPath(row: 1, section: 0), desiredHeight: 232.0)

        let item2ToShowHide = CellShowHideDetail(item: selection_Picker, indexPath_ToggleCell: IndexPath(row: 0, section: 1), indexPath_ItemCell: IndexPath(row: 1, section: 1), desiredHeight: 90.0)

        //Add items for the expanding cells:
        showHideManager.addItem(item: item1ToShowHide)
        showHideManager.addItem(item: item2ToShowHide)
    }

Enfin, il suffit de remplacer ces deux TableView méthodes comme suit:

override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat
    {
        let showHideResult = showHideManager.getRowHeight(indexPath: indexPath)

        if showHideResult.match
        {
            return showHideResult.height
        }
        else
        {
            return super.tableView(tableView, heightForRowAt: indexPath)
        }
    }

    override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath)
    {

        if showHideManager.rowSelected(indexPath: indexPath)
        {
            UIView.animate(withDuration: 0.3, animations: { () -> Void in
                self.tableView.beginUpdates()

                //apple bug fix - some TV lines hide after animation
                //self.tableView.deselectRowAt(indexPath, animated: true)
                self.tableView.endUpdates()
            })
        }
    }

Et cela devrait fonctionner bien!

Juste pensé que je voudrais ajouter mon grain de sel aussi. Je suis actuellement à la programmation en Xamarin et a dû faire quelques petits ajustements à faire fonctionner dans le cadre de Xamarin.

Tous les principes sont les mêmes, mais comme Xamarin utilise une catégorie distincte pour les TableViewSource et la gestion de délégués est différent. Bien sûr, vous pouvez toujours affecter UITableViewDelegates si vous voulez aussi bien dans le UIViewController, mais j'étais curieux de savoir si je pourrais l'obtenir pour fonctionner de cette façon:

Pour commencer je sous-classé à la fois la Date de Sélecteur de Cellules (datePickerCell) et le sélecteur de cellules (selectorCell). Note de côté, je le fais à 100% par programmation sans un StoryBoard

datePickerCell:

using System;
using UIKit;
namespace DatePickerInTableViewCell 
{
public class CustomDatePickerCell : UITableViewCell
{
//========================================================================================================================================
// PRIVATE CLASS PROPERTIES
//========================================================================================================================================
private UIDatePicker datePicker;
private bool datePickerVisible;
private Boolean didUpdateConstraints;
//========================================================================================================================================
// PUBLIC CLASS PROPERTIES
//========================================================================================================================================
public event EventHandler dateChanged;
//========================================================================================================================================
// Constructor
//========================================================================================================================================
///<summary>
///Initializes a new instance of the <see cref="DatePickerInTableViewCell.CustomDatePickerCell"/> class.
///</summary>
public CustomDatePickerCell (string rid) : base(UITableViewCellStyle.Default, rid)
{
Initialize ();
}
//========================================================================================================================================
// PUBLIC OVERRIDES
//========================================================================================================================================
///<summary>
///Layout the subviews.
///</summary>
public override void LayoutSubviews ()
{
base.LayoutSubviews ();
ContentView.AddSubview (datePicker);
datePicker.Hidden   = true;
AutoresizingMask    = UIViewAutoresizing.FlexibleHeight | UIViewAutoresizing.FlexibleWidth;
foreach (UIView view in ContentView.Subviews) {
view.TranslatesAutoresizingMaskIntoConstraints = false;
}
ContentView.SetNeedsUpdateConstraints ();
}
///<summary>
///We override the UpdateConstraints to allow us to only set up our constraint rules one time.  Since 
///we need to use this method to properly call our constraint rules at the right time we use a boolean
///as a flag so that we only fix our auto layout once.  Afterwards UpdateConstraints runs as normal. 
///</summary>
public override void UpdateConstraints ()
{
if (NeedsUpdateConstraints () && !didUpdateConstraints) {
setConstraints ();
didUpdateConstraints = true;
}
base.UpdateConstraints ();
}
//========================================================================================================================================
// PUBLIC METHODS
//========================================================================================================================================
///<summary>
///Allows us to determine the visibility state of the cell from the tableViewSource.
///</summary>
///<returns><c>true</c> if this instance is visible; otherwise, <c>false</c>.</returns>
public bool IsVisible()
{
return datePickerVisible;
}
///<summary>
///Allows us to show the datePickerCell from the tableViewSource.
///</summary>
///<param name="tableView">Table view.</param>
public void showDatePicker(ref UITableView tableView)
{
datePickerVisible   = true;
tableView.BeginUpdates  ();
tableView.EndUpdates    ();
datePicker.Hidden   = false;
datePicker.Alpha    = 0f;
UIView.Animate(
0.25, 
()=> { datePicker.Alpha = 1f;}
);
}
public void hideDatePicker(ref UITableView tableView)
{
datePickerVisible   = false;
tableView.BeginUpdates  ();
tableView.EndUpdates    ();
UIView.Animate(
0.25, 
()=> { datePicker.Alpha = 0f;}, 
()=> {datePicker.Hidden = true;}
);
}
//========================================================================================================================================
// PRIVATE METHODS
//========================================================================================================================================
///<summary>
///We make sure the UIDatePicker is center in the cell.
///</summary>
private void setConstraints()
{
datePicker.CenterXAnchor.ConstraintEqualTo(ContentView.CenterXAnchor).Active = true;
}
///<summary>
///Init class properties.
///</summary>
private void Initialize()
{
datePicker              = new UIDatePicker ();
datePickerVisible       = false;
datePicker.TimeZone     = Foundation.NSTimeZone.LocalTimeZone;
datePicker.Calendar     = Foundation.NSCalendar.CurrentCalendar;
datePicker.ValueChanged += (object sender, EventArgs e) => {
if(dateChanged != null) {
dateChanged (datePicker, EventArgs.Empty);
}
};
}
}
}   

Sélecteur De Cellules

using System;
using UIKit;
namespace DatePickerInTableViewCell 
{
///<summary>
///
///</summary>
public class CustomDatePickerSelectionCell : UITableViewCell
{
//========================================================================================================================================
// PRIVATE CLASS PROPERTIES
//========================================================================================================================================
private UILabel prefixLabel;
private UILabel dateLabel;
private UILabel timeLabel;
private Boolean didUpdateConstraints;
private UIColor originalLableColor;
private UIColor editModeLabelColor;
//========================================================================================================================================
// PUBLIC CLASS PROPERTIES
//========================================================================================================================================
//========================================================================================================================================
// Constructor
//========================================================================================================================================
///<summary>
///Initializes a new instance of the <see cref="DatePickerInTableViewCell.CustomDatePickerSelectionCell"/> class.
///</summary>
public CustomDatePickerSelectionCell (string rid) : base(UITableViewCellStyle.Default, rid)
{
Initialize ();
}
//========================================================================================================================================
// PUBLIC OVERRIDES
//========================================================================================================================================
///<summary>
///We override the UpdateConstraints to allow us to only set up our constraint rules one time.  Since 
///we need to use this method to properly call our constraint rules at the right time we use a boolean
///as a flag so that we only fix our auto layout once.  Afterwards UpdateConstraints runs as normal. 
///</summary>
public override void UpdateConstraints ()
{
if (NeedsUpdateConstraints () && !didUpdateConstraints) {
setConstraints ();
didUpdateConstraints = true;
}
base.UpdateConstraints ();
}
public override void LayoutSubviews ()
{
base.LayoutSubviews ();
AutoresizingMask    = UIViewAutoresizing.FlexibleHeight | UIViewAutoresizing.FlexibleWidth;
timeLabel.TextAlignment = UITextAlignment.Right;
prefixLabel.Text    = "On: ";
dateLabel.Text      = DateTime.Now.ToString ("MMM d, yyyy");
timeLabel.Text      = DateTime.Now.ToShortTimeString ();
ContentView.AddSubviews (new UIView[]{ prefixLabel, dateLabel, timeLabel });
foreach (UIView view in ContentView.Subviews) {
view.TranslatesAutoresizingMaskIntoConstraints = false;
}
ContentView.SetNeedsUpdateConstraints ();
}
//========================================================================================================================================
// PUBLIC METHODS
//========================================================================================================================================
public void willUpdateDateTimeLables(string date, string time)
{
dateLabel.Text = date;
timeLabel.Text = time;
}
public void willEditDateTime()
{
dateLabel.TextColor = editModeLabelColor;
timeLabel.TextColor = editModeLabelColor;
}
public void didEditDateTime()
{
dateLabel.TextColor = originalLableColor;
timeLabel.TextColor = originalLableColor;
}
//========================================================================================================================================
// PRIVATE METHODS
//========================================================================================================================================
private void Initialize()
{
prefixLabel         = new UILabel ();
dateLabel       = new UILabel ();
timeLabel       = new UILabel ();
originalLableColor  = dateLabel.TextColor;
editModeLabelColor  = UIColor.Red;
}
private void setConstraints()
{
var cellMargins = ContentView.LayoutMarginsGuide;
prefixLabel.LeadingAnchor.ConstraintEqualTo (cellMargins.LeadingAnchor).Active      = true;
dateLabel.LeadingAnchor.ConstraintEqualTo (prefixLabel.TrailingAnchor).Active       = true;
timeLabel.LeadingAnchor.ConstraintEqualTo (dateLabel.TrailingAnchor).Active         = true;
timeLabel.TrailingAnchor.ConstraintEqualTo (cellMargins.TrailingAnchor).Active      = true;
dateLabel.WidthAnchor.ConstraintEqualTo (ContentView.WidthAnchor, 2f / 7f).Active   = true;
prefixLabel.HeightAnchor.ConstraintEqualTo (ContentView.HeightAnchor, 1).Active     = true;
timeLabel.HeightAnchor.ConstraintEqualTo (ContentView.HeightAnchor, 1).Active       = true;
dateLabel.HeightAnchor.ConstraintEqualTo (ContentView.HeightAnchor, 1).Active       = true;
}
}
}

Donc, comme vous pouvez le voir, j'ai quelques méthodes exposées à partir de chaque cellule pour faciliter la nécessaire communication. J'ai alors nécessaire de créer une instance de ces cellules dans ma tableViewSource. Peut-être qu'il est un moins le couplage façon de le faire, mais je ne pouvais pas facile à comprendre. Je crois que je suis beaucoup moins d'expérience en programmation iOS que mes prédécesseurs ci-dessus :). Cela dit, avec les cellules disponibles dans le cadre de la classe, il est très facile d'appeler et d'accéder à des cellules dans le RowSelected et GetHeightForRow méthodes.

TableViewSource

using System;
using UIKit;
using System.Collections.Generic;
namespace DatePickerInTableViewCell 
{
public class TableViewSource : UITableViewSource
{
//========================================================================================================================================
// PRIVATE CLASS PROPERTIES
//========================================================================================================================================
private const string datePickerIdentifier           = "datePickerCell";
private const string datePickerActivateIdentifier   = "datePickerSelectorCell";
private const int datePickerRow                     = 1;
private const int datePickerSelectorRow             = 0;
private List<UITableViewCell> datePickerCells;
private CustomDatePickerCell datePickerCell;
private CustomDatePickerSelectionCell datePickerSelectorCell;
//========================================================================================================================================
// PUBLIC CLASS PROPERTIES
//========================================================================================================================================
//========================================================================================================================================
// Constructor
//========================================================================================================================================
///<summary>
///Initializes a new instance of the <see cref="DatePickerInTableViewCell.TableViewSource"/> class.
///</summary>
public TableViewSource ()
{
initDemoDatePickerCells ();
}
//========================================================================================================================================
// PUBLIC OVERRIDES
//========================================================================================================================================
public override UITableViewCell GetCell (UITableView tableView, Foundation.NSIndexPath indexPath)
{
UITableViewCell cell = null;
if (indexPath.Row == datePickerSelectorRow) {
cell = tableView.DequeueReusableCell (datePickerActivateIdentifier);
cell = cell ?? datePickerCells[indexPath.Row];
return cell;
}
if (indexPath.Row == datePickerRow) {
cell = tableView.DequeueReusableCell (datePickerIdentifier) as CustomDatePickerCell;
cell = cell ?? datePickerCells[indexPath.Row];
return cell;
}
return cell;
}
public override nint RowsInSection (UITableView tableview, nint section)
{
return datePickerCells.Count;
}
public override nfloat GetHeightForRow (UITableView tableView, Foundation.NSIndexPath indexPath)
{
float height = (float) tableView.RowHeight;
if (indexPath.Row == datePickerRow) {
height = datePickerCell.IsVisible () ? DefaultiOSDimensions.heightForDatePicker : 0f;
}
return height;
}
public override void RowSelected (UITableView tableView, Foundation.NSIndexPath indexPath)
{
if (indexPath.Row == datePickerSelectorRow) {
if (datePickerCell != null) {
if (datePickerCell.IsVisible ()) {
datePickerCell.hideDatePicker (ref tableView);
datePickerSelectorCell.didEditDateTime ();
} else {
datePickerCell.showDatePicker (ref tableView);
datePickerSelectorCell.willEditDateTime ();
}
}
}
tableView.DeselectRow (indexPath, true);
}
//========================================================================================================================================
// PUBLIC METHODS
//========================================================================================================================================
//========================================================================================================================================
// PRIVATE METHODS
//========================================================================================================================================
private void willUpdateDateChanged(Object sender, EventArgs args)
{
var picker      = sender as UIDatePicker;
var dateTime    = picker.Date.ToDateTime ();
if (picker != null && dateTime != null) {
var date = dateTime.ToString ("MMM d, yyyy");
var time = dateTime.ToShortTimeString ();
datePickerSelectorCell.willUpdateDateTimeLables (date, time);
}
}
private void initDemoDatePickerCells()
{
datePickerCell              = new CustomDatePickerCell (datePickerIdentifier);
datePickerSelectorCell      = new CustomDatePickerSelectionCell (datePickerActivateIdentifier);
datePickerCell.dateChanged  += willUpdateDateChanged;
datePickerCells             = new List<UITableViewCell> () {
datePickerSelectorCell,
datePickerCell
};
}
}
}

Espère que le code est assez explicite. La méthode toDateTime btw est juste une extension de la méthode pour convertir NSDateTime à un .net objet DateTime. La référence peut être trouvé ici: https://forums.xamarin.com/discussion/27184/convert-nsdate-to-datetime et DefaultiOSDimensions est juste un petit statique de la classe que j'utilise pour garder une trace de dimensions standard tels que cellHeight (44pts) ou, dans le cas de heightForDatePicker; 216. Il semble que cela fonctionne très bien pour moi sur mon simulateur. Je n'ai pas encore tester sur elle périphériques réels. Espérons que cela aide quelqu'un!