QMUI / QMUI_iOS框架学习(一)
腾讯开源的基于ui的框架,看到感觉做的非常棒,准备拿来融入到项目里面记录一下学习的过程git clone下来 demo代码,更改bundle identity 就可以在真机上跑起来看看了。按照开始使用的方式,集成这个框架使用 CocoaPods 添加依赖库然后运行 pod install,安装成功后,请在项目左侧的 Project navigator 里找到 QMUIKit,右键点击选择 Sho
腾讯开源的基于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];
}];
更多推荐
所有评论(0)