Changing a view programmatically to align left or right - swift

Question

I have been building this chat and I am stuck in something that I can't figure out yet.
I have been unsuccessfully trying to align the same view left or right according to the scenario but I haven't gotten the desired result yet.
Basically, I built the cell in interface builder and pinned to the left and made its width and height variable according to the contents of the labels inside.
What I have been trying to do is reusing the same cell and align to the right when the I am the one sending the message (yellow) because by default it will be aligned to the left when others send me a message (gray) see the following image for illustration:
What I want is:
others messages--------
--------------my message
To accomplish this, and under TroyT's suggestion, I activated and deactivated the leading/trailing constraints according to my needs.
So what I did was.
On my UITableViewCell Class, I created two #IBoulets for my two constraints like so:
#IBOutlet var bubbleViewLeading: NSLayoutConstraint!
#IBOutlet var bubbleViewTrailing: NSLayoutConstraint!
Later, in my tableViewController on the method cellForRowAtIndexPAth , I activate or deactivate one of the constraints according to my needs doing the following.
cell.bubbleViewTrailing.active = true
cell.bubbleViewLeading.active = false
or the opposite
cell.bubbleViewTrailing.active = false
cell.bubbleViewLeading.active = true
where the constraint set to "True" is set to 0. As I mentioned before, this work well for all cells except the first one.
This works PARTIALLY, because for some reason it does not affect the first row and both constraints stay activated, hence the row is stretched through the tableview's width like so:.
I tried several things like:
Using the init method from my UITableViewCell class to change the constraints
Changing the constraints from the awakeFromNib method within my UITableViewCell
Using the "User Defined Runtime Attributes" on the 3rd tab from the left on the storyboard, add a key path named "active", set the type to Bool, and set the value to false.
unticking "installed" in the attribute inspector when I select the constraints in the storyboard
However, none of these methods affect the constraints on the first cell but I can easily change everything else like the cell background or the text alignment in a label within the cell. It just the constraint that will not change for that first time that I use the cell. Even when I scroll down past the boundaries of the screen to "force" the cell reuse, the first cell becomes fixed:
I have been trying to figure this one out for days with little success. Hence, I decided to put a bounty on this question.

Answer 1

What you explain makes little sense to me, but if it is happening only with the first row, then I would try forcing the layout to redraw by doing:
cell.setNeedsLayout()
cell.layoutIfNeeded()
from the cellForRowAtIndexPath
BTW, I think a better approach would be to register 2 different cells, and create them both in IB. This approach will keep your code shorter and will allow you to modify not only the trailing/leading but also colors, fonts or whatever you need. You give them 2 different IDs, but keep the same implementation class, and you just deque the one you need on your cellForRowAtIndexPath.
Keeping a different cell per style is the standard way to do these things with IB.

Answer 2

