[课堂实践与项目]手机QQ客户端－－1期：框架的搭建（scrollView，pageControl，导航，toolBar的使用）

本文链接：https://blog.youkuaiyun.com/ministarler/article/details/17269991

本文介绍了手机QQ客户端框架的搭建过程，重点涉及滑动视图（ScrollPageViewController）的实现，包括.h和.m文件的内容，以及用户账号和密码属性的声明。文章展示了从启动页面到登录页面，再到主页面的设计思路，帮助读者理解整个APP的结构布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于特殊原因，今天学习进度迟缓。对不起各位客官了～抓紧进度，写下手机qq客户端的框架的搭建吧

1.设计思路：

首先，我们进入APP的时候我们会建立一个滑动视图。最终进入qq登陆页面。我们在登陆页面设置了注册，密码找回视图。最后我们将进入大家都很熟悉的QQ主页面。好了，先来看看我们的效果吧

2.现在我们就先看看所有的视图名称，以便于大家更快的了解。

3.好了，就从我们最开始的滑动试图开始吧（之前做了一个demo，这次可以大展身手啦）

1）一个滑动试图（ScrollPageViewController）就涵盖了好好多东西。先来看看 .h文件

//
//  LCScrollPagesViewController.h
//  手机QQ客户端进度1一前期界面
//
//  Created by lichan on 13-12-10.
//  Copyright (c) 2013年 com.lichan. All rights reserved.
//

#import <UIKit/UIKit.h>



@interface LCScrollPagesViewController : UIViewController<UIScrollViewDelegate>

@property (retain ,nonatomic)UIScrollView *scrollView;
@property (retain ,nonatomic)UIPageControl *pageControl;
@property (retain,nonatomic)NSMutableArray *imagesArray;


@end

如果你看了我之前的demo，就会很明白，scrollview 嵌入了 Imageview和pageControl。我们的视图通过imageArray进行加载的。

2）。m文件

//
//  LCScrollPagesViewController.m
//  手机QQ客户端进度1一前期界面
//
//  Created by lichan on 13-12-10.
//  Copyright (c) 2013年 com.lichan. All rights reserved.
//

#import "LCScrollPagesViewController.h"

#import "LCLoginViewController.h"

@interface LCScrollPagesViewController ()

@end

@implementation LCScrollPagesViewController

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
        // Custom initialization
    }
    return self;
}

- (void)viewDidLoad
{
    [super viewDidLoad];
    //设定scrollView,pageControl位置
    self.scrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, 320, 460)];
    self.pageControl = [[UIPageControl alloc]initWithFrame:CGRectMake(0, 458, 320, 20)];
    
    self.imagesArray = [[NSMutableArray alloc]initWithObjects:[UIImage imageNamed:@"1.png"],[UIImage imageNamed:@"2.png"], nil];
    
    [self.view addSubview:self.scrollView];
    [self.view addSubview:self.pageControl];
    self.view.backgroundColor = [UIColor orangeColor];
    
    [self setUpPages];
   //由于我们没有定义xib文件，所以我就自己手动代码的方式定义了位置什么的，这个不是重点。～ 
	// Do any additional setup after loading the view.
}

#pragma mark 数据加载并设置尺寸
 - (void)setUpPages
{
    self.scrollView.delegate = self;／／我们使用了当 scrollVIew结束的时候调用协议方法来更改pageControl的pages。

    self.scrollView.backgroundColor = [UIColor blueColor];
    [self.scrollView setUserInteractionEnabled:YES];//这一点是很重要的，因为如果不设置为用户可以触摸响应，我们的拖动都是没效果的。特别是我们在代码建立view的时候，更应该注意这一点。
    NSUInteger pages = 0;
    int originX = 0;//计算我们的scrollVIew中的image的width的总长度。
    
    for (UIImage *image in self.imagesArray) {
        UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectZero];
        
        imageView.backgroundColor = [UIColor colorWithRed:0.6f green:0.6f blue:0.6f alpha:0.6f];
        
        imageView.image = image;
        CGRect rect = self.scrollView.frame;
        
        rect.origin.x = originX;
        rect.origin.y = 0;
        
        rect.size.width = self.scrollView.frame.size.width;
        rect.size.height = self.scrollView.frame.size.height;
        
        imageView.frame =rect;
        imageView.contentMode = UIViewContentModeScaleAspectFill;
        
        [self.scrollView addSubview:imageView];
        
        originX += self.scrollView.frame.size.width;
        
        pages++;
        
        if ([image isEqual:[self.imagesArray lastObject]])
        {
            UIButton *enterButton = [[UIButton alloc]initWithFrame:CGRectMake(self.scrollView.frame.size.width - 120, self.scrollView.frame.size.height - 40, 120, 40)];
            enterButton.backgroundColor = [UIColor orangeColor];
            [enterButton setTitle:@"进入应用体验" forState:UIControlStateNormal];
            //为我们的滑动视图寻找出口，定义的button。记住user的触摸响应哦
            
            [enterButton addTarget:self action:@selector(buttonPressedToLogin:) forControlEvents:UIControlEventTouchUpInside];
            
            [enterButton setTitleColor:[UIColor blueColor] forState:UIControlStateHighlighted];
            [imageView setUserInteractionEnabled:YES];
            [imageView addSubview:enterButton];
  
        }
        
        
        
        
    }
    
    [self.pageControl addTarget:self action:@selector(changePage:) forControlEvents:UIControlEventValueChanged];
    
    self.pageControl.numberOfPages = pages;
    
    self.pageControl.currentPage = 0;
    
    self.pageControl.tag = 110;
    
    [self.scrollView setContentSize:CGSizeMake(originX, self.scrollView.bounds.size.height)];

}

