首先你应该在你的自定义 UITableViewCell 上添加ContainerView 视图,现在在ContainerView - leading , trailing, top & bottom to superView 上添加约束,priority 999 用于所有约束`。
现在您应该在ContainerView 上添加两个视图,一个是mainView,另一个是additionView。
并在mainView 上添加约束 - 导致 superView、top 到 superView、尾随到 superView 和高度约束(比如说 70)。
现在在 mainView 中添加 textfield 和 show/hide button 并对 textField 和 show/hide button 应用约束。
文本字段约束 - leading to superView、top to superView、bottom to superView 和 Horizontal spacing between textField & show/hide button。
显示/隐藏按钮约束 - top to superView、bottom to superView、trailing to superView 和宽度约束。
这里mainView 配置正确。所以现在让我们配置additionView
您应该在additionView 中添加两个新视图,一个是leftView,另一个是rightView 和add constraints 在leftView & rightView 上。
leftView 约束 - leading to superView、top to superView、bottom to superView、Horizontal spacing between leftView & rightView、
equal width and width constraints of leftView to rightView.
rightView 约束 - trailing to superView, top to superView&bottom to superView
这里是你的Interface Builder Designing completed,所以现在我们需要在运行时管理左右视图上的按钮。为此,您必须创建一个名为 VerticalContainerView 的自定义类,它将管理按钮的垂直分布。
我使用 KVConstraintExtensionsMaster 库创建了 VerticalContainerView 以应用我已实现的约束。
将下面的代码放在VerticalContainerView.h头文件中
#import <UIKit/UIKit.h>
@interface VerticalContainerView : UIView
-(void)configureButtonsbyNames:(NSArray<__kindof NSString *>*)names isDistribuated:(BOOL)isDistributed;
@end
将以下代码放入VerticalContainerView.m文件中
#import "VerticalContainerView.h"
#import "KVConstraintExtensionsMaster.h"
@implementation VerticalContainerView
-(void)configureButtonsbyNames:(NSArray<__kindof NSString *>*)names isDistribuated:(BOOL)isDistributed
{
/* Just Two steps to Apply\Add constraints by programatically */
/* Step 1 create & configure the view hierarchy for constraint first. */
/* Step 2 Apply the constraints */
CGFloat space = 0.0;
CGFloat height = 70.0;
UIButton *previousContentButton = nil;
NSInteger count = names.count;
for (NSInteger i = 0; i < count; i++)
{
UIButton *contentButton = [UIButton prepareNewViewForAutoLayout];
if (i&1) {
[contentButton setBackgroundColor:[UIColor greenColor]];
}else{
[contentButton setBackgroundColor:[UIColor purpleColor]];
}
[contentButton setTag:i];
[contentButton setTitle:names[i] forState:UIControlStateNormal];
[self addSubview:contentButton];
[contentButton applyLeadingAndTrailingPinConstraintToSuperviewWithPadding:space];
if (!isDistributed) {
[contentButton applyHeightConstraint:height];
}
if (i == 0) // for first
{
[contentButton applyTopPinConstraintToSuperviewWithPadding:space];
}
else if (i == count-1) // for last
{
if (isDistributed) {
[previousContentButton applyConstraintFromSiblingViewAttribute:NSLayoutAttributeHeight toAttribute:NSLayoutAttributeHeight ofView:contentButton spacing:space];
}
[previousContentButton applyConstraintFromSiblingViewAttribute:NSLayoutAttributeBottom toAttribute:NSLayoutAttributeTop ofView:contentButton spacing:space];
[contentButton applyBottomPinConstraintToSuperviewWithPadding:space];
}
else
{
if (isDistributed) {
[previousContentButton applyConstraintFromSiblingViewAttribute:NSLayoutAttributeHeight toAttribute:NSLayoutAttributeHeight ofView:contentButton spacing:space];
}
[previousContentButton applyConstraintFromSiblingViewAttribute:NSLayoutAttributeBottom toAttribute:NSLayoutAttributeTop ofView:contentButton spacing:space];
}
previousContentButton = contentButton;
}
}
@end
现在创建一个名为 CustomCell 的自定义 Cell 并将下面的代码放入 CustomCell.h 头文件中
#import "VerticalContainerView.h"
@interface CustomCell : UITableViewCell
@property (weak, nonatomic) IBOutlet VerticalContainerView *leftVerticalContainerView;
@property (weak, nonatomic) IBOutlet VerticalContainerView *rightVerticalContainerView;
@end
将以下代码放入CustomCell.m 文件中。
#import "CustomCell.h"
@implementation CustomCell
-(void)prepareForReuse
{
// here you have to remove the all the buttons from left and right veiw becuase
// Every cell can have distinct number buttons on left and right view.
for (UIView *subView in self.leftVerticalContainerView.subviews) {
[subView removeFromSuperview];
}
for (UIView *subView in self.leftVerticalContainerView.subviews) {
[subView removeFromSuperview];
}
[super prepareForReuse];
}
@end
现在在 Identity inspector editor 的 Interface Builder 的帮助下,由我们的 CustomCell 更改 UITableViewCell Class
在Identity inspector editor 的Interface Builder 的帮助下,我们的VerticalContainerView 还可以更改left and right View Class
现在为leftVerticalContainerView & rightVerticalContainerView连接我们CusromCell的IBOutlet
把下面的代码放在你的ViewController的viewDidLoad方法中是:
tableView.rowHeight = UITableViewAutomaticDimension;
/* any estimated height but must be more than 2, but it should be more estimated */
tableView.estimatedRowHeight = 210.0;
tableView.delegate = self;
tableView.dataSource = self;
// if you created cell from `.xib` is called CustomCell.xib,then you have to register that cell with table.
// UINib *nib = [UINib nibWithNibName:@"CustomCell" bundle:nil];
// [tableView registerNib:nib forCellReuseIdentifier:@"YouCellIdentifier"];
现在在你的 ViewController 中实现 UITableView DataSource
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection: (NSInteger)section{
return 10;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath: (NSIndexPath *)indexPath{
static NSString *cellIdentifier = @"CustomCell";
CustomCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier forIndexPath:indexPath];
if (indexPath.row%2 == 0) {
// this is fixed height constraints
[cell.leftVerticalContainerView configureButtonsbyNames:@[@"button1",@"button2",@"button3"] isDistributed:NO];
// this is distributed height constraints according to left view
[cell.rightVerticalContainerView configureButtonsbyNames:@[@"button4",@"button5"] isDistributed:YES];
}
else{
// this is fixed height constraints
[cell.leftVerticalContainerView configureButtonsbyNames:@[@"button1",@"button2",@"button3",@"button4",@"button5"] isDistributed:NO];
// this is isDistribuated height constraints according to left view
[cell.rightVerticalContainerView configureButtonsbyNames:@[@"button6",@"button7",@"button8"] isDistributed:YES];
}
return cell;
}