I am trying to create a black border between views when users scroll pages I am using UIPageControl and UIScrollView, something like this pictures :
does anybody know how to do this !?
Just set your scroll view's background to [UIColor black] and set image frames like this:
NSArray *images = ...//your array of UIImage
CGFloat blackSpaceWidth = 20;
for(int i=0; i<images.count; i++){
UIImageView *imageView = [[UIImageView alloc] initWithImage:images[i]];
imageView.frame = CGRectMake((self.view.frame.size.width + blackSpaceWidth) * i, 0, self.view.frame.size.width, self.view.frame.size.height);
scrollView.addSubview(imageView);
}
If you are using pagination in your scroll view increase its frame width by blackSpaceWidth.
you can use CollectionView
1- make cell width 320 + 20px (border width) and cell height equal to screen height
2- set cell background with black color
3- add imageView constraints in this cell if you are using auto layout
4- implement CollectionView datasource
I guess it is pretty simple.All you need to do is left spacing between views in scrollview. Suppose you have set frame of first view like this -
[[UIView alloc] initWithFrame:CGRectMake(0,0,320,self.view.frame.size.height)];
for next view declare your frame for view like this -
[[UIView alloc] initWithFrame:CGRectMake(0,320+spacing,320,self.view.frame.size.height)];
and obviously set scrollview background color to black.
Related
I am new in swift and I am not able to scroll tableview horizontally for that I used Scrollview but it still not scrolling
But It is only showing
Not scrolling horizontally can somebody please help me. My structure is like this
Did somebody know how to convert this code to swift
UITableView *tableView = [[UITableView alloc] initWithFrame:CGRectMake(x, x, x, x) style:...]
[scrollView addSubview:tableView];
// Set the size of your table to be the size of it's contents
// (since the outer scroll view will handle the scrolling).
CGRect tableFrame = tableView.frame;
tableFrame.size.height = tableView.contentSize.height;
tableFrame.size.width = tableView.contentSize.width; // if you would allow horiz scrolling
tableView.frame = tableFrame;
// Set the content size of your scroll view to be the content size of your
// table view + whatever else you have in the scroll view.
// For the purposes of this example, I'm assuming the table view is in there alone.
scrollView.contentSize = tableView.contentSize;
I have done the same as this.
Please find my screenshot
After 2 days behind the implementation of a UIScrollView, I give up to do it by myself, despite It should be simple but I am not able to make it.
I need a vertical scrollview with Autolayout (I have 2 backgrounds images that need to scale), I have Xcode 7.2, iOs deployment target 9.0 and I am using the storyboard
The scrollview is a "new account" form with a lot of content, So it can have a fixed height
I tried lots of options but no one of them work, at the momment I have a scrollview with a "content view" with all of the components.
Problems:
1.- How can I put more content in the scrollview? If I try to put more compoments(more than the height of ViewControler), it automatically moves my components to be inside the ViewController rectangle
2.- How I can make it scrollable? If I pin the content view to the top, bottom, left, right and make it with fixed height (like 1000) it doesn't scroll
Any help would be appreciated
Scrollview will scroll until the end of last UI object. But this is not the default behaviour of the scrollview. You should explicitly set the contentSize on your scrollview. Check below example.
-(void)addImage {
int count = 20;
UIScrollView * scView = [[UIScrollView alloc] init];
scView.frame = CGRectMake(30, 60, self.view.frame.size.width, 60);
UIButton * btn;
UIImageView * imgV;
float imgWidth = 44;
for(int i=0;i<count;i++) {
imgV = [[UIImageView alloc] init];
imgV.frame = CGRectMake(i*imgWidth, 0, imgWidth, 44);
imgV.image = [UIImage imageNamed:#"gitar"];
[scView addSubview:imgV];
}
[scView setContentSize:CGSizeMake(imgWidth*count, 50)];
[scView setBackgroundColor:[UIColor redColor]];
[self.view addSubview:scView];
}
What the above method does is, it will add 20 images in scrollview and at the end after adding all the images to scrollview in for loop I set contentSize to Scrollview. This step makes my scrollview to scroll until the content available. My example showing for Horizontal scroll, you have to change this behaviour to vertical scroll.
Consider a UIScrollView with a single subview. The subview is an UIImageView with the following size constraints:
Its height must be equal to the height of the UIScrollView.
Its width must be the width of the image scaled proportionally to the height of the UIImageView.
It is expected that the width of the UIImageView will be bigger than the width of the UIScrollView, hence the need for scrolling.
The image might be set during viewDidLoad (if cached) or asynchronously.
How do you implement the above using autolayout, making as much use as possible of Interface builder?
What I've done so far
Based on this answer I configured my nib like this:
The UIScrollView is pinned to the edges of its superview.
The UIImageView is pinned to the edges of the UIScrollView.
The UIImageView has a placeholder intrinsic size (to avoid the Scrollable Content Size Ambiguity error)
As expected, the result is that the UIImageView is sized to the size of the UIImage, and the UIScrollView scrolls horizontally and vertically (as the image is bigger than the UIScrollView).
Then I tried various things which didn't work:
After loading the image manually set the frame of UIImageView.
Add a constraint for the width of the UIImageView and modify its value after the image has been loaded. This makes the image even bigger (?!).
Set zoomScale after the image is loaded. Has no visible effect.
Without autolayout
The following code does exactly as I want, albeit without autolayout or interface builder.
- (void)viewDidLoad
{
{
UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
scrollView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
[self.view addSubview:scrollView];
self.scrollView = scrollView;
}
{
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, self.scrollView.frame.size.width, self.scrollView.frame.size.height)];
imageView.contentMode = UIViewContentModeScaleAspectFit;
imageView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
[self.scrollView addSubview:imageView];
self.scrollView.contentSize = imageView.frame.size;
self.imageView = imageView;
}
}
- (void)viewDidLayoutSubviews
{
[super viewDidLayoutSubviews];
[self layoutStripImageView];
}
- (void)layoutStripImageView
{ // Also called when the image finishes loading
UIImage *image = self.imageView.image;
if (! image) return;
const CGSize imageSize = image.size;
const CGFloat vh = self.scrollView.frame.size.height;
const CGFloat scale = vh / imageSize.height;
const CGFloat vw = imageSize.width * scale;
CGSize imageViewSize = CGSizeMake(vw, vh);
self.imageView.frame = CGRectMake(0, 0, imageViewSize.width, imageViewSize.height);
self.scrollView.contentSize = imageViewSize;
}
I'm trying really hard to move to autolayout but it's not being easy.
Under the autolayout regime, ideally the UIScrollView contentSize is solely determined by the constraints and not set explicitly in code.
So in your case:
Create constraints to pin the subview to the UIScrollView. The constraints have to ensure the margin between the subview and the scroll view are 0. I see that you have already tried this.
Create a height and a width constraint for your subview. Otherwise, the intrinsic size of the UIImageView determines its height and width. At design time, this size is only a placeholder to keep Interface Builder happy. At run time, it will be set to the actual image size, but this is not what you want.
During viewDidLayoutSubviews, update the constraints to be actual content size. You can either do this directly by changing the constant property of the height and width constraint, or calling setNeedsUpdateConstraints and overriding updateConstraints to do the same.
This ensures that the system can derive contentSize solely from constraints.
I've done the above and it works reliably on iOS 6 and 7 with a UIScrollView and a custom subview, so it should work for UIImageView too. In particular if you don't pin the subview to the scroll view, zooming will be jittery in iOS 6.
You may also try creating height and width constraints that directly reference a multiple of the height and width of the scroll view, but I haven't tried this other approach.
translatesAutoresizingMaskIntoConstraints is only required when you instantiate the view in the code. If you instantiate it in the IB it's disabled by default
In my opinion the UIImageView should fill the ScrollView. Later I'd try setting the zoom of the scrollview to the value that suits you well so the image can only be panned in one direction
In my case it was a full width UIImageView the had a defined height constraint that causing the problem.
I set another constraint on the UIImageView for the width that matched the width of the UIScrollView as it is in interface builder then added an outlet to the UIViewController:
#property (weak, nonatomic) IBOutlet NSLayoutConstraint *imageViewWidthConstraint;
then on viewDidLayoutSubviews I updated the constraint:
- (void) viewDidLayoutSubviews {
[super viewDidLayoutSubviews];
self.imageViewWidthConstraint.constant = CGRectGetWidth(self.scrollView.frame);
}
This seemed to do the trick.
I have a ViewController with a UIScrollView and 3 subviews.
I've declared the size of the UIScrollView to have the 3 views by horizontal scrolling.
I'm trying to draw a new image on top of each sub view and when the view will be scrolled I would like that the new image will be scrolled with the subview.
Right now, I managed to draw the new image, but it remains static even when I scroll the views.
x = [button frame].origin.x;
y = [button frame].origin.y;
check = [[UIImageView alloc] initWithFrame:CGRectMake(x+100,y+100, 20, 20)];
check.image = [UIImage imageNamed:#"check.png"];
[self.view addSubview:check];
Don't draw it in your scroll view. Draw it in your custom UIImageView subclass. Or add subviews to your image views.
I am working on a Universal Application. I have a View-based application which has one view controller. I am adding a UIImageView as a subview.
My problem is that if I put the ImageView in viewDidLoad, it is getting resized in iPad.
But if I add the ImageView to view controller dynamically on button tap event, the UIImageView is not getting resized as per iPad. Instead, it is showing ImageView with 320 x 480 dimensions.
Note: My View Controller has setAutoresizesSubviews to YES.
My code is as below:
-(void)buttonTap
{
UIImage *img = [[UIImage alloc]initWithContentsOfFile:[[NSBundle mainBundle]pathForResource:#"main-bg" ofType:#"png"]];
UIImageView *imgViewMainBG = [[UIImageView alloc]initWithImage:img];
imgViewMainBG.frame = CGRectMake(0,0,320,480);
imgViewMainBG.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
[self.view addSubview:imgViewMainBG];
[imgViewMainBG release];
[img release];
img=nil;
}
AutoresizingMask is for changing the size of all subviews according to the change in size of the superView whenever the superView's size is changed, it won't resize subviews at the time of adding a subView.
But you can find the bounds or frame of self.view and set the frame property of imageView according to that bounds like below
[imgViewMainBG setFrame:CGRectMake(0, 0, self.view.frame.size.width,
self.view.frame.size.height)];
so that imgViewMainBG is fully visible in ipad
Try changing image view's contentMode property to UIViewContentModeScaleToFill.