iOS AutoLayout阅读笔记4------->AutoLayout入门动画示例(纯IB实现)

原创 2016年05月31日 17:32:50


之前在网上看到过用IB+Masonry来实现以下的几个效果,传送门如下:

http://tutuge.me/2015/05/23/autolayout-example-with-masonry/

我自己写项目也很少用这样的布局,一般都是IB来布局约束,用习惯了是真的很好用,维护起来也不难,根据上面那个哥们做的效果,咱下面实现几个纯IB做的效果,各位有什么意见请留言,请原谅我Git还不会上传

。。。。。。我会尽快学会的



老子学会啦!!!看下面的github地址



效果一 地址:https://github.com/DeftMKJ/AAA/tree/master



总体布局和关键布局如下:

左图 是整体布局,其他几个按钮和背景的布局不再一一赘述了

中图 是宓珂璟左侧Label

右图 是程璟娇右侧Label

两个Lable的约束分析: 左侧的给top 和 leading就可以了(两条约束),记得文本先给上,构成有效约束,右侧的给距离左侧Label的leading和top 以及距离右侧Label的约束大于等于0(一共三条约束),这样设置完毕之后就大功告成啦!!!


                                          


看图说话,关键布局的约束如下:



然后只是些简单的代码逻辑,把四个按钮的点击事件都引到这个方法里面,代码写的不好,各位看官可以尽情留言喷我

- (IBAction)click:(UIButton *)sender
{
    NSMutableString *textStr = [[NSMutableString alloc] init];
    switch (sender.tag) {
        case 100:
            if ([self.leftLabel.text isEqualToString:@"宓珂璟"])
            {
                break;
            }
            [textStr appendString:self.leftLabel.text];
            [textStr deleteCharactersInRange:NSMakeRange(self.leftLabel.text.length - 3, 3)];
            self.leftLabel.text = textStr;
            break;
        case 101:
            [textStr appendString:self.leftLabel.text];
            [textStr appendString:@"宓珂璟"];
            self.leftLabel.text = textStr;
            break;
        case 102:
            if ([self.rightLabel.text isEqualToString:@"程静娇"])
            {
                break;
            }
            [textStr appendString:self.rightLabel.text];
            [textStr deleteCharactersInRange:NSMakeRange(self.rightLabel.text.length - 3, 3)];
            self.rightLabel.text = textStr;
            break;
        case 103:
            [textStr appendString:self.rightLabel.text];
            [textStr appendString:@"程静娇"];
            self.rightLabel.text = textStr;
            break;
        default:
            break;
    }
}



效果二   地址:https://github.com/DeftMKJ/-



实现思路分析:

1.首先是整体居中,我们外部包一个View,用来存放着四个ImageView,因此,外部的约束应该是,center x,top,height三个约束,其中的宽度由内部的imageView来控制,这样就能达到无论多少个宽度都能根据内部的空间多少变化,并且是一直居中的

2.内部的四个ImageView的约束从左边开始,左1,左2,左3,左4 是center Y,leading ,width,height四个约束,为了要让外部的View宽度能随着内部这个四个imageView的多少来伸缩,所以左4需要再给一个Trailling Space to SuperView,这样这个外部容器正好包住四个控件

3.那么这个ImageView的隐藏或者出现,实际上就是width这个约束起作用,0不就是没了么,就这么简单

效果如下 

                       1                                                                    2                                                            3

                                  


                       4                                                             整体约束如下

                            


约束做完就把需要的控件和需要操作的约束都拖出来,如下

@property (weak, nonatomic) IBOutlet UIView *backView; //!< 背景View
@property (weak, nonatomic) IBOutlet UIImageView *image1; //!< 左1
@property (weak, nonatomic) IBOutlet UIImageView *image2; //!< 左2
@property (weak, nonatomic) IBOutlet UIImageView *image3; //!< 左3
@property (weak, nonatomic) IBOutlet UIImageView *image4; //!< 左4
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *firstConstraint; //!< 左1 宽度约束
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *secondContraint; //!< 左2 宽度约束
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *thirdConstraint; //!< 左3 宽度约束
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *foutContraint; //!< 左4 宽度约束

然后就是简单的代码实现了,写的不好,请见谅

// 宽度为0,不就是隐藏了么
- (IBAction)click:(UISwitch *)sender
{
    switch (sender.tag) {
        case 200:
            if (!sender.isOn)
            {
                self.firstConstraint.constant = 0;
            }
            else
            {
                self.firstConstraint.constant = 50;
            }
            break;
        case 201:
            if (!sender.isOn)
            {
                self.secondContraint.constant = 0;
            }
            else
            {
                self.secondContraint.constant = 50;
            }
            break;
        case 202:
            if (!sender.isOn)
            {
                self.thirdConstraint.constant = 0;
            }
            else
            {
                self.thirdConstraint.constant = 50;
            }
            break;
        case 203:
            if (!sender.isOn)
            {
                self.foutContraint.constant = 0;
            }
            else
            {
                self.foutContraint.constant = 50;
            }
            break;
        default:
            break;
    }
    
}


