How to make sharp look of views in Scroll view on zooming - ios

I am working on application where I have a bunch of views (UILabel, UITextField, UIButton and etc). I enabled zooming and every thing working fine, but only one thing which is not good when user zoom in and want to look any view its gets pixelated and looking quite blurry. One thing which may be the reason I am using quite low font size as you may in below code, and I am not able to use high font because I am bound to use many views because to add many view in iphone litter size.
UITextField *textField = [[UITextField alloc]init];
rect.origin.x = rect.origin.x + 3;
textField.frame = rect;
textField.backgroundColor = [UIColor whiteColor];
[textField setFont:[UIFont systemFontOfSize:5.0]];
textField.tag = fieldsYValue;
textField.adjustsFontSizeToFitWidth = NO; // this is default value
[scrollView addSubview:textField];
Looking for any help who worked on this kind of projects.

Maybe this could help.
This lets the user zoom in by a factor of 3 -- but when they do so, they're really just zooming up to full resolution, at which 1 pixel in the UIScrollView's content buffer is 1 pixel on screen. (And of course, within our content view, we draw everything three times bigger to compensate.) No need to implement any of the delegate methods except the standard viewForZoomingInScrollView; no redrawing at different scales depending on the zoom.
scrollView.contentSize = myContentView.bounds.size;
scrollView.maximumZoomScale = 1.0;
scrollView.minimumZoomScale = 0.33;
scrollView.zoomScale = 0.33;

Related

Layout in UIScrollView

I am new to UIScrollView, and they are driving me crazy.
I am trying to create a screen that has a title and some descriptive text at the top, and then a scroll view (with paging enabled) in the bottom two thirds of the screen. This scroll view will contain 1-3 images. Ideally, I'd like the first image to appear centered in the initial scroll view window, and then enable the user to view the other images by scrolling/paging horizontally, again ideally with each image centered in its 'page'.
The code below loads the images for 'item' from the Internet, creates a UIImageView for each, and inserts them into the scroll view. According to the frame calculations, I would expect the first image to be up against the left side of the scrollview, and then the other images to the right, with no space between them. But instead, the first image is shifted to the right, about half-way across the screen, and there are equally large spaces between each image.
I have turned off paging to simplify matters, and I have tried experimenting with tweaking the image frame values, trying to understand what's happening, but nothing works as I expect it to.
I am guessing that autolayout is messing with me. Can someone confirm that, and maybe give me some hints on how to get this scrollview under control?
Thanks in advance.
self.imageScrollView.contentSize = CGSizeMake(self.imageScrollView.frame.size.width * (imageFieldNames.count),
self.imageScrollView.frame.size.height);
self.imageScrollView.pagingEnabled = NO;
CGFloat xPos = 0.0;
for (NSString *field in imageFieldNames) {
NSString *name = [self.item valueForKey:field];
if (name.length > 0) {
UIImageView *iv = [[UIImageView alloc] init];
iv.contentMode = UIViewContentModeScaleAspectFit;
[self loadImage:iv withFile:name];
iv.frame = CGRectMake(xPos, 0.0,
self.imageScrollView.frame.size.width,
self.imageScrollView.frame.size.height);
[self.imageScrollView addSubview:iv];
xPos += self.imageScrollView.frame.size.width;
}
}

iOs 8 seems to be ignoring my UILabel's X and Y coordinates

I have a somewhat old Objective C function that adds a UILabel to my UIView. It keeps track of the last label's Y in the variable _nextFieldY so it can put the next label below it. When I'm adding the label, I init it with its Width, Height, X and Y, and add it to my view. In iOs 7, this works, and correctly puts everything in its place. However, with any devices running the same app in iOs 8+, it appears the labels are all put at (0,0); the labels are all on top of each other in the top left corner. Was there a change between these versions that would cause this? I usually avoid programmatically adding things to my XIBs, so I don't know if there's certain work I have to do to get them to behave.
CGFloat labelWidth = 100;
CGFloat labelHeight = 40;
CGFloat labelY = _nextFieldY-REG_FORM_PADDING_Y;
UIFont *labelFont = [UIFont boldSystemFontOfSize:12.0f];
UILabel *currLabel = [[UILabel alloc] initWithFrame:CGRectMake(REG_FORM_OFFSET_X, labelY, labelWidth, labelHeight)];
currLabel.text = label;
[currLabel setTranslatesAutoresizingMaskIntoConstraints:NO];
[currLabel setFont:labelFont];
[currLabel setTextAlignment:NSTextAlignmentLeft];
[_formView addSubview:currLabel];
_nextFieldY += currLabel.frame.size.height + REG_FORM_PADDING_Y;
Since you're setting the frame directly to position your view, you should be leaving translatesAutoresizingMaskIntoConstraints set to YES. Setting it to NO tells the system that it can ignore the frame you set.

Two Views, one appears sometimes and when so, the other one takes it space