removeConstraint: is deprecated, in favor of using the active property instead (or NSLayoutConstraint's deactivateConstraints:). While removeConstraint: still usually works, combining that with setting your constraints' active property makes this worse. Either use all activate and deactivate (preferred) or use add and remove.
So instead of cell.removeConstraint:, use this:
cell.bubbleViewTrailing.active = false
One thing I may note is that your leading and trailing is reversed. Leading is on the left and trailing is on the right, except for right-to-left localization.

Answer 3

Here is the Custom ChatMessageCell that I have implemented for you in which I have applied programmatically constrains using the KVConstraintExtensionsMaster library to apply constraints that I have implemented.
I have update the leading & trailing constraints Constant value instead of activate/deactivate constraint or remove/add constraint.
I hope this may help you.
Put below code in ChatMessageCell.h header file
typedef NS_ENUM(NSUInteger, Type) {
TypeSender,
TypeReceiver,
};
#interface ChatMessageCell : UITableViewCell
#property (assign, nonatomic) Type cellType;
#property (strong, nonatomic) UIView *msgBackgroundView;
#property (strong, nonatomic) UILabel *messageLabel;
#end
Put below code in ChatMessageCell.m file
#import "ChatMessageCell.h"
#import "KVConstraintExtensionsMaster.h"
#implementation ChatMessageCell
- (void)awakeFromNib {
[super awakeFromNib];
// Initialization code
}
- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
if (self) {
[self createAndConfigureViewHierarchy];
}
return self;
}
- (void)createAndConfigureViewHierarchy
{
_msgBackgroundView = [UIView prepareNewViewForAutoLayout];
[self.contentView addSubview:_msgBackgroundView];
_msgBackgroundView.backgroundColor = [UIColor clearColor];
[_msgBackgroundView.layer setCornerRadius:6.0];
_labelMessage = [UILabel prepareNewViewForAutoLayout];
[_labelMessage setLineBreakMode:NSLineBreakByTruncatingTail];
[_labelMessage setNumberOfLines:0];
[_labelMessage setTextAlignment:NSTextAlignmentLeft];
[_labelMessage setTextColor:[UIColor whiteColor]];
self.labelMessage.backgroundColor = [UIColor clearColor];
[_msgBackgroundView addSubview:_labelMessage];
[self applyConstraints];
}
-(void)applyConstraints
{
// now applying the constraints by using KVConstraintExtensionsMaster library
CGFloat padding = 8.0;
// adding Top and Bottom contraints of _msgBackgroundView
[_msgBackgroundView applyTopAndBottomPinConstraintToSuperviewWithPadding:padding];
// adding leading and trailing contraints of _msgBackgroundView
[_msgBackgroundView applyLeadingAndTrailingPinConstraintToSuperviewWithPadding:padding];
// adding Top and Bottom contraints of _msgBackgroundView
[_labelMessage applyTopAndBottomPinConstraintToSuperviewWithPadding:padding];
// adding leading and trailing contraints of _msgBackgroundView
[_labelMessage applyLeadingAndTrailingPinConstraintToSuperviewWithPadding:padding];
}
-(void)setCellType:(Type)cellType
{
switch (cellType) {
case TypeSender:
{
[_msgBackgroundView setBackgroundColor:[UIColor redColor]];
[_labelMessage setTextAlignment:NSTextAlignmentRight];
// this method will change the Leading Pin Constraint Constant value by 100.0
[_msgBackgroundView applyLeadingPinConstraintToSuperviewWithPadding:100.0];
// this method will increase the Leading Pin Constraint Constant value with proper ratio only iPad
[_msgBackgroundView updateAppliedConstraintConstantValueForIpadByAttribute:NSLayoutAttributeLeading];
break;
}
case TypeReceiver:
{
[_msgBackgroundView setBackgroundColor:[UIColor redColor]];
[_labelMessage setTextAlignment:NSTextAlignmentLeft];
// this method will change the Trailing Pin Constraint Constant value by 100.0
[_msgBackgroundView applyTrailingPinConstraintToSuperviewWithPadding:100.0];
// this method will increase the Leading Pin Constraint Constant value with proper ratio only iPad
[_msgBackgroundView updateAppliedConstraintConstantValueForIpadByAttribute:NSLayoutAttributeTrailing];
break;
}
}
[self.contentView setNeedsLayout];
[self.contentView updateModifyConstraints];
}
-(void)prepareForReuse
{
// this method will change the Leading And Trailing Pin Constraints Constant value by 8.0
[_msgBackgroundView applyLeadingAndTrailingPinConstraintToSuperviewWithPadding:8.0];
[super prepareForReuse];
}
#end
Put the below code in the viewDidLoad method ofyour ViewController is:
[self.tableView registerClass:ChatMessageCell.class forCellReuseIdentifier:#"KVChatMessageCell"];
self.tableView.rowHeight = UITableViewAutomaticDimension;
/* any estimated height but must be more than 2 */
self.tableView.estimatedRowHeight = 44.0;
Now implement UITableView DataSource in your ViewController
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection: (NSInteger)section{
return messages.count;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath: (NSIndexPath *)indexPath{
static NSString *cellIdentifier = #"KVChatMessageCell";
ChatMessageCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier forIndexPath:indexPath];
[cell.labelMessage setText:messages[indexPath.row]];
cell.selectionStyle = UITableViewCellSelectionStyleNone;
if (indexPath.row%2 == 0) {
// here all even cell are the sender type
[cell setCellType:TypeSender];
}
else {
// here all odd cell are the Receiver type
[cell setCellType:TypeReceiver];
}
return cell;
}