美圖秀秀首頁界面設計（一）

　　本文設計了美圖秀秀官方版的界面，從中可以學到自定義View，自動布局，啟動界面設置。代碼有點凌亂，我在一步步改善。【聲明：本博客只能用作學習用途，不得用於商業用途，圖片資源均來自官方，產生糾紛，本人不負責】

項目中的圖片資源均來自官方版的下載包中的圖片（原始圖片），這樣我們可以通過模仿成功案例來學習iOS開發。[剛更新了項目下載地址，如需下載請滑到最下面點擊項目下載.關於屏幕適配已更新]

　　項目結構及介紹

　　

category組中存放對類的擴展

Utiles中存放一些常用的代碼

controller中存放viewController文件

network存放訪問網絡的工具類

3rd lib存放項目中使用到的第三方類庫

views存放自定義視圖

models存放數據類

images存放項目中的圖片資源

 

　　應用程序圖標設置

使用XCODE打開Images.xcassets文件，編輯AppIcon，如下圖

具體圖標要求請參見蘋果官方文檔

這樣我們就設置了應用程序在桌面中的顯示圖標

 

　　啟動界面設置

　　

 

　　1.使用XCODE打開Images.xcassets文件，編輯LaunchImage，拖放具體圖片資源。具體圖標要求請參見蘋果官方文檔

　　2.修改AppDelegate

　　

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    // Override point for customization after application launch.
    [NSThread sleepForTimeInterval:10.0];
    
//    [application setStatusBarHidden:YES withAnimation:UIStatusBarAnimationFade];
    
    return YES;
}

 

 在 application: didFinishLaunchingWithOptions:方法中添加

    [NSThread sleepForTimeInterval:10.0];

 10.0說明啟動界面將持續10秒，一般我們設置為3.0就ok。可以根據你的需求來設置啟動界面的時常。

　　首頁界面設計

　　    

我將首頁拆分為幾個獨立的視圖，分別為

　　               

 

圖一為簡單的UIImageView對象 ，圖二為自定義視圖。圖三為UIScrollView對象中包含8個自定義按鈕，圖四為簡單的button，圖五為簡單的pageControl,圖六為簡單的button。適應多種分辨率。下面是Autolayout實現

 [self.view addConstraints:@[
                                [NSLayoutConstraint constraintWithItem:self.topView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:0],
                                [NSLayoutConstraint constraintWithItem:self.topView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-6],
                                [NSLayoutConstraint constraintWithItem:self.topView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:51],
                                [NSLayoutConstraint constraintWithItem:self.topView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:61],
                                
                                [NSLayoutConstraint constraintWithItem:btnSetting attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1.0 constant:-8],
                                [NSLayoutConstraint constraintWithItem:btnSetting attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-6],
                                [NSLayoutConstraint constraintWithItem:btnSetting attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:39],
                                [NSLayoutConstraint constraintWithItem:btnSetting attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:btnSetting attribute:NSLayoutAttributeWidth multiplier:1.0 constant:0],
                                
                                [NSLayoutConstraint constraintWithItem:self.scrolleView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:image attribute:NSLayoutAttributeBottom multiplier:1.0 constant:0],
                                [NSLayoutConstraint constraintWithItem:self.scrolleView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:0],
                                [NSLayoutConstraint constraintWithItem:self.scrolleView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:WIDTH],
                                [NSLayoutConstraint constraintWithItem:self.scrolleView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:HEIGHT - 47 - 61]
                                ]];

 

 

按鈕的分頁顯示實現

    for (int i = 0; i < 8; i++) {
        NSInteger row  = i % 2;
        NSInteger col  = i / 2;
        NSInteger page = i / 6;

        if (col == 3) {
            col = 0;
        }
    
        btnHome = [FWButton buttonWithType:UIButtonTypeCustom];
        [btnHome setTitle:[textArr objectAtIndex:i] forState:UIControlStateNormal];
        [btnHome setImage:[UIImage imageNamed:[imageViewImageArr objectAtIndex:i]] forState:UIControlStateNormal];
        [btnHome setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:[imageViewBackImageArr objectAtIndex:i]]]];
        [btnHome setBackgroundColorHighlighted:[UIColor colorWithPatternImage:[UIImage imageNamed:[highLightedBackImageArr objectAtIndex:i]]]];
