UI adaptation for iOS development ~iphone6 and iphone6p

Summary

So far, the iphone screen size has been four kinds:

3.5 (Inch): 1/3g/3gs/4/4s

4.0 (inch): 5/5s/5c

4.7 (Inch): 6

5.5 (Inch): 6Plus

Take a look at the iphone4~6 (+) screen aspect ratio:

IPhone4 (s): Resolution 960*640, Aspect ratio 1.5
IPhone5 (s): Resolution 1136*640, Aspect ratio 1.775
IPhone6: Resolution 1334*750, Aspect ratio 1.779
iphone6+: Resolution 1920*1080, Aspect ratio 1.778

It can be roughly assumed that the IPhone5 (s), 6 (+) aspect ratio is consistent (16:9), that is, proportional scaling. So you can fit by width:
Fitscreenwidth= width* (screen_width/320)
In this way, a total of IPHONE3/4/5, 6, 6+ three sets of width, in the IPhone6, 6+ under the proportional horizontal amplification, that is, we want to fit the width, height, size (if the Android screen fit is a hell, so now look at the iphone screen adaptation is still very good)

Fit Thinking

Now the product design is based on IPhone5, there are iPhone6 as the benchmark, in fact, not much impact, because the IPhone5, 6, 6P screen size is almost the same, so the iPhone5 for the reference size, the appropriate method is as follows:

#define Kscreenwidthratio  (kscreenwidth/320.0)
#define Kscreenheightratio (kscreenheight/568.0)
# Define Adaptedwidthvalue (x)  (Ceilf ((x) * kscreenwidthratio))
#define ADAPTEDHEIGHTVALUE (x) (Ceilf ((x) * Kscreenheightratio))

In fact, the calculation of a proportion, and then iPhone6, 6P magnification, so as to maintain the iPhone5, 6, 6P screen visual effect on the same.

The size of the control is done, but only proportional stretching of the control, the contents of which also need to adapt, such as Uilabel font size adaptation, in fact, is also very simple:

#define KUHSYSTEMFONTWITHSIZE (R)     [Uifont fontwithname:kulsystemfont Size: (Adaptedwidthvalue (R))]

Practice
After having a thought, practice to see the effect, first look at the final goal effect chart:

Demo Introduction:

1, the use of TableView display data, where the TableView Headerview is scrolling advertising, the overall UI layout using relative layout (AutoLayout);

2, AutoLayout use is the code realization Way, with the help of the third party library masonry;

3, Headerview of the rolling advertising implementation is the help of the Third-party library Sdcyclescrollview;

4, Picture download with the help of the third party library Sdwebimage;

5, UITableViewCell Adaptive height with the help of the third party library Uitableview+fdtemplatelayoutcell implementation.

New Project

After you use Xcode to create a new project, you use Cocopods to modify podfile because you use many third parties:

Platform:ios, ' 7.0 ' pod '
masonry ' pod '
sdcyclescrollview '
pod ' Uitableview+fdtemplatelayoutcell
' Pod ' Sdwebimage '

Implement TableView

1, create TableView, named Newslistview:

@property (nonatomic, strong) UITableView *newslistview;

Concrete implementation does not say, introduce the layout of TableView, here TableView stained with Viewcontroller view:

[Self.newslistview mas_makeconstraints:^ (Masconstraintmaker *make) {
        make.edges.equalTo (self.view);
    }];

2. Realize Tableviewheader

