zoukankan      html  css  js  c++  java
  • 山寨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关联的键盘字体大小颜色什么的,效果图如下:

    IOS6中的登陆界面IOS7中的登陆界面


    下面就是硬菜了,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

    再来张效果图:

    IOS6中我的音乐界面IOS7中我的音乐界面

    睡觉去了。。。。。。

  • 相关阅读:
    Python合集之Python循环语句(二)
    io流2
    io流
    集合工具类
    泛型
    Map
    VSCode_Extensions
    C++ in VSCode
    C# 私有字段前缀 _ 的设置(VS2019, .editorconfig)
    dotnet 跨平台编译发布
  • 原文地址:https://www.cnblogs.com/zhaofucheng1129/p/3746870.html
Copyright © 2011-2022 走看看