模仿京东顶部搜索条效果制作的一个小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