#pragma mark pageControl 改变方法
- (IBAction)changePage:(id)sender  
{
    CGRect rect = self.scrollView.frame;
    rect.origin.x = self.pageControl.currentPage *self.scrollView.frame.size.width;
    rect.origin.y = 0;
    
    [self.scrollView scrollRectToVisible:rect animated:YES];
    

}


#pragma mark scrollView 委托 method
- (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView
{
    CGFloat pageWidth = self.scrollView.frame.size.width;
    
    int page = floor((scrollView.contentOffset.x - pageWidth/2)/pageWidth) +1;
    
    self.pageControl.currentPage = page;

}


#pragma mark buttonPressed To the LCLoginViewController
- (IBAction)buttonPressedToLogin:(id)sender
{
    LCLoginViewController *loginController = [[LCLoginViewController alloc]init];
    //通过presentViewController 显示loginview
    [self presentViewController:loginController animated:YES completion:nil];
  
}



- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

4.现在看看我们的登陆视图。

1）先看看。h文件，我只是声明了用户帐号和密码的属性，因为其他的属性，应该不用外露

//
//  LCLoginViewController.h
//  手机QQ客户端进度1一前期界面
//
//  Created by lichan on 13-12-10.
//  Copyright (c) 2013年 com.lichan. All rights reserved.
//

#import <UIKit/UIKit.h>

@class LCUserMessageModel;

@interface LCLoginViewController : UIViewController

@property (strong,nonatomic)UITextField *userName;
@property (strong,nonatomic)UITextField *password;

@property (strong,nonatomic)LCUserMessageModel *userModel;

@end

2）.m文件，

//
//  LCLoginViewController.m
//  手机QQ客户端进度1一前期界面
//
//  Created by lichan on 13-12-10.
//  Copyright (c) 2013年 com.lichan. All rights reserved.
//

#import "LCLoginViewController.h"

#import "LCUserMainViewController.h"

#import "LCResginViewController.h"

#import "LCUserMessageModel.h"

@interface LCLoginViewController ()

@property (strong,nonatomic)UILabel *userNameLabel;
@property (strong,nonatomic)UILabel *passwordLabel;

@property (strong,nonatomic)UIButton *resignButton;
@property (strong,nonatomic)UIButton *forPasswordButton;

@end

@implementation LCLoginViewController

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
        // Custom initialization
    }
    return self;
}

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    UIImageView *imageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"2.png"]];
    
    [self.view setUserInteractionEnabled:YES];
    
    [self.view addSubview:imageView];
    
    [imageView setUserInteractionEnabled:YES];
    
    
    _userNameLabel = [[UILabel alloc]initWithFrame:CGRectMake(50, 340, 40, 20)];
    _passwordLabel = [[UILabel alloc]initWithFrame:CGRectMake(50, 370, 40, 20)];
    
    [_userNameLabel setText:@"QQ:"];
    self.userNameLabel.textColor = [UIColor blackColor];
    
    _resignButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    _resignButton.frame = CGRectMake(220, 340, 80, 20);
    //[_resignButton sizeToFit];
    [_resignButton setTitle:@"注册" forState:UIControlStateNormal];
    [_resignButton setTitleColor:[UIColor greenColor] forState:UIControlStateNormal];
    
    [_resignButton addTarget:self action:@selector(resignInButtonPressed:) forControlEvents:UIControlEventTouchUpInside];
    
    
    [_passwordLabel setText:@"密码:"];
    self.passwordLabel.textColor = [UIColor blackColor];
    
    _forPasswordButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    _forPasswordButton.frame = CGRectMake(220, 370, 80, 20);
    //[_forPasswordButton sizeToFit];
    [_forPasswordButton setTitle:@"密码找回" forState:UIControlStateNormal];
    [_forPasswordButton setTitleColor:[UIColor greenColor] forState:UIControlStateNormal];
    
    
    self.userName = [[UITextField alloc]initWithFrame:CGRectMake(90, 340, 120, 20)];
    _userName.backgroundColor = [UIColor orangeColor];
    
    [self.userName addTarget:self action:@selector(textFieldDoneEditing:) forControlEvents:UIControlEventEditingDidEndOnExit];
    
    self.password = [[UITextField alloc]initWithFrame:CGRectMake(90, 370, 120, 20)];
     _password.backgroundColor = [UIColor orangeColor];
     [self.password addTarget:self action:@selector(textFieldDoneEditing:) forControlEvents:UIControlEventEditingDidEndOnExit];
    
    UIButton *loginInButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    loginInButton.frame = CGRectMake(120, 420, 50, 40);
    [loginInButton setTitle:@"登录" forState:UIControlStateNormal];
    //[loginInButton.titleLabel setFont:[UIFont boldSystemFontOfSize:30]];
    [loginInButton setTitleColor:[UIColor orangeColor] forState:UIControlStateNormal];
    
    [loginInButton addTarget:self action:@selector(buttonPressedToMainView:) forControlEvents:UIControlEventTouchUpInside];
    
    [imageView addSubview:self.userNameLabel];
    [imageView addSubview:self.passwordLabel];
    [imageView addSubview:self.userName];
    [imageView addSubview:self.password];
    [imageView addSubview:loginInButton];
    [imageView addSubview:self.resignButton];
    [imageView addSubview:self.forPasswordButton];
    
    
	// Do any additional setup after loading the view.
}
//这个方法特别注意，我在登陆页面也写了关于用户注册之后登陆的账号密码监测，下一篇我会介绍用户注册页面，同时会贴出这里的部分代码。
#pragma mark buttonPressed To the LCLoginViewController
- (IBAction)buttonPressedToMainView:(id)sender
{
    
    self.userModel = [[LCUserMessageModel alloc]init];
    
    NSString *path = [NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSAllDomainsMask, YES) objectAtIndex:0];
    NSString *userFilePath = [path stringByAppendingPathComponent:self.userName.text];
    NSLog(@"USEr 读取的路径 %@",userFilePath);
    
    NSMutableData *data = [NSMutableData dataWithContentsOfFile:userFilePath];
    
    self.userModel = [NSKeyedUnarchiver unarchiveObjectWithData:data];
    
    if ([self.userModel.userMobilephineNumber isEqualToString:self.userName.text] &&[self.userModel.userPassword isEqualToString:self.password.text]) {
        LCUserMainViewController *maimController = [[LCUserMainViewController alloc]init];
        //通过presentViewController 显示loginview
        
        [self presentViewController:maimController animated:YES completion:nil];
    }
    else
    {
        UIAlertView *alertView = [[UIAlertView alloc]initWithTitle:@"错误" message:@"你的帐号或者密码错误，请重新输入～" delegate:self cancelButtonTitle:@"我知道了" otherButtonTitles:nil];
        
        [alertView show];
        
        
    }

    

 
}

