关于自动scrollView自动布局(商城的搜索界面)
2016-09-05 本文已影响351人
大墙66370
界面如下
C9682973-7E73-4676-81D6-95B80C0FE470.png
截得的图不太好动态图也不太好凑合看吧,首先分析一下这个界面,怎嘛实现
第一 可以用collectionView来实现,用collectionView来实现重点在collectionView的布局类..
第二 可以自己用scrollView上加button(前提button不是太多如果太多就用第一种方法实现 因为collectionView 的cell可以重用)
我是用第二种方法写的......先分析一下,在说明我的思路
肯定要先写一个scrollView了在再scrollView上加上一个contentView. contentView的大小由里面的一堆按钮个决定(是不用一开始就确定scrollView的contentOfSize的他是被里面的按钮撑开的)这点是重点可以看一下串哥的博客http://adad184.com/2015/12/01/scrollview-under-autolayout/
里面按钮的布局思路就是先把第一个按钮布局好 再布局第二个的时候判断 后面的宽度是否能够放得下,能放得下就布局在第一个按钮后面,不能放的下就布局在上一个按钮下面...依次循环下去
下面也是重要的一步就是判断最后一个按钮(记得要写上最后一个按钮距离他的父视图下面的布局约束 这样就把父视图contentView撑开了, contentView也会自动撑开scrollView).
下面就是代码具体实现
直接复制就好
//
// ViewController.m
// 搜索界面
//
// Created by 3D on 16/9/4.
// Copyright © 2016年 3D. All rights reserved.
//
#define BT_HEIGHT 31
#define GAP_WIDTH 10
//获取屏幕 宽度、高度
#define SCREEN_WIDTH ([UIScreen mainScreen].bounds.size.width)
#define SCREEN_HEIGHT ([UIScreen mainScreen].bounds.size.height)
#import "ViewController.h"
#import "Masonry.h"
@interface ViewController ()
@property (nonatomic, strong) NSArray* historyArr;
@property (nonatomic, strong) NSArray* storeArr;
@property (nonatomic, strong) NSArray* hotArr;
@property (nonatomic, strong) UIView *contentView;
@end
@implementation ViewController
{
CGFloat allBt_W;
UIButton *lastBT;
UILabel *nearLB;//最近搜索
UILabel *storeLB;//店铺搜索
}
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor whiteColor];
allBt_W = 0;
// [self.navigationController.navigationBar addSubview:searchTextField];
// searchTextField.frame = CGRectMake(43, 7, SCREEN_WIDTH*269/375, 30);
// searchTextField.backgroundColor = [UIColor whiteColor];
// NSString *placeholderString = @"查找宠物商品";
// NSMutableAttributedString *placeholder = [[NSMutableAttributedString alloc]initWithString:placeholderString];
// [placeholder addAttribute:NSFontAttributeName value:[[KDFont new] getF30Font] range:NSMakeRange(0, placeholderString.length)];
// [placeholder addAttribute:NSForegroundColorAttributeName value:[KDColor getC3Color] range:NSMakeRange(0,placeholderString.length)];
// searchTextField.tintColor = [KDColor getC3Color];
// searchTextField.attributedPlaceholder = placeholder;
// searchTextField.layer.cornerRadius = 5;
UIScrollView *scrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT)];
[self.view addSubview:scrollView];
self.contentView = [UIView new];
[scrollView addSubview:self.contentView];
[_contentView mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.mas_equalTo(0);
make.width.mas_equalTo(SCREEN_WIDTH);
}];
self.historyArr = @[@"小泽玛利亚",@"苍井空",@"武藤兰",@"栋神",@"小泽玛利亚",@"苍井空",@"武藤兰",@"小泽玛利亚",@"苍井空",@"小泽玛利亚",@"苍井空",@"武藤兰",@"栋神",@"小泽玛利亚",@"苍井空",@"武藤兰",@"小泽玛利亚",@"苍井空"];
self.storeArr = @[@"武藤兰的情趣用品店",@"栋神的情趣用品店",@"小泽玛利亚的情趣用品店",@"苍井空的情趣用品店",@"武藤兰的情趣用品店",@"栋神的情趣用品店"];
// _historyArr = nil;
self.hotArr = @[@"狗粮",@"女朋友",@"狗粮",@"我要媳妇😭",@"虐狗",@"😭",@"虐狗",@"😭",@"狗粮",@"女朋友",@"虐狗",@"😭",@"狗粮",@"女朋友",@"狗粮",@"我要媳妇😭",@"虐狗",@"😭",@"虐狗",@"😭",@"狗粮",@"女朋友",@"虐狗",@"😭"];
//在调用下面三个方法的时候 要保证已经走了网络(三个数组经过网络请求初始化了)
[self creatHistoryUI:_historyArr];
[self creatStoreUI:_storeArr];
[self creatHotUI:_hotArr];
}
-(void)creatHistoryUI:(NSArray*)arr{
UILabel *nearSearchLB = [UILabel new];
nearLB = nearSearchLB;
nearSearchLB.font = [UIFont systemFontOfSize:14];
nearSearchLB.textColor = [UIColor grayColor];
nearSearchLB.text = @"最近搜索";
[self.contentView addSubview:nearSearchLB];
[nearSearchLB mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.mas_equalTo(16);
make.top.mas_equalTo(64+20);
}];
UIImageView *imageView = [UIImageView new];
[self.contentView addSubview:imageView];
imageView.image = [UIImage imageNamed:@"icon_shanchu"];
[imageView mas_makeConstraints:^(MASConstraintMaker *make) {
make.right.mas_equalTo(-16);
make.top.mas_equalTo(64+20);
make.width.height.mas_equalTo(14);
}];
if (arr==nil || arr.count == 0) {
UILabel *noHistoryLB = [UILabel new];
noHistoryLB.font = [UIFont systemFontOfSize:14];
noHistoryLB.textColor = [UIColor grayColor];
noHistoryLB.text = @"无历史搜索";
[self.contentView addSubview:noHistoryLB];
[noHistoryLB mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerX.mas_equalTo(0);
make.top.mas_equalTo(imageView.mas_bottom).mas_equalTo(15);
}];
}else{
lastBT = nil;
for (int i = 0; i<arr.count; i++) {
UIButton *historyBT = [UIButton new];
[historyBT addTarget:self action:@selector(butionClick:) forControlEvents:UIControlEventTouchUpInside];
[self.contentView addSubview:historyBT];
historyBT.layer.cornerRadius = 2;
historyBT.layer.borderColor = [UIColor grayColor].CGColor;
historyBT.layer.borderWidth = 1;
[historyBT setTitle:arr[i] forState:0];
[historyBT setTitleColor:[UIColor grayColor] forState:0];
historyBT.titleLabel.font = [UIFont systemFontOfSize:14];
CGFloat historyBT_W = [self butionWidth:arr[i]];
allBt_W = allBt_W+(historyBT_W+GAP_WIDTH);
if (i==0) {
[historyBT mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.mas_equalTo(nearSearchLB.mas_bottom).mas_equalTo(15);
make.left.mas_equalTo(16);
make.height.mas_equalTo(BT_HEIGHT);
make.width.mas_equalTo(historyBT_W);
}];
lastBT = historyBT;
}else{
[historyBT mas_makeConstraints:^(MASConstraintMaker *make) {
make.width.mas_equalTo(historyBT_W);
make.height.mas_equalTo(BT_HEIGHT);
if (SCREEN_WIDTH-allBt_W-16-6 >= 0) {//不换行
make.left.mas_equalTo(lastBT.mas_right).mas_equalTo(GAP_WIDTH);
make.top.mas_equalTo(lastBT);
}else{
allBt_W = historyBT_W+GAP_WIDTH;
make.left.mas_equalTo(16);
make.top.mas_equalTo(lastBT.mas_bottom).mas_equalTo(GAP_WIDTH);
}
}];
lastBT = historyBT;
}
}
}
}
-(void)creatStoreUI:(NSArray*)arr{
allBt_W = 0;
UILabel *shopSearchLB = [UILabel new];
storeLB = shopSearchLB;
shopSearchLB.font = [UIFont systemFontOfSize:14];
shopSearchLB.textColor = [UIColor grayColor];
shopSearchLB.text = @"店铺搜索";
[self.contentView addSubview:shopSearchLB];
[shopSearchLB mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.mas_equalTo(16);
if (self.historyArr.count == 0 || self.historyArr == nil ) {
make.top.mas_equalTo(nearLB.mas_bottom).mas_equalTo(66);
}else{
make.top.mas_equalTo(lastBT.mas_bottom).mas_equalTo(20);
}
}];
if (arr==nil || arr.count == 0) {
UILabel *noHistoryLB = [UILabel new];
noHistoryLB.font = [UIFont systemFontOfSize:14];
noHistoryLB.textColor = [UIColor orangeColor];
noHistoryLB.text = @"no店铺搜索";
[self.contentView addSubview:noHistoryLB];
[noHistoryLB mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerX.mas_equalTo(0);
make.top.mas_equalTo(shopSearchLB.mas_bottom).mas_equalTo(15);
}];
}else{
lastBT = nil;
for (int i = 0; i<arr.count; i++) {
UIButton *shopBT = [UIButton new];
[shopBT addTarget:self action:@selector(butionClick:) forControlEvents:UIControlEventTouchUpInside];
[self.contentView addSubview:shopBT];
shopBT.layer.cornerRadius = 2;
shopBT.layer.borderColor = [UIColor grayColor].CGColor;
shopBT.layer.borderWidth = 1;
[shopBT setTitle:arr[i] forState:0];
[shopBT setTitleColor:[UIColor grayColor] forState:0];
shopBT.titleLabel.font = [UIFont systemFontOfSize:14];
CGFloat shopBT_W = [self butionWidth:arr[i]];
allBt_W = allBt_W+(shopBT_W+GAP_WIDTH);
if (i==0) {
[shopBT mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.mas_equalTo(shopSearchLB.mas_bottom).mas_equalTo(15);
make.left.mas_equalTo(16);
make.height.mas_equalTo(BT_HEIGHT);
make.width.mas_equalTo(shopBT_W);
}];
lastBT = shopBT;
}else{
[shopBT mas_makeConstraints:^(MASConstraintMaker *make) {
make.width.mas_equalTo(shopBT_W);
make.height.mas_equalTo(BT_HEIGHT);
if (SCREEN_WIDTH-allBt_W-16-6 >= 0) {//不换行
make.left.mas_equalTo(lastBT.mas_right).mas_equalTo(GAP_WIDTH);
make.top.mas_equalTo(lastBT);
}else{
allBt_W = shopBT_W+GAP_WIDTH;
make.left.mas_equalTo(16);
make.top.mas_equalTo(lastBT.mas_bottom).mas_equalTo(GAP_WIDTH);
}
}];
lastBT = shopBT;
}
}
}
}
-(void)creatHotUI:(NSArray*)arr{
allBt_W = 0;
UILabel *hotSearchLB = [UILabel new];
hotSearchLB.font = [UIFont systemFontOfSize:14];
hotSearchLB.textColor = [UIColor grayColor];
hotSearchLB.text = @"热门搜索";
[self.contentView addSubview:hotSearchLB];
[hotSearchLB mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.mas_equalTo(16);
if (self.storeArr.count == 0 || self.storeArr == nil ) {
make.top.mas_equalTo(storeLB.mas_bottom).mas_equalTo(66);
}else{
make.top.mas_equalTo(lastBT.mas_bottom).mas_equalTo(20);
}
}];
if (arr==nil || arr.count == 0) {
UILabel *noHotLB = [UILabel new];
noHotLB.font = [UIFont systemFontOfSize:14];
noHotLB.textColor = [UIColor grayColor];
noHotLB.text = @"no热门搜索";
[self.contentView addSubview:noHotLB];
[noHotLB mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerX.mas_equalTo(0);
make.top.mas_equalTo(hotSearchLB.mas_bottom).mas_equalTo(15);
make.bottom.mas_equalTo(-44);
}];
}else{
lastBT = nil;
for (int i = 0; i<arr.count; i++) {
UIButton *hotBT = [UIButton new];
[hotBT addTarget:self action:@selector(butionClick:) forControlEvents:UIControlEventTouchUpInside];
[self.contentView addSubview:hotBT];
hotBT.layer.cornerRadius = 2;
hotBT.layer.borderColor = [UIColor grayColor].CGColor;
hotBT.layer.borderWidth = 1;
[hotBT setTitle:arr[i] forState:0];
[hotBT setTitleColor:[UIColor grayColor] forState:0];
hotBT.titleLabel.font = [UIFont systemFontOfSize:14];
CGFloat hotBT_W = [self butionWidth:arr[i]];
allBt_W = allBt_W+(hotBT_W+GAP_WIDTH);
if (i==0) {
[hotBT mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.mas_equalTo(hotSearchLB.mas_bottom).mas_equalTo(15);
make.left.mas_equalTo(16);
make.height.mas_equalTo(BT_HEIGHT);
make.width.mas_equalTo(hotBT_W);
}];
lastBT = hotBT;
}else{
if (i==arr.count-1) {
[hotBT mas_makeConstraints:^(MASConstraintMaker *make) {
make.width.mas_equalTo(hotBT_W);
make.height.mas_equalTo(BT_HEIGHT);
if (SCREEN_WIDTH-allBt_W-16-6 >= 0) {//不换行
make.left.mas_equalTo(lastBT.mas_right).mas_equalTo(GAP_WIDTH);
make.top.mas_equalTo(lastBT);
}else{
allBt_W = hotBT_W+GAP_WIDTH;
make.left.mas_equalTo(16);
make.top.mas_equalTo(lastBT.mas_bottom).mas_equalTo(GAP_WIDTH);
}
make.bottom.mas_equalTo(-10);
}];
lastBT = nil;
}else{
[hotBT mas_makeConstraints:^(MASConstraintMaker *make) {
make.width.mas_equalTo(hotBT_W);
make.height.mas_equalTo(BT_HEIGHT);
if (SCREEN_WIDTH-allBt_W-16-6 >= 0) {//不换行
make.left.mas_equalTo(lastBT.mas_right).mas_equalTo(GAP_WIDTH);
make.top.mas_equalTo(lastBT);
}else{
allBt_W = hotBT_W;
make.left.mas_equalTo(16);
make.top.mas_equalTo(lastBT.mas_bottom).mas_equalTo(GAP_WIDTH);
}
}];
lastBT = hotBT;
}
}
}
}
}
-(void)butionClick:(UIButton*)sender{
NSLog(@"semder.title = %@",sender.titleLabel.text);
}
-(CGFloat)butionWidth:(NSString *)title{
NSMutableDictionary *attributes = [NSMutableDictionary dictionary]; attributes[NSFontAttributeName] = [UIFont systemFontOfSize:14];
CGRect rect = [title boundingRectWithSize:CGSizeMake(CGFLOAT_MAX, 13) options:NSStringDrawingUsesLineFragmentOrigin | NSStringDrawingUsesFontLeading attributes:attributes context:nil];
CGFloat butionW = rect.size.width+40;
return butionW;
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end
2016-09-05 00_29_58.gif
