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

界面如下

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

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

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

下面就是代碼具體實(shí)現(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)用下面三個(gè)方法的時(shí)候 要保證已經(jīng)走了網(wǎng)絡(luò)(三個(gè)數(shù)組經(jīng)過(guò)網(wǎng)絡(luò)請(qǐng)求初始化了)
[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 = @"無(wú)歷史搜索";
    [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 = @"熱門(mén)搜索";
[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熱門(mén)搜索";
    [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

最后編輯于：2017.12.04 02:52:21

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末麻蹋，一起剝皮案震驚了整個(gè)濱河市壤追，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌理郑，老刑警劉巖物邑，帶你破解...
沈念sama閱讀 206,126評(píng)論 6贊 481
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異掸屡，居然都是意外死亡析二，警方通過(guò)查閱死者的電腦和手機(jī)墩衙，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 88,254評(píng)論 2贊 382
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門(mén)，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)甲抖，“玉大人漆改，你說(shuō)我怎么就攤上這事∽佳瑁” “怎么了挫剑？”我有些...
開(kāi)封第一講書(shū)人閱讀 152,445評(píng)論 0贊 341
道士緝兇錄：失蹤的賣(mài)姜人
文/不壞的土叔我叫張陵，是天一觀的道長(zhǎng)柱衔。經(jīng)常有香客問(wèn)我樊破，道長(zhǎng)，這世上最難降的妖魔是什么唆铐？我笑而不...
開(kāi)封第一講書(shū)人閱讀 55,185評(píng)論 1贊 278
?港島之戀（遺憾婚禮）
正文為了忘掉前任哲戚，我火速辦了婚禮，結(jié)果婚禮上艾岂，老公的妹妹穿的比我還像新娘顺少。我一直安慰自己，他們只是感情好王浴，可當(dāng)我...
茶點(diǎn)故事閱讀 64,178評(píng)論 5贊 371
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開(kāi)白布脆炎。她就那樣靜靜地躺著，像睡著了一般氓辣。火紅的嫁衣襯著肌膚如雪秒裕。梳的紋絲不亂的頭發(fā)上，一...
開(kāi)封第一講書(shū)人閱讀 48,970評(píng)論 1贊 284
城市分裂傳說(shuō)
那天钞啸，我揣著相機(jī)與錄音几蜻，去河邊找鬼。笑死体斩，一個(gè)胖子當(dāng)著我的面吹牛梭稚，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播硕勿，決...
沈念sama閱讀 38,276評(píng)論 3贊 399
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開(kāi)眼哨毁，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼枫甲！你這毒婦竟也來(lái)了源武？” 一聲冷哼從身側(cè)響起扼褪，我...
開(kāi)封第一講書(shū)人閱讀 36,927評(píng)論 0贊 259
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎粱栖，沒(méi)想到半個(gè)月后话浇，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 43,400評(píng)論 1贊 300
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡闹究，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 35,883評(píng)論 2贊 323
?白月光啟示錄
正文我和宋清朗相戀三年幔崖，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片渣淤。...
茶點(diǎn)故事閱讀 37,997評(píng)論 1贊 333
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡赏寇，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出价认，到底是詐尸還是另有隱情嗅定，我是刑警寧澤，帶...
沈念sama閱讀 33,646評(píng)論 4贊 322
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布用踩，位于F島的核電站渠退，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏脐彩。R本人自食惡果不足惜碎乃，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 39,213評(píng)論 3贊 307
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望惠奸。院中可真熱鬧梅誓，春花似錦、人聲如沸佛南。這莊子的主人今日做“春日...
開(kāi)封第一講書(shū)人閱讀 30,204評(píng)論 0贊 19
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)共虑。三九已至愧怜，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間妈拌，已是汗流浹背拥坛。一陣腳步聲響...
開(kāi)封第一講書(shū)人閱讀 31,423評(píng)論 1贊 260
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工，沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留尘分，地道東北人猜惋。一個(gè)月前我還...
沈念sama閱讀 45,423評(píng)論 2贊 352
代替公主和親
正文我出身青樓，卻偏偏與公主長(zhǎng)得像培愁，于是被迫代替她去往敵國(guó)和親著摔。傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 42,722評(píng)論 2贊 345

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

推薦閱讀更多精彩內(nèi)容