效果3   地址:https://github.com/DeftMKJ/ceshi/tree/master


要求子View一直保持父视图的一半或者任意百分比,这个其实比较简单

请先看父视图的约束,简单明了


然后再看里面关键子View的约束


上边那根线就是最关键的,一般来讲这根线的Multiplier属性是1(默认的),我们只要把这根线改为0.5(或者自定义百分比),就可以了,红黄两个View都这么设置(比例自己控制)

NOTE:注意是相对于他们各自的SuperView哦


约束做完直接上一句代码就OK了

// UISlider的滑动事件
- (IBAction)valueChange:(UISlider *)sender
{
    // totalWidth就是底部View的总宽度,只要改变这个宽度,内部控件就会跟着变化
    self.totalWidth.constant = 296 * sender.value;
}



安静安静安静 纯IB哦。。。。。。 Over~~~~~~~~~~






版权声明:本文为博主原创文章,未经博主允许不得转载。转载请Email我.......

iOS Core Animation详解(四)AutoLayout中的动画

原创blog,转载请注明出处 blog.csdn.net/hello_hwc 欢迎关注我的iOS SDK详解专栏 http://blog.csdn.net/column/details/huan...
  • Hello_Hwc
  • Hello_Hwc
  • 2015年08月06日 20:40
  • 3162

[iOS AutoLayout动画 坑] AutoLayout动画平移坑总结 => Swift/OC

参考帖子:自动布局 Autolayout 报错:Unable to simultaneously satisfy constraints.参考帖子: Auto Layout 进阶参考帖子:谈Story...
  • iOSTianNan
  • iOSTianNan
  • 2016年12月02日 17:34
  • 1162

iOS 美丽说瀑布流界面纯AutoLayout光速布局

最近在Github上看到三个库,分别是 GSKStretchyHeaderView,CHTCollectionViewWaterfallLayout ,JZNavigationExtension, ...
  • Deft_MKJing
  • Deft_MKJing
  • 2016年06月18日 22:45
  • 4445

iOS-AutoLayout中动画使用的细节 和 iOS layout机制

在Main.storyboard拖入一个UIView,随便设置一个背景色, 使用autolayout  为紫色的view添加约束 :(0,0,100,100) , 为该view添加动画代...
  • yang198907
  • yang198907
  • 2015年11月01日 23:52
  • 1387

AutoLayout 浅析动画

1.AutoLayout相关的几个易混淆的方法 setNeedsLayout layoutIfNeeded layoutSubViews setNeedsUpdateConstrain...
  • sun2728
  • sun2728
  • 2016年08月19日 20:47
  • 689

iOS开发-autolayout动画效果实现的几种方法

对于一个基于约束的布局视图,如何改变其值并且带有动画的特效,下面提供两种方法: 如下图,图中有一个很长的view和两个button,现在要求,改变view的高度,并且 两个Button随之上移,并且带...
  • yangbingbinga
  • yangbingbinga
  • 2015年02月09日 23:08
  • 4481

iOS中Xcode使用UIScrollView+AutoLayout轻松实现滚动布局

对于一些屏幕尺寸比较小的手机,或者内容很长,一屏幕显示不了的情况,我们通常可以用手指往上滑的方法浏览底部内容,如果不是用ListView或者UITableView去实现的话,我们就需要自己实现滚动布局...
  • hwe_xc
  • hwe_xc
  • 2016年04月25日 11:16
  • 3979

ios开发autolayout之代码实现Autolayout使用总结

ios开发autolayout之代码实现Autolayout使用总结 1.理论部分 demo示例1: UIView *blueView = [[UIView...
  • sunnyboy9
  • sunnyboy9
  • 2016年04月12日 13:07
  • 1052

AutoLayout进阶篇

来自Leo的原创博客,转载请著名出处我的StackOverflow前言AutoLayout用来布局已经不是什么新鲜事了,我之前也写过三篇入门的文章 IB 自动生成 IB拖拽 代码实现 当然,实际开发中...
  • Hello_Hwc
  • Hello_Hwc
  • 2016年06月04日 15:30
  • 10425

iOS autolayout性能问题, uitableview的优化

autolayout被使用的越来越多,很多时候,我们只是在使用,但是却没有去关心使用的东西给我们带来的影响。      在自己的项目中,动态高度的问题,在iPhone6上,有稍微卡顿的感觉,用上了各...
  • qwe462127821
  • qwe462127821
  • 2015年04月16日 22:54
  • 752
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:iOS AutoLayout阅读笔记4------->AutoLayout入门动画示例(纯IB实现)
举报原因:
原因补充:

(最多只允许输入30个字)