腾讯开源的基于ui的框架,看到感觉做的非常棒,准备拿来融入到项目里面

记录一下学习的过程

git clone 下来 demo代码,更改bundle identity 就可以在真机上跑起来看看了。

按照开始使用的方式,集成这个框架

使用 CocoaPods 添加依赖库

然后运行 pod install,安装成功后,请在项目左侧的 Project navigator 里找到 QMUIKit,右键点击选择 Show in Finder,然后在打开的窗口里找到目录 QMUIConfigurationTemplate,将其中的两个文件拖到你项目 Xcode 的 Project navigator 里,注意选择 Copy items if needed。

开始初始化

#import <QMUIKit/QMUIKit.h>
#import "QMUIConfigurationTemplate.h"

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  // 这两句建议放在方法的开头,以保证在其他 UI 操作之前执行

  // 启动 QMUI 的样式配置模板
  [QMUIConfigurationTemplate setupConfigurationTemplate];
  // 将全局样式渲染出来
  [QMUIConfigurationManager renderGlobalAppearances];

  ...
}

参考 Demo 添加一个launch界面

    // 界面
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];

    // 启动动画
    [self startLaunchingAnimation];

发现编译这套库的时候,会编辑比较长的时间,还不清楚原因。

这里的lauch界面使用xib写的,并且自定义了动画,做完动画后将页面移除。中间的logo距离中心线向上143。把LaunchScreen.xib 拖进来的,并把demo的Assets.xcassets 也复制到当前的工程里面。

再次跑项目,提示

Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'Application windows are expected to have a root view controller at the end of application launch'

这是说launch结束的时候windows需要有根控制器。
于是添加方法

    // 界面
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    [self createTabBarController];
    // 启动动画
    [self startLaunchingAnimation];
- (void)createTabBarController {
    UIViewController *viewController = [[UIViewController alloc] init];
    self.window.rootViewController = viewController;
    [self.window makeKeyAndVisible];
}

代码跑起来,效果是先添加到界面上,然后做了一个向上的动画,然后界面消失。

分析一下lauch的代码,其中改变约束的地方就是设置lauch界面到位置到window的导航条的位置,如果不需要,直接注释掉就行了。

UIWindow *window = [[[UIApplication sharedApplication] delegate] window];
    UIView *launchScreenView = [[NSBundle mainBundle] loadNibNamed:@"LaunchScreen" owner:self options:nil].firstObject;
    launchScreenView.frame = window.bounds;
    [window addSubview:launchScreenView];

    //背景图片
    UIImageView *backgroundImageView = launchScreenView.subviews[0];
    backgroundImageView.clipsToBounds = YES;

    //logo 图片
    UIImageView *logoImageView = launchScreenView.subviews[1];
    //文字
    UILabel *copyrightLabel = launchScreenView.subviews.lastObject;

    //白色遮挡
    UIView *maskView = [[UIView alloc] initWithFrame:launchScreenView.bounds];
    maskView.backgroundColor = UIColorWhite;
    //白色遮挡放在背景图片的下面
    [launchScreenView insertSubview:maskView belowSubview:backgroundImageView];

    [launchScreenView layoutIfNeeded];


    //lauch界面约束枚举
    [launchScreenView.constraints enumerateObjectsUsingBlock:^(__kindof NSLayoutConstraint * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
        //如果是底部行的约束
        if ([obj.identifier isEqualToString:@"bottomAlign"]) {
            obj.active = NO;//约束不激活
            [NSLayoutConstraint constraintWithItem:backgroundImageView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:launchScreenView attribute:NSLayoutAttributeTop multiplier:1 constant:NavigationContentTop].active = YES;
            //将lauch背景图片的底部约束 和 等于 整个lauch图的顶部约束,相等。
            *stop = YES;//结束
        }
    }];
    //0.15秒内 动画, 改变约束,并将图片和logo 和label的alpha设置为0
    [UIView animateWithDuration:.15 delay:0.9 options:QMUIViewAnimationOptionsCurveOut animations:^{
        [launchScreenView layoutIfNeeded];
        logoImageView.alpha = 0.0;
        copyrightLabel.alpha = 0;
    } completion:nil];
    //1.2秒后 将遮罩的透明度设置为0,背景颜色透明度为0  移除lauch
    [UIView animateWithDuration:1.2 delay:0.9 options:UIViewAnimationOptionCurveEaseOut animations:^{
        maskView.alpha = 0;
        backgroundImageView.alpha = 0;
    } completion:^(BOOL finished) {
        [launchScreenView removeFromSuperview];
    }];
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