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

  1 #define kScreenWidth  [UIScreen mainScreen].bounds.size.width
  2 #define kScreenHeight [UIScreen mainScreen].bounds.size.height
  3 
  4 #import "mainViewController.h"
  5 
  6 @interface mainViewController () <UIScrollViewDelegate, UITextFieldDelegate> {
  7     // 滚动列表
  8     UIScrollView *infoListView;
  9     // 滚动列表上展示信息的view
 10     UIView *infoView;
 11     // 顶部广告栏
 12     UIView *topAdView;
 13     // 定位按钮
 14     UIButton *loacBtn;
 15     // 搜索输入框
 16     UITextField *searchBarTF;
 17     // 二维码扫描按钮
 18     UIButton *scanBtn;
 19     // 顶部渐变背景条
 20     UIView *bgView;
 21     // 承载按钮,搜索输入框等控件的条
 22     UIView *searchBarBgView;
 23     
 24 }
 25 
 26 @end
 27 
 28 @implementation mainViewController
 29 
 30 - (void)viewDidLoad {
 31     [super viewDidLoad];
 32     // 创建scrollView
 33     [self createScrollview];
 34     // 创建顶部广告栏
 35     [self createTopAdView];
 36     // 创建根据滚动渐变的顶部栏
 37     [self createBgView];
 38     // 创建导航条
 39     [self createSearchBar];
 40     
 41 }
 42 
 43 - (void)viewWillAppear:(BOOL)animated {
 44     [self.navigationController setNavigationBarHidden:YES];
 45     [super viewWillAppear:animated];
 46 }
 47 
 48 #pragma mark - 创建scrollView
 49 - (void)createScrollview {
 50     infoListView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, kScreenWidth, kScreenHeight)];
 51     infoListView.backgroundColor = [UIColor whiteColor];
 52     [self.view addSubview:infoListView];
 53     infoListView.contentSize = CGSizeMake(0, 1000);
 54     infoListView.scrollEnabled = YES;
 55     infoListView.delegate = self;
 56 //    infoListView.showsVerticalScrollIndicator = NO;
 57     // 将infoView加载到scrollView上
 58     infoView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, kScreenWidth, 1000)];
 59     infoView.userInteractionEnabled = YES;
 60     infoView.backgroundColor = [UIColor lightGrayColor];
 61     [infoListView addSubview:infoView];
 62 
 63 
 64 }
 65 #pragma mark - 创建顶部广告栏
 66 - (void)createTopAdView {
 67     topAdView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, kScreenWidth, 200)];
 68     topAdView.backgroundColor = [UIColor blackColor];
 69     [infoView addSubview:topAdView];
 70 
 71 }
 72 #pragma mark - 顶部渐变栏
 73 - (void)createBgView {
 74     bgView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, kScreenWidth, 65)];
 75     bgView.backgroundColor = [UIColor orangeColor];
 76     bgView.alpha = 0.0;
 77     [self.view addSubview:bgView];
 78     [self.view bringSubviewToFront:bgView];
 79 }
 80 #pragma mark - 搜索栏,地址定位按钮, 扫描按钮
 81 - (void)createSearchBar {
 82     // 1.创建导航条背景
 83     searchBarBgView = [[UIView alloc] initWithFrame:CGRectMake(0, 20, kScreenWidth, 45)];
 84     searchBarBgView.backgroundColor = [UIColor clearColor];
 85     [self.view addSubview:searchBarBgView];
 86     // 2.创建label
 87     UILabel *loacLabel = [[UILabel alloc] initWithFrame:CGRectMake(8, 5, 33, 33)];
 88     loacLabel.text = @"我在";
 89     loacLabel.textColor = [UIColor whiteColor];
 90     loacLabel.textAlignment = NSTextAlignmentRight;
 91     loacLabel.font = [UIFont systemFontOfSize:14.0];
 92     loacLabel.backgroundColor = [UIColor clearColor];
 93     [searchBarBgView addSubview:loacLabel];
 94     // 3.创建定位按钮
 95     loacBtn = [UIButton buttonWithType:UIButtonTypeCustom];
 96     loacBtn.frame = CGRectMake(41, 5, 60, 33);
 97     loacBtn.backgroundColor = [UIColor orangeColor];
 98     [loacBtn setImage:[UIImage imageNamed:@"1.8"] forState:UIControlStateNormal];
 99     [loacBtn setImageEdgeInsets:UIEdgeInsetsMake(0, 45, 0, 0)];
100     [loacBtn setTitle:@"深圳" forState:UIControlStateNormal];
101     [loacBtn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
102     [loacBtn setTitleColor:[UIColor lightGrayColor] forState:UIControlStateHighlighted];
103     loacBtn.titleLabel.font = [UIFont systemFontOfSize:14.0];
104     loacBtn.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;
105     loacBtn.contentEdgeInsets = UIEdgeInsetsMake(0, -15, 0, 0);
106     loacBtn.backgroundColor = [UIColor clearColor];
107     [searchBarBgView addSubview:loacBtn];
108     // 4.搜索框
109     // 4.1创建搜索框背景
110     UIImageView *searchBgView = [[UIImageView alloc] initWithFrame:CGRectMake(105, 5, 205, 35)];
111     [searchBgView setImage:[UIImage imageNamed:@"1.6"]];
112     searchBgView.userInteractionEnabled = YES;
113     [searchBarBgView addSubview:searchBgView];
114     // 4.2 搜索图标
115     UIImageView *searchIcon = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"1.5"]];
116     searchIcon.frame = CGRectMake(15, searchBgView.frame.size.height/2 - 15/2, 15, 15);
117     [searchBgView addSubview:searchIcon];
118     // 4.3 搜索输入框
119     searchBarTF = [[UITextField alloc] initWithFrame:CGRectMake(30, searchBgView.frame.size.height/2 - 30/2, 155, 30)];
120     searchBarTF.backgroundColor = [UIColor clearColor];
121     searchBarTF.textColor = [UIColor blackColor];
122     searchBarTF.textAlignment = NSTextAlignmentLeft;
123     searchBarTF.font = [UIFont systemFontOfSize:15.0];
124     searchBarTF.delegate = self;
125     [searchBarTF setClearButtonMode:UITextFieldViewModeWhileEditing];
126     [searchBgView addSubview:searchBarTF];
127     // 5. 扫描二维码按钮
128     scanBtn = [UIButton buttonWithType:UIButtonTypeCustom];
129     scanBtn.frame = CGRectMake(kScreenWidth - 40, 13, 22, 22);
130     [scanBtn setImage:[UIImage imageNamed:@"icon_scan_white"] forState:UIControlStateNormal];
131     [searchBarBgView addSubview:scanBtn];
132     
133     [self.view bringSubviewToFront:searchBarBgView];
134 }
135 
136 #pragma mark - UIScrollViewDelegate
137 - (void)scrollViewDidScroll:(UIScrollView *)scrollView {
138     if (infoListView.contentOffset.y >= 0) { // 当滚动视图滚动到y值大于等于10的情况下
139         [UIView animateWithDuration:0.25 animations:^{
140             bgView.alpha = 0.8;
141         }];
142     } else if (infoListView.contentOffset.y < 0 && infoListView.contentOffset.y >= -20) {
143         [UIView animateWithDuration:0.25 animations:^{
144             bgView.alpha = 0.0;
145             bgView.hidden = NO;
146             searchBarBgView.hidden = NO;
147         }];
148     }  else if (infoListView.contentOffset.y < -20) {
149         [UIView animateWithDuration:0.25 animations:^{
150             bgView.hidden = YES;
151             searchBarBgView.hidden = YES;
152         }];
153     }
154 }
155 
156 #pragma mark - UITextFieldDelegate
157 - (BOOL)textFieldShouldReturn:(UITextField *)textField {
158     [searchBarTF resignFirstResponder];
159     return YES;
160 }
161 
162 @end