美图秀秀首页界面设计（一）

　　本文设计了美图秀秀官方版的界面，从中可以学到自定义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:@"[email protected]"];
    [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:@"[email protected]"] forState:UIControlStateNormal];
    [btnArrow setImage:[UIImage imageNamed:@"[email protected]"] 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:@"[email protected]"] 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:@"[email protected]"] forState:UIControlStateNormal];
}

- (void)toLeftArrow
{
    btnArrow.frame = self.rightArrowFrame;
    [btnArrow setImage:[UIImage imageNamed:@"[email protected]"] 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:
                                  @"[email protected]", @"[email protected]", @"[email protected]",
                                  @"[email protected]", @"[email protected]", @"[email protected]",
                                  @"[email protected]", @"[email protected]",
                                  nil];

    NSArray *highLightedBackImageArr = [NSArray arrayWithObjects:
                                        @"[email protected]", @"[email protected]", @"[email protected]",
                                        @"[email protected]", @"[email protected]", @"[email protected]",
                                        @"[email protected]", @"[email protected]",
                                        nil];
    NSArray *imageViewBackImageArr = [NSArray arrayWithObjects:
                                      @"[email protected]", @"[email protected]", @"[email protected]",
                                      @"[email protected]", @"[email protected]", @"[email protected]",
                                      @"[email protected]", @"[email protected]",
                                      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

代码凌乱，正在逐步改善。。。。。。

时间： 2024-10-15 19:47:57

美图秀秀首页界面设计（一）的相关文章

Masonry应用【美图秀秀首页界面自动布局】

Masonry在此实现时候,并没有比NSLayoutConstraint简单,相反我觉得还不如NSLayoutConstraint. [self.topView mas_makeConstraints:^(MASConstraintMaker *make) { make.top.equalTo(self.view.mas_top); make.right.equalTo(self.view.mas_right).with.offset(-6); make.width.equalTo(@51);

美图秀秀-美化图片之【特效】界面设计

本文是特效界面设计,在美图秀秀的特效模块主要是实现图片添加滤镜效果,界面挺炫的. 界面包含黑边和虚化按钮,4种类型的滤镜,每种类型又包含许多具体滤镜效果,当我们点击时候开始处理图片 1.加载图片 self.imageView = [[UIImageView alloc] initWithImage:self.image]; self.imageView.frame = CGRectMake(0, 0, WIDTH, HEIGHT - 130); self.imageView.contentMod

iOS开发系列--打造自己的“美图秀秀”

http://www.cnblogs.com/kenshincui/p/3959951.html#overview --绘图与滤镜全面解析概述在iOS中可以很容易的开发出绚丽的界面效果,一方面得益于成功系统的设计,另一方面得益于它强大的开发框架.今天我们将围绕iOS中两大图形.图像绘图框架进行介绍:Quartz 2D绘制2D图形和Core Image中强大的滤镜功能. Quartz 2D 基本图形绘制视图刷新其他图形上下文 Core Image Quartz 2D 在iOS中常用的绘图框

Qt Quick 图像处理实例之美图秀秀（附源码下载）

在<Qt Quick 之 QML 与 C++ 混合编程详解>一文中我们讲解了 QML 与 C++ 混合编程的方方面面的内容,这次我们通过一个图像处理应用,再来看一下 QML 与 C++ 混合编程的威力,同时也为诸君揭开美图秀秀.魔拍之类的相片美化应用的底层原理. 项目的创建过程请参考<Qt Quick 之 Hello World 图文详解>,项目名称为 imageProcessor ,创建完成后需要添加两个文件: imageProcessor.h 和 imageProcessor.

打造自己的“美图秀秀”

概述在iOS中可以很容易的开发出绚丽的界面效果,一方面得益于成功系统的设计,另一方面得益于它强大的开发框架.今天我们将围绕iOS中两大图形.图像绘图框架进行介绍:Quartz 2D绘制2D图形和Core Image中强大的滤镜功能. Quartz 2D 在iOS中常用的绘图框架就是Quartz 2D,Quartz 2D是Core Graphics框架的一部分,是一个强大的二维图像绘制引擎.Quartz 2D在UIKit中也有很好的封装和集成,我们日常开发时所用到的UIKit中的组件都是由Cor

简单的水印制作之美图秀秀

大家的博文或者QQ空间文章等,都喜欢印上自己的水印,以避免有心之人的盗图等问题的发生,但是部分朋友(包括我的老师老男孩 =.=)都直接使用画图工具简单的写了个名字或者域名上去,就算是水印了,老师呀--不是学生嫌弃你,咱可以再懒点不 =.= 其实单纯的一个水印制作非常的简单,使用Windows操作系统的朋友可以直接使用"美图秀秀"来制作水印. 1.下载安装美图秀秀. http://xiuxiu.dl.meitu.com/XiuXiu_360Setup_4.0.1.exe 2.打开美图秀秀

强大的Core Image(教你做自己的美图秀秀))

iOS5新特性:强大的Core Image(教你做自己的美图秀秀)) iOS5给我们带来了很多很好很强大的功能和API.Core Image就是其中之一,它使我们很容易就能处理图片的各种效果,色彩啊,曝光啊,饱和度啊,变形啊神马的.可惜苹果一直没能完善官方文档,也没有推出示例代码,所以国内很多同学可能还没有开始使用.但国外的大神们已经证明这是个相当强悍的框架,不仅功能强大,而且可以直接使用GPU,效率奇高,甚至可以实时的对视频进行渲染.下面让我们来看看,如何具体使用它:首先你需要导入 CoreI

美图秀秀团队新出的短视频应用「美拍」为何这么火？

这个世界有种畅销品叫作“美”它的载体通常是可视化的——图片和视频,美图这个团队从美图秀秀到美拍无不是抓住了这个需求,让人更容易生产更高质量的美.而且视频这种信息量更大的载体相对静止的图片更能让人产生“美”的体验,视频和图片不一样,不像instagram那样加个风格滤镜就能产生一个好的效果,而且要拍好一段视频远比照片要难的多,所以此前一些微视频软件简单的加个滤镜或一些水印并不能帮助用户比较简单的生产出有美感的视频.这点美拍做到了,你发现一段再无趣的视频套用模板后,音乐和剪切效果马上让视频脱胎换骨,

美图秀秀滤镜之亮度调整

图像的亮度, 指的是图像像素的强度, 黑色为最暗, 白色为最亮, 在ios中黑色用0来表示, 白色用1来表示.一个像素, 基本上是用RGB三个颜色分量来表示的. R(0-1), G(0-1),B(0-1). 亮度调整有多种计算方法,效果并不完全相同,在颜色的表示方法中, HSL(L)表示法就是:色相(hue).饱和度(saturation).亮度(lightness),改变其中的L值就可以调整图象的亮度,但效果显得比较生硬. PhotoShop和GPUImage中采用的就是另外一种方法就是把图象