-(void) Loadtableviewheaderview {
    Sdcyclescrollview * cyclescrollview =  [Sdcyclescrollview Cyclescrollviewwithframe:cgrectmake (0, 0, Kscreenwidth, Adaptedheightvalue (sdcyclescrollviewheight)) Imageurlstringsgroup:nil]; Simulated network delay scenario
    cyclescrollview.pagecontrolaliment = sdcyclescrollviewpagecontolalimentright;
    Cyclescrollview.delegate = self;
    Cyclescrollview.showpagecontrol = YES;
    Cyclescrollview.pagecontrolstyle = sdcyclescrollviewpagecontolstyleanimated;
    Cyclescrollview.pagecontrolaliment = Sdcyclescrollviewpagecontolalimentcenter;
    Cyclescrollview.dotcolor = [Uicolor Whitecolor]; Custom paging control small round color
    cyclescrollview.placeholderimage = [uiimage imagenamed:@ "Detail_top"];
    [Self.view Addsubview:cyclescrollview];
    
    Cyclescrollview.imageurlstringsgroup = [self.datadictionary valueforkey:@ "advertisement"];
    
    Self.newslistView.tableHeaderView = Cyclescrollview;
}

Here the Adaptedheightvalue (sdcyclescrollviewheight) is used to fit the screen size, the tableviewheader height of 4/4s equipment is smaller, 6 and 6P tableviewheader height is a bit larger, because we are 5 generations of equipment for reference implementation of the product design draft.

3. Realize Tableviewcell

#define UI_DEBUG 0 #define ULAPPEARANCEFONTSIZEMIDDLE #define Ulappearancefontsizesmall nsstring *const newslist

Cellidentifier = @ "Newslistcellidentifier";
static const CGFloat Ulnewslistcellnewsimageviewmarginleft = 10.0;
static const CGFloat ulnewslistcellnewsimageviewwidth = 100.0;

static const CGFloat ulnewslistcellnewsimageviewheight = 80.0;
static const CGFloat ulnewslistcelltitlelabelmargintop = 10.0;
static const CGFloat Ulnewslistcelltitlelabelmarginleft = 10.0;
static const CGFloat ulnewslistcelltitlelabelmarginright = 10.0;

static const CGFloat ulnewslistcelltitlelabelheight = 20.0;
static const CGFloat ulnewslistcellcontentlabelmargintop = 10.0;

static const CGFloat Ulnewslistcellcontentlabelmarginbottom = 10.0;
static const CGFloat Ulnewslistcelllineviewmarginleft = 10.0;
static const CGFloat ulnewslistcelllineviewmarginright = 10.0;

static const CGFloat Ulnewslistcelllineviewheight = 0.5; @interface Newslistcell () @property (nonatomic, Strong) Uiimageview *newsimageview;
@property (nonatomic, strong) Uilabel *titlelabel;
@property (nonatomic, strong) Uilabel *contentlabel;

