I'd like to have a gruped table where the first section has 2 row and 1 imageview like contacts app.
something like this: screeshot
How can I do that?
Thanks,
Max
The other solutions require you to create your own background images and use two tableviews which is not convenient. What I did was subclass UITableViewCell and indented the background views as such:
#define INDENT_WIDTH 84
...
- (void)layoutSubviews
{
[super layoutSubviews];
//Indent the background views.
CGRect frame = self.backgroundView.frame;
frame.origin.x = frame.origin.x + INDENT_WIDTH;
frame.size.width = frame.size.width - INDENT_WIDTH;
self.backgroundView.frame = frame;
self.selectedBackgroundView.frame = frame;
//Also indent the UIImageview that contains like a shadow image over the backgroundviews (in grouped tableview style only).
for (UIView *subview in self.subviews) {
if ([subview isKindOfClass:[UIImageView class]]) {
CGRect frame = subview.frame;
frame.origin.x = frame.origin.x + INDENT_WIDTH;
frame.size.width = frame.size.width - INDENT_WIDTH;
subview.frame = frame;
}
}
}
Since the content view has a transparent background color you can place a UIImageView (e.g on your storyboard cell prototype) on the left side and you should get the same effect as the "Add Contact" view in the Contacts App.
Please see this question:
Is it possible to adjust the width of a UITableViewCell?
It seems there's no convenient way to actually reduce the width of a cell (or cell group).
You can achieve the same in the screenshot by:
(1) A parent view controller with a view having a background color similar to that of a UITableViewStyleGrouped.
(2) Add the photo on a UIImageView which would be a subView to (1)
(3) Add the UITableView (Grouped Style) on the right side again as a subview to (1)
Set the frames of both subviews properly and accordingly for the layout in the screenshot and use delegation to "logically connect" both subviews.
Edit: The background color can be achieved using [UIColor colorWithPatternImage:(UIImage *)image]. Just crop the background from any sample app on the iphone simulator.
Related
I have a UIScrollView which has about 10+ images laid out horizontally using the following code adapted from apple sample code:
- (void)layoutScrollViewImages
{
UIImageView *view = nil;
NSArray *subviews = [scrollView subviews];
CGFloat curXLoc = 0;
for (view in subviews)
{
if ([view isKindOfClass:[UIImageView class]] && view.tag > 0)
{
CGRect frame = view.frame;
frame.origin = CGPointMake(curXLoc, 0);
view.frame = frame;
curXLoc += (kScrollObjWidth);
}
}
[scrollView setContentSize:CGSizeMake((kNumImages * kScrollObjWidth),[scrollView bounds].size.height)];
}
The user can page through the images one at a time, in a horizontal manner, but I want each individual image zoomable. I have tried returning my scrollView in viewForZoomingInScrollView but that seems to zoom the entire scrollview, not the individual image. Additionally, I have tried setting the UIImageView as a property and returning that, but still have not had any success. Additionally, I have tried adding a pinch gesture recognizer in storyboard, but that did not work AT ALL. So looking for some guidance on essentially how to return the individual UIImageView within an array of scrollView.subviews.
It sounds like you want something similar to Apples Photo Library effect, where you can swipe from image to image but zoom / scroll per individual image.
You are going to have to put each subview inside it's own zooming scrollview. Then each one can scroll independently of the others.
Take a look at Apple's 'photoscroller' sample code (just search for photoscroller in the docs). There is also a WWDC video to accompany the code (WWDC 2010, "Designing Apps with Scroll Views")
Stuck on something and i'm not sure if it's even possible. Is there a way to set the background of a UITableView as a custom image, but NOT let that background apply to the tableHeaderView. I have a header on my table that needs to remain transparent, because I have a parallax type effect (like the path 2 app) implemented with an image behind the transparent table header & the top 1/3rd of the tableview... but i need to get a custom image behind the rest of the table.
I can successfully get close to the background style im looking for that fills in behind each cell, with:
- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
However, this is not quite what Im looking for because I would like a radial gradient background view behind the entire tableview on the screen, minus the transparent header... not just the same image for each cell. Also, this approach really hits my tableview's scrolling performance loading a new BG image with each cell.
I know you can use:
UIImageView *tempImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"image.png"]];
[tempImageView setFrame:self.tableView.frame];
self.tableView.backgroundView = tempImageView;
to set the BG image for the tableview, and it is really close to what I'm trying to do, but I neeeeeed that header transparent. Is there any way to use this, but also tell the tableHeaderView to ignore it and be transparent?
Thanks everyone, & happy Halloween!
Yes, you can. I implemented a solution for the parallax effect for a grouped UITableView. You could use the same approach except instead of a black background (example below) you could use your image. Essentially, you have two views behind the tableview (which is clear, header view background clear as well as the table view background itself). These two views you move based on scrolling (UIScrollViewDelegate). Your tableview background image you'll "scroll" 1 for 1 with the table, while your parallax image will "scroll" at a different rate of course. In the below example i think my "_secondParaView" would be your background image for the table.
Firstly, in viewDidLoad, create a view to partially hide your image for the parallax effect, should be the same color as the background you want the tableview to be, in my case blackColor. I placed the view at a fixed offset based on the size of my image, you want the top of this view to line up with the top of the end of 'section 0' header view. It will then "scroll" just as the tableview scrolls. Insert this view below the tableview.
_secondParaView = [[UIView alloc] initWithFrame: CGRectMake(0.0, kTableViewOffset, self.view.frame.size.width, 200.0)];
_secondParaView.backgroundColor = [UIColor colorWithRed: 0.0 green: 0.0 blue: 0.0 alpha: 1.0];
[self.view insertSubview: _secondParaView belowSubview: _tableView];
_headerImageYOffset = -40.0;
_headerImageView = [[UIImageView alloc] initWithImage: [UIImage imageNamed: #"SpaceRedPlanet640x480.png"]];
CGRect headerImageFrame = _headerImageView.frame;
headerImageFrame.origin.y = _headerImageYOffset;
_headerImageView.frame = headerImageFrame;
[self.view insertSubview: _headerImageView belowSubview: _secondParaView];
_tableView.backgroundColor = [UIColor clearColor];
Then implement the two grouped tableview methods for the header view / header view size:
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
if (section == 0) {
UIView * tableHeaderView = [[UIView alloc] initWithFrame: CGRectMake(0.0, 0.0, self.view.frame.size.width, kTableViewOffset)];
tableHeaderView.backgroundColor = [UIColor clearColor];
return tableHeaderView;
} else
return nil;
}
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section {
if (section == 0) {
return kTableViewOffset;
} else
return 2;
}
Just like in the "normal" tableview parallax implementation, make your VC a UIScrollViewDelegate and implement this scrollViewDidScroll like so:
#pragma mark -
#pragma mark UIScrollViewDelegate methods
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
CGFloat scrollOffset = scrollView.contentOffset.y;
CGRect headerImageFrame = _headerImageView.frame;
CGRect underParaFrame = _secondParaView.frame;
if (scrollOffset < 0) {
// Adjust top image proportionally
headerImageFrame.origin.y = _headerImageYOffset - ((scrollOffset / 3));
} else {
// We're scrolling up, return to normal behavior
headerImageFrame.origin.y = _headerImageYOffset - scrollOffset;
}
underParaFrame.origin.y = kTableViewOffset - scrollOffset;
_headerImageView.frame = headerImageFrame;
_secondParaView.frame = underParaFrame;
}
Hope this helps, or at the very least helps someone implement the parallax effect for a grouped tableview. I could find no solution for it.
Is there a reason why you cannot have the tableHeaderView be a container for the image you wish to have the parallax-type effect?
Create a UIView and stick it as the tableHeaderView of the UITableView, and then add your UIImageView (or whatever) to that tableHeaderView. With UIScrollView's delegate methods, you will be able to reposition this UIView however you please within it's parent view in reaction to user scrolling.
See this open source project for a Path inspired parallax UITableView: RBParallaxTableViewController
I have UIScroll that have uitextview inside it.
My apps look like this:
rootviewcontroller -> PhoneContentController (UIScrollView and PageControl) -> DetailController (UITextView, UIWebView, UILabel).
My Flow is like this:
Set UIScrollView default size -> call DetailController (calculate UITextView and other page inside it in viewDidLoad) -> PhoneContentController get the total height size from DetailController-> Change the height of UIScrollView
This is the code in PhoneContentController (loadSCrollViewWithPage):
scrollView.contentSize = CGSizeMake(scrollView.frame.size.width * kNumberOfPages, [detailController.getTotalHeight]);
The code in Detail Controller (viewDidLoad):
summaryBlogParsed = [summaryBlogParsed stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceAndNewlineCharacterSet]];
[self.itemSummaryText setText:summaryBlogParsed];
CGRect frameTextView = self.itemSummaryText.frame;
frameTextView.size.height = self.itemSummaryText.contentSize.height;
self.itemSummaryText.frame = frameTextView;
This code in DetailController getTotalHeight:
CGRect cgRect = [[UIScreen mainScreen] bounds];
CGFloat scrollFrame = (cgRect.size.height/2) + itemSummaryText.frame.size.height;
return scrollFrame;
I can scroll the scrollview but the textview not load all of the string. like only half of it, but i can scroll down but with blank pages :(.
Anyone can help me?
Thank you
set content size of scroll view using this function.
-(void)setContentSizeOfScrollView:(UIScrollView*)scroll
{
CGRect rect = CGRectZero;
for(UIView * vv in [scroll subviews])
{
rect = CGRectUnion(rect, vv.frame);
}
[scroll setContentSize:CGSizeMake(rect.size.width, rect.size.height)];
}
after adding all controls to your scroll view call this function and pass yourScrollView as argument. Hope this will help you.........
According to Apple... When debugging issues with text views, watch for this common pitfall:
Placing a text view inside of a scroll view. Text views handle their own scrolling. You should not embed text view objects in scroll views. If you do so, unexpected behavior can result because touch events for the two objects can be mixed up and wrongly handled.
On a UITableViewCell with UITableViewCellStyleSubtitle styling, I'm setting the imageView.image, textLabel.text, and detailTextLabel.text. There's white padding all around the cell. How do I get rid of the padding so all my images touch each other like the Youtube app below?
Probably the easiest way to do this would be to subclass UITableViewCell and override the -layoutSubviews method to do something like this:
- (void)layoutSubviews {
//have the cell layout normally
[super layoutSubviews];
//get the bounding rectangle that defines the position and size of the image
CGRect imgFrame = [[self imageView] frame];
//anchor it to the top-left corner
imgFrame.origin = CGPointZero;
//change the height to be the height of the cell
imgFrame.size.height = [self frame].size.height;
//change the width to be the same as the height
imgFrame.size.width = imgFrame.size.height;
//set the imageView's frame (this will move+resize it)
[[self imageView] setFrame:imgFrame];
//reposition the other labels accordingly
}
Just remove table separator:
self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
In iOS8 you can set
tableView.layoutMargins = UIEdgeInsets.zero
in code, or from Interface Builder.
Try reducing the UITableView's row height in interface builder or code so that there is no padding.
I had to increase the padding i did so in the interface builder for the tableview.
However Daves answer might give you more control over modifying the cell view.
I'm trying to do a horizontal scroll of UILabels with different widths.
I've already put all labels next to each other inside the UIScrollView, but since the page scrolling, bouncing and snapping is done in scrollview.frame.width "steps", i cannot set it to work as I'd wish.
Can this be done? Thank you so much :)
What happens if you set the size of your width property to be the width of the next label? Something like (in your scroll view delegate) :
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
// Get the label that's going to slide into view
UIView *label = [self getCurrentLabel];
// Get it's width
float width = [label frame].size.width;
// Set our size
CGRect frame = [scrollView frame];
frame.size.width = width;
[scrollView setFrame:frame];
}
PS I've not tried this so it might just fail horribly!