山寨QQ音樂的布局（一）

2019-11-14 20:28:40

字體：大中小

來源：轉載

供稿：網友

學了兩天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默認的UITabBar10         [[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     //Universal16     //設置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     else14     {15         [myTabBarItem setFinishedSelectedImage:myImageSelected withFinishedUnselectedImage:myImage];16     }17     return myTabBarItem;18 }