UILabel in custom UITableViewCell moves up every time the table reloads - ios

I've set up the positioning for my UILabels like so:
- (void) layoutSubviews {
[super layoutSubviews];
CGRect cvf = self.contentView.frame;
self.imageView.frame = CGRectMake(0.0,
0.0,
cvf.size.height-1,
cvf.size.height-1);
self.imageView.contentMode = UIViewContentModeScaleAspectFit;
CGRect frame = CGRectMake(cvf.size.height + 5,
self.textLabel.frame.origin.y-10,
cvf.size.width - cvf.size.height - 2*1,
self.textLabel.frame.size.height);
self.textLabel.frame = frame;
frame = CGRectMake(cvf.size.height + 5,
self.detailTextLabel.frame.origin.y-8,
cvf.size.width - cvf.size.height - 2*1,
self.detailTextLabel.frame.size.height);
self.detailTextLabel.frame = frame;
frame = CGRectMake(cvf.size.height + 5,
self.bestMatchLabel.frame.origin.y-4,
cvf.size.width - cvf.size.height - 2*1,
self.bestMatchLabel.frame.size.height);
self.bestMatchLabel.frame = frame;
}
For some reason, upon reloading the UITableView, bestMatchLabel moves up a few pixels, so that it looks like the below picture. Every time I reload it, it moves up more and more. I sense that there's something about the Y positioning thats causing it to relate its current position to its previous one. Am I correct?

It is obvious the code :
self.textLabel.frame.origin.y-10,
self.detailTextLabel.frame.origin.y-8
self.bestMatchLabel.frame.origin.y-4,
make the y change every load. You must set a fix y in every layout.

Related

Autolayout with dynamic height

I am trying to create a subclass of UIView that will show a list of fixed sized UIImages similar to how a UILabel displays letters.If all the images won't fit on one line, the images are arranged on multiple lines.
How can I achieve this using autolayouts so that if I put this view in a UIStackView the images will be listed correctly?
Here is a sample if I did it using fixed position :
- (void) layoutSubviews{
[super layoutSubviews];
CGRect bounds = self.bounds;
CGRect imageRect = CGRectMake(0, 0, 30, 30);
for (UIImageView* imageView in self.imageViews){
imageView.frame = imageRect;
imageRect.origin.x = CGRectGetMaxX(imageRect);
if (CGRectGetMaxX(imageRect) > CGRectGetMaxX(bounds)){
imageRect.origin.x = 0.0;
imageRect.origin.y = CGRectGetMaxY(imageRect);
}
}
}
Update:
Here is a sample project to show the issue.
https://github.com/datinc/DATDemoImageListView
Here the link for ImageListView
https://github.com/datinc/DATDemoImageListView/blob/master/DATDemoImageListView/DATDemoImageListView.m
You should overwrite intrinsicContentSize returning the preferred content size of your view.
The problem is that in intrinsicContentSize the view has not it's final bounds. You can use an internal height constraint, and overwrite updateConstraints:
- (void)updateConstraints {
CGFloat theWidth = CGRectGetWidth(self.bounds);
NSUInteger theCount = [self.subviews count];
CGFloat theRows = ceilf(theCount / floorf(theWidth / 30.0));
self.heightConstraint.constant = 30.0 * theRows;
[super updateConstraints];
}
In viewDidAppear: and on layout changes (e. g. rotation) you have to call setNeedsUpdateConstraints to get a proper initial layout of the image views.

Implementing iPad General Setting Page

So far I have customized the tableview and implemented the iPad General Setting Page. Below is the code for tableview which will change frame accordingly. But the issue is when I insert/delete rows or section in the tableview. My tableviewcell backgroundview (not cell) width get shrinks. Any idea what wrong am I doing here?
- (void)setFrame:(CGRect)frame
{
if (UI_USER_INTERFACE_IDIOM()==UIUserInterfaceIdiomPad)
{
CGFloat inset =10;
frame.origin.x += inset;
frame.size.width -= 2 * inset;//The issue is in this line
}
[super setFrame:frame];
}
I found the simple solution to achieve this. No need of customizing UITableView subclass. Just take the outlet of tableview and set the frame and change the color of backgroundview. like that below:-
CGFloat tableBorderLeft = 10;
CGFloat tableBorderRight = 10;
CGRect tableRect = self.view.frame;
tableRect.origin.x += tableBorderLeft; // make the table begin a few pixels right from its origin
tableRect.size.width -= tableBorderLeft + tableBorderRight; // reduce the width of the table
yourTableView.frame = tableRect;
self.view.backgroundColor=[UIColor colorWithRed:(239/255.0f) green:(239/255.0f) blue:(244/255.0f) alpha:1.0];