//        btnHome.frame =CGRectMake([(NSString *)[xArr objectAtIndex:i] floatValue], [(NSString *)[yArr objectAtIndex:i] floatValue], kWidth, kheight);
        btnHome.frame = CGRectMake(row * (kWidth + kPadding) + page * WIDTH + startX, col * (kHeight + kPadding) + startY, kWidth, kHeight);
        [btnHome.titleLabel setFont:[UIFont systemFontOfSize:14]];

        [btnHome addTarget:self action:@selector(btnClicked:) forControlEvents:UIControlEventTouchUpInside];
        btnHome.topPading = 0.5;
        
        [self.scrolleView addSubview:btnHome];
        self.scrolleView.contentSize = CGSizeMake(WIDTH * 2, kHeight * 3 + kPadding * 2);
    }

 

 

主界面實現

//
//  ViewController.m
//  FWMeituApp
//
//  Created by ForrestWoo on 15-9-16.
//  Copyright (c) 2015年 ForrestWoo co,.ltd. All rights reserved.
//375*667

#define kLeftOffset  42
#define kRightOffset 42
#define kPadding     10
#define kWidth       103
#define kHeight      105


#import "ViewController.h"
#import "FWTopView.h"
#import "FWButton.h"
#import "UIImage+ImageScale.h"

@interface ViewController ()
@property (nonatomic, strong) FWTopView *topView;
@property (nonatomic, assign)   CGRect     leftArrowFrame;
@property (nonatomic, assign)   CGRect     rightArrowFrame;
@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    
    self.navigationController.delegate = self;
    
    UIImageView *backImage = [[UIImageView alloc] initWithFrame:self.view.bounds];
    backImage.image = [UIImage imageNamed:@"[e-mail]"];
    [self.view addSubview:backImage];
    
    self.scrolleView = [[UIScrollView alloc] init];
    self.scrolleView.translatesAutoresizingMaskIntoConstraints = NO;
    self.scrolleView.pagingEnabled = YES;
    self.scrolleView.showsHorizontalScrollIndicator = NO;
    self.scrolleView.showsVerticalScrollIndicator = NO;
    self.scrolleView.delegate = self;
    
    [self.view addSubview:self.scrolleView];
    
    UIImageView *image = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"bg_topview_topback_a.png"]];
    image.frame = CGRectMake(15, 15, 226.5, 51.5);
    [self.view addSubview:image];
    
    self.rightArrowFrame = CGRectMake(WIDTH - 30, HEIGHT / 2 - 50 / 2, 30, 50);
    self.leftArrowFrame = CGRectMake(5, HEIGHT / 2 - 50 / 2, 30, 50);
    
    btnArrow = [UIButton buttonWithType:UIButtonTypeCustom];
    
    btnArrow.frame = self.rightArrowFrame;
    [btnArrow setImage:[UIImage imageNamed:@"[e-mail]"] forState:UIControlStateNormal];
    [btnArrow setImage:[UIImage imageNamed:@"[e-mail]"] forState:UIControlStateHighlighted];
    [btnArrow addTarget:self action:@selector(btnArrowClicked:) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:btnArrow];
    
    //width = 51,height = 61.
    self.topView = [[FWTopView alloc] init];
    [self.view addSubview:self.topView];
    self.topView.translatesAutoresizingMaskIntoConstraints = NO;
    
    //width,height = 39
    UIButton *btnSetting = [UIButton buttonWithType:UIButtonTypeCustom];
    //    btnSetting.frame = CGRectMake(330, 620, 39, 39);
    [btnSetting setImage:[UIImage imageNamed:@"[e-mail]"] forState:UIControlStateNormal];
    [self.view addSubview:btnSetting];
    btnSetting.translatesAutoresizingMaskIntoConstraints = NO;
    
    [self.view addConstraints:@[
                                [NSLayoutConstraint constraintWithItem:self.topView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:0],
                                [NSLayoutConstraint constraintWithItem:self.topView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-6],
                                [NSLayoutConstraint constraintWithItem:self.topView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:51],
                                [NSLayoutConstraint constraintWithItem:self.topView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:61],
                                
                                [NSLayoutConstraint constraintWithItem:btnSetting attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1.0 constant:-8],
                                [NSLayoutConstraint constraintWithItem:btnSetting attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-6],
                                [NSLayoutConstraint constraintWithItem:btnSetting attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:39],
                                [NSLayoutConstraint constraintWithItem:btnSetting attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:btnSetting attribute:NSLayoutAttributeWidth multiplier:1.0 constant:0],
                                
                                [NSLayoutConstraint constraintWithItem:self.scrolleView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:image attribute:NSLayoutAttributeBottom multiplier:1.0 constant:0],
                                [NSLayoutConstraint constraintWithItem:self.scrolleView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:0],
                                [NSLayoutConstraint constraintWithItem:self.scrolleView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:WIDTH],
                                [NSLayoutConstraint constraintWithItem:self.scrolleView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:HEIGHT - 47 - 61]
                                ]];
    [self.topView initView:@"20"];
    self.pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake((WIDTH - 50) / 2, HEIGHT - 39 , 50, 10)];
    self.pageControl.numberOfPages = 2;
    [self.view addSubview:self.pageControl];
    [self setupScrollView];
}

