澳门威尼斯人注册网址【官网首页】
做最好的网站

澳门威尼斯人注册网址IOS开发之自动布局显示网络请求内容,屏幕适配

来源:http://www.ogcoffee123.com 作者: 计算机网络 人气:186 发布时间:2019-12-01
摘要:IOS开发之自动布局显示网络请求内容,ios开发布局请求 在上一篇博客中详细的介绍了IOS开发中的相对布局和绝对布局,随着手机屏幕尺寸的改变,在App开发中为了适应不同尺寸的手机屏

IOS开发之自动布局显示网络请求内容,ios开发布局请求

  在上一篇博客中详细的介绍了IOS开发中的相对布局和绝对布局,随着手机屏幕尺寸的改变,在App开发中为了适应不同尺寸的手机屏幕,用自动布局来完成我们想要实现的功能和效果显得尤为重要。本人更喜欢使用相对布局。在下面要学习的例子中暂且先用我们的StoryBoard来设置我们组件的约束,以后会在代码中给我们的元素新建约束。iPhone4,5和将要发布的iPhone6的屏幕的大小都不一样,所以屏幕的适配是我们搞App开发必须要考虑的问题。

  我们要完成一个什么例子呢,先上两张程序运行最终的结果图,之后看着图提出我们要实现的效果

               澳门威尼斯人注册网址 1                 澳门威尼斯人注册网址 2

   界面要求:

      1.下面刷新的按钮在3.5和4.0寸屏上离下面的bottom的距离都是为20点。

      2.根据网络请求文字的内容的多少来动态的调整Lable的高度

      3.当Label的高度变化时,下面的三个按钮的位置也相对于Lable的位置变化

   下面我们就以代码结合着storyboard来实现上面的效果。

   1.为了模拟网络请求,我们需要新建一个SourceManager类,和SourceManagerDelegate. 我们请求资源的时候用到的是委托回调,关于委托回调的内容请参考之前的博客ObjC中的委托模式。在SourceManager类中有一个qingquWeibo的方法,用于模拟网络请求。在SourceManagerDelegate协议中有一个-(void)sourceManager:(SourceManager *)sm didReceiveWeiboText:(NSString *)text; 用于回调。

   SourceManager.h中的代码如下:

 1 #import <Foundation/Foundation.h>
 2 
 3 @protocol SourceManagerDelegate;
 4 
 5 @interface SourceManager : NSObject
 6 //回调对象
 7 @property(nonatomic,weak)id<SourceManagerDelegate>delegate;
 8 //请求方法
 9 -(void)qingquWeibo;
10 
11 @end
12 
13 
14 //-----协议
15 
16 @protocol SourceManagerDelegate <NSObject>
17 //source要回调的方法
18 -(void)sourceManager:(SourceManager *)sm didReceiveWeiboText:(NSString *)text;
19 
20 @end

 

  SourceManager.m的代码如下:

 1 #import "SourceManager.h"
 2 
 3 @implementation SourceManager
 4 
 5 -(void)qingquWeibo
 6 {
 7    
 8     NSString *str;
 9     
10     //随机确定是那个字符串
11     int i = arc4random()%2;
12     if (i)
13     {
14         //模拟请求要返回的字符串1
15         str = @"iPhoneiPhoneiPhoneiPhoneiPhoneiPhoneiPhoneiPhoneiPhoneiPhoneiPhoneiPhoneiPhoneiPhoneiPhoneiPhoneiPhoneiPhoneiPhoneiPhoneiPhone";
16     }
17     else
18     {
19         //模拟请求要返回的字符串2
20         str= @"iPhone";
21 
22     }
23     
24     //回调方法,返回text
25     [self.delegate sourceManager:self didReceiveWeiboText:str];
26     
27 }

 

  2.实现我们的模拟SourceManager的类以后就开始编写我们的ViewController的类。

    (1)给lable和lable下面的四个按钮在storyBoard添加约束,步骤如下:

                 澳门威尼斯人注册网址 3澳门威尼斯人注册网址 4澳门威尼斯人注册网址 5

                                   澳门威尼斯人注册网址 6  澳门威尼斯人注册网址 7

      (2).给各个控件添加完约束后,我们需要在ViewController中添加我们要使用的控件和Label的垂直约束,代码如下

 1 //lable中的垂直约束,根据请求的text内容,用于动态的修改label的大小。
 2 @property (strong, nonatomic) IBOutlet NSLayoutConstraint *lableVConstraint;
 3 
 4 //label用于设置请求的文字内容
 5 @property (strong, nonatomic) IBOutlet UILabel *myLabel;
 6 
 7 //请求数据源的按钮
 8 @property (strong, nonatomic) IBOutlet UIButton *updateButton;
 9 
