iOS设计中不同屏幕适配的方法-登陆界面

Posted 2020-07-06 驭狼共舞

在ios的手机界面设计中，由于不同手机类型的手机的尺寸不同，那么在设计手机界面时就得对屏幕进行适配，这里就以登陆界面的设计为例简单说明下 实现屏幕适配的方法：（屏幕自动适配缩放）

效果：

 

 

下面就看下代码实现的过程：

1、在代理中实现的代码：

AppDelegate.h
//  登陆界面设计

#import <UIKit/UIKit.h>

#define  ScreenHeight [[UIScreen mainScreen]bounds].size.height//屏幕高度
#define  ScreenWidth  [[UIScreen mainScreen]bounds].size.width//屏幕宽度
@interface AppDelegate : UIResponder <UIApplicationDelegate>

@property (strong, nonatomic) UIWindow *window;
@property(assign,nonatomic)float autoSizeScaleX;//缩放X
@property(assign,nonatomic)float autoSizeScaleY;//缩放Y

@end

AppDelegate.m
//  登陆界面设计

#import "AppDelegate.h"

@interface AppDelegate ()

@end

@implementation AppDelegate


- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
   
   
    AppDelegate *myDelegate=[[UIApplication sharedApplication]delegate];
    if (ScreenHeight>480) {//屏幕高度大于4S的高度时 等比缩放操作
        myDelegate.autoSizeScaleX=ScreenWidth/320;//屏幕宽度缩放比率
        myDelegate.autoSizeScaleY=ScreenHeight/480;//屏幕高度缩放比率
    } else {
        myDelegate.autoSizeScaleX=1.0;
        myDelegate.autoSizeScaleY=1.0;
    }
    

    return YES;
}

2、在ViewController中实现的过程

ViewController.h
//  登陆界面设计
#import <UIKit/UIKit.h>
#import "AppDelegate.h"
@interface ViewController : UIViewController<UITextFieldDelegate>
@property(strong,nonatomic)UITextField *textNmae;//编辑文本框
@property(strong,nonatomic)UIView *myView;//编辑下划线
@property(strong,nonatomic)UIImageView *imageView;//图标
@property(strong,nonatomic)UIButton *myButton;//控制按钮


@end

ViewController.m
//  登陆界面设计

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    //背景图
    self.imageView =[[UIImageView alloc]initWithImage:[UIImage imageNamed:@"beijing.png"]];
    //图标1
    [self.view addSubview:self.imageView];
    self.imageView=[[UIImageView alloc]initWithFrame:CGRectMake1(50,20, 200, 30)];
    self.imageView.image=[UIImage imageNamed:@"[email protected]"];
    [self.view addSubview:self.imageView];
    
    //图标2
    [self.view addSubview:self.imageView];
    self.imageView=[[UIImageView alloc]initWithFrame:CGRectMake1(30,60, 20, 20)];
    self.imageView.image=[UIImage imageNamed:@"[email protected]"];
    [self.view addSubview:self.imageView];

    //图标3
    [self.view addSubview:self.imageView];
    self.imageView=[[UIImageView alloc]initWithFrame:CGRectMake1(30,100,20, 20)];
    self.imageView.image=[UIImage imageNamed:@"[email protected]"];
    [self.view addSubview:self.imageView];
    //图标4
    [self.view addSubview:self.imageView];
    self.imageView=[[UIImageView alloc]initWithFrame:CGRectMake1(100,400,100, 30)];
    self.imageView.image=[UIImage imageNamed:@"[email protected]"];
    [self.view addSubview:self.imageView];
    //下划线1
    self.myView=[[UIView alloc]initWithFrame:CGRectMake1(30, 85, 240, 1)];
    self.myView.backgroundColor=[UIColor whiteColor];
    [self.view addSubview:self.myView];
    //下划线2
    self.myView=[[UIView alloc]initWithFrame:CGRectMake1(30, 125, 240, 1)];
    self.myView.backgroundColor=[UIColor whiteColor];
    [self.view addSubview:self.myView];
   
    //文本编辑1
    self.textNmae=[[UITextField alloc]initWithFrame:CGRectMake1(60, 55, 210, 30)];
    self.textNmae.placeholder=@"请输入手机号";
    self.textNmae.font=[UIFont systemFontOfSize: 25];
    self.textNmae.alpha=0.5;
    self.textNmae.keyboardType = UIKeyboardTypeNumberPad;//键盘类型
    self.textNmae.clearButtonMode=UITextFieldViewModeAlways;//X总数存在
    [self.view addSubview:self.textNmae];
    
    //文本编辑2
    self.textNmae=[[UITextField alloc]initWithFrame:CGRectMake1(60, 95, 210, 30)];
    self.textNmae.placeholder=@"请输入密码";
    self.textNmae.secureTextEntry=YES;//安全密码
    self.textNmae.font=[UIFont systemFontOfSize: 25];
     self.textNmae.alpha=0.5;
     self.textNmae.delegate=self;
    self.textNmae.clearButtonMode=UITextFieldViewModeAlways;//X总数存在
    [self.view addSubview:self.textNmae];
    
    //登录按钮
    self.myButton=[[UIButton alloc]initWithFrame:CGRectMake1(30, 140, 240, 30)];
    [self.myButton setTitle:@"登录" forState:UIControlStateNormal];
    [self.myButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
    self.myButton.backgroundColor=[UIColor colorWithRed:arc4random()%256/255.0 green:arc4random()%256/255.0  blue:arc4random()%256/255.0  alpha:1.0];
    [self.myButton.layer setCornerRadius:10];//圆角
    [self.view addSubview:self.myButton];
    
    
    //注册按钮
    self.myButton=[[UIButton alloc]initWithFrame:CGRectMake1(30, 180, 240, 30)];
    [self.myButton setTitle:@"注册" forState:UIControlStateNormal];
    [self.myButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
    self.myButton.backgroundColor=[UIColor colorWithRed:arc4random()%256/255.0 green:arc4random()%256/255.0  blue:arc4random()%256/255.0  alpha:1.0];
    [self.myButton.layer setCornerRadius:10];//圆角
    [self.view addSubview:self.myButton];

    
}
//隐藏键盘
-(BOOL)textFieldShouldReturn:(UITextField *)textField
{
    if ([textField isFirstResponder]) {
        [textField resignFirstResponder];
    }
    return YES;
}



//适配缩放方法
  CG_INLINE CGRect
 CGRectMake1(CGFloat x, CGFloat y, CGFloat width, CGFloat height)
{
    CGRect rect;
    AppDelegate *myDelegate=[[UIApplication sharedApplication]delegate];
    rect.origin.x=x*myDelegate.autoSizeScaleX;//坐标轴缩放
    rect.origin.y=y*myDelegate.autoSizeScaleY;
    rect.size.width=width*myDelegate.autoSizeScaleX;//尺寸缩放
    rect.size.height=height*myDelegate.autoSizeScaleY;
    return rect;

}