- (void)viewWillAppear:(BOOL)animated
{
    [[UIApplication sharedApplication] setStatusBarHidden:YES];
}

//
- (void)hanlderAction:(NSTimer *)timer
{
    //    if (btnArrow.image.] == UIControlStateHighlighted)
    //    {
    //    }
}

- (void)btnArrowClicked:(id)sender
{
    if (self.pageControl.currentPage ) {
        self.pageControl.currentPage = 0;
        [self toLeftArrow];
    }else{
        self.pageControl.currentPage = 1;
        [self toRightArrow];

    }
    
    CGRect frame = self.scrolleView.frame;
    frame.origin.x = frame.size.width * self.pageControl.currentPage;
    [self.scrolleView scrollRectToVisible:frame animated:YES];
}

- (void)toRightArrow
{
    btnArrow.frame = self.leftArrowFrame;
    [btnArrow setImage:[UIImage imageNamed:@"[e-mail]"] forState:UIControlStateNormal];
}

- (void)toLeftArrow
{
    btnArrow.frame = self.rightArrowFrame;
    [btnArrow setImage:[UIImage imageNamed:@"[e-mail]"] forState:UIControlStateNormal];
}

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    int index = fabs(self.scrolleView.contentOffset.x / self.scrolleView.frame.size.width) ;
    self.pageControl.currentPage = index;
    
    if (index)
    {
        [self toRightArrow];
    }
    else
    {
        [self toLeftArrow];
    }
    
}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
}

