關(guān)于自動scrollView自動布局(商城的搜索界面)

界面如下

C9682973-7E73-4676-81D6-95B80C0FE470.png

截得的圖不太好動態(tài)圖也不太好湊合看吧,首先分析一下這個界面,怎嘛實現(xiàn)
第一 可以用collectionView來實現(xiàn),用collectionView來實現(xiàn)重點在collectionView的布局類..
第二 可以自己用scrollView上加button(前提button不是太多如果太多就用第一種方法實現(xiàn) 因為collectionView 的cell可以重用)
我是用第二種方法寫的......先分析一下,在說明我的思路
肯定要先寫一個scrollView了在再scrollView上加上一個contentView. contentView的大小由里面的一堆按鈕個決定(是不用一開始就確定scrollView的contentOfSize的他是被里面的按鈕撐開的)這點是重點可以看一下串哥的博客http://adad184.com/2015/12/01/scrollview-under-autolayout/

里面按鈕的布局思路就是先把第一個按鈕布局好 再布局第二個的時候判斷 后面的寬度是否能夠放得下,能放得下就布局在第一個按鈕后面,不能放的下就布局在上一個按鈕下面...依次循環(huán)下去
下面也是重要的一步就是判斷最后一個按鈕(記得要寫上最后一個按鈕距離他的父視圖下面的布局約束 這樣就把父視圖contentView撐開了, contentView也會自動撐開scrollView).

下面就是代碼具體實現(xiàn)
直接復(fù)制就好

//
//  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 = @[@"狗糧",@"女朋友",@"狗糧",@"我要媳婦??",@"虐狗",@"??",@"虐狗",@"??",@"狗糧",@"女朋友",@"虐狗",@"??",@"狗糧",@"女朋友",@"狗糧",@"我要媳婦??",@"虐狗",@"??",@"虐狗",@"??",@"狗糧",@"女朋友",@"虐狗",@"??"];
//在調(diào)用下面三個方法的時候 要保證已經(jīng)走了網(wǎng)絡(luò)(三個數(shù)組經(jīng)過網(wǎng)絡(luò)請求初始化了)
[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
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,414評論 4贊 61
  • 概率在我們的日常生活中無處不在，然而很多人可能沒有注意到它，于是常常犯了一些概率錯誤而不自知。其中有三種錯誤最為常...
    余先飛閱讀 2,640評論 0贊 0
  • 產(chǎn)假結(jié)束了，五個半月的時間我從一個媽媽的孩子蛻變成了孩子的媽媽，隨著女兒的一天天長大，我從一開始的煩悶、后悔，逐...
    樂支君子閱讀 262評論 0贊 0
  • 小的時候，喜歡握緊媽媽的手。在陌生的世界里，媽媽的手是那么溫柔。餓的時候，無論媽媽多忙，看著饑餓的我，媽媽就會放下...
    順著風(fēng)飛翔閱讀 355評論 1贊 3
  • 董沛沛 洛陽 焦點講師班三期 堅持原創(chuàng)分享第177天 舒爾特方格是世界上最專業(yè)、最普及、最簡單的專注力訓(xùn)練法，不僅...
    緣源流長閱讀 288評論 0贊 0

友情鏈接更多精彩內(nèi)容