I have an image and a label who are are next to each other inside a TableCell (among other elements). Sometimes the image has to be shown, and sometimes not.
What I want is that the label takes all space when the image has to be hidden, and respects its space (so it does not appear over the image) when it has to be shown.
In Android I would not have a problem doing it; I would put those two elements in a LinearLayout and I would mark the imageĀ“s visibility as GONE when I have to hide it, and then the text would start naturally where the image should be. But with the storyboard I am a bit lost and I do not know how to control this wanted behaviour. Is there a similar technique as the one that I mentioned for Android? I have to achieve it without AutoLayout.
I tried to change the origin of the frame of the label when the image is there, but it got all weird when the table downloads new elements:
- (void)displayImage
{
self.image.hidden = !_question.showImage;
// Make a bit extra space for the image
if(_question.showImage){
CGRect labelFrame = [self.unreadLabel frame];
labelFrame.origin.x = labelFrame.origin.x +20;
[self.unreadLabel setFrame:labelFrame];
}
}
Ok, I was not taking into account that the cells are recycled and that I had to set them up also when the text has to take all space.
The resulting method would look like this:
- (void)displayImage
{
self.image.hidden = !_question.image;
// Make a bit extra space for the image
CGRect labelFrame = [self.unreadLabel frame];
CGRect imageFrame = [self.image frame];
if(_question.showimage){
labelFrame.origin.x = imageFrame.origin.x + imageFrame.size.width + 3;
[self.unreadLabel setFrame:labelFrame];
} else{
labelFrame.origin.x = imageFrame.origin.x ;
[self.unreadLabel setFrame:labelFrame];
}
}

Improper display of splitter screens in iPad

I have a requirement where the screen orientation is always landscape and we need to have two splitter screens in a view.
I have used following code to render two splitter screens. The layout is such that splitViewController1 takes 60% of view and splitViewController2 takes 40% of view.
- (void)viewDidLoad
{
self.view.backgroundColor = [[UIColor alloc] initWithPatternImage:[UIImage imageNamed:background]];
[splitViewController1.view setFrame:CGRectMake(0,150, 0.6 * width, height)];
splitViewController1.view.backgroundColor = [UIColor clearColor];
[splitViewController1 setValue:[NSNumber numberWithFloat:150.0] forKey:#"_masterColumnWidth"];
[self.view addSubview:splitViewController1.view];
[splitViewController2.view setFrame:CGRectMake(0.6 * width,150, 0.4 * width, height)];
splitViewController2.view.backgroundColor = [UIColor clearColor];
[splitViewController2 setValue:[NSNumber numberWithFloat:150.0] forKey:#"_masterColumnWidth"];
[self.view addSubview:splitViewController2.view];
}
Now the issue which am facing is that in the main view, the detailed view of splitter screen is not scaled to the frame width, but its overlapping the other splitter view.
To provide more insight I would like to mention that detailed view of each splitter control doesn't respect the frame boundaries which am specifying.
All views in my project are set to landscape oriented.
Any suggestions for the above situation ?
Also I would like to know if there is any other method to decrease the rootview controller's width of splitter screen.
After going through your question, i am not sure what actually is causing the problem , but i can suggest you to have a look at MGSplitViewController as i myself have used it before and it is really helpful.

Applying transform to UITextView - prevent content resizing

When I apply a rotation transform to a UITextView and then click inside to begin editing, it appears that the content size is automatically being made wider. The new width of the content view is the width of the rotated view's bounding box. For example, given a text box of width 500 and height 400, and rotated by 30 degrees, the new content width would be:
(500 * cos(30)) + (400 * sin(30)) = 633
Or graphically:
Interestingly, if you are already editing the text view and THEN apply the transform, then it appears that no modification is made to the content size. So it appears that sometime around the start of text editing, the text view looks at its frame property and adjusts the content size based on the frame width. I imagine the solution to this is to tell it to use the bounds property instead, however I don't know where to do this, as I'm not sure exactly where the text view is deciding to modify the content size.
I have googled but can't seem to find any references to using transformed UITextViews. Does anybody have any ideas about this?
EDIT (button action from test project):
- (IBAction)rotateButtonTapped:(id)sender {
if (CGAffineTransformIsIdentity(self.textView.transform)) {
self.textView.transform = CGAffineTransformMakeRotation(30.0 * M_PI / 180.0);
}
else {
self.textView.transform = CGAffineTransformIdentity;
}
NSLog(#"contentsize: %.0f, %.0f", textView.contentSize.width, textView.contentSize.height);
}
I was also stuck with this problem.
The only solution which I found was to create an instance of UIView and add the UITextView as a subview. Then you can rotate the instance of UIView and UITextView will work just fine.
UITextView *myTextView = [[UITextView alloc] init];
[myTextView setFrame:CGRectMake(0, 0, 100, 100)];
UIView *myRotateView = [[UIView alloc] init];
[myRotateView setFrame:CGRectMake(20, 20, 100, 100)];
[myRotateView setBackgroundColor:[UIColor clearColor]];
[myRotateView addSubview:myTextView];
myRotateView.transform = CGAffineTransformMakeRotation(0.8);
[[self view] addSubview:myRotateView];
Have you tried applying the rotation by doing a layer transform rather than a transform on the view?
#import <QuartzCore/QuartzCore.h>
mytextField.layer.transform = CATransform3DMakeRotation (angle, 0, 0, 1);
This might be enough to trick whatever broken logic exists inside the core text field code.

Resources