- (void)setupScrollView
{
    NSArray *imageViewImageArr = [NSArray arrayWithObjects:
                                  @"[e-mail]", @"[e-mail]", @"[e-mail]",
                                  @"[e-mail]", @"[e-mail]", @"[e-mail]",
                                  @"[e-mail]", @"[e-mail]",
                                  nil];
    
    NSArray *highLightedBackImageArr = [NSArray arrayWithObjects:
                                        @"[e-mail]", @"[e-mail]", @"[e-mail]",
                                        @"[e-mail]", @"[e-mail]", @"[e-mail]",
                                        @"[e-mail]", @"[e-mail]",
                                        nil];
    NSArray *imageViewBackImageArr = [NSArray arrayWithObjects:
                                      @"[e-mail]", @"[e-mail]", @"[e-mail]",
                                      @"[e-mail]", @"[e-mail]", @"[e-mail]",
                                      @"[e-mail]", @"[e-mail]",
                                      nil];

    NSArray *textArr = [NSArray arrayWithObjects:@"美化圖片", @"人像美容", @"拼圖", @"萬能相機", @"素材中心", @"美顏相機", @"美拍", @"更多功能", nil];

    FWButton *btnHome = nil;
    CGFloat startX = WIDTH /  2 - kPadding / 2 - kWidth;
    CGFloat startY = HEIGHT / 2 - kPadding - kHeight / 2 - kHeight -  61;
    for (int i = 0; i < 8; i++) {
        NSInteger row  = i % 2;
        NSInteger col  = i / 2;
        NSInteger page = i / 6;

        if (col == 3) {
            col = 0;
        }
    
        btnHome = [FWButton buttonWithType:UIButtonTypeCustom];
        [btnHome setTitle:[textArr objectAtIndex:i] forState:UIControlStateNormal];
        [btnHome setImage:[UIImage imageNamed:[imageViewImageArr objectAtIndex:i]] forState:UIControlStateNormal];
        [btnHome setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:[imageViewBackImageArr objectAtIndex:i]]]];
        [btnHome setBackgroundColorHighlighted:[UIColor colorWithPatternImage:[UIImage imageNamed:[highLightedBackImageArr objectAtIndex:i]]]];
//        btnHome.frame =CGRectMake([(NSString *)[xArr objectAtIndex:i] floatValue], [(NSString *)[yArr objectAtIndex:i] floatValue], kWidth, kheight);
        btnHome.frame = CGRectMake(row * (kWidth + kPadding) + page * WIDTH + startX, col * (kHeight + kPadding) + startY, kWidth, kHeight);
        [btnHome.titleLabel setFont:[UIFont systemFontOfSize:14]];

        [btnHome addTarget:self action:@selector(btnClicked:) forControlEvents:UIControlEventTouchUpInside];
        btnHome.topPading = 0.5;
        
        [self.scrolleView addSubview:btnHome];
        self.scrolleView.contentSize = CGSizeMake(WIDTH * 2, kHeight * 3 + kPadding * 2);
    }
}

- (void)btnClicked:(id)sender
{
    if ([[(UIButton *)sender titleLabel].text isEqualToString:@"美化圖片"]) {
        if ([UIImagePickerController isSourceTypeAvailable:UIImagePickerControllerSourceTypePhotoLibrary])
        {
            imagePicker = [[UIImagePickerController alloc] init];
            
            imagePicker.delegate = self;
            imagePicker.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;
            [self presentViewController:imagePicker animated:YES completion:^{
                [[UIApplication sharedApplication] setStatusBarHidden:YES];

            }
             ];
        }
    }

}

#pragma mark - UIImagePickerControllerDelegate
- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info
{
    UIImage *selectedImage = [info objectForKey:@"UIImagePickerControllerOriginalImage"];
    UIImage *image = [UIImage imageCompressForWidth:selectedImage targetWidth:375];
    if (image.size.height > 520) {
        image = [UIImage imageCompressForWidth:selectedImage targetHeight:520];
    }
    currentImage = image;

        beautyVC = [[FWBeautyViewController alloc] initWithImage:currentImage];
        [imagePicker pushViewController:beautyVC animated:YES];
   
}

- (UIImage *)imageWithImageSimple:(UIImage *)image scaleToSize:(CGSize)Newsize
{
    UIGraphicsBeginImageContext(Newsize);
    
    [image drawInRect:CGRectMake(0, 0, Newsize.width, Newsize.height)];
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return newImage;
}

- (void)imagePickerControllerDidCancel:(UIImagePickerController *)picker
{
    [self dismissViewControllerAnimated:imagePicker completion:^{
        
    }];
}

@end

 

 

#define WIDTH [UIScreen mainScreen].bounds.size.width
#define HEIGHT [UIScreen mainScreen].bounds.size.height

 

代碼凌亂，正在逐步改善。。。。。。

下載項目