山寨QQ音乐的布局(二)终于把IOS6的UITableView拍扁了

IOS应用开发中UITableView的应用十分广泛,但是IOS7神一样的把UITableView拍扁了,这样一来IOS6的UITableView不干了,就吵着也要被拍扁,那好吧我今天就成全了你。。。


继上回书说道初步实现了一个QQ音乐的框架,但这远远不够,我是一个追求细节的人(就像锤子科技的老罗一样),怎么可能就这就结束了呢,下一步实现以下登陆的ModalView,比较简单没啥可说的直接上代码:


 1     UIColor *normalColor = [UIColor colorWithRed:28/255.0 green:191/255.0 blue:97/255.0 alpha:1]; //按钮默认状态的绿色
2 UIColor *selectedColor = [UIColor colorWithRed:185/255.0 green:227/255.0 blue:214/255.0 alpha:1]; //按钮点击状态的淡绿色
3 CGFloat navigationY = 0;
4 if (IOS_7) {
5 navigationY = 20;
6 }
7
8
9 UINavigationBar *loginNavigationBar = [[UINavigationBar alloc] initWithFrame:CGRectMake(0, navigationY, 320, 44)]; //UINavigationBar的位置
10 UIButton *cancelButton = [UIButton buttonWithType:UIButtonTypeSystem];
11 [cancelButton setFrame:CGRectMake(0, 0, 40, 40)];
12 [cancelButton setTitle:@"取消" forState:UIControlStateNormal];
13 [cancelButton setTitleColor:normalColor forState:UIControlStateNormal];
14 [[cancelButton titleLabel] setFont:[UIFont systemFontOfSize:18]];
15 [cancelButton setTitleColor:selectedColor forState:UIControlStateHighlighted];
16 [cancelButton addTarget:self action:@selector(dismissView) forControlEvents:UIControlEventTouchUpInside];
17 UIBarButtonItem *cancelItem = [[UIBarButtonItem alloc] initWithCustomView:cancelButton]; //初始化取消按钮
18
19
20 UIButton *loginButton = [UIButton buttonWithType:UIButtonTypeSystem];
21 [loginButton setFrame:CGRectMake(0, 0, 40, 40)];
22 [loginButton setTitle:@"登陆" forState:UIControlStateNormal];
23 [loginButton setTitleColor:normalColor forState:UIControlStateNormal];
24 [[loginButton titleLabel] setFont:[UIFont systemFontOfSize:18]];
25 [loginButton setTitleColor:selectedColor forState:UIControlStateHighlighted];
26 [loginButton addTarget:self action:@selector(loginAction) forControlEvents:UIControlEventTouchUpInside];
27 UIBarButtonItem *loginItem = [[UIBarButtonItem alloc] initWithCustomView:loginButton]; //初始化登陆按钮
28
29 UIImage *image = [UIImage imageNamed:@"input_login_line"];
30
31 UIImageView *userLineView = [[UIImageView alloc] initWithImage:image];
32 UIImageView *passwordLineView = [[UIImageView alloc] initWithImage:image]; //输入框下面的绿线
33
34 UITextField *userTextField = [[UITextField alloc] initWithFrame:CGRectMake(30, 100+navigationY, 260, 30)];
35 [userTextField setPlaceholder:@"QQ号/手机/邮箱"];
36 [userTextField setClearButtonMode:UITextFieldViewModeWhileEditing];
37 [userTextField setKeyboardType:UIKeyboardTypeNumbersAndPunctuation];
38 [userTextField setReturnKeyType:UIReturnKeyNext];
39 [userLineView setFrame:CGRectMake(30, 131+navigationY, 260, 1)];
40
41 UITextField *passwordTextField = [[UITextField alloc] initWithFrame:CGRectMake(30, 140+navigationY, 260, 30)];
42 [passwordTextField setPlaceholder:@"密码"];
43 [passwordTextField setClearButtonMode:UITextFieldViewModeWhileEditing];
44 [passwordTextField setKeyboardType:UIKeyboardTypeASCIICapable];
45 [passwordTextField setReturnKeyType:UIReturnKeyDone];
46 [passwordLineView setFrame:CGRectMake(30, 171+navigationY, 260, 1)];
47
48 UILabel *regStr = [[UILabel alloc] initWithFrame:CGRectMake(75, 180+navigationY, 110, 30)];
49 [regStr setText:@"没有账号?点击这里"];
50 [regStr setFont:[UIFont systemFontOfSize:12]];
51 [regStr setTextColor:[UIColor darkGrayColor]];
52 UILabel *greenStr = [[UILabel alloc] initWithFrame:CGRectMake(184, 180+navigationY, 60, 30)];
53 [greenStr setText:@"快速注册"];
54 [greenStr setFont:[UIFont systemFontOfSize:12]];
55 [greenStr setTextColor:normalColor];
56
57 UINavigationItem *navigationItem = [[UINavigationItem alloc] initWithTitle:@"登陆"];
58 [navigationItem setLeftBarButtonItem:cancelItem];
59 [navigationItem setRightBarButtonItem:loginItem];
60 [loginNavigationBar pushNavigationItem:navigationItem animated:YES];
61
62
63
64 [self.view addSubview:loginNavigationBar];
65 [self.view addSubview:userTextField];
66 [self.view addSubview:userLineView];
67 [self.view addSubview:passwordTextField];
68 [self.view addSubview:passwordLineView];
69 [self.view addSubview:regStr];
70 [self.view addSubview:greenStr];

