美图秀秀首页界面设计(一)|江阴雨辰互联

2023年11月26日发(作者：性价比高的车排行榜2022)

美图秀秀⾸页界⾯设计（⼀）

本⽂设计了美图秀秀官⽅版的界⾯，从中可以学到⾃定义View，⾃动布局，启动界⾯设置。代码有点凌乱，我在⼀步步改善。【声

应⽤程序图标设置

- (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实现

[ addConstraints:@[

[NSLayoutConstraint constraintWithItem:w attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual

toItem: attribute:NSLayoutAttributeTop multiplier:1.0 constant:0],

[NSLayoutConstraint constraintWithItem:w attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual

toItem: attribute:NSLayoutAttributeRight multiplier:1.0 constant:-6],

[NSLayoutConstraint constraintWithItem:w attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil

attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:51],

[NSLayoutConstraint constraintWithItem:w attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil

attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:61],

[NSLayoutConstraint constraintWithItem:btnSetting attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual

toItem: attribute:NSLayoutAttributeBottom multiplier:1.0 constant:-8],

[NSLayoutConstraint constraintWithItem:btnSetting attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual

toItem: 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:eView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual

toItem:image attribute:NSLayoutAttributeBottom multiplier:1.0 constant:0],

[NSLayoutConstraint constraintWithItem:eView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual

toItem: attribute:NSLayoutAttributeLeft multiplier:1.0 constant:0],

[NSLayoutConstraint constraintWithItem:eView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual

toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:WIDTH],

[NSLayoutConstraint constraintWithItem:eView 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]]]];

// =CGRectMake([(NSString *)[xArr objectAtIndex:i] floatValue], [(NSString *)[yArr objectAtIndex:i] floatValue], kWidth, kheight);

= CGRectMake(row * (kWidth + kPadding) + page * WIDTH + startX, col * (kHeight + kPadding) + startY, kWidth, kHeight);

[abel setFont:[UIFont systemFontOfSize:14]];

[btnHome addTarget:self action:@selector(btnClicked:) forControlEvents:UIControlEventTouchUpInside];

ing = 0.5;

[eView addSubview:btnHome];

tSize = CGSizeMake(WIDTH * 2, kHeight * 3 + kPadding * 2);

}

主界⾯实现

// ViewController.m

// FWMeituApp

// Created by ForrestWoo on 15-9-16.

//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];

tionController.delegate = self;

UIImageView *backImage = [[UIImageView alloc] initWithFrame:];

= [UIImage imageNamed:@"bg_home@"];

[ addSubview:backImage];

eView = [[UIScrollView alloc] init];

atesAutoresizingMaskIntoConstraints = NO;

Enabled = YES;

orizontalScrollIndicator = NO;

erticalScrollIndicator = NO;

eView.delegate = self;

[ addSubview:eView];

UIImageView *image = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"bg_topview_topback_"]];

= CGRectMake(15, 15, 226.5, 51.5);

[ addSubview:image];

[btnArrow setImage:[UIImage imageNamed:@"right_arrow_highlight@"] forState:UIControlStateHighlighted];

[btnArrow addTarget:self action:@selector(btnArrowClicked:) forControlEvents:UIControlEventTouchUpInside];

[ addSubview:btnArrow];

//width = 51,height = 61.

w = [[FWTopView alloc] init];

[ addSubview:w];

atesAutoresizingMaskIntoConstraints = NO;

//width,height = 39

UIButton *btnSetting = [UIButton buttonWithType:UIButtonTypeCustom];

// = CGRectMake(330, 620, 39, 39);

[btnSetting setImage:[UIImage imageNamed:@"btn_home_setting_a@"] forState:UIControlStateNormal];

[ addSubview:btnSetting];