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

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

上一篇:SqlServer批量压缩数据库日志-多数据库批量作业,批量备份还原


下一篇:loadrunner关联边界乱码