总结起来就是一个UINavigationBar,UINavigationBar上面有两个按钮,两个UITextField。只得说的事这个按钮,IOS7中把按钮的衣服扒掉了,这就直接导致我也要让IOS6的按钮也裸奔:

1 [[UINavigationBar appearance] setBackgroundImage:[UIImage imageWithColor:[UIColor whiteColor] size:CGSizeMake(1, 44)] forBarMetrics:UIBarMetricsDefault];

好了然后就没什么特别的了改改UITextField关联的键盘字体大小颜色什么的,效果图如下:


下面就是硬菜了,QQ音乐的界面UITableView采用的是UITableViewStyleGrouped类型的,但是在IOS6下UITableView有一个讨厌的灰不拉几的背景,我要把背景变为白色,使用如下代码:

1     [tableView setBackgroundColor:[UIColor whiteColor]];
2 [tableView setBackgroundView:nil];

这样UITableView在IOS6中那讨厌的背景就没有了,但是UITableViewCell默认是圆角的很恶心,干掉:

1     UIView *tempView = [[UIView alloc] init];
2 [cell setBackgroundView:tempView];

还要去掉cell点击时的圆角:

1     cell.selectedBackgroundView = [[UIView alloc] initWithFrame:cell.frame];
2 cell.selectedBackgroundView.backgroundColor = [UIColor lightGrayColor];

这里可以不用设置颜色的,而且现在这个颜色挺难看的,我还要继续修改

还有个问题IOS6的UITableViewCell默认不是与屏幕同宽的,需要自定义一个UItableViewCell复写 layoutSubviews
方法,代码如下:

1 - (void) layoutSubviews {
2 [super layoutSubviews];
3 self.backgroundView.frame = CGRectMake(0, 0, 320, 44);
4 self.selectedBackgroundView.frame = CGRectMake(0, 0, 320, 44);
5 }

好了这样初步的适配完了,当然还有细节没有做到,继续学习吧,下面是我的音乐视图控制器的完整代码:


  1 //
