I need to implement this left margin for the background of the cell.
Now I tried to do it this way - but the result is not correct - the content of the cell is moving with the margin. How can I solve an issue?
CGRect layerFrame = self.layer.frame;
layerFrame.size.width -= kRightLayerMargin;
layerFrame.origin.x += kLeftLayerMargin;
self.layer.frame = layerFrame;
self.layer.backgroundColor = [[SCUtils cellSelectionColor] CGColor];
self.layer.cornerRadius = 10.0f;
Implement your cell's layoutSubviews method as follows:
- (void)layoutSubviews {
//have the cell layout normally
[super layoutSubviews];
//get the bounding rectangle that defines the position and size of the textLabel
CGRect textLabelFrame = [[self textLabel] frame];
//anchor it to the top-left corner
textLabelFrame.origin = CGPointMake(kLeftLayerMargin, textLabelFrame.origin.y);
//set the textLabel frame (this will move+resize it)
[[self textLabel] setFrame:textLabelFrame];
//reposition the other controls accordingly
}
Related
I am trying to resize a UICollectionViewCell along only one axis without distorting its contents.
I have read answers for similar problems involving UICollectionViewLayoutAttributes layoutAttributesForItemAtIndexPath and layoutAttributesForElementsInRect. I have also tried using initWithFrame and awakeFromNib in a UICollectionViewCell subclass. I have attempted to set UIViewContentMode to UIViewContentModeScaleAspectFit or UIViewContentModeScaleAspectFill in those methods, but that has had no effect.
So far, I still get distorted text when I stretch along only one axis.
So...
I have a UICollectionView with its cells defined in a xib. Currently the cell only contains a UILabel. The collection view uses UICollectionViewFlowLayout to do some minor customizations:
self.flowLayout = [[UICollectionViewFlowLayout alloc] init];
[self.flowLayout setMinimumLineSpacing:1.0f];
[self.flowLayout setItemSize:CGSizeMake(self.cellSize.width, self.cellSize.height)];
[self.flowLayout setScrollDirection:UICollectionViewScrollDirectionVertical];
[self.collectionView setCollectionViewLayout:self.flowLayout];
The UICollectionView is embedded inside a UIScrollView, and fits exactly inside the scroll view's dimensions. The scroll view size is set to be much larger than the screen in both directions. Hard-coded numbers are just for testing; I will turn them into appropriate constants later.
self.cellSize = CGSizeMake(150.0f, 150.0f);
CGSize scrollViewSize = self.scrollView.contentSize;
scrollViewSize.width = 20 * self.cellSize.width + 20.0f;
scrollViewSize.height = 20 * self.cellSize.height + 20.0f;
self.scrollView.contentSize = scrollViewSize;
self.collectionViewHeightConstraint.constant = self.scrollView.contentSize.height;
self.collectionViewWidthConstraint.constant = self.scrollView.contentSize.width;
The result is a grid which is scrollable in any direction. That part is working.
The grid needs to be stretchable, either proportionally or along only one axis at a time. I am using the following pinch gesture recognizer to make one-axis zooming happen (again, the hard-coded 1.0 value for y is just for testing):
- (IBAction)handlePinchGesture:(UIPinchGestureRecognizer *)recognizer
{
recognizer.view.transform = CGAffineTransformScale(recognizer.view.transform, recognizer.scale, 1.0);
recognizer.scale = 1;
}
When I resize the collection view with a pinch gesture, the label in each cell stretches and deforms. Here's a screen grab:
(source: afterburnerimages.com)
I will supply any other pertinent information gladly, and all assistance is much appreciated!
Oky u are using scrollview which contains collection view then u can use scrollview delegate for zoom, in your case it is stretches, better u can use like below
for example,
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
_scrollView = [[UIScrollView alloc]initWithFrame:self.view.bounds];
_scrollView.delegate = self;
UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
[flowLayout setMinimumLineSpacing:1.0f];
[flowLayout setScrollDirection:UICollectionViewScrollDirectionVertical];
[self.collectionVIew setCollectionViewLayout:flowLayout];
[self.collectionVIew registerClass:[CustomCollectionVIewCell class] forCellWithReuseIdentifier:#"CELL_ID"];
//setting up content size for scroll view
CGSize size = self.scrollView.contentSize;
size.width = 200 * 10;
size.height = 185 * 10;
self.scrollView.contentSize = size;
CGRect rect = CGRectZero;
rect.origin = self.scrollView.bounds.origin;
rect.size = size;
self.collectionVIew.frame = rect;
self.scrollView.backgroundColor = [UIColor greenColor];
[self.scrollView addSubview:self.collectionVIew];
[self.view addSubview:self.scrollView];
// CGRect scrollViewFrame = self.scrollView.frame;
// CGFloat scaleWidth = _collectionVIew.frame.size.width / self.scrollView.contentSize.width;
// CGFloat scaleHeight = _collectionVIew.frame.size.height / self.scrollView.contentSize.height;
// CGFloat minScale = MIN(scaleWidth, scaleHeight);
//set min scale must be less than max zoom scale so that it can be zoomable
self.scrollView.minimumZoomScale = 0.5;
self.scrollView.maximumZoomScale = 1.0f;
// self.scrollView.zoomScale = minScale; //default is 1.0f;
}
and use scroll view delegates to perform zoom
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
return self.collectionVIew; //return collection view which is embedded inside scroll view
}
and result is something like gif below stretching proportionally without effecting the contents of collection view , hope this helps u .. :)
I am currently trying to create a simple UITableView with custom cells without using storyboard.
I'm getting an issue on the iPhone 6 simulator where the table view has a width of 375 (as it should), but the cells inside are getting a width of 320.
The number 320 is nowhere to be found in the project as I am not hard coding it. When I am setting the background colour of the cell, it extends the full width of 375, but I need to align an image to the right, which only aligns 320 across as shown in the photo below.
I'm not sure if it's because I'm missing constraints or if there's a bug. Any help is appreciated, thanks!
Code to set up table:
- (TBMessageViewCell *)getMessageCellforTableView:(UITableView *)tableView atIndexPath:(NSIndexPath *)indexPath
{
static NSString *cellIdentifier = #"MessageCell";
TBMessageViewCell *cell = (TBMessageViewCell *)[tableView dequeueReusableCellWithIdentifier:cellIdentifier];
if (cell == nil) {
cell = [[TBMessageViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellIdentifier];
[cell createSubviews];
}
// Set the new message and refresh
[cell setMessage:self.viewModel.messages[indexPath.row]];
[cell populateSubviews];
cell.backgroundColor = [UIColor blueColor];
NSLog(#"cell Width: %f", cell.contentView.frame.size.width);
return cell;
}
Complete TBMessageViewCell:
#implementation TBMessageViewCell
const CGFloat MARGIN = 10.0f;
const CGFloat AVATAR_SIZE = 40.0f;
-(id)initWithStyle:(UITableViewCellStyle *)style reuseIdentifier:(NSString *)reuseIdentifier
{
if(self = [super initWithStyle:UITableViewCellStyleDefault reuseIdentifier:reuseIdentifier]){
}
// Sets background and selected background color
self.backgroundColor = [UIColor clearColor];
UIView *selectionColor = [[UIView alloc] init];
selectionColor.backgroundColor = [UIColor clearColor];
self.selectedBackgroundView = selectionColor;
return self;
}
- (void)populateSubviews
{
// Set the message body
[self.messageBodyLabel setText:self.message.body];
[self.messageBodyLabel setTextAlignment:NSTextAlignmentRight];
CGRect bodyFrame = CGRectMake(MARGIN, MARGIN, self.frame.size.width - (AVATAR_SIZE + (MARGIN * 3)), self.frame.size.height);
// Calculates the expected frame size based on the font and dimensions of the label
// FLT_MAX simply means no constraint in height
CGSize maximumLabelSize = CGSizeMake(bodyFrame.size.width, FLT_MAX);
CGRect textRect = [self.message.body boundingRectWithSize:maximumLabelSize
options:NSStringDrawingUsesLineFragmentOrigin
attributes:#{NSFontAttributeName:self.messageBodyLabel.font}
context:nil];
bodyFrame.size.height = textRect.size.height;
// Setup the new avatar frame (Right aligned)
CGRect avatarFrame = CGRectMake(bodyFrame.size.width + (MARGIN * 2), MARGIN, AVATAR_SIZE, AVATAR_SIZE);
// Align to the LEFT side for current user's messages
if ([[TBConfig userID] isEqualToString:self.message.user.userID]) {
// Set avatar to left if it's me
avatarFrame.origin.x = MARGIN;
bodyFrame.origin.x = AVATAR_SIZE + (MARGIN * 2);
[self.messageBodyLabel setTextAlignment:NSTextAlignmentLeft];
}
self.avatar.frame = avatarFrame;
self.avatar.layer.cornerRadius = self.avatar.frame.size.width/2;
self.messageBodyLabel.frame = bodyFrame;
// Set the new cell height on the main Cell
CGFloat cellHeight = MAX(bodyFrame.size.height, self.frame.size.height) + MARGIN;
self.frame = CGRectMake(self.frame.origin.x, self.frame.origin.y, self.frame.size.width, cellHeight);
// Set the new Profile avatar
if (![self.avatar.profileID isEqualToString:self.message.user.facebookID]) {
[self.avatar setProfileID:nil];
[self.avatar setProfileID:self.message.user.facebookID];
}
}
- (void)createSubviews
{
self.messageBodyLabel = [[UILabel alloc] init];
self.messageBodyLabel.textColor = [UIColor whiteColor];
self.messageBodyLabel.lineBreakMode = NSLineBreakByWordWrapping;
self.messageBodyLabel.numberOfLines = 0;
[self addSubview:self.messageBodyLabel];
// Creates the avatar
self.avatar = [[FBProfilePictureView alloc] init];
[self.avatar setPictureCropping:FBProfilePictureCroppingSquare];
[self addSubview:self.avatar];
}
You're printing the size of the cell before it has been added to the display — before it has been sized. It doesn't yet know the size of tableview it will be added to.
The cells will be given an appropriate frame when added to the display.
EDIT: oh, and you probably don't want that cellIdentifier to be static. You probably wanted *const.
Don't know if you have found the answer. I faced the same problem when I was trying to subclass UITableViewCell and add custom subviews programmatically without using xib.
Finally the solution worked for me is to use [[UIScreen mainScreen] applicationFrame] instead of self.frame when calculating subviews' frames.
The proper way to solve this is to perform your layout in the layoutSubviews method.
In your case, simply call "populateSubviews" within "layoutSubviews" method, like this:
- (void)layoutSubviews {
[super layoutSubviews];
[self populateSubviews];
}
... but before doing this I would recommend that you do content population in a separate method (ie, calls to label.text = ...), and place all layout-affecting calls (ie, label.frame = ...) below [super layoutSubviews] in the method above.
That would result in something like:
- (void)layoutSubviews {
[super layoutSubviews];
CGRect bodyFrame = CGRectMake(MARGIN, MARGIN, self.frame.size.width - (AVATAR_SIZE + (MARGIN * 3)), self.frame.size.height);
// Calculates the expected frame size based on the font and dimensions of the label
// FLT_MAX simply means no constraint in height
CGSize maximumLabelSize = CGSizeMake(bodyFrame.size.width, FLT_MAX);
CGRect textRect = [self.message.body boundingRectWithSize:maximumLabelSize
options:NSStringDrawingUsesLineFragmentOrigin
attributes:#{NSFontAttributeName:self.messageBodyLabel.font}
context:nil];
bodyFrame.size.height = textRect.size.height;
// .. the rest of your layout code here ..
}
- (void)populateSubviews {
[self.messageBodyLabel setText:self.message.body];
// .. the rest of your code here ..
}
After you set your avatar frame in:
self.avatar.frame = avatarFrame;
self.avatar.layer.cornerRadius = self.avatar.frame.size.width/2;
self.messageBodyLabel.frame = bodyFrame;
write
self.avatar.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleLeftMargin;
It should hook your avatar image to the right margin and leave the left margin as flexible.
Select your table view cell's connection inspector and check if you haven't connected editingAccessoryView by mistake
While this answer may not be as straightforward as you'd expect UIKit to deliver, due to a bug in UITableView - when doing things programmatically - you gotta get your hands dirty. Xib lovers - be warned - this answer isn't for you. It's probably just working.
In later IOS versions, let's hope this problem get resolved. The problem is uitableview is hardcoding the dimensions of the cell to 320. In one project I had - I was forcing the frame size to to fix this. N.B. this has problems with splitview controller on iPad.
- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath{
NSLog(#"cell frame width:%f",cell.frame.size.width); // you should see <- 320! WTH
// you can crudely correct this here
cell.frame = CGRectMake(0,0,[[UIScreen mainScreen] applicationFrame].size.width,CELL_HEIGHT);
}
Another option - that's working better for me is a local width variable to reference. I know this code is not ideal - but it works consistently.
#interface AbtractCustomCell : UITableViewCell {
float width;
}
#end
#implementation AbtractCustomCell
- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
if (self) {
//optimise speed
// [self setOpaque:YES];
if ([SDiPhoneVersion deviceSize] == iPhone47inch) {
width = 375;
}
else if ([SDiPhoneVersion deviceSize] == iPhone47inch) {
width = 414;
}
else {
width = 320; // hardcode iphone 4/5 /ipad2
}
}
return self;
}
#end
then you have the option to make TBMessageViewCell a subclass of this AbstractCustomCell which will have this variable there for you. Instead of using self.contentView.bounds.size.width / self.bounds.size.width just use width.
I'm programmatically layout without Storyboard and facing same issue, and I need to return the cell upon cellForRowAt indexPath which in turn it still didnt manage to get the container size yet.
And I manage to solve it by move the layout codes into willDisplay cell delegate.
I custom a uitableviewcell with nib, and want to custom the highlighted style. When the cell highlighted, I want to reduce the size of the subview of the cell and keep the position of the imageview in the cell not changing. So, it looks like the frame of a imageview zoomed out, but the image itself stay there not changing its position.
However, this code snippet doesn't work as I wanted.Could anybody help me to figure out where I am wrong. Any help will be appreciated!
tips: the imageview is a subview of self.frameView and frameView is a subview of frameBgView.
- (void)setHighlighted:(BOOL)highlighted animated:(BOOL)animated
{
if (highlighted)
{
self.frameView.backgroundColor = UIColorFromRGBA(0, 0, 0, 0.1);
CGRect rect = self.frameBgView.frame;
rect.origin.x += 10;
rect.size.width -= 20;
self.frameBgView.frame = rect;
rect = self.frameView.frame;
rect.origin.x -= 10;
self.frameView.frame = rect;
}
else
{
....
}
}
EDIT: some screenshots to explain the question:
oky i tried your solution but i got like this i am posting the code as well as the output how it looks, if there is any problem just comment , i am deleted the frameBgView it is not required
code
- (void)setHighlighted:(BOOL)highlighted animated:(BOOL)animated
{
if (highlighted)
{
self.frameView.backgroundColor = [UIColor grayColor];
CGRect rect = self.contentView.bounds;
rect.origin.x += 15;
rect.size.width -= 30;
//rect = self.frameView.frame;
// rect.origin.x -= 10;
self.frameView.frame = rect;
}
else
{
self.frameView.backgroundColor = [UIColor whiteColor];
CGRect rect = self.contentView.bounds;
rect.origin.x += 10;
rect.size.width -= 20;
self.frameView.frame = rect;
}
}
and i am not using auto layout .. the result what i got is, before
and after highlighted,
EDIT:
this is the cell structure
as u can see in the picture, in content view i hav added frameView which is blue in colour, and within frameView i hav added imageView and also don't forget t set content mode scale to fill and also auto resizing masks for both frameView and imageView for example
autoresizing masks for content view
autoresizing masks for frameView
autoresizing masks for imageView
END EDIT
i need to make the profile photo image circle (similar to whats app)
The cell i use is UITableViewCellStyleDefault
here's my code:
User *user = [DBHelper fetchUserWithUserID:userID];
cell.imageView.image = [Helper imageWithBlob:user.profile.thumbnailPhotoBlob defaultImageFile:FILE_DEFAULT_PHOTO];
cell.imageView.layer.cornerRadius = cell.imageView.frame.size.height /2;
cell.imageView.clipsToBounds = YES;
cell.imageView.layer.masksToBounds = YES;
But the result image view is still a square
EDIT: The image view's frame is {0, 0, 0, 0}, but it did show the image.
EDIT 2:
I tried the answer but the image is not circle. Here's what i did:
float height = [self tableView:tableView heightForRowAtIndexPath:indexPath];
[Helper circlizeImageView:cell.imageView cellHeihgt:height];
+ (void)circlizeImageView:(UIImageView *)imageView cellHeihgt:(float)cellHeight {
imageView.frame = CGRectMake(0, 0, cellHeight, cellHeight);
[Helper circlizeView:imageView];
}
+ (void)circlizeView:(UIView *)view {
view.layer.cornerRadius = view.frame.size.height / 2;
view.clipsToBounds = YES;
view.layer.masksToBounds = YES;
}
The code is all fine.
The only problem is with this line:
cell.imageView.layer.cornerRadius = cell.imageView.frame.size.height/2;
//CGRect rectTest = cell.imageView.frame;
//returns a rect of (0,0,0,0) & hence the cornerRadius being set is 0.
Try:
cell.imageView.layer.cornerRadius = 10; //or some fixed value
In retrospect, what you're trying to do will not get you to make the imageView circular because the default imageView is rectangular (the height is always more than the width) and so... setting a corner radius that is half of the height/width will not work.
It'll be better if you use a custom UITableViewCell and add a square framed imageView.
ANyways... Since the default imageView touches the top of the default UITableViewCell and ends at the bottom, you can get the height of the imageView by using the height of the row (in case you have dynamically sized cells)
So, something as simple as this:
cell.imageView.layer.cornerRadius = cell.frame.size.height/2;
But none of this looks good since the imageView is rectangularish and cells being of dynamic height will make it look like a poor design (the fixed radius looks best imho)
You have two options here:
1- Add the imageView as a subView to you cell.
2- Override layoutSubviews in a custom cell:
- (void)layoutSubviews {
[super layoutSubviews];
self.imageView.frame = CGRectMake(0,0,40,40);
}
I have a UITableView with grouped style and UITableViewCell, which I need to make a little bit wider. So, I subclassing the UITableViewCell and implement there a method:
- (void) layoutSubviews
{
[super layoutSubviews];
if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad && !IS_OS_7_OR_LATER) {
CGRect frame = self.frame;
frame.origin.x -= 10;
frame.size.width += 20;
self.frame = frame;
}
}
Now there is a problem - my cell looks like this:
and with colour layers on:
In the top of the cell there is a part of the bounds of the previous cell before resizing.. This you can see much clearly on the second screen. Can you help me how to remove this border?
UIView *backgroundView = [[UIView alloc] initWithFrame:cell.bounds];
backgroundView.backgroundColor = [UIColor colorWithRed:240 green:240 blue:240 alpha:1];
cell.backgroundView = backgroundView;
have a try.