DetailsHorizontal and vertical screen switching for iPadThe solution is the content to be introduced in this article. Let's look at the content first. BecauseIpadOfPortrait ScreenDifferent, so good applications,Portrait ScreenThe page layout is also different. Then you needPortrait Screen. First read onePortrait ScreenDifferent la S.
The above two screenshots are screenshots from the same interface. As you can see,Horizontal and vertical layoutThe displayed content is the same, but the interface layout is different. To achieve the above layout, we mainly use the layoutSubviews method in UIView. When UIView is set to automatically adapt to the screen, when the user rotates the device, the layoutSubviews method is called. We only need to rewrite this method and then determine the direction of the user's screen. You can adjust the location of each space.
The following is the simplest prototype for implementing the above interface:
First, the analysis shows that the left side is an image and the right side is an image and Text View. The following is an example of adding a word to the right of the Left view.
The example is as follows:
The text and green on the right are encapsulated in a subview.
The entire layout is that I added a ContentView to the main view and added an ArticleView TO THE ContentView view.
The xib files of ArticleView and ContentView are opened.
In ContentView, override the layoutSubviews method, and then judge the landscape of the current view based on the direction of the stausbar. Code:
- -(Void) layoutSubviews {
- [Super layoutSubviews];
- UIDeviceOrientation interfaceOrientation = [[UIApplication sharedApplication] statusBarOrientation];
- If (interfaceOrientation = UIDeviceOrientationPortrait | interfaceOrientation = UIDeviceOrientationPortraitUpsideDown ){
- // When the screen is flipped to the portrait
- [Self setVerticalFrame];
- } Else if (interfaceOrientation = UIDeviceOrientationLandscapeLeft | interfaceOrientation = UIDeviceOrientationLandscapeRight ){
- // When the screen is flipped to a landscape
- [Self setHorizontalFrame];
- }
- }
-
- -(Void) setVerticalFrame
- {
- NSLog (@ "portrait screen ");
- [TitleLable setFrame: CGRectMake (283, 0,239, 83)];
- [LeftView setFrame: CGRectMake (38,102,384,272)];
- [RightView setFrame: CGRectMake (450,102,282,198)];
- }
-
- -(Void) setHorizontalFrame
- {
- NSLog (@ "Landscape ");
- [TitleLable setFrame: CGRectMake (183, 0,239, 83)];
- [LeftView setFrame: CGRectMake (168,122,384,272)];
- [RightView setFrame: CGRectMake (650,122,282,198)];
- }
In the specific horizontal and vertical screen method, set the coordinates of each component.
Next, add the ArticleView to ContentView.
- -(id)initWithCoder:(NSCoder *)aDecoder
- {
- if ((self = [super initWithCoder:aDecoder])) {
-
- NSArray *arrayContentView =[[NSBundle mainBundle] loadNibNamed:@"ArticleView" owner:self options:nil];
- rightView=[arrayContentView objectAtIndex:0];
- [self addSubview:rightView];
- }
- return self;
- }
Because I use xib, the initialization method is initWithCoder. Add a new view here.
You can also set the coordinates of the corresponding space on the horizontal and vertical screens in the ArticleView.
- -(Void) layoutSubviews {
- [Super layoutSubviews];
- UIDeviceOrientation interfaceOrientation = [[UIApplication sharedApplication] statusBarOrientation];
- CGRect rect = self. frame;
- Rect. size. size = 282;
- Rect. size. height = 198;
- [Self setFrame: rect];
- If (interfaceOrientation = UIDeviceOrientationPortrait | interfaceOrientation = UIDeviceOrientationPortraitUpsideDown ){
- // When the screen is flipped to the portrait
- [Self setVerticalFrame];
- } Else if (interfaceOrientation = UIDeviceOrientationLandscapeLeft | interfaceOrientation = UIDeviceOrientationLandscapeRight ){
- // When the screen is flipped to a landscape
- [Self setHorizontalFrame];
- }
- }
-
- -(Void) setVerticalFrame
- {
- NSLog (@ "portrait screen ");
- [ContentView setFrame: CGRectMake (12, 6,250,125)];
- [TextLable setFrame: CGRectMake (50,139,182, 39)];
- }
-
- -(Void) setHorizontalFrame
- {
- NSLog (@ "Landscape ");
- [ContentView setFrame: CGRectMake (12, 6,106,158)];
- [TextLable setFrame: CGRectMake (135, 11,147, 39)];
- }
Source code: http://easymorse-iphone.googlecode.com/svn/trunk/IpadLayOut/
Summary: DetailsHorizontal and vertical screen switching for iPadAfter the solution is introducedIpadScreenSwitchIs it clear? Finally, I hope this article will help you.