10 //sourceManagmer;获取数据
11 @property (strong, nonatomic) SourceManager *sourceManager;

      

      (3).在viewDidLoad里面配置我们的数据源

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    //新建数据源
    self.sourceManager = [[SourceManager alloc] init];

    //注册回调
    self.sourceManager.delegate = self;
}

  

    (4).实现sourceManager要回调的方法,代码如下

//sourceManage要回调的方法
-(void)sourceManager:(SourceManager *)sm didReceiveWeiboText:(NSString *)text
{
    //根据text调节myLable的高度

    //先移除myLabel的垂直布局,之后在赋新的值
    [self.view removeConstraint:self.lableVConstraint];

    //用字典设置字体的大小
    NSDictionary * dic = @{NSFontAttributeName: [UIFont systemFontOfSize:17]};

    //获取在固定宽度区域内存放请求的文字需要的范围
    CGRect bounds = [text boundingRectWithSize:CGSizeMake(230, 1000) options:NSStringDrawingUsesLineFragmentOrigin attributes:dic context:nil];

    //创建新建垂直约束时的参数
    NSString *string = [NSString stringWithFormat:@"V:[_myLabel(%lf)]", bounds.size.height];

    //给myLabel中创建新的垂直约束
    NSArray *constraint = [NSLayoutConstraint constraintsWithVisualFormat:string options:0 metrics:nil views:NSDictionaryOfVariableBindings(_myLabel)];

    //更新垂直约束的值
    self.lableVConstraint = constraint[0];

    //添加新的约束
    [self.view addConstraint:self.lableVConstraint];

    //设置myLabel的值
    self.myLabel.text = text;

}

    代码说明:

      1.在更新label的垂直约束之前先把原有的Constraint移除掉,注意:约束是加在约束组件的父类组件中。

      2.获取在固定宽度,特定字体时显示text需要空间的大小,返回值是一个CGRect类型的变量。

      3.把获取区域的高度设置成我们Label的垂直约束的值。

    就是全部代码和步骤,欢迎批评指正。

下面是由storyboard拖拽过来的属性:

ios网络问题

问题描述清楚点。我发的json内容是否应该是这个:
{"username":"testapp","role_id":2,"password":"123"}
服务器返回的是空结果  

在上一篇博客中详细的介绍了IOS开发中的相对布局和绝对布局,随着手机屏幕尺寸的...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//当slider的值改变的时候回调的方法
- (IBAction)sliderFunction:(id)sender
{
    //获取slider的当前值(在storyboard设置的范围为0-120)
    double value = self.mySlider.value;
 
    //获取myView的位置
    CGRect frame = self.myView.frame;
 
    //根据slider的值动态的设置myView的坐标和宽高,设置的时候view中心不变
    frame.origin.x =  120-value;
    frame.origin.y = 66 * (1-value/120);
    frame.size.height = 320-frame.origin.x*2;
    frame.size.width = 320-frame.origin.x*2;
 
    //更新myView的位置
    self.myView.frame = frame;
    //同时改变下面黑色view的坐标
    CGRect bf = self.blackView.frame;
    bf.origin.y = frame.size.height + frame.origin.y + 30;
    self.blackView.frame = bf;
 
}

ios 为何自动布局的时始终只有一个view被拉伸而另一个没有变化

爱莫能助。  

