I want to implement a wheel like infinte scrolling Rating tool like the below image.
No i had taken an scrollview and set the orange image in scrollview
- (void)viewWillAppear:(BOOL)animated
{
UIImageView * headerImage = [[UIImageView alloc] init];
headerImage.image = [UIImage imageNamed:#"img_2.png"];
SCrl_Wheel.backgroundColor = [UIColor colorWithPatternImage:headerImage.image];
[SCrl_Wheel setContentSize:CGSizeMake(500,0)];
[SCrl_Wheel setShowsHorizontalScrollIndicator:NO];
Lbl_Rate.text=#"0";
[super viewWillAppear:animated];
}
Apple has an example project featuring infinite scrolling it's called StreetScroller, which demonstrates how a UIScrollView subclass can scroll infinitely in the horizontal direction.
There is also an UIScrollView subclass on Github called BAGPagingScrollView, which is paging & infinite, but it has a few bugs you have to fix on your own, because it's not under active development (especially the goToPage: method leads to problems).
I hope this helps you.
Also check this link for easy implementation they also have a sample code attached :)
http://mobiledevelopertips.com/user-interface/creating-circular-and-infinite-uiscrollviews.html
Related
I am trying to make a drawing application following this tutorial: http://www.effectiveui.com/blog/2011/12/02/how-to-build-a-simple-painting-app-for-ios/, and then I tried to make it such that I don't only draw on the entire screen, I only draw on a UIView that is inside of another UIView. (What I call a nested UIView)
My code is currently on github: https://github.com/sammy0025/SimplePaint
The only parts I tweaked with the original code from the tutorial is to change some class prefix names, enabled ARC so no deallocs, used storyboards (which works fine with the original code from the tutorial), and change this code in the main view controller implementation file (SPViewController.m):
-(void)viewDidLoad
{
[super viewDidLoad];
nestedView.backgroundColor=[UIColor colorWithWhite:0 alpha:0]; //This is to make the nested view transparent
SPView *paint = [[SPView alloc] initWithFrame:nestedView.bounds]; //original code is SPView *paint=[[SPView alloc] initWithFrame:self.view.bounds];
[nestedView addSubview:paint]; //original code is [self.view addSubview:paint];
}
My question is how do I make sure that I only draw inside the nested UIView?
Add clipping to your sub view. E.g. self.bounds would cover the whole area of a view.
UIBezierPath *p = [UIBezierPath bezierPathWithRect:self.bounds];
[p addClip];
I believe clipping for a view should be based on bounds initially and that you may shrink it by adding an new clipping. But there might be a difference between iOS and OS X here.
Rather than using an SPView inside a nested view, consider just changing the frame of the SPView to match what you want. This should solve your problem of only allowing drawing within a given rect.
I think you're seeing issues because of your storyboard configuration. I dont know much about storyboard, but I was able to get this to work programmatically by throwing out storyboard's view and building my own in viewDidAppear.
-(void)viewDidAppear:(BOOL)animated{
UIView *newView = [[UIView alloc] initWithFrame:self.view.bounds];
newView.backgroundColor = [UIColor greenColor];
SPView *newPaint = [[SPView alloc] initWithFrame:CGRectInset(self.view.bounds, 40,40)];
[newView addSubview:newPaint];
self.view = newView;
}
I have seen this question being addressed several times here at SO, e.g Problem with UIScrollView Content Offset, but I´m still not able to solve it.
My iphone app is basically a tab bar controller with navigation bar. I have a tableview controller made programmatically and a DetailViewController that slides in when I tap a cell in my tableview controller.
The DetailViewController is made in IB and has the following hierarchy:
top view => UIScrollView => UIView => UIImage and a UITextField.
My goal is to be able to scroll the image and text field and this works well. The problem is that my UIScrollView always gets positioned at the bottom instead at the top.
After recommendations her at SO, I have made my UIScrollView same size as the top view and instead made the UIView with the max height (1500) of my variable contents.
In ViewDidLoad I set the contentSize for the UIScrollView (as this is not accessible from IB):
- (void)viewDidLoad {
[scrollView setContentSize:CGSizeMake(320, 1500)];
[scrollView setContentOffset:CGPointMake(0, 0) animated:YES];
NSLog(#"viewDidLoad: contentOffset y: %f",[scrollView contentOffset].y);
}
Specifically setting the contentOffset, I would expect my scrollView to always end up at the top. Instead it always go to the bottom. It looks to me that there is some autoscrolling beyond my control taking place after this method.
My read back of the contentOffset looks OK. It looks to me that there may be some timing related issues as the scrolling result may vary whether animation is YES or NO.
A ugly workaround I have found is by using this delegate method:
- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrView {
NSLog(#"Prog. scrolling ended");
[scrollView setContentOffset:CGPointMake(0, 0) animated:YES];
}
This brings my scrollview to top, but makes it bounce down and up like a yo-yo
Another clue might be that although my instance variables for the IBOutlet are set before I push the view controller, the first time comes up with empty image and textfield:
-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
if (!detailViewController) {
detailViewController = [[DayDetailViewController alloc] init];
}
// Pass dictionary for the selected event to next controller
NSDictionary *dict = [eventsDay objectAtIndex:[indexPath row]];
// This method sets values for the image and textfield outlets
[detailViewController setEventDictionary:dict];
// Push it onto the top of the navigation controller´s stack.
[[self navigationController] pushViewController:detailViewController animated:NO];
}
If I set animation to YES, and switch the order of the IBOutlet setting and pushViewController, I can avoid the emptiness upon initialization. Why?
Any help with these matters are highly appreciated, as this is really driving me nuts!
Inspired of Ponchotg´s description of a programmatically approach, I decided to skip interface builder. The result was in some way disappointing: The same problem, with the scrollview ending up in unpredictable positions (mostly at bottom), persisted.
However, I noticed that the scroll offset error was much smaller. I think this is related to the now dynamic (and generally smaller) value of ContentOffset. After some blind experimenting I ended up setting
[textView setScrollEnabled:YES];
This was previously set to NO, as the UITextView is placed inside the scrollview, which should take care of the scrolling. (In my initial question, I have erroneously said it was a UITextField, that was wrong)
With this change my problem disappeared, I was simply not able to get into the situation with scrollview appearing at bottom anymore in the simulator! (At my 3G device I have seen a slight offset appear very seldom, but this is easily fixed with scrollViewDidEndScrollingAnimation delegate described previously ).
I consider this as solved now, but would appreciate if anyone understand why this little detail messes up things?
OK! i have a question before i can give a correct answer.
Why are you using a UIView inside the Scrollview?
You can always only put your UIImageView and UITextField inside the UIScrollView without the UIView
and set the contentSize dynamically depending on the size of the text.
to give you an example how i do it:
int contSize = 0;
imageView.frame = CGRectMake(10, 0, 300, 190);
imageView.image = [UIImage imageNamed:#"yourimage"];
contSize = 190 //or add extra space if you dont want your image and your text to be so close
[textField setScrollEnabled:NO];
textField.font = [UIFont systemFontOfSize:15];
textField.textColor = [UIColor grayColor];
textField.text = #"YOUR TEXT";
[textField setEditable:NO];
textField.frame = CGRectMake(5, contSize, 310, 34);
CGRect frameText = textField.frame;
frameText.size.height = textField.contentSize.height;
textField.frame = frameText;
contSize += (textField.contentSize.height);
[scrollView setScrollEnabled:YES];
[scrolView setContentSize:CGSizeMake(320, contSize)];
In the above example I first create an int to keep track of the ysize of my view then Give settings and the image to my UIImageView and add that number to my int then i give settings and text to my UITextField and then i calculate the size of my text depending on how long is my text and the size of my font, then add that to my int and finally assign the contentSize of my ScrollView to match my int.
That way the size of your scrollview will always match your view, and the scrollView will always be at top.
But if you don't want to do all this, you can allways just:
[scrollView setContentOffset:CGPointMake(0, 0) animated:NO];
at the end of the code where you set your image and your text, and the NOto avoid the bouncing.
Hope this helps.
I'm starting to develop a simple application for iOS, and this application is a simple gallery of some photo (taken from a website).
The first problem I encountered is how to create the view for the gallery.
The view should be something like this (or the Photo App):
however doing a view this way is problematic, first because it uses fixed dimension, and I think is a bit difficult to implement (for me).
The other way is to use a custom cell within a tableview, like this:
but it is still using fixed dimension.
What's the best way to create a gallery, without using any third part lib (like Three20)?
Thanks for any reply :)
PS. I think that using fixed dimension is bad because of the new iphone 4 (with a different resolution), am I right?
You should check out AQGridView which does exactly what you are trying to achieve. Even if you want to write your own custom code, have a look at the AQGridView source as more than likely you will need to use a UIScrollView as a base.
In case that you want to use third party classes, the next tutorials can be mixed, they worked for me.
Here's a good grid view:
custom image picker like uiimagepicker
And if you want to load them asynchronously, use this:
image lazy loading
Both tutorials are very well described and have source code.
The difference in resolution shouldn't be an issue since iOS, if I recall correctly, scales up UI components and images to the right resolution if it detects that it has a retina display. An aside; remember to start making hi/lo-res versions of your graphics if you intend to support both screen sizes without degradation of quality.
As long as you design things in terms of points instead of pixels (which is the way it's done in XCode 4), iOS will be able to handle scaling for you transparently. On a small screen one point will be one pixel, whereas it will be two pixels on a retina display. This allows it to render things with a crisper look on retina displays. Source
I know this question is old, but I didn't see anyone addressing the issue of fixed widths, so I thought I'd contribute for once.
If you don't want to use a third party library, you should do this in UITableView rows. Because of the way UITableView caches cells, it's relatively lightweight in memory. Certainly more so than a possibly very large UIView inside a UIScrollView. I've done it both ways, and I was much happier with the UITableView.
That said, next time I need to do this? I plan to use AQGridView.
Um, since ios6 came out, the right way to do this is with Collection Views:
Apple Docs on CollectionViews
Also, see the two WWDC 2012 sessions on them:
Introduction to Collection Views
Advanced Collection Views
Sadly, Apple did not include a simple gallery or coverflow layout, but it's pretty easy to make one.
I wrote a tutorial on building a media gallery using a UICollectionView. It populates from the user's photo library. I think it will work perfectly for what you are trying to do.
iPhone Programming Tutorial: Creating An Image Gallery Like Over – Part 1
Hope that helps. Cheers!
I did something very similar to this in a project of my own. I just show some parts of the code here, but if you want to view the full code you can view it on GitHub GitHub Repo
First I made a custom Collection View cell with an ImageView
in CustomCollectionCell.h
#import <UIKit/UIKit.h>
#interface CustomCollectionCell : UICollectionViewCell
#property (nonatomic , retain) UIImageView *imageView;
#end
in CustomCollectionCell.m
#import "CustomCollectionCell.h"
#implementation CustomCollectionCell
- (id)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self) {
[self setupImageView];
}
return self;
}
#pragma mark - Create Subviews
- (void)setupImageView {
self.imageView = [[UIImageView alloc] initWithFrame:self.bounds];
self.imageView.autoresizingMask = UIViewAutoresizingNone;//UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
[self addSubview:self.imageView];
}
#end
Then in the view where you want to have the thumbnails you set up the CollectionView
in ThumbNailViewController.m (snippet)
UICollectionView *collectionViewThumbnails;
in ThumbNailViewController.m (snippet)
UICollectionViewFlowLayout *layout=[[UICollectionViewFlowLayout alloc] init];
collectionViewThumbnails=[[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.height - 50) collectionViewLayout:layout];
if (collectionViewThumbnails && layout)
{
[collectionViewThumbnails setDataSource:self];
[collectionViewThumbnails setDelegate:self];
[collectionViewThumbnails registerClass:[CustomCollectionCell class] forCellWithReuseIdentifier:#"cellIdentifier"];
[collectionViewThumbnails setBackgroundColor:[UIColor blackColor]];
[self.view addSubview:collectionViewThumbnails];
}
Then you have the required methods for the collection views. Here you can set up what you
//Number of items in the collectionview
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return [galleryData count];
}
//Set up what each cell in the collectionview will look like
//Here is where you add the thumbnails and the on define what happens when the cell is clicked
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
//initialize custom cell for the collectionview
CustomCollectionCell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:#"cellIdentifier" forIndexPath:indexPath];
[cell.imageView setClipsToBounds:YES];
cell.imageView.contentMode = UIViewContentModeScaleAspectFill;
//format url to load image from
NSString *url = [NSString stringWithFormat:#"http://andrecphoto.weebly.com/uploads/6/5/5/1/6551078/%#",galleryData[indexPath.item]];
//load thumbnail
[cell.imageView setImageWithURL:[NSURL URLWithString:url]
placeholderImage:[UIImage imageNamed:#"placeholder.png"]];
//Sets up taprecognizer for each cell. (onlcick)
UITapGestureRecognizer *tap=[[UITapGestureRecognizer alloc] initWithTarget:self action:#selector(handleTap:)];
[cell addGestureRecognizer:tap];
//sets cell's background color to black
cell.backgroundColor=[UIColor blackColor];
return cell;
}
//Sets size of cells in the collectionview
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
return CGSizeMake(100, 100);
}
//Sets what happens when a cell in the collectionview is selected (onlclicklistener)
- (void)handleTap:(UITapGestureRecognizer *)recognizer {
//gets the cell thats was clicked
CustomCollectionCell *cell_test = (CustomCollectionCell *)recognizer.view;
//gets indexpath of the cell
NSIndexPath *indexPath = [collectionViewThumbnails indexPathForCell:cell_test];
if (isConnectedGal)
{
//sets the image that will be displayed in the photo browser
[photoGallery setInitialPageIndex:indexPath.row];
//pushed photobrowser
[self.navigationController pushViewController:photoGallery animated:YES];
}
}
Hopefully that answers your question.
Here is a very good library called FGallery for iOS
-Supports auto-rotation
-thumbnail View
-zoom
-delete
I've coded a "generic" ads management class for all my applications and i have an issue. This class can add an ads view to any view of my application, randomly; in order to do so, my idea is to resize the frame of my current view to reduce its height (let's say 50 pixels less) and add my ads view in the free space i created. This way, i don't have to bother modifying my views for ads integrations, everything is done automatically. It's working well but my ads aren't responding to touch events. I guess it's because this ads view is "outside" the frame of my controller.
It is possible to reduce the height of my view frame and raise its bounds so my ads subview is really part of my view?
Thanks a lot :)
UIView *adView = [[UIView alloc] init];
adView.frame = CGRectMake(0,267,320,100);
adView.backgroundColor = [UIColor grayColor];
adView.tag = 123456;
adView.userInteractionEnabled = YES;
CGRect myFrame = [self.view frame];
myFrame.size.height = myFrame.size.height - 100;
[self.view setFrame:myFrame];
[self.view addSubview:adView];
Here's a picture representing what i would like to do :
http://i49.tinypic.com/2iw7lz4.jpg
This is not an answer but I do not have option to post a comment to your question.
Can you please post the code you have in your touchesBegan method?
I think there can be the problem
Regards
Alejandra
I've been having a very hard time finding good examples of UIScrollView. Even Apple's UIScrollView Suite I find a bit lacking.
I'm looking for a tutorial or example set that shows me how to create something similar to the iPhone Safari tab scrolling, when you zoom out from one browser window and can flick to others.
But I'm having a hard time just getting any old view showing within a scroll view. I have a view set up with an image in it, but when I add it to the scroll view, I only get a black rectangle, no matter what I put in the view I add.
Any links or code snippets would be great!
Here is a scroll view guide from Apple
The basic steps are:
Create a UIScrollView and a content view you want to put inside (in your case a UIImageView).
Make the content view a subview of the scroll view.
Set the content size of the scrollview to the frame size of the content view. This is a very important step that people often omit.
Put the scroll view in a window somewhere.
As for the paging behavior, check out UIScrollView’s pagingEnabled property. If you need to scroll by less than a whole page you’ll need to play tricks with clipsToBounds, sort of the reverse of what is happening in this StackOverflow question.
UIScrollView *scrollview = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
NSInteger viewcount= 4;
for (int i = 0; i <viewcount; i++)
{
CGFloat y = i * self.view.frame.size.height;
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, y,self.view.frame.size.width, self .view.frame.size.height)];
view.backgroundColor = [UIColor greenColor];
[scrollview addSubview:view];
[view release];
}
scrollview.contentSize = CGSizeMake(self.view.frame.size.width, self.view.frame.size.height *viewcount);
For more information Create UIScrollView programmatically
New 3/26/2013
I stumbled on an easier way to do this without code (contentSize)
https://stackoverflow.com/a/15649607/1705353