#pragma mark resignUserMessageVC

- (IBAction)resignInButtonPressed:(id)sender
{
    
  
        LCResginViewController *resignVC = [[LCResginViewController alloc]init];
        
        [self presentViewController:resignVC animated:YES completion:nil];
  

}
//键盘消失的方式，我就不赘述了吧

-(IBAction)textFieldDoneEditing:(id)sender{ [sender resignFirstResponder];}@end

5.好了，终于可进入我们的QQ主界面啦～～

1）。h文件，由于我使用了TabBarCOntroller，所以难免会多一些视图控制器在里面'

//
//  LCUserMainViewController.h
//  手机QQ客户端进度1一前期界面
//
//  Created by lichan on 13-12-10.
//  Copyright (c) 2013年 com.lichan. All rights reserved.
//

#import <UIKit/UIKit.h>

@class LCMessageViewController,LCFriendsViewController,LCZoneViewController,LCSetupViewController;

@interface LCUserMainViewController : UITabBarController<UITabBarDelegate>

@property (strong,nonatomic) LCMessageViewController *messageVC;
@property (strong,nonatomic) LCFriendsViewController *friendsVC;
@property (strong,nonatomic) LCZoneViewController *zoneVC;
@property (strong,nonatomic) LCSetupViewController *setupVC;