那么我如何用相对布局实现上面那种view放大的效果呢,接下来我们需要新建一个工程,因为相对布局和绝对布局在同一个组件中无法并存。在新建工程中用storyboard把我们用到的控件进行拖拽 ,界面和上面的是一样的。

  澳门威尼斯人注册网址 8

上面是我们的绝对布局的方式,接下来要学习一下相对布局的方式。相对布局使用起来会比绝对布局要复杂一些,下面先做屏幕适配的例子,图一是在iPhone的4.0寸的效果图, 当我们不做任何处理的时候在3.5寸屏上是显示不出来的如第二张图:

上面说了这么多了,可能说的不太明白,还是那句话,怎么能少的了代码和实例的支持呢,下面会通过屏幕适配的事例来用绝对布局和相对布局同时实现下面的描述效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//slider的值改变调用的方法
- (IBAction)sliderChange:(id)sender
{
    //为了避免冲突移除myView的水平和垂直约束,注意是从主视图上移除,因为约束是加载我们的主视图上,即相对于我们的主视图
    [self.view removeConstraint:self.widthC];
    [self.view removeConstraint:self.heightC];
     
    //获取slider的值
    double sliderValue = self.mySlider.value;
     
    //由slider的值重设我们的约束值,H代表水平约束, V代表垂直约束
    NSString *widthValue = [NSString stringWithFormat:@"H:[_myView(%lf)]", sliderValue];
    NSString *heightValue = [NSString stringWithFormat:@"V:[_myView(%lf)]", sliderValue];
     
    //新建约束
    NSArray *widthConstraint = [NSLayoutConstraint constraintsWithVisualFormat:widthValue options:0 metrics:nil views:NSDictionaryOfVariableBindings(_myView)];
    //给水平约束重新赋值
    self.widthC = widthConstraint[0];
     
    //给垂直约束重新赋值
    NSArray * heightConstraint = [NSLayoutConstraint constraintsWithVisualFormat:heightValue options:0 metrics:nil views:NSDictionaryOfVariableBindings(_myView)];
    self.heightC = heightConstraint[0];
     
    //往主视图上添加新的约束
    [self.view addConstraint:self.widthC];
    [self.view addConstraint:self.heightC];
}

在绝对布局时我们还可以获取屏幕的尺寸,通过屏幕的尺寸来计算我们组件所在的位置,主要代码如下:

之前如果做过Web前端页面的小伙伴们,看到绝对定位和相对定位并不陌生,并且使用起来也挺方便。在IOS的UI设计中也有绝对定位和相对定位,和我们的web前端的绝对定位和相对定位有所不同但又有相似之处。下面会结合两个小demo来学习一下我们IOS开发中UI的绝对定位和相对定位。在前面的博客中所用到的UI事例用的全是绝对定位,用我们Storyboard拖拽出来的控件全是绝对定位的,就是我们可以同改变组件的frame来改变组件的位置和大小。而相对定位则不同,相对定位是参考组件周围的元素来确定组件的大小或位置,相对定位即约束和周围组件的距离来布局的,即layoutConstraint. 在布局中LayoutConstraint和Fram布局方式是不能并存的。

        

​代码说明:

  澳门威尼斯人注册网址 9

    ​    ​   

​ 上面的总结暂且这么说吧,是根据笔者自己的理解所总结的内容,不免有偏颇之处,欢迎批评指正,转载请注明出处。

    ​    ​    

