山寨QQ音樂的佈局（一）

學了兩天IOS趁着還沒忘光，鞏固一下所學知識想作點東西，因爲本身的設計能力有限，因此就山寨一下吧，說到山寨怎麼能忘了騰訊呢，今天發現QQ音樂的設計風格是扁平化的，小清新風格，因此就山寨一下它吧。。

因爲本屌沒有IPhone手機只能用Ipad運行iphone應用看看QQ音樂的效果，個人ipad是ios7的不知道QQ音樂是否是在IOS6上也是這種風格（想來確定是的，騰訊的設計能力仍是挺厲害的，山寨也是須要實力的不是）。

下面來真格的。。。。

---

 

首先是層次，據我觀察是一個UITabBarController下面包含四個UINavigationController，每一個UINavigationController下面包含UITableViewController（我也不知道對不對，反正我就這麼作了）

接下來咱們創建一個空的Project新建一個類繼承自UITabBarController，這裏我就叫RootViewController，而後再Window的代理類中將window的根控制器設置爲咱們新建的rootViewController，

 1 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
 2 {
 3     self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
 4     // Override point for customization after application launch.
 5     self.window.backgroundColor = [UIColor whiteColor];
 6     
 7     RootViewController *rootViewController = [[RootViewController alloc] init];
 8     [self.window setRootViewController:rootViewController]; //設置跟控制器爲咱們新建的RootViewController,其實就是設置爲UITabBarController
 9     
10     [self.window makeKeyAndVisible];
11     return YES;
12 }

而後就是在UITabBarController中設置四個UINavigationController主要實現代碼以下

 1     //設置UItabBar的高度爲50
 2     self.tabBar.frame = CGRectMake(0, CGRectGetHeight([[UIScreen mainScreen] bounds]) - 50, CGRectGetWidth([[UIScreen mainScreen] bounds]), 50);
 3     
 4     
 5     if (IOS_7) {
 6         [[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys: [UIColor whiteColor], UITextAttributeTextColor, [UIFont fontWithName:@"Arial" size:0.0], UITextAttributeFont,nil] forState:UIControlStateHighlighted]; //設置UITabBarItem高亮時title的顏色爲白色
 7     }
 8     else{
 9         [[UITabBar appearance] setBackgroundImage:[UIImage imageWithColor:[UIColor whiteColor] size:CGSizeMake(1, 50)]]; //使用純色圖片填充IOS默認的UITabBar
10         [[UITabBar appearance] setSelectionIndicatorImage:[UIImage new]];//去掉IOS6選中時的高光效果
11         //設置IOS6的UINagitationBar的顏色爲白色
12         [[UINavigationBar appearance] setBackgroundImage:[UIImage imageWithColor:[UIColor whiteColor] size:CGSizeMake(1, 44)] forBarMetrics:UIBarMetricsDefault];
13     }
14     
15     //Universal
16     //設置IOS6和IOS7的UINavigationBar上的字體統一爲黑色
17     [[UINavigationBar appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys: [UIColor blackColor], UITextAttributeTextColor, [UIFont fontWithName:@"Arial" size:20 ], UITextAttributeFont, [UIFont boldSystemFontOfSize:20], NSFontAttributeName, [NSValue valueWithUIOffset:UIOffsetZero], UITextAttributeTextShadowOffset, nil]];
18     
19     
20     //個人音樂
21     MyMusicViewController *myMusicView = [[MyMusicViewController alloc] init];
22     UINavigationController *myMusicNavigation = [[UINavigationController alloc] initWithRootViewController:myMusicView];
23     myMusicNavigation.tabBarItem = [UITabBarItem initCustomWithImage:@"mymusic" withSelectedImage:@"mymusicSelected" withTitle:@"個人音樂"];
24     
25     //音樂館
26     MusicHallViewController *musicHallView = [[MusicHallViewController alloc] init];
27     UINavigationController *musicHallNavigation = [[UINavigationController alloc] initWithRootViewController:musicHallView];
28     musicHallNavigation.tabBarItem = [UITabBarItem initCustomWithImage:@"musicHall" withSelectedImage:@"musicHallSelected" withTitle:@"音樂館"];
29     
30     //發現
31     FinderViewController *finderView = [[FinderViewController alloc] init];
32     UINavigationController *finderNavigation = [[UINavigationController alloc] initWithRootViewController:finderView];
33     finderNavigation.tabBarItem = [UITabBarItem initCustomWithImage:@"finder" withSelectedImage:@"finderSelected" withTitle:@"發現"];
34     
35     //更多
36     MoreViewController *moreView = [[MoreViewController alloc] init];
37     UINavigationController * moreNavigation = [[UINavigationController alloc] initWithRootViewController:moreView];
38     moreNavigation.tabBarItem = [UITabBarItem initCustomWithImage:@"more" withSelectedImage:@"moreSelected" withTitle:@"更多"];
39     
40     
41     NSArray *viewControllers = [NSArray arrayWithObjects:myMusicNavigation, musicHallNavigation, finderNavigation, moreNavigation, nil];
42     [self setViewControllers:viewControllers];

代碼中的IOS_7是一個宏定義

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

 建立UITabBarItem的方法我寫在了一個Category中定義了一個類方法

 1 + (UITabBarItem *) initCustomWithImage:(NSString *)image withSelectedImage:(NSString *)selectedImage withTitle:(NSString *)title
 2 {
 3     UIEdgeInsets insets = UIEdgeInsetsMake(6, 0, -6, 0); //UITabBarItem的偏移量 上左下右
 4     UIImage *myImage = [UIImage imageNamed:image];
 5     UIImage *myImageSelected = [UIImage imageNamed:selectedImage];
 6     UITabBarItem *myTabBarItem = [[UITabBarItem alloc] init];
 7     myTabBarItem.imageInsets = insets;
 8     myTabBarItem.title = title;
 9     if (IOS_7) {
10         myTabBarItem.image = [myImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
11         myTabBarItem.selectedImage = [myImageSelected imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
12     }
13     else
14     {
15         [myTabBarItem setFinishedSelectedImage:myImageSelected withFinishedUnselectedImage:myImage];
16     }
17     return myTabBarItem;
18 }

 

 爲了在IOS6和IOS7中都是用一樣的扁平化風格，須要對IOS6做特別的設置，須要將UINavigationBar和UIBabBar的背景用純色圖片填充，title的字體樣式也要設置爲統一風格，具體的一下作法能夠參考以下博客

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

因爲初學 水平有限 剛開了個頭 寫了個初步佈局 先到這裏 還有一些問題沒有解決 來張圖片

 

雖然IOS6和IOS7是初步統一了樣式，可是官方的個人音樂是在左邊的，不知道怎麼弄過去了。。。，請高人賜教。。。