@end

2..m文件，有些难点和容易出错的地方，我会在后面和注解中详细说明的

//
//  LCUserMainViewController.m
//  手机QQ客户端进度1一前期界面
//
//  Created by lichan on 13-12-10.
//  Copyright (c) 2013年 com.lichan. All rights reserved.
//

#import "LCUserMainViewController.h"

#import "LCUserMainViewController.h"

#import "LCMessageViewController.h"
#import "LCFriendsViewController.h"
#import "LCZoneViewController.h"
#import "LCSetupViewController.h"

@interface LCUserMainViewController ()
{
UITabBar *tabBar;
}


@end

@implementation LCUserMainViewController

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {

        
        self.tabBarController.tabBar.backgroundImage = [UIImage imageNamed:@"bg_buttom.jpg"];
        
        [[self.tabBarController.viewControllers objectAtIndex:0] setTitle:@"消息"];
        [[self.tabBarController.viewControllers objectAtIndex:1] setTitle:@"联系人"];
        [[self.tabBarController.viewControllers objectAtIndex:2] setTitle:@"空间"];
        [[self.tabBarController.viewControllers objectAtIndex:3] setTitle:@"设置"];
        
        [[self.tabBarController.tabBar.items objectAtIndex:0]setImage:[UIImage imageNamed:@"qq.png"] ];
        [[self.tabBarController.tabBar.items objectAtIndex:1]setImage:[UIImage imageNamed:@"friends.png"]];
        [[self.tabBarController.tabBar.items objectAtIndex:2]setImage:[UIImage imageNamed:@"zone.png"] ];
        [[self.tabBarController.tabBar.items objectAtIndex:3]setImage:[UIImage imageNamed:@"setup.png"]];
        
        //这里多了一些代码，细心的你也许会发现这些代码是多余的。是的，我在书写的时候，调试了很久都不能显示上述这些视图。有没有大神，帮忙看看～跪求不显示的原因。
       // [self.view addSubview:self.tabBarController.view];

        // Custom initialization
    }
    return self;
}

- (void)viewDidLoad
{
    [super viewDidLoad];
    
   self.messageVC = [[LCMessageViewController alloc]init];
    _messageVC.title = @"消息";
    _messageVC.tabBarItem = [[UITabBarItem alloc]initWithTitle:@"消息" image:[UIImage  imageNamed:@"qq.png"] tag:1];
    
    UINavigationController *NavMessageVC = [[UINavigationController alloc]initWithRootViewController:self.messageVC];
    
    self.friendsVC = [[LCFriendsViewController alloc]init];
    _friendsVC.title = @"联系人";
    _friendsVC.tabBarItem = [[UITabBarItem alloc]initWithTitle:@"联系人" image:[UIImage  imageNamed:@"friends.png"] tag:2];
    UINavigationController *NavFriendsVC = [[UINavigationController alloc]initWithRootViewController:self.friendsVC];
    
    self.zoneVC = [[LCZoneViewController alloc]init];
    _zoneVC.tabBarItem = [[UITabBarItem alloc]initWithTitle:@"动态" image:[UIImage  imageNamed:@"zone.png"] tag:3];
    _zoneVC.title = @"动态";
    UINavigationController *NavZoneVC = [[UINavigationController alloc]initWithRootViewController:self.zoneVC];
    
    self.setupVC = [[LCSetupViewController alloc]init];
   
    _setupVC.tabBarItem = [[UITabBarItem alloc]initWithTitle:@"设置" image:[UIImage  imageNamed:@"setup.png"] tag:4];
     _setupVC.title = @"设置";
    UINavigationController *NavSetupVC = [[UINavigationController alloc]initWithRootViewController:self.setupVC];
    
    NSArray *array = [NSArray arrayWithObjects:NavMessageVC,NavFriendsVC,NavZoneVC,NavSetupVC, nil];
    
    self.viewControllers = array;
//    
//    UITabBarController *tabBarController = [[UITabBarController alloc]init];
//    
//    tabBarController.viewControllers = array;
//    
//    [self.view addSubview:tabBarController.view];
   //这里应该说明的是 我们tabbar里面的所有视图都是继承viewController的。之前我写的时候继承的是 导航 vc，结果运行的时候老是报错，push 。。。。的，我详细查看了代码，才发现我们的navigation是不能集中放在array中的。

 
    
    

}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

这就是我们的框架的全部了，至于主页面的 cell的绘制等，我会在后几天完成。