我们如何让在3.5寸屏上也显示正常呢,接下啦就是相对布局出出场的时候了,我们用相对布局的方式把最下面的view的位置改为相对于主视图的底部和左边的像素值固定,同时设置slider的位置相对于下面的view的位置相对固定。也就是下面的veiw的位置改变,则上面的slider的位置也会改变,用storyboard修改如下:(第一张图是修改最下面view的相对位置,第二张图是设置我们slider为相对布局) ,不需要在ViewController中添加任何动态吗我们就可以实现屏幕的适配。

 

 给我们相应的组件在storyboard中添加上约束以后,怎样来动态的改变最上面view的宽和高的约束范围呢?(即改变水平约束和垂直约束的值)第一部就得把最上面的view的水平约束和垂直约束从我们的storyboard中把最上面View中我们要用的约束拖入到我们的Viewcontroller, 第一张图是storyboard中约束所在的位置,第二张图把约束添加到ViewController中。

  澳门威尼斯人注册网址 10

 用绝对布局来实现上述效果,为了节省我们代码编写的时间,上面的控件是通过storyborad来实现的,然后在对应的ViewController里添加组件和控件回调的方法,主要是在slider滑动的时候来获取slider的值,然后动态的设置上面View的frame坐标(当然,如果让view往四周扩展得计算一下新的fram的值,然后动态的修改),上面的view位置和大小改变了,那么下面的view不能被上面的覆盖掉,所以也得修改blackView的fram的值。这种通过修改frame的值的方式来确定组件位置即为绝对布局

          澳门威尼斯人注册网址 11

 我们要实现的效果:当上面的view的大小及位置改变时,为了不覆盖掉下面的view,我们同时要改变下view的位置。 或者说在我们4.0寸正常显示的内容,在3.5寸屏上也能正常显示,即通常我们所说的屏幕的适配。为了便于观察效果,我们可以用Slider控件来动态的改变上面view的大小,观察下面view的位置变化,下面是我们要实现的效果图:

1
2
3
4
5
6
//把最上边的view拖拽到我们的代码中
@property (strong, nonatomic) IBOutlet UIView *myView;
//添加slider
@property (strong, nonatomic) IBOutlet UISlider *mySlider;
//添加下面黑色的view
@property (strong, nonatomic) IBOutlet UIView *blackView;
1
2
3
4
5
6
//获取屏幕大小
UIScreen *s = [UIScreen mainScreen];
//获取屏幕边界
CGRect bounds = s.bounds;
//获取屏幕的高度
float height = bounds.size.height;

     澳门威尼斯人注册网址 12

  • 1.一个组件中只能有一中约束,如在myView中我们已经有一个垂直约束,我们如果再给他添加一个垂直约束的话,那么程序在运行时就会报错,错误内容:“Unable to simultaneously satisfy constraints.……”;
  • ​2.所以在添加新的约束之前,我们得把之前加在我们组件中相应的约束给去掉;约束是加在我们对应组件的父视图上,移除也得从组件的父视图上移除;
  • 3.在设置约束的值的时候我们是以字符串的形式把参数传递给约束的,如:H:[_myView(200)] H代表水平约束,V代表垂直约束。中括号里是我们要为那个组件添加约束以及约束的值是多少;
  • ​4.给我们的约束更新我们新建的约束;
  • ​5.在把更新的约束添加到我们的父视图上,到此我们就可以实现上面我们上面用绝对布局实现的功能

补充说明:

  • (1)首先给我们最上面的View设置相对布局的属性,如下面的图一
  • (2)  再给黑色的View设置相对布局的属性,入下面的图二所示:
  • (3) 设置上面两个View相对中心对齐,选中上面的View,按着Ctrl往下面的View中拖拽,在弹出的框中选中Center X入图三

至此我们用storyboard的工作已经做完,程序员是少不了敲代码的,也只有正儿八经的敲代码,程序员才会成长。所以喽下面就是我们在ViewController中添加的代码部分。绝对布局直接改frame的坐标值就可以啦,那么在程序中我们如何去动态的改变我们约束的值呢?下面的代码将会用到。 我们要做的事情就是在ViewController中通过改变slider的值来改变最上面View的水平约束和垂直约束,水平约束和垂直约束的相关变量我们已经拖拽过来了,下面就需要在Slider回调的方法中来改变水平和垂直约束的值。先段代码,之后在说两句。    ​    ​

               

    

下面是当slider的值改变时要回调的方法:

本文由澳门威尼斯人注册网址发布于 计算机网络,转载请注明出处:澳门威尼斯人注册网址IOS开发之自动布局显示网络请求内容,屏幕适配

关键词:

最火资讯