I am making an universal application for iPhone and iPad. I know there is a option to define that the text should scale downwards to a chosen point-size when it is to large however I need the text to scale upwards when the text is shown on the iPad. Is that possible? I have a label with a size of 18 points. This almost occupy the whole width on the iPhone with the length of the text in consideration. But on iPad this will not be the case because of the increased size of the screen...
Thank you for your time.
I had the same issue on a universal App.
I did set the autosizing parameters to scale all components directly in Interface Builder but it wasn't scaling the font size to take the newly given screen space.
I ended up updating the viewDidLoad of each view with the code below, basically iterating through the component of the view and doubling the pointSize for all labels (can do as well for buttons):
if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) {
for (UIView *component in self.view.subviews) {
if ([component isKindOfClass:[UILabel class]]) {
UILabel *labelToUpdate = (UILabel *) component;
[labeltoUpdate setFont:[labelToUpdate.font fontWithSize:labelToUpdate.font.pointSize*2]];
}
}
The app does scale up nicely from iPhone to iPad now.
You could loop on the method:
- (CGSize)sizeWithFont:(UIFont *)font constrainedToSize:(CGSize)size lineBreakMode:(UILineBreakMode)lineBreakMode
until you get a match that takes up two lines, then use the previous font-size. Seems quicker/easier to just use idioms to define a specific size for the iPad.
Related
I am following MessagesTableViewController and there is method of starching of UIImage for bubble view to strech as per text size. It is working fine with older ios version but in ios7, it is displaying light color borders as we set UIEdgeInsetsMake as below.
+ (UIImage *)bubbleDefaultIncoming
{
return [[UIImage imageNamed:#"bg-chat-white.png"] makeStretchableDefaultIncoming];
}
- (UIImage *)makeStretchableDefaultIncoming
{
return [self resizableImageWithCapInsets:UIEdgeInsetsMake(15.0f,20.0f, 15.0f, 20.0f)
resizingMode:UIImageResizingModeStretch];
}
Here i attached 2 snapshot for ios6 and ios7 which describe how bubble View is behaving strange with ios7 though code is same.
and
Someone has also same issue and reported in GITHUB HERE
I reviewed code so much and it seems that there is issue with resizableImageWithCapInsets in ios7. It generates borders as we set UIEdgeInsetsMakein the method.
Anyone has idea or solution to remove the borders from bubble view and make same as ios6 bubble view?
Any help would be appreciable. Thanks in advance.
Transparent lines are added in iOS 7 when the width or height is a number with floating point. As a workaround, you can round this numbers
You need to ensure that the CGRect you are drawing the image into is an even number and not a number with a floating point.
In addition to this if you have a UITableView with TabViewCells that have different heights you also need to need to ensure those cells all have heights that are an even number and not a number with a floating point.
i can confirm that both answers are right, but since you are using the same framework as me i going to give you a snippet to help.
just floor or ceil the size of the bubble and you are good to go.
- (CGRect)bubbleFrame
{
CGSize bubbleSize = [JSBubbleView bubbleSizeForText:self.text];
return CGRectMake((self.type == JSBubbleMessageTypeOutgoing ? floor(self.frame.size.width - bubbleSize.width) : 0),
kMarginTop,
floor(bubbleSize.width),
floor(bubbleSize.height));
}
edit: the position too need to be rounded up or down, since the kMarginTop already is you only need for it when it's a outgoing bubble. peace
I'm super confused about how the iPhone 4 and below apps are optimised for the iPhone 5. I'm a designer. How is optimisation done? Basically I have an app with loads of knobs and buttons and other interactive components. The way I see it, there are 3 options but what is the best way (or least, standard practice)?
1) Keep the layout the same for iPhone 5 but just add extra length on the background.
2) Scale the images/layout of components from iPhone 4 to iPhone 5 so everything is proportional.
3) Have completely separate images and different layouts for both. i.e for iPhone 5, I can move components to utilise the space more. The problem with this (and I'm not a developer) is that the interaction position of the components have moved so in effect, the iPhone 4 and 5 are separate apps?
To identify if it is a iphone 5 iphone, use this code in the file nameYourApp-prefix.pch:
//Macro iPhone5
#define IS_IPHONE_5 ( fabs( ( double )[ [ UIScreen mainScreen ] bounds ].size.height - ( double )568 ) < DBL_EPSILON )
find the nameYourApp-prefix.pch file in the supporting files, the code must be written between:
# ifdef __ OBJC__
//Code Macro iPhone5
# endif
and then just use the "if" to check that device, like this:
if (IS_IPHONE_5) {
//Code for 4 inch screen
}else{
//Code for 3.5 inch screen
}
putting the macro in the nameYourApp-prefix.pch, all classes see it.
With a UIKit application, none of your options are ideal. You simply use Springs and Struts or Auto Layout to have your user interface elements snap to where they should be.
The solution is the same when switching between portrait and landscape orientation. You define which user interface elements can grow and which ones can't, which edges to snap to, etc.
Run it on the simulator to test the layout if you don't have an iPhone 5 device.
For example, for a UITableViewController, the UITableView should grow vertically on an iPhone 5 so that you see more rows.
I almost always have at least one control that would be nice to grow given the room. If you don't, then you'll probably just have more empty space at the bottom of the view.
How iPhone 5 Optimization Works
When you tell iOS that your app is optimized for the iPhone 5 (through use of a cleverly named image file), iOS uses your existing Springs and Struts or Auto Layout (whatever you're using) to rearrange the interface.
The first choice is the easiest and works pretty well. You'd only need to worry about having specific assets for full screen images, and make sure that NavigationBar and TabBar (in case your app have one), remains on top and bottom respectively.
Scaling other images/components such as buttons, you'll change the general aspect ratio (which you probably wouldn't want), since iPhone 4&5 display sizes only differ in height.
For developing app option two is better. Although you dont have to change all the images for iPhone 5 some images will me same like TabBarItem. But you have to create background image different for iPhone4 and 5.
Read out this apple document to create user interface.
And you can differentiate iPhone 4 from iPhone 5 using this code
UIBtton * btn = [[UIButton alloc] init];
CGRect screenBounds = [[UIScreen mainScreen] bounds];
if (screenBounds.size.height == 568)
{
btn.frame = CGRectMake(60,60, 205, 175);
//this is for iPhone5
}
else
{
btn.frame = CGRectMake(60,50, 199, 170);
//this is for iPhone4
}
Here my button place and length are different for iPhone 5 and iPhone 4
And set your control's hight and width according to iPhone Screen Size.
If you didn't, adjust your view layouts with proper auto resizing masks or look into Auto Layout if you only want to support iOS 6 going forward. You have to check height of [[UIScreen mainScreen] bounds].
Example:
CGRect screenBounds = [[UIScreen mainScreen] bounds];
if (screenBounds.size.height == 568) {
// code for 4-inch screen (iPhone 5)
} else {
// code for 3.5-inch screen (< iPhone 5)
}
Note that [UIImage imageNamed:#"yourImage.png"] will only load either "background.png" or "yourImage#2x.png", it will not load "yourImage-568h#2x.png" if it exists.
Check Auto-Rotation API as Well.
I have been looking everywhere on here and Google, but I still have this weird issue that I can't figure. I have an app pictures below, with 4 UIButtons that have a background image applied:
When I resize/run on the iPhone 5, the top button resizes in a very strange way:
How do I get all the UIButtons to resize the same way with the iPhone 5? Is it possible? Do I need to use a different method?
I really hope this is not a duplicate, but I am completely stumped. If I change the UIButtons around in other positions along the UIView, a different one will resize, or strange gap spacing will show up.... I don't understand. Thanks for any help!
EDIT: I am using iOS 6 on Xcode 4.5. I am testing on an iPhone 4S and an iPhone 5. I have AutoLayout checked. If I use Pin (just found it) I can get the UIButton to keep its height.
To clarify my question. I want the UIButtons to resize so they occupy the same percentage of the screen.... I want the proportions to be the same, instead of simply adding a bunch of empty space. I hope that make it more clear
One of the features you can use is called AutoLayout. Its provided with Xcode to make it easier adjusting things for the 4 inch screen. You can find a good example here: http://www.raywenderlich.com/20881/beginning-auto-layout-part-1-of-2
But as far as I know AutoLayout works only with iOS 6 which makes it "not so useful yet". I have been using a class called UIDevice, source of which can be found here: https://github.com/erica/uidevice-extension and check if the platform type is iPhone 5. I have it set up in a method which setups GUI when the view loads. Example of my implementation:
UIImage *backgroundImage;
if ([[UIDevice currentDevice] platformType] == UIDevice5iPhone)
{
//I have a 4 inch screen present
myButton.frame = CGRectMake(x, y, w, h); //Set the frame as you would like it to look on the iPhone 5
backgroundImage = [[UIImage alloc] initWithCGImage:[UIImage imageNamed:#"main_background-568h#2x"].CGImage scale:2.0 orientation:UIImageOrientationUp];
}
else
{
//I have a 3.5 inch screen present
myButton.frame = CGRectMake(x, y, w, h); //Set the frame as you would like it to look on the iPhone 3, 3gs, 4, 4s...
backgroundImage = [[UIImage imageNamed:#"main_background"] retain];
}
self.view.backgroundColor = [UIColor colorWithPatternImage:backgroundImage];
[backgroundImage release];
Hope it clears a bit.
you should firstly disable the use AutoLayout this option is under the "Show the file inspector"
I am asking a very basic question in which I am getting some problem.
I know the difference between the iPhone and iPad ...that iPad supports SplitView, popup over but while designing I am getting error.
I have designd a UITextView
UITextView *textview = [[UITextView alloc] initWithFrame:CGRectMake(42, 150, 440, 60)];
this is basic code to design a textview but when I run this code on iPad simulator it seems fine to me. but When I run it on iPhone ,It does not goes well ..because size for that iPhone is different .In that case what should I do to run it well on both iPhone and iPad.
I am assuming that you are opting for a universal executable, so conditional compilation is not an option for you.
When you make a universal executable, you should check the features that you are relying upon before making calls dependent on the device type. In this particular case you are relying upon the screen having a particular size. Instead of hard-coding the "magic numbers" (42, 15, 440, and 60) you should calculate them from the current size of the available screen:
CGFloat w = [UIScreen mainScreen].bounds.size.width;
CGFloat h = [UIScreen mainScreen].bounds.size.height;
// Do something like this if you can
UITextView *textview = [[UITextView alloc]
initWithFrame:CGRectMake(w*0.025, h*0.25, w*0.5, h*0.125)
];
There is a chance that calculating actual sizes from the screen size is not possible, because you do not want your view to scale proportionally to the screen. In cases like that you can check the values of h and w, detect the device size, and use the corresponding set of pre-defined sizes to init your view.
does anyone know of a way I can change the text label for on and off to yes and no.
I did it with
((UILabel *)[[[[[[switchControl subviews] lastObject] subviews] objectAtIndex:2] subviews] objectAtIndex:0]).text = #"Yes";
((UILabel *)[[[[[[switchControl subviews] lastObject] subviews] objectAtIndex:2] subviews] objectAtIndex:1]).text = #"No";
However, with the release of iOS 4.2, this is no longer supported (this probably wasn't recommended by Apple anyway)
My client is insisting on yes/no switches. I'd appreciate any advice!
many thanks
Hurrah! From iOS 6, it's possible to specify an image to be used for the on / off states, respectively. So, this can be used to display a YES / NO image (or whatever image representing the text you would prefer to use instead of the previously limited ON / OFF).
if (SYSTEM_VERSION_GREATER_THAN_OR_EQUAL_TO(#"6.0"))
{
[mySwitch setOnImage: [UIImage imageNamed:#"UISwitch-Yes"]];
[mySwitch setOffImage:[UIImage imageNamed:#"UISwitch-No"]];
}
The images should be 77 px wide, 27 px high, and the text (one image for each state) should be horizontally centred within that 77 px width. I use transparent backgrounds for the text, so I can still make use of the tint for the background, which still works with this.
Of course, it would seem easier to just supply text, rather than having to use an image of text, but I'm certainly grateful for this new option, at least.
You need to implement your custom UISwitch for that. Or use one of already implemented :) (check this SO question and this post)
Vladimir answer is great, but in my humble opinion there is an even better implementation here: https://github.com/domesticcatsoftware/DCRoundSwitch.
Besides setting a custom text, it is easier to change the size and color of the UISwitch and you get a sharper result.
It is released under an MIT license. Have a look!
It turns out that you can create a custom UISwitch with the following items:
A UIScrollView
A UIButton
Two UILabels
A background image
A Boolean value
First you will need to add QuartzCore.framework to your project and #import <QuartzCore/QuartzCore.h> to your view controller.
Next add the UIScrollView to your view using Interface Builder. The ScrollView will be your custom UISwitch.
Next add the button and the two labels to your ScrollView. One label will be for "yes" the other for "no".
Add the image to the button and set its type to custom. This is the image I use:
Position the labels over the blue and white area of the image. Adjust the ScrollView so it is just big enough to show the blue part of the image and the thumb nob.
Add the following line to viewDidLoad:
self.mySwitch.layer.cornerRadius = 13.5;
mySwitch is the name of the ScrollView and 13.5 is half the height of the ScrollView. The above statement changes the ScrollView to have rounded ends like the UISwitch.
To make the custom switch active you will need to tie the buttons "Touch Up Inside" event to an IBAction. Here is the code I use in the event handler:
-(IBAction)mySwitchButton:(id)sender {
self.myValue = !self.myValue;
CGPoint scrollPoint = CGPointMake((self.myValue)? 43.0: 0, 0.0);
[mySwitch setContentOffset:scrollPoint animated:YES];
}
Where myValue is the boolean variable that contains the state of your switch and 43.0 is the number of points you will have to move the image over to put the switch in the off position.
That is all there is to it!
From iOS 6, it's possible to specify an image to be used for the UISwitch on / off states, but NOT the text.
This will lead trouble when internationalization is required because translators
have to provide an image text for each language, not text only.
Moreover, the size of the UISwitch image is fixed, limiting the text length.
Because of the above reasons, I like the JSWilson's answer: simple and flexible.
To relieve developers of the need to manually add the required controls, I coded a custom CRDScrollSwitch class that you can find at my GitHub repository:
https://github.com/corerd/CRDScrollSwitch