2 // MyMusicViewController.m
3 // QQMusic
4 //
5 // Created by 赵 福成 on 14-5-21.
6 // Copyright (c) 2014年 ZhaoFucheng. All rights reserved.
7 //
8
9 #import "MyMusicViewController.h"
10 #import "UIImage+CustomPureColor.h"
11 #import "UIButton+CustomButton.h"
12 #import "LoginViewController.h"
13 #import "CustomTableViewCell.h"
14 #define IOS_7 ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7.0)
15 @interface MyMusicViewController ()
16
17 @end
18
19 @implementation MyMusicViewController
20
21 NSArray *mainScreenCells;
22 NSArray *details;
23 NSArray *icon;
24 NSArray *iconSelected;
25
26 - (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
27 {
28 self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
29 if (self) {
30 // Custom initialization
31
32 self.title = @"我的音乐";
33 }
34 return self;
35 }
36
37 - (void)viewDidLoad
38 {
39 [super viewDidLoad];
40 // Do any additional setup after loading the view.
41
42
43 //我的音乐按钮
44 UIButton *myMusicButton = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 35, 35)];
45 [myMusicButton setImage:[UIImage imageNamed:@"defaultSinger"] forState:UIControlStateNormal];
46 [myMusicButton setImage:[UIImage imageNamed:@"defaultSinger"] forState:UIControlStateHighlighted];
47 // myMusicButton.userInteractionEnabled = NO;
48 myMusicButton.titleLabel.textAlignment = NSTextAlignmentLeft;
49 [myMusicButton addTarget:self action:@selector(login:) forControlEvents:UIControlEventTouchUpInside];
50 UIBarButtonItem *myMusicButtonItem = [[UIBarButtonItem alloc] initWithCustomView:myMusicButton];
51
52 //播放界面按钮
53 UIBarButtonItem *nowPlayingButtonItem = [[UIBarButtonItem alloc] initWithCustomView:[UIButton initNowPlayingButton]];
54 [self.navigationItem setLeftBarButtonItem:myMusicButtonItem];
55 [self.navigationItem setRightBarButtonItem:nowPlayingButtonItem];
56
57 mainScreenCells = [NSArray arrayWithObjects:[NSArray arrayWithObjects:@"全部歌曲", nil],[NSArray arrayWithObjects:@"我喜欢", @"全部歌单", nil],[NSArray arrayWithObjects:@"下载歌曲", @"最近播放", @"iPod歌曲", nil], nil];
58
59 details = [NSArray arrayWithObjects:[NSArray arrayWithObjects:@"0首在本地", nil], [NSArray arrayWithObjects:@"", @"", nil],[NSArray arrayWithObjects:@"0首", @"18首", @"0首", nil], nil];
60
61 icon = [NSArray arrayWithObjects:[NSArray arrayWithObjects:@"allsongs", nil], [NSArray arrayWithObjects:@"cell_like_in_my_music", @"", nil],[NSArray arrayWithObjects:@"down", @"recent_listen_icon", @"ipod", nil], nil];
62
63 iconSelected = [NSArray arrayWithObjects:[NSArray arrayWithObjects:@"allsongsSelected", nil], [NSArray arrayWithObjects:@"cell_like_in_my_music_pressed", @"", nil],[NSArray arrayWithObjects:@"downSelected", @"recent_listen_icon_h", @"ipodSelected", nil], nil];
64
65 UITableView *tableView = [[UITableView alloc] initWithFrame:[[UIScreen mainScreen] bounds] style:UITableViewStyleGrouped];
66 [tableView setDataSource:self];
67 if (!IOS_7) {
68 [tableView setSeparatorStyle:UITableViewCellSeparatorStyleNone];
69 }
70 [tableView setBackgroundColor:[UIColor whiteColor]];
71 [tableView setBackgroundView:nil];
72 [tableView setDelegate:self];
73 [self.view addSubview:tableView];
74
75 }
76
77 - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
78 {
79 return mainScreenCells.count;
80 }
81
82 - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
83 {
84 return [[mainScreenCells objectAtIndex:section] count];
85 }
86
87 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
88 {
89 static NSString *cellId = @"cellId";
90 UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellId];
91 if (cell == nil) {
92 cell = [[CustomTableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:cellId];
93 }
94 NSUInteger rowNo = indexPath.row;
95 NSUInteger colNo = indexPath.section;
96 cell.textLabel.text = [[mainScreenCells objectAtIndex:colNo] objectAtIndex:rowNo];
97 if (!IOS_7) {
98 UIView *line = [[UIView alloc] initWithFrame:CGRectMake(cell.frame.origin.x + 50, cell.frame.size.height, cell.frame.size.width - 20, 0.5)];
99 line.backgroundColor = [UIColor lightGrayColor];
100 [cell.contentView addSubview:line];
101 }
102 NSString *iconStr = (NSString *)[[icon objectAtIndex:colNo] objectAtIndex:rowNo];
103 NSString *iconSelectStr = (NSString *)[[iconSelected objectAtIndex:colNo] objectAtIndex:rowNo];
104 if (iconStr.length == 0 && iconSelectStr.length == 0) {
105 cell.imageView.image = [UIImage imageWithColor:[UIColor clearColor] size:CGSizeMake(50, 56)];
106 cell.imageView.highlightedImage = [UIImage imageWithColor:[UIColor clearColor] size:CGSizeMake(50, 56)];
107 }
108 else
109 {
110 cell.imageView.image = [UIImage imageNamed:iconStr];
111 cell.imageView.highlightedImage = [UIImage imageNamed:iconSelectStr];
112 }
113
114 cell.detailTextLabel.text = [[details objectAtIndex:colNo] objectAtIndex:rowNo];
115 // [cell setAccessoryType:UITableViewCellAccessoryDisclosureIndicator];
116 [cell setAccessoryView:[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"arrow"]]];
117
118 //设置标题和描述背景透明
119 cell.textLabel.backgroundColor = [UIColor clearColor];
120 cell.detailTextLabel.backgroundColor = [UIColor clearColor];
121
122 //去掉cell的圆角
123 UIView *tempView = [[UIView alloc] init];
124 [cell setBackgroundView:tempView];
125
126 //cell点击时的颜色
127 cell.selectedBackgroundView = [[UIView alloc] initWithFrame:cell.frame];
128 cell.selectedBackgroundView.backgroundColor = [UIColor lightGrayColor];
129
130 return cell;
131 }
132
133
134 - (void)tableView:(UITableView *)tableView didHighlightRowAtIndexPath:(NSIndexPath *)indexPath
135 {
136 UITableViewCell *cell = [tableView cellForRowAtIndexPath:indexPath];
137 [cell setAccessoryView:[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"arrow_gedan"]]];
138 }
139
140 - (void)tableView:(UITableView *)tableView didDeselectRowAtIndexPath:(NSIndexPath *)indexPath
141 {
142 UITableViewCell *cell = [tableView cellForRowAtIndexPath:indexPath];
143 [cell setAccessoryView:[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"arrow"]]];
144
145 }
146
147 - (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
148 {
149 return 0.1;
150 }
151
152 - (void)login:(UIButton *)sender
153 {
154 LoginViewController *loginView = [[LoginViewController alloc] init];
155 [self presentViewController:loginView animated:YES completion:^{
156
157 }];
158 }
159
160 - (void)didReceiveMemoryWarning
161 {
162 [super didReceiveMemoryWarning];
163 // Dispose of any resources that can be recreated.
164 }
165
166
167
168 /*
169 #pragma mark - Navigation
170
171 // In a storyboard-based application, you will often want to do a little preparation before navigation
172 - (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
173 {
174 // Get the new view controller using [segue destinationViewController].
175 // Pass the selected object to the new view controller.
176 }
177 */
178
179 @end

再来张效果图:

睡觉去了。。。。。。

时间: 2024-11-02 00:00:42

山寨QQ音乐的布局(二)终于把IOS6的UITableView拍扁了的相关文章

山寨QQ音乐的布局(一)

学了两天IOS趁着还没忘光,巩固一下所学知识想做点东西,由于自己的设计能力有限,所以就山寨一下吧,说到山寨怎么能忘了腾讯呢,今天发现QQ音乐的设计风格是扁平化的,小清新风格,所以就山寨一下它吧.. 由于本屌没有IPhone手机只能用Ipad运行iphone应用看看QQ音乐的效果,我的ipad是ios7的不知道QQ音乐是不是在IOS6上也是这种风格(想来肯定是的,腾讯的设计能力还是挺厉害的,山寨也是需要实力的不是). 下面来真格的.... 首先是层次,据我观察是一个UITabBarControll

swift版QQ音乐播放器(二)

一 完善部分的QQ音乐效果图 二 需要完善点 1 歌曲的切换和暂停播放 2 歌曲当前播放时间和歌曲总时间的更新 3 进度条的处理 4 歌手头像处理 5 头像动画效果 6 歌词的进度显示 8 完善细节 三 添加歌曲展示页面中的动画效果 1 代码书写位置 : 由于展示歌词的控制器的UITableViewController,那么我们可以使用代理方法.当用户拖动tableView的时候,会调用一个方法,在该方法中实现动画效果 2 思路 : 通过拿到第一个cell和最后一个cell来计算中间cell的索

vivo Hi-Fi+QQ音乐 数字音乐市场的一剂良方

据悉,最近风头正劲的手机品牌vivo与QQ音乐继6月30日X7发布会宣布战略合作以来,终于有了大动作:双方达成vivo内置APP的资源共享,并将展开更亲密的合作. 为了将主打的Hi-Fi功能发挥极致,vivo手机内置有Hi-Fi播放器"i音乐",让用户体验真正的高品质Hi-Fi音乐.根据目前了解的资讯看,i音乐将内置QQ音乐的正版曲库,vivo手机用户使用vivo账户登录i音乐,即可使用Hi-Fi播放器畅享海量的正版高保真无损音乐. 配图:vivo与QQ音乐正式开启战略合作 步入版权时

Python Scrapy的QQ音乐爬虫 音乐下载、爬取歌曲信息、歌词、精彩评论

QQ音乐爬虫(with scrapy)/QQ Music Spider 磁力搜索网站2020/01/07更新 https://www.cnblogs.com/cilisousuo/p/12099547.html UPDATE 2019.12.23 已实现对QQ音乐文件的下载,出于版权考虑,不对此部分代码进行公开.此项目仅作为学习交流使用,支持正版,人人有责 项目介绍 在写一个项目的时候需要用到一些音乐的信息,但是在网上找了许久也没找到满意的音乐语料,于是便用scrapy写了一个QQ音乐的爬虫 由

QQ音乐API分析

QQ音乐API分析 官网提供API 说明:此API主要针对移动端直接调用QQ音乐API用,API只能在QQAPP内执行,上线时间尚短. http://y.qq.com/m/api/api.html 分析的API 说明: 根据官网https://y.qq.com/分析的API,经过测试,可以使用,测试demo如下,demo流程 1.首先根据关键字搜索歌曲>获取播放key>获取播放地址播放 https://192.168.60.50:8443/admin/public/music 经分析,也可不用

音乐API之QQ音乐

欢迎大家来到我的博客,这是我在博客园写的第一篇文章,但不会是最后一篇,希望大家多多关注我,支持我哦!正文开始,今天我们要讲的是QQ音乐的API,都是来源于官方的地址,以前我也想写一个,但百度谷歌之后都是一些很久以前的,而今天的是我从QQ音乐客户端抓包而来,希望大家喜欢. 本教程的示例代码为C# WPF,其他语言也可以,最关键的还是API嘛.首先我们需要搜索到音乐,取出他的各类值,才能进行播放http://59.37.96.220/soso/fcgi-bin/client_search_cp?fo

轻仿QQ音乐之音频歌词播放、锁屏歌词-b

先上效果图 歌词播放界面 音乐播放界面 锁屏歌词界面 一. 项目概述 前面内容实在是太基础..只想看知识点的同学可以直接跳到第三部分的干货 项目播放的mp3文件及lrc文件均来自QQ音乐 本文主要主要讲解锁屏歌词的实现,音频.歌词的播放网上资源略多,因此不做重点讲解,项目也是采取最简单的MVC+storyboard方式 项目GitHub地址: https://github.com/PengfeiWang666/WPFMusicPlayer 音乐模型-->WPFMusic /** 图片 */ @p

QQ音乐的各种相关API

QQ音乐的各种相关API 分类: oc2014-01-29 15:34 2676人阅读 评论(2) 收藏 举报 基本上论坛里做在线音乐的都在用百度的API,进来发现百度的API不仅歌曲的质量不可以保证,而且返回信息里面只有URL,没有一些相关的属性信息.所以就想方设法弄到了QQ音乐的API 已经用xCode尝试过并且可行的API:★搜索音乐(歌词)http://shopcgi.qqmusic.qq.com/fcgi-bin/shopsearch.fcg?value=歌曲名&artist=歌手名&a

免上传音乐外链(QQ音乐,酷狗)

我们需要用到的素材 http://tsmusic24.tc.qq.com/ 方法有2种 方法一:使用QQ音乐客户端制作方法 方法二:免下QQ音乐客户端制作方法 方法一:使用QQ音乐客户端制作方法 1.首先 打开qq音乐客户端 查看歌曲信息 2.然后复制id后面的数字 把这些数字复制到http://tsmusic24.tc.qq.com/的后面最后的格式如下图重要:(数字后面需要手动添加.mp3) 然后把这个链接复制到空间就可以了!*********************************