@property (nonatomic, strong) UIView *lineview; @end @implementation Newslistcell-(Instancetype) Initwithstyle: (Uitableviewcellstyle) style Reuseidentifier: (
        NSString *) Reuseidentifier {if (self = [super Initwithstyle:style Reuseidentifier:reuseidentifier]) {#if ui_debug
Self.contentView.backgroundColor = [Uicolor Redcolor];
        #endif [Self.contentview AddSubview:self.newsImageView];
        [Self.contentview AddSubview:self.titleLabel];
        [Self.contentview AddSubview:self.contentLabel];
        
        [Self.contentview AddSubview:self.lineView];
    [Self makeconstraintsubviews];
return self; }-(void) makeconstraintsubviews {[Self.newsimageview mas_makeconstraints:^ (Masconstraintmaker *make) {Mak
     E.left.equalto (self.contentView.mas_left). Offset (Adaptedwidthvalue (ulnewslistcellnewsimageviewmarginleft));   Make.size.mas_equalTo (Cgsizemake adaptedwidthvalue (ulnewslistcellnewsimageviewwidth), Adaptedheightvalue (
        ulnewslistcellnewsimageviewheight)));
    Make.centerY.equalTo (Self.contentView.mas_centerY);
    
    }]; [Self.titlelabel mas_makeconstraints:^ (Masconstraintmaker *make)
        {Make.top.equalTo (self.contentView.mas_top). Offset (Adaptedheightvalue (ulnewslistcelltitlelabelmargintop));
        Make.left.equalTo (self.newsImageView.mas_right). Offset (Adaptedwidthvalue (ulnewslistcelltitlelabelmarginleft)); Make.right.equalTo (self.contentView.mas_right). Offset (-adaptedwidthvalue (ulnewslistcelltitlelabelmarginright))
        ;
Make.height.mas_equalTo (Adaptedheightvalue (ulnewslistcelltitlelabelheight)); Make.bottom.equalTo (self.contentLabel.mas_top). Offset (-adaptedheightvalue (
    Ulnewslistcellcontentlabelmargintop));
    
    }]; [Self.contentlabel mas_makeconstraints:^ (Masconstraintmaker *make)
        {Make.left.right.equalTo (Self.titlelabel); Make.Top.equalto (Self.titleLabel.mas_bottom). Offset (Adaptedheightvalue (ulnewslistcellcontentlabelmargintop)); Make.bottom.equalTo (Self.lineView.mas_bottom). Offset (-adaptedheightvalue (
    Ulnewslistcellcontentlabelmarginbottom));
    
    }]; [Self.lineview mas_makeconstraints:^ (Masconstraintmaker *make)
        {Make.bottom.equalTo (Self.contentView.mas_bottom). Offset (-ulnewslistcelllineviewheight);
        Make.left.equalTo (self.contentView.mas_left). Offset (Adaptedwidthvalue (ulnewslistcelllineviewmarginleft));
        Make.right.equalTo (self.contentView.mas_right). Offset (-adaptedwidthvalue (ulnewslistcelllineviewmarginright))
    Make.height.mas_equalTo (Ulnewslistcelllineviewheight);
}]; }-(void) Configurewithdata: (news *) News {[Self.newsimageview sd_setimagewithurl:[nsurl URLWITHSTRING:NEWS.IMAGEURL
    ]];
    Self.titleLabel.text = News.title;
Self.contentLabel.text = news.content; } #pragma mark-getters-(Uiimageview *) Newsimageview {if (!_newsimageviEW) {_newsimageview = [[Uiimageview alloc] init]; #if ui_debug _newsimageview.backgroundcolor = [Uicolor
Greencolor];
#endif} return _newsimageview;
        }-(Uilabel *) Titlelabel {if (!_titlelabel) {_titlelabel = [[Uilabel alloc] init];
        _titlelabel.font = Kuhsystemfontwithsize (Ulappearancefontsizemiddle);
        
_titlelabel.textcolor = [Uicolor blackcolor];
#if ui_debug _titlelabel.backgroundcolor = [Uicolor Lightgraycolor];
#endif} return _titlelabel;
        }-(Uilabel *) Contentlabel {if (!_contentlabel) {_contentlabel = [[Uilabel alloc] init];
        _contentlabel.font = Kuhsystemfontwithsize (Ulappearancefontsizesmall);
        _contentlabel.textcolor = [Uicolor Graycolor];
        _contentlabel.numberoflines = 0;
        _contentlabel.linebreakmode = nslinebreakbywordwrapping;
        
_contentlabel.textalignment = Nstextalignmentleft; #if ui_debug _contentlabel.backgroundcolor = [UIColor Browncolor];
#endif} return _contentlabel;
        }-(UIView *) Lineview {if (!_lineview) {_lineview = [[UIView alloc] init];
    _lineview.backgroundcolor = [Uicolor Lightgraycolor];
return _lineview; } @end

This makes it easy to fit the iphone's equipment by stretching it in size and with AutoLayout. The cell height of the automatic adaptation please refer to the Uitableview+fdtemplatelayoutcell Third-party Library use method.

If you do not use AutoLayout, and the use of frame method, here is not introduced, or as soon as possible to turn to AutoLayout bar, there are some relevant content is also very good, want to know can refer to:

http://blog.csdn.net/phunxm/article/details/42174937

Http://www.cocoachina.com/ios/20141230/10800.html

Welcome to discuss together

Demo download