custom uitableviewcell reset subview frame doesn't work as I wanted

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

UITextView contentSize automatically decreases

I have a UITextView whose height I am trying to resize as the number of lines increases. Apart form this, I need to resize the UIView in which the UITextView is contained. I am using the following code for this:
-(void) textViewDidChange:(UITextView *)textView{
CGFloat before = textView.frame.size.height;
CGRect frame = textView.frame;
frame.size = textView.contentSize;
CGFloat after = frame.size.height, diff = after - before, final = 0;
if (diff>16) {
final = 8;
}else if(diff<-1){
final = -16;
}else{
final = 0;
}
[self.containerView setFrame: CGRectMake(self.containerView.frame.origin.x,
self.containerView.frame.origin.y-final, self.containerView.frame.size.width,
frame.size.height+13)];
[textView setFrame: frame];
}
I am also trying to change the Y-position of the container as the text is changed. I am using static number values according to font size to avoid complications.
But the problem is that whenever the UITextView enters a new line, it resizes its contentSize to the original size and so the frame of the UITextView is also reduced for a moment, which looks really ugly. Also, the Y-position depends on this contentSize change and it gets all messed up when this automatic resize happens.
I am looking for the same behaviour which apps like whatsapp or viber have. Any idea how I can achieve this?
If I understand correctly, the containerView includes a textfield and must be drawn around it, regardless of the size of the textfield? If that is, try something like this
-(void) textViewDidChange:(UITextView *)textView
{
CGRect frame = textView.frame;
frame.size = textView.contentSize;
//do your magic calculations
[textView setFrame: frame];
[self.containerView setFrame: CGRectMake(self.containerView.frame.origin.x,
self.containerView.frame.origin.y-final, self.containerView.frame.size.width, frame.size.origin.y +frame.size.height+13)];
}

UIScrollView zooms subviews when increasing subview dimensions

I have a UIScrollView that contains a view derived from UIView that uses CATiledLayer. Essentially, in my ViewController viewDidLoad:
_tiledView = [[TiledView alloc] initWithFrame:rect tileSize:_tileSize];
_scrollView = [[ScrollingView alloc] initWithFrame:rect];
_scrollView.contentSize = _tiledView.frame.size;
_scrollView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
_scrollView.decelerationRate = UIScrollViewDecelerationRateFast;
_scrollView.scrollEnabled = YES;
_scrollView.delegate = self;
[_scrollView addSubview:_tiledView];
Initially, _tiledView is a 4x4 grid of 256x256 tiles. I'm trying increase the dimensions of _tiledView at runtime. When constructing _tiledView, I simply compute the size of the view by multiplying the number of tiles by its size. Then I set the size of _tiledView.frame and _tiledView.bounds, e.g.:
CGRect frame = self.frame;
frame.origin = CGPointZero;
frame.size = CGSizeMake(tileSize.width*4, tileSize.height*4);
self.frame = frame;
self.bounds = frame;
Now, when I hit a button in the interface, all I want to accomplish as a first step is increasing the dimensions of _tiledView by one 256x256 tile to both right and bottom. This is what I attempted:
- (void)addTiles:(id)sender
{
CGRect rect = _tiledView.frame;
rect.size.width += _tileSize.width;
rect.size.height += _tileSize.height;
_tiledView.frame = rect;
_tiledView.bounds = rect;
CGSize size = _scrollView.contentSize;
size.width += _tileSize.width;
size.height += _tileSize.height;
_scrollView.contentSize = size;
[_scrollView setNeedsLayout];
}
However, this doesn't work as expected. What happens is that _tiledView gets bigger as if it had been zoomed in - same number of tiles as the beginning though, i.e. 4x4. I checked the _scrollView.contentsScaleFactor property and it says 1.0. I assume _scrollView did not technically zoom the contents in.
I was expecting _tileView to stay put in its current place in the interface but add 9 new tiles, i.e. 4 to the right, 4 at the bottom and 1 at the bottom-right corner. Instead, the initial 16 tiles got bigger to fill in the space that could have been filled by 25 tiles.
What am I missing? What am I doing wrong? Any help would be appreciated.
In case anyone finds it useful. After digging further, I realized that I the contentMode defaults to ScaleToFill. So I set it to:
_tiledView.contentMode = UIViewContentModeRedraw;
upon initialization. And adjusted addTiles like this:
CGRect rect = _tiledView.frame;
rect.size.width += _tileSize.width;
rect.size.height += _tileSize.height;
_tiledView.frame = rect;
_tiledView.bounds = rect;
_scrollView.contentSize = rect.size;
[_tiledView setNeedsDisplay];
And, that had the effect I was looking for.

Resources