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

时间:2023-03-08 16:38:56
山寨QQ音乐的布局(二)终于把IOS6的UITableView拍扁了

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


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

     UIColor *normalColor = [UIColor colorWithRed:/255.0 green:/255.0 blue:/255.0 alpha:]; //按钮默认状态的绿色
UIColor *selectedColor = [UIColor colorWithRed:/255.0 green:/255.0 blue:/255.0 alpha:]; //按钮点击状态的淡绿色
CGFloat navigationY = ;
if (IOS_7) {
navigationY = ;
} UINavigationBar *loginNavigationBar = [[UINavigationBar alloc] initWithFrame:CGRectMake(, navigationY, , )]; //UINavigationBar的位置
UIButton *cancelButton = [UIButton buttonWithType:UIButtonTypeSystem];
[cancelButton setFrame:CGRectMake(, , , )];
[cancelButton setTitle:@"取消" forState:UIControlStateNormal];
[cancelButton setTitleColor:normalColor forState:UIControlStateNormal];
[[cancelButton titleLabel] setFont:[UIFont systemFontOfSize:]];
[cancelButton setTitleColor:selectedColor forState:UIControlStateHighlighted];
[cancelButton addTarget:self action:@selector(dismissView) forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem *cancelItem = [[UIBarButtonItem alloc] initWithCustomView:cancelButton]; //初始化取消按钮 UIButton *loginButton = [UIButton buttonWithType:UIButtonTypeSystem];
[loginButton setFrame:CGRectMake(, , , )];
[loginButton setTitle:@"登陆" forState:UIControlStateNormal];
[loginButton setTitleColor:normalColor forState:UIControlStateNormal];
[[loginButton titleLabel] setFont:[UIFont systemFontOfSize:]];
[loginButton setTitleColor:selectedColor forState:UIControlStateHighlighted];
[loginButton addTarget:self action:@selector(loginAction) forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem *loginItem = [[UIBarButtonItem alloc] initWithCustomView:loginButton]; //初始化登陆按钮 UIImage *image = [UIImage imageNamed:@"input_login_line"]; UIImageView *userLineView = [[UIImageView alloc] initWithImage:image];
UIImageView *passwordLineView = [[UIImageView alloc] initWithImage:image]; //输入框下面的绿线 UITextField *userTextField = [[UITextField alloc] initWithFrame:CGRectMake(, +navigationY, , )];
[userTextField setPlaceholder:@"QQ号/手机/邮箱"];
[userTextField setClearButtonMode:UITextFieldViewModeWhileEditing];
[userTextField setKeyboardType:UIKeyboardTypeNumbersAndPunctuation];
[userTextField setReturnKeyType:UIReturnKeyNext];
[userLineView setFrame:CGRectMake(, +navigationY, , )]; UITextField *passwordTextField = [[UITextField alloc] initWithFrame:CGRectMake(, +navigationY, , )];
[passwordTextField setPlaceholder:@"密码"];
[passwordTextField setClearButtonMode:UITextFieldViewModeWhileEditing];
[passwordTextField setKeyboardType:UIKeyboardTypeASCIICapable];
[passwordTextField setReturnKeyType:UIReturnKeyDone];
[passwordLineView setFrame:CGRectMake(, +navigationY, , )]; UILabel *regStr = [[UILabel alloc] initWithFrame:CGRectMake(, +navigationY, , )];
[regStr setText:@"没有账号?点击这里"];
[regStr setFont:[UIFont systemFontOfSize:]];
[regStr setTextColor:[UIColor darkGrayColor]];
UILabel *greenStr = [[UILabel alloc] initWithFrame:CGRectMake(, +navigationY, , )];
[greenStr setText:@"快速注册"];
[greenStr setFont:[UIFont systemFontOfSize:]];
[greenStr setTextColor:normalColor]; UINavigationItem *navigationItem = [[UINavigationItem alloc] initWithTitle:@"登陆"];
[navigationItem setLeftBarButtonItem:cancelItem];
[navigationItem setRightBarButtonItem:loginItem];
[loginNavigationBar pushNavigationItem:navigationItem animated:YES]; [self.view addSubview:loginNavigationBar];
[self.view addSubview:userTextField];
[self.view addSubview:userLineView];
[self.view addSubview:passwordTextField];
[self.view addSubview:passwordLineView];
[self.view addSubview:regStr];
[self.view addSubview:greenStr];

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

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

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

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


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

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

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

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

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

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

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

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

 - (void) layoutSubviews {
[super layoutSubviews];
self.backgroundView.frame = CGRectMake(, , , );
self.selectedBackgroundView.frame = CGRectMake(, , , );
}

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

 //
// MyMusicViewController.m
// QQMusic
//
// Created by 赵 福成 on 14-5-21.
// Copyright (c) 2014年 ZhaoFucheng. All rights reserved.
// #import "MyMusicViewController.h"
#import "UIImage+CustomPureColor.h"
#import "UIButton+CustomButton.h"
#import "LoginViewController.h"
#import "CustomTableViewCell.h"
#define IOS_7 ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7.0)
@interface MyMusicViewController () @end @implementation MyMusicViewController NSArray *mainScreenCells;
NSArray *details;
NSArray *icon;
NSArray *iconSelected; - (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
if (self) {
// Custom initialization self.title = @"我的音乐";
}
return self;
} - (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view. //我的音乐按钮
UIButton *myMusicButton = [[UIButton alloc] initWithFrame:CGRectMake(, , , )];
[myMusicButton setImage:[UIImage imageNamed:@"defaultSinger"] forState:UIControlStateNormal];
[myMusicButton setImage:[UIImage imageNamed:@"defaultSinger"] forState:UIControlStateHighlighted];
// myMusicButton.userInteractionEnabled = NO;
myMusicButton.titleLabel.textAlignment = NSTextAlignmentLeft;
[myMusicButton addTarget:self action:@selector(login:) forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem *myMusicButtonItem = [[UIBarButtonItem alloc] initWithCustomView:myMusicButton]; //播放界面按钮
UIBarButtonItem *nowPlayingButtonItem = [[UIBarButtonItem alloc] initWithCustomView:[UIButton initNowPlayingButton]];
[self.navigationItem setLeftBarButtonItem:myMusicButtonItem];
[self.navigationItem setRightBarButtonItem:nowPlayingButtonItem]; mainScreenCells = [NSArray arrayWithObjects:[NSArray arrayWithObjects:@"全部歌曲", nil],[NSArray arrayWithObjects:@"我喜欢", @"全部歌单", nil],[NSArray arrayWithObjects:@"下载歌曲", @"最近播放", @"iPod歌曲", nil], nil]; details = [NSArray arrayWithObjects:[NSArray arrayWithObjects:@"0首在本地", nil], [NSArray arrayWithObjects:@"", @"", nil],[NSArray arrayWithObjects:@"0首", @"18首", @"0首", nil], nil]; icon = [NSArray arrayWithObjects:[NSArray arrayWithObjects:@"allsongs", nil], [NSArray arrayWithObjects:@"cell_like_in_my_music", @"", nil],[NSArray arrayWithObjects:@"down", @"recent_listen_icon", @"ipod", nil], nil]; 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]; UITableView *tableView = [[UITableView alloc] initWithFrame:[[UIScreen mainScreen] bounds] style:UITableViewStyleGrouped];
[tableView setDataSource:self];
if (!IOS_7) {
[tableView setSeparatorStyle:UITableViewCellSeparatorStyleNone];
}
[tableView setBackgroundColor:[UIColor whiteColor]];
[tableView setBackgroundView:nil];
[tableView setDelegate:self];
[self.view addSubview:tableView]; } - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
return mainScreenCells.count;
} - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return [[mainScreenCells objectAtIndex:section] count];
} - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *cellId = @"cellId";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellId];
if (cell == nil) {
cell = [[CustomTableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:cellId];
}
NSUInteger rowNo = indexPath.row;
NSUInteger colNo = indexPath.section;
cell.textLabel.text = [[mainScreenCells objectAtIndex:colNo] objectAtIndex:rowNo];
if (!IOS_7) {
UIView *line = [[UIView alloc] initWithFrame:CGRectMake(cell.frame.origin.x + , cell.frame.size.height, cell.frame.size.width - , 0.5)];
line.backgroundColor = [UIColor lightGrayColor];
[cell.contentView addSubview:line];
}
NSString *iconStr = (NSString *)[[icon objectAtIndex:colNo] objectAtIndex:rowNo];
NSString *iconSelectStr = (NSString *)[[iconSelected objectAtIndex:colNo] objectAtIndex:rowNo];
if (iconStr.length == && iconSelectStr.length == ) {
cell.imageView.image = [UIImage imageWithColor:[UIColor clearColor] size:CGSizeMake(, )];
cell.imageView.highlightedImage = [UIImage imageWithColor:[UIColor clearColor] size:CGSizeMake(, )];
}
else
{
cell.imageView.image = [UIImage imageNamed:iconStr];
cell.imageView.highlightedImage = [UIImage imageNamed:iconSelectStr];
} cell.detailTextLabel.text = [[details objectAtIndex:colNo] objectAtIndex:rowNo];
// [cell setAccessoryType:UITableViewCellAccessoryDisclosureIndicator];
[cell setAccessoryView:[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"arrow"]]]; //设置标题和描述背景透明
cell.textLabel.backgroundColor = [UIColor clearColor];
cell.detailTextLabel.backgroundColor = [UIColor clearColor]; //去掉cell的圆角
UIView *tempView = [[UIView alloc] init];
[cell setBackgroundView:tempView]; //cell点击时的颜色
cell.selectedBackgroundView = [[UIView alloc] initWithFrame:cell.frame];
cell.selectedBackgroundView.backgroundColor = [UIColor lightGrayColor]; return cell;
} - (void)tableView:(UITableView *)tableView didHighlightRowAtIndexPath:(NSIndexPath *)indexPath
{
UITableViewCell *cell = [tableView cellForRowAtIndexPath:indexPath];
[cell setAccessoryView:[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"arrow_gedan"]]];
} - (void)tableView:(UITableView *)tableView didDeselectRowAtIndexPath:(NSIndexPath *)indexPath
{
UITableViewCell *cell = [tableView cellForRowAtIndexPath:indexPath];
[cell setAccessoryView:[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"arrow"]]]; } - (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
return 0.1;
} - (void)login:(UIButton *)sender
{
LoginViewController *loginView = [[LoginViewController alloc] init];
[self presentViewController:loginView animated:YES completion:^{ }];
} - (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
} /*
#pragma mark - Navigation // In a storyboard-based application, you will often want to do a little preparation before navigation
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
{
// Get the new view controller using [segue destinationViewController].
// Pass the selected object to the new view controller.
}
*/ @end

再来张效果图:

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

睡觉去了。。。。。。