模仿京东顶部搜索条效果制作的一个小demo

最近模仿京东顶部搜索条效果制作的一个小demo,特贴到这里,今后如果有用到可以参考一下,代码如下

 #define kScreenWidth  [UIScreen mainScreen].bounds.size.width
 #define kScreenHeight [UIScreen mainScreen].bounds.size.height

 #import "mainViewController.h"

 @interface mainViewController () <UIScrollViewDelegate, UITextFieldDelegate> {
     // 滚动列表
     UIScrollView *infoListView;
     // 滚动列表上展示信息的view
     UIView *infoView;
     // 顶部广告栏
     UIView *topAdView;
     // 定位按钮
     UIButton *loacBtn;
     // 搜索输入框
     UITextField *searchBarTF;
     // 二维码扫描按钮
     UIButton *scanBtn;
     // 顶部渐变背景条
     UIView *bgView;
     // 承载按钮,搜索输入框等控件的条
     UIView *searchBarBgView;

 }

 @end

 @implementation mainViewController

 - (void)viewDidLoad {
     [super viewDidLoad];
     // 创建scrollView
     [self createScrollview];
     // 创建顶部广告栏
     [self createTopAdView];
     // 创建根据滚动渐变的顶部栏
     [self createBgView];
     // 创建导航条
     [self createSearchBar];

 }

 - (void)viewWillAppear:(BOOL)animated {
     [self.navigationController setNavigationBarHidden:YES];
     [super viewWillAppear:animated];
 }

 #pragma mark - 创建scrollView
 - (void)createScrollview {
     infoListView = [[UIScrollView alloc] initWithFrame:CGRectMake(, , kScreenWidth, kScreenHeight)];
     infoListView.backgroundColor = [UIColor whiteColor];
     [self.view addSubview:infoListView];
     infoListView.contentSize = CGSizeMake(, );
     infoListView.scrollEnabled = YES;
     infoListView.delegate = self;
 //    infoListView.showsVerticalScrollIndicator = NO;
     // 将infoView加载到scrollView上
     infoView = [[UIView alloc] initWithFrame:CGRectMake(, , kScreenWidth, )];
     infoView.userInteractionEnabled = YES;
     infoView.backgroundColor = [UIColor lightGrayColor];
     [infoListView addSubview:infoView];

 }
 #pragma mark - 创建顶部广告栏
 - (void)createTopAdView {
     topAdView = [[UIView alloc] initWithFrame:CGRectMake(, , kScreenWidth, )];
     topAdView.backgroundColor = [UIColor blackColor];
     [infoView addSubview:topAdView];

 }
 #pragma mark - 顶部渐变栏
 - (void)createBgView {
     bgView = [[UIView alloc] initWithFrame:CGRectMake(, , kScreenWidth, )];
     bgView.backgroundColor = [UIColor orangeColor];
     bgView.alpha = 0.0;
     [self.view addSubview:bgView];
     [self.view bringSubviewToFront:bgView];
 }
 #pragma mark - 搜索栏,地址定位按钮, 扫描按钮
 - (void)createSearchBar {
     // 1.创建导航条背景
     searchBarBgView = [[UIView alloc] initWithFrame:CGRectMake(, , kScreenWidth, )];
     searchBarBgView.backgroundColor = [UIColor clearColor];
     [self.view addSubview:searchBarBgView];
     // 2.创建label
     UILabel *loacLabel = [[UILabel alloc] initWithFrame:CGRectMake(, , , )];
     loacLabel.text = @"我在";
     loacLabel.textColor = [UIColor whiteColor];
     loacLabel.textAlignment = NSTextAlignmentRight;
     loacLabel.font = [UIFont systemFontOfSize:14.0];
     loacLabel.backgroundColor = [UIColor clearColor];
     [searchBarBgView addSubview:loacLabel];
     // 3.创建定位按钮
     loacBtn = [UIButton buttonWithType:UIButtonTypeCustom];
     loacBtn.frame = CGRectMake(, , , );
     loacBtn.backgroundColor = [UIColor orangeColor];
     [loacBtn setImage:[UIImage imageNamed:@"1.8"] forState:UIControlStateNormal];
     [loacBtn setImageEdgeInsets:UIEdgeInsetsMake(, , , )];
     [loacBtn setTitle:@"深圳" forState:UIControlStateNormal];
     [loacBtn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
     [loacBtn setTitleColor:[UIColor lightGrayColor] forState:UIControlStateHighlighted];
     loacBtn.titleLabel.font = [UIFont systemFontOfSize:14.0];
     loacBtn.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;
     loacBtn.contentEdgeInsets = UIEdgeInsetsMake(, -, , );
     loacBtn.backgroundColor = [UIColor clearColor];
     [searchBarBgView addSubview:loacBtn];
     // 4.搜索框
     // 4.1创建搜索框背景
     UIImageView *searchBgView = [[UIImageView alloc] initWithFrame:CGRectMake(, , , )];
     [searchBgView setImage:[UIImage imageNamed:@"1.6"]];
     searchBgView.userInteractionEnabled = YES;
     [searchBarBgView addSubview:searchBgView];
     // 4.2 搜索图标
     UIImageView *searchIcon = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"1.5"]];
     searchIcon.frame = CGRectMake(, searchBgView.frame.size.height/ - /, , );
     [searchBgView addSubview:searchIcon];
     // 4.3 搜索输入框
     searchBarTF = [[UITextField alloc] initWithFrame:CGRectMake(, searchBgView.frame.size.height/ - /, , )];
     searchBarTF.backgroundColor = [UIColor clearColor];
     searchBarTF.textColor = [UIColor blackColor];
     searchBarTF.textAlignment = NSTextAlignmentLeft;
     searchBarTF.font = [UIFont systemFontOfSize:15.0];
     searchBarTF.delegate = self;
     [searchBarTF setClearButtonMode:UITextFieldViewModeWhileEditing];
     [searchBgView addSubview:searchBarTF];
     // 5. 扫描二维码按钮
     scanBtn = [UIButton buttonWithType:UIButtonTypeCustom];
     scanBtn.frame = CGRectMake(kScreenWidth - , , , );
     [scanBtn setImage:[UIImage imageNamed:@"icon_scan_white"] forState:UIControlStateNormal];
     [searchBarBgView addSubview:scanBtn];

     [self.view bringSubviewToFront:searchBarBgView];
 }

 #pragma mark - UIScrollViewDelegate
 - (void)scrollViewDidScroll:(UIScrollView *)scrollView {
     if (infoListView.contentOffset.y >= ) { // 当滚动视图滚动到y值大于等于10的情况下
         [UIView animateWithDuration:0.25 animations:^{
             bgView.alpha = 0.8;
         }];
     } else if (infoListView.contentOffset.y <  && infoListView.contentOffset.y >= -) {
         [UIView animateWithDuration:0.25 animations:^{
             bgView.alpha = 0.0;
             bgView.hidden = NO;
             searchBarBgView.hidden = NO;
         }];
     }  else if (infoListView.contentOffset.y < -) {
         [UIView animateWithDuration:0.25 animations:^{
             bgView.hidden = YES;
             searchBarBgView.hidden = YES;
         }];
     }
 }

 #pragma mark - UITextFieldDelegate
 - (BOOL)textFieldShouldReturn:(UITextField *)textField {
     [searchBarTF resignFirstResponder];
     return YES;
 }

 @end