山寨QQ音乐的布局(一)

学了两天IOS趁着还没忘光,巩固一下所学知识想做点东西,由于自己的设计能力有限,所以就山寨一下吧,说到山寨怎么能忘了腾讯呢,今天发现QQ音乐的设计风格是扁平化的,小清新风格,所以就山寨一下它吧。。

由于本屌没有IPhone手机只能用Ipad运行iphone应用看看QQ音乐的效果,我的ipad是ios7的不知道QQ音乐是不是在IOS6上也是这种风格(想来肯定是的,腾讯的设计能力还是挺厉害的,山寨也是需要实力的不是)。

下面来真格的。。。。


首先是层次,据我观察是一个UITabBarController下面包含四个UINavigationController,每个UINavigationController下面包含UITableViewController(我也不知道对不对,反正我就这么做了)

接下来我们建立一个空的Project新建一个类继承自UITabBarController,这里我就叫RootViewController,然后再Window的代理类中将window的根控制器设置为我们新建的rootViewController,

 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
// Override point for customization after application launch.
self.window.backgroundColor = [UIColor whiteColor]; RootViewController *rootViewController = [[RootViewController alloc] init];
[self.window setRootViewController:rootViewController]; //设置跟控制器为我们新建的RootViewController,其实就是设置为UITabBarController [self.window makeKeyAndVisible];
return YES;
}

然后就是在UITabBarController中设置四个UINavigationController主要实现代码如下

     //设置UItabBar的高度为50
self.tabBar.frame = CGRectMake(, CGRectGetHeight([[UIScreen mainScreen] bounds]) - , CGRectGetWidth([[UIScreen mainScreen] bounds]), ); if (IOS_7) {
[[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys: [UIColor whiteColor], UITextAttributeTextColor, [UIFont fontWithName:@"Arial" size:0.0], UITextAttributeFont,nil] forState:UIControlStateHighlighted]; //设置UITabBarItem高亮时title的颜色为白色
}
else{
[[UITabBar appearance] setBackgroundImage:[UIImage imageWithColor:[UIColor whiteColor] size:CGSizeMake(, )]]; //使用纯色图片填充IOS默认的UITabBar
[[UITabBar appearance] setSelectionIndicatorImage:[UIImage new]];//去掉IOS6选中时的高光效果
//设置IOS6的UINagitationBar的颜色为白色
[[UINavigationBar appearance] setBackgroundImage:[UIImage imageWithColor:[UIColor whiteColor] size:CGSizeMake(, )] forBarMetrics:UIBarMetricsDefault];
} //Universal
//设置IOS6和IOS7的UINavigationBar上的字体统一为黑色
[[UINavigationBar appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys: [UIColor blackColor], UITextAttributeTextColor, [UIFont fontWithName:@"Arial" size: ], UITextAttributeFont, [UIFont boldSystemFontOfSize:], NSFontAttributeName, [NSValue valueWithUIOffset:UIOffsetZero], UITextAttributeTextShadowOffset, nil]]; //我的音乐
MyMusicViewController *myMusicView = [[MyMusicViewController alloc] init];
UINavigationController *myMusicNavigation = [[UINavigationController alloc] initWithRootViewController:myMusicView];
myMusicNavigation.tabBarItem = [UITabBarItem initCustomWithImage:@"mymusic" withSelectedImage:@"mymusicSelected" withTitle:@"我的音乐"]; //音乐馆
MusicHallViewController *musicHallView = [[MusicHallViewController alloc] init];
UINavigationController *musicHallNavigation = [[UINavigationController alloc] initWithRootViewController:musicHallView];
musicHallNavigation.tabBarItem = [UITabBarItem initCustomWithImage:@"musicHall" withSelectedImage:@"musicHallSelected" withTitle:@"音乐馆"]; //发现
FinderViewController *finderView = [[FinderViewController alloc] init];
UINavigationController *finderNavigation = [[UINavigationController alloc] initWithRootViewController:finderView];
finderNavigation.tabBarItem = [UITabBarItem initCustomWithImage:@"finder" withSelectedImage:@"finderSelected" withTitle:@"发现"]; //更多
MoreViewController *moreView = [[MoreViewController alloc] init];
UINavigationController * moreNavigation = [[UINavigationController alloc] initWithRootViewController:moreView];
moreNavigation.tabBarItem = [UITabBarItem initCustomWithImage:@"more" withSelectedImage:@"moreSelected" withTitle:@"更多"]; NSArray *viewControllers = [NSArray arrayWithObjects:myMusicNavigation, musicHallNavigation, finderNavigation, moreNavigation, nil];
[self setViewControllers:viewControllers];

代码中的IOS_7是一个宏定义

 #define IOS_7 ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7.0)

创建UITabBarItem的方法我写在了一个Category中定义了一个类方法

 + (UITabBarItem *) initCustomWithImage:(NSString *)image withSelectedImage:(NSString *)selectedImage withTitle:(NSString *)title
{
UIEdgeInsets insets = UIEdgeInsetsMake(, , -, ); //UITabBarItem的偏移量 上左下右
UIImage *myImage = [UIImage imageNamed:image];
UIImage *myImageSelected = [UIImage imageNamed:selectedImage];
UITabBarItem *myTabBarItem = [[UITabBarItem alloc] init];
myTabBarItem.imageInsets = insets;
myTabBarItem.title = title;
if (IOS_7) {
myTabBarItem.image = [myImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
myTabBarItem.selectedImage = [myImageSelected imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
}
else
{
[myTabBarItem setFinishedSelectedImage:myImageSelected withFinishedUnselectedImage:myImage];
}
return myTabBarItem;
}

为了在IOS6和IOS7中都是用同样的扁平化风格,需要对IOS6作特别的设置,需要将UINavigationBar和UIBabBar的背景用纯色图片填充,title的字体样式也要设置为统一风格,具体的一下做法可以参考如下博客

http://esoftmobile.com/2014/01/14/build-ios6-ios7-apps/

由于初学 水平有限 刚开了个头 写了个初步布局 先到这里 还有一些问题没有解决 来张图片

山寨QQ音乐的布局(一) 山寨QQ音乐的布局(一)

虽然IOS6和IOS7是初步统一了样式,但是官方的我的音乐是在左边的,不知道怎么弄过去了。。。,请高人赐教。。。

上一篇:RabbitMQ学习11--死信队列(拒绝消息)


下一篇:一起学微软Power BI系列-使用技巧(5)自定义PowerBI时间日期表