I have horizontal UICollectionView with UIRefreshControl:
self.refreshControlMain = [[UIRefreshControl alloc] init];
//self.refreshControlMain.tintColor = [UIColor grayColor];
[self.refreshControlMain addTarget:self action:#selector(refershControlAction) forControlEvents:UIControlEventValueChanged];
[self.collectionViewMain addSubview:self.refreshControlMain];
self.collectionViewMain.alwaysBounceVertical = YES;
self.collectionViewMain.pagingEnabled = YES;
self.collectionViewMain.showsHorizontalScrollIndicator = NO;
self.collectionViewMain.scrollEnabled = NO;
//Because user can't scroll horizontally (he needs to press next button)
But this code doesn't work, because I can't drag it vertically.
The only option I found is to set self.collectionViewMain.scrollEnabled = YES; (and in this case I can drag it vertically, so that refresh control appears), but in this case user is able to scroll horizontally (but user shouldn't be able to do that).
Is there any option to use refresh control in my situation?
update:
I don't need horisontal refresh control. I have horisontal collectionview, but I need vertical refresh control. if I put "self.collectionViewMain.scrollEnabled = YES" in my code, it works. but I need user not be able to scroll himself.
UIRefreshControl does not support horizontal use natively.
There are various solutions whereby it has been extended for horizontal use.
Check out this link.
Or as per this answer you could use a UITableViewController that is rotated 90 degrees.
Add [self.view setTransform:CGAffineTransformMakeRotation(-M_PI / 2)]; in the UITableViewController class during setup.
Example using UITableView (and not UITableViewController):
table_ = [[UITableView alloc] initWithFrame:self.bounds];
[table_ setDelegate:self];
[table_ setDataSource:self];
[table_ registerClass:[UITableViewCell class] forCellReuseIdentifier:#"Cell"];
[table_ setTransform:CGAffineTransformMakeRotation(-M_PI / 2)];
UIRefreshControl *ctrl = [[UIRefreshControl alloc] init];
[ctrl setBackgroundColor:[UIColor yellowColor]];
[table_ addSubview:ctrl];
[self addSubview:table_];
Make sure to remember to rotate the content back again in the opposite direction!
Related
I'm new to the iOS UI development and I need some help to figure out, what is the best way to implement image belt (sequence of images in horizontal belt). I don't need details (someone to write me the code), just guidance what I should focus on learning as a libraries and most important design patterns (by design patters I mean software design for iOS UI).
The task details:
1. I will have image belt - sequence of few related images. This will be my horizontal transition. The transition animation will be simple push animation (something like push CATransion), initiated by swipe left/right. On top of the images there will be overlay with some text, icon info and etc. The overlay info will be the same for all images in the current belt.
2. I will have multiple image belts - this will be my vertical transition. The transition between belts will be triggered by swipe up/down. The different belts will contain unrelated information, so the information shown in overlays from point 1 must be also changed. The animation will be also simple push animation as in point 1.
I probably should inherit UIView and implement my belt as one object, which will consist of different UIView(overlay) and UIImageViews(for the images). Am I on the right track?
Some helpful brainstorm will be highly appreciated.
Yes - I've done many of these. You add a UIView above the top view. I usually use a full-screen one with some alpha so they can see through the core content a little. Then add stuff on top of that which won't change: things like your text, icons, etc... Then on top of that you put the image you want to swipe and add a swipe gesture recognizer, typically one for left and one for right. When they swipe you init a new UIView off the edge of the device, init it with the image, and animate the frames of both left or right, depending on which way they've swiped. Mine are help tutorials showing how to use my app step-by-step so I also init multi-part animations on some of the frames that fly in; that's a nice looking optional effect. Here's the one I use (with the animation support stripped out or it'd be too much code) and there's lots of variations. Edited to note my app doesn't support rotation but if yours does you have to adjust the frames after a rotation.
- (void)init
{
currentPanelNumber = 10;
self = [super initWithNibName:nil bundle:nil];
if (self)
{
[self.view setBackgroundColor:[UIColor clearColor]];
currentPanelNumber = 10;
overlay = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 1024, 768)];
overlay.backgroundColor = [UIColor colorWithRed:.9 green:.9 blue:.9 alpha:.9];
[self.view addSubview:overlay];
CGRect currentPanelFrame = CGRectMake(267, 175, 494, 444);
currentPanel =
[[HelpView alloc] initWithFrame:currentPanelFrame withImage:[UIImage imageNamed:#"10"]];
currentPanel.frame = currentPanelFrame;
[overlay addSubview:currentPanel];
// ----------------------------------
// Gesture swipes go here
swipeLeftRecognizer =
[[UISwipeGestureRecognizer alloc] initWithTarget:self action:#selector(swipeLeft:)];
[swipeLeftRecognizer setDirection:UISwipeGestureRecognizerDirectionLeft];
[overlay addGestureRecognizer:swipeLeftRecognizer];
swipeRightRecognizer =
[[UISwipeGestureRecognizer alloc] initWithTarget:self action:#selector(swipeRight:)];
[swipeRightRecognizer setDirection:UISwipeGestureRecognizerDirectionRight];
[overlay addGestureRecognizer:swipeRightRecognizer];
swipeDownRecognizer =
[[UISwipeGestureRecognizer alloc] initWithTarget:self action:#selector(swipeDown:)];
[swipeDownRecognizer setDirection:UISwipeGestureRecognizerDirectionDown];
[overlay addGestureRecognizer:swipeDownRecognizer];
UITapGestureRecognizer *tapRecognizer =
[[UITapGestureRecognizer alloc] initWithTarget:self action:#selector(handleTap:)];
[overlay addGestureRecognizer:tapRecognizer];
skipIcon = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"SkipAndStartIcon"]];
CGSize size = CGSizeMake(84, 124);
skipIcon.frame = CGRectMake((self.view.frame.size.width/2)-(size.width/2), self.view.frame.size.height-size.height-25, size.width, size.height);
[self.view addSubview:skipIcon];
}
- (void)goNext
{
// Clear out all subviews to remove lingering animations
[[currentPanel subviews] makeObjectsPerformSelector:#selector(removeFromSuperview)];
if(currentPanelNumber>=80)
{
[self closeHelp];
return;
}
NSString *nextImage = [NSString stringWithFormat:#"%i", currentPanelNumber+10];
CGRect nextPanelFrame = CGRectMake(765, 175, 494, 444);
nextPanel = [[HelpView alloc] initWithFrame:nextPanelFrame withImage:[UIImage imageNamed:nextImage]];
nextPanel.frame = nextPanelFrame;
[overlay addSubview:nextPanel];
[UIView animateWithDuration:.2 animations:^
{
nextPanel.frame = currentPanel.frame;
}
completion:^(BOOL finished)
{
currentPanel.image = nextPanel.image;
nextPanel.alpha = 0;
currentPanelNumber += 10;
}
- (void)goPrevious
{
if(currentPanelNumber<=10)
{
return;
}
// Clear out all subviews to remove lingering animations
[[currentPanel subviews] makeObjectsPerformSelector:#selector(removeFromSuperview)];
NSString *nextImage = [NSString stringWithFormat:#"%i", currentPanelNumber-10];
CGRect nextPanelFrame = CGRectMake(-230, 175, 494, 444);
// nextPanel = [[UIImageView alloc] initWithImage:[UIImage imageNamed:nextImage]];
nextPanel = [[HelpView alloc] initWithFrame:nextPanelFrame withImage:[UIImage imageNamed:nextImage]];
nextPanel.frame = nextPanelFrame;
[overlay addSubview:nextPanel];
[UIView animateWithDuration:.2 animations:^
{
nextPanel.frame = currentPanel.frame;
}
completion:^(BOOL finished)
{
currentPanel.image = nextPanel.image;
nextPanel.alpha = 0;
currentPanelNumber -= 10;
}];
}
I want to implement Pull To Refresh to my UITableViewController by using UIRefreshControl. Here what i tried so far.
- (void)viewDidLoad
{
.....
////********* Pull to refresh ************/
UIRefreshControl *refresh = [[UIRefreshControl alloc] init];
refresh.attributedTitle = [[NSAttributedString alloc] initWithString:#"Pull to Refresh"];
refresh.tintColor = [UIColor magentaColor];
// [self.tableView addSubview:refresh];
// [self.refreshControl setEnabled:YES];
[refresh addTarget:self action:#selector(pullToRefresh:) forControlEvents:UIControlEventValueChanged];
self.refreshControl = refresh;
}
-(void)pullToRefresh:(UIRefreshControl *)refresh {
[refresh beginRefreshing];
refresh.attributedTitle = [[NSAttributedString alloc] initWithString:#"Refreshing.."];
[self loadRecentActivities];
}
But when i pull the tableview neither activity indicator nor title is visible, however pullToRefresh is called and table refreshed.My app supports iOS7.0+.
What i'm missing? Any help would be appreciated?
Edit: I'v tried with [self.refreshControl setEnabled:YES]; and [self.refreshControl setEnabled:YES]; as mentioned in my edited code, but still no luck.
This is how my tableview looks like when i pull it to refresh-
Final Solution: For table view background i was using
UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"background.png"]];
self.tableView.backgroundView = imageView;
Refresh indicator and title was hidden behind the self.tableView.backgroundView instead use
[self.tableView setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:#"background.png"]]];
and it solves my problem. also many thanks to Balram Tiwari please see his answer if you still have problem.
Just add self.tableView.backgroundView.layer.zPosition -= 1; under the initialisation code for refreshControl.
Actually you have your refresh controller there in the tableView, but it is behind the navigationBar. (Sounds different, right), Here is the catch,
When you are using code in iOS7, by default the UIViewController takes the (edgesForExtendedLayout) whole screen. That means your (0,0) will start from the top left corner, underneath the navigationBar.
So your tableView is actually starting from there. So to get rid of it, you just specify the edgesForExtendedLayout for your viewController in your viewDidLoad Method.
if ([self respondsToSelector:#selector(edgesForExtendedLayout)])
self.edgesForExtendedLayout = UIRectEdgeNone;
After that it should be visible.
Before above Fix:
After the Fix.
hope that helps.
In my application I use refresh control with collection view.
UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:[UIScreen mainScreen].bounds];
collectionView.alwaysBounceVertical = YES;
...
[self.view addSubview:collectionView];
UIRefreshControl *refreshControl = [UIRefreshControl new];
[collectionView addSubview:refreshControl];
iOS7 has some nasty bug that when you pull collection view down and don't release your finger when refreshing begins, vertical contentOffset shifts for 20-30 points down which results in ugly scroll jump.
Tables have this problem too if you use them with refresh control outside of UITableViewController. But for them it could be easily solved by assigning your UIRefreshControl instance to UITableView's private property called _refreshControl:
#interface UITableView ()
- (void)_setRefreshControl:(UIRefreshControl *)refreshControl;
#end
...
UITableView *tableView = [[UITableView alloc] initWithFrame:[UIScreen mainScreen].bounds];
[self.view addSubview:tableView];
UIRefreshControl *refreshControl = [UIRefreshControl new];
[tableView addSubview:refreshControl];
[tableView _setRefreshControl:refreshControl];
But UICollectionView does not have such property so there must be some way to deal with it manually.
Having the same problem and found a workaround that seems to fix it.
This seems to be happening because the UIScrollView is slowing down the tracking of the pan gesture when you pull past the edge of the scrollview. However, UIScrollView is not accounting for changes to contentInset during tracking. UIRefreshControl changes contentInset when it activates, and this change is causing the jump.
Overriding setContentInset on your UICollectionView and accounting for this case seems to help:
- (void)setContentInset:(UIEdgeInsets)contentInset {
if (self.tracking) {
CGFloat diff = contentInset.top - self.contentInset.top;
CGPoint translation = [self.panGestureRecognizer translationInView:self];
translation.y -= diff * 3.0 / 2.0;
[self.panGestureRecognizer setTranslation:translation inView:self];
}
[super setContentInset:contentInset];
}
Interestingly, UITableView accounts for this by NOT slowing down tracking until you pull PAST the refresh control. However, I don't see a way that this behavior is exposed.
- (void)viewDidLoad
{
[super viewDidLoad];
self.refreshControl = [[UIRefreshControl alloc] init];
[self.refreshControl addTarget:self action:#selector(scrollRefresh:) forControlEvents:UIControlEventValueChanged];
[self.collection insertSubview:self.refreshControl atIndex:0];
self.refreshControl.layer.zPosition = -1;
self.collection.alwaysBounceVertical = YES;
}
- (void)scrollRefresh:(UIRefreshControl *)refreshControl
{
self.refreshControl.attributedTitle = [[NSAttributedString alloc] initWithString:#"Refresh now"];
// ... update datasource
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(3 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
self.refreshControl.attributedTitle = [[NSAttributedString alloc] initWithString:[NSString stringWithFormat:#"Updated %#", [NSDate date]]];
[self.refreshControl endRefreshing];
[self.collection reloadData];
});
}
I have a couple of side-by-side UITableViews in a UIView, and I would like to get the whole thing to autoresize. I have a UIView In my init() method am doing:
// I don't know how big frontBack should be, so I'd like it to autosize
UIView *frontBack = [[UIView alloc] initWithFrame:CGRectZero];
frontBack.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
UITableView *table = [[UITableView alloc]
initWithFrame:CGRectMake(0, 0, r.size.width / 2, height) style:UITableViewStyleGrouped];
table.autoresizingMask = UIViewAutoresizingFlexibleHeight;
table.dataSource = model1;
[table reloadData];
[frontBack addSubview:table];
... (add second table similarly, except with model2)
...
controller.view = frontBack;
This does not work. The tables are 'height' pixels tall (which is smaller than what they need; the text is cut off).
I've tried several ways of getting the UITableViews to resize, with no luck
// contentSize is correct, but frame size does not change
[table reloadData];
table.frame.size.height = table.contentSize.height;
// contentSize is correct, but bounds does not change
[table reloadData];
table.bounds.size.height = table.contentSize.height;
// Nothing appears to change
[table setNeedsLayout];
[table layoutIfNeeded];
// Again, no change
[table sizeToFit];
I assume I am missing something basic here, but I'd be grateful if someone could point out what it is.
table.bounds.size.height = table.contentSize.height;
This is a read-only property, you need to set the frame again.
Also, Are you sure your containing UIView isn't cutting off the table content? You should resize it as well.
I'm making a horizontal picker by using a UICollectionView. It's simple enough: A UIView with a UICollectionView created programmatically, using UICollectionViewFlowLayout with one section, scrolling set to horizontal. It appears onscreen, complete with the correct data in the correct cells. But it doesn't scroll---in fact it doesn't respond to user interaction at all.
Here's the initializer for the view:
- (id)initWithFrame:(CGRect)frame andItemData:(NSArray *)itemData
{
self = [super initWithFrame:frame];
if (self) {
_itemData = itemData;
UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
[flowLayout setScrollDirection:UICollectionViewScrollDirectionHorizontal];
[flowLayout setItemSize:CGSizeMake(kCellWidth, kCellHeight)];
[flowLayout setMinimumInteritemSpacing:0.f];
[flowLayout setMinimumLineSpacing:0.f];
_collectionView = [[UICollectionView alloc] initWithFrame:[self frame] collectionViewLayout:flowLayout];
[_collectionView setDataSource:self];
[_collectionView setDelegate:self];
[_collectionView setBounces:NO];
[_collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:#"HorizontalPickerCell"];
[self addSubview:_collectionView];
}
return self;
}
I tried programmatically setting UserInteractionEnabled to YES, but that didn't make any difference (nor should it have, since UserInteractionEnabled is set to YES by default). FWIW, the collection view uses standard UICollectionViewCells with UILabels added to their contentViews as subviews.
Any thought as to why this isn't scrolling? Any and all help much appreciated.
Ok, this turned out to be both dumb on my part and easy to fix. I set the frame of the collection view to its parent view's frame rather than its bounds. This caused all sorts of autolayout issues and resulted in touch events simply not registering. All fixed now.