城市选择之搜索框

简介:

新项目要做城市选择,效果图出来,用系统的搜索框达不到效果图的效果,设置searchBarStyle属性时,UISearchBarStyleDefault时设置barTintColor后边框会有黑线,设置UISearchBarStyleMinimal时无黑线单文本框颜色不符合要求。所以就自定义了下。先看下效果图

上面两个效果图的区别就是下面的图有个城市和图片。所以就封装到一个类中。只是TextField的LeftView变化。还有个问题就是城市名长短不一,设置城市的时候要进行重绘,所以我在set城市名的时候调用重绘方法。具体代码如下:


//
//  SearchTextField.h
//  LocationDemo
//
//  Created by City--Online on 15/11/30.
//  Copyright © 2015年 City--Online. All rights reserved.
//

#import <UIKit/UIKit.h>

typedef  void(^LeftBtnClickBlock)();

@interface SearchTextField : UITextField

@property (nonatomic,strong) NSString *leftTitle;

@property (nonatomic,copy)   LeftBtnClickBlock btnClickBlock;

-(instancetype)initNoLeftTitleWithFrame:(CGRect)frame;
@end


//
//  SearchTextField.m
//  LocationDemo
//
//  Created by City--Online on 15/11/30.
//  Copyright © 2015年 City--Online. All rights reserved.
//

#import "SearchTextField.h"
#import "Global.h"

@interface SearchTextField ()

@property (nonatomic,strong) UIButton *leftBtn;

@property (nonatomic,strong) UIImageView *leftImgView;

@property (nonatomic,strong) UIImageView *searchImgView;

@property (nonatomic,assign) BOOL isNoLeftTitle;
@end

@implementation SearchTextField
-(instancetype)initNoLeftTitleWithFrame:(CGRect)frame
{
    _isNoLeftTitle=YES;
    return [self initWithFrame:frame];
}
- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        
        self.layer.cornerRadius=5;
        self.layer.borderWidth=0.5;
        self.layer.borderColor=XQBColorLineLight.CGColor;
        self.leftViewMode=UITextFieldViewModeAlways;
        self.clearButtonMode=UITextFieldViewModeWhileEditing;
        self.backgroundColor=[UIColor whiteColor];
        
        self.leftView=[[UIView alloc]init];
        
        _leftBtn =[UIButton buttonWithType:UIButtonTypeSystem];
        [_leftBtn addTarget:self action:@selector(btnClickHandle:) forControlEvents:UIControlEventTouchUpInside];
        [_leftBtn setTitleColor:XQBColorTextMostLight forState:UIControlStateNormal];
        [_leftBtn setContentHorizontalAlignment:UIControlContentHorizontalAlignmentLeft];

        _leftImgView=[[UIImageView alloc]init];
        _leftImgView.image=[UIImage imageNamed:@"login_location_down.png"];
        [_leftBtn addSubview:_leftImgView];
        
        [self.leftView addSubview:_leftBtn];
        
        _searchImgView=[[UIImageView alloc]init];
        _searchImgView.image=[UIImage imageNamed:@"login_location_search.png"];
        [self.leftView addSubview:_searchImgView];
        
    }
    return self;
}

-(void)layoutSubviews
{
    [super layoutSubviews];
    
    if (_isNoLeftTitle) {
        self.leftView.frame=CGRectMake(0, 0, 35, self.frame.size.height);
        _leftBtn.frame=CGRectMake(0, 0, 0, 0);
        
        _leftImgView.frame=CGRectMake(0, 0, 0, 0);
        _searchImgView.frame=CGRectMake(10, (self.frame.size.height-15)/2, 15, 15);
    }
    else{
        NSDictionary *attributes=@{NSFontAttributeName: XQBFontMiddle};
        CGRect titleFrame=[_leftTitle boundingRectWithSize:CGSizeMake(MAXFLOAT, MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin attributes:attributes context:nil];
        
        
        self.leftView.frame=CGRectMake(0, 0, 62+titleFrame.size.width, self.frame.size.height);
        
        _leftBtn.frame=CGRectMake(10, 0, titleFrame.size.width+22, self.frame.size.height);
        
        [_leftBtn setTitle:_leftTitle forState:UIControlStateNormal];
        
        _leftImgView.frame=CGRectMake(titleFrame.size.width+10, (self.frame.size.height-5)/2, 10, 5);
        
        _searchImgView.frame=CGRectMake(titleFrame.size.width+37, (self.frame.size.height-15)/2, 15, 15);
    }
    
}

-(void)btnClickHandle:(id)sender
{
    _btnClickBlock();
}

-(void)setLeftTitle:(NSString *)leftTitle
{
    _leftTitle=leftTitle;
    _isNoLeftTitle=NO;
    [self setNeedsLayout];
}
@end

相关文章
|
6月前
|
JSON JavaScript 定位技术
Echarts自定义地图显示区域,可以显示街道,小区,学校等区域
Echarts自定义地图显示区域,可以显示街道,小区,学校等区域
|
前端开发 JavaScript
Select2(4.0.6)城市搜索
实现了城市列表的前端搜索,输入汉字、拼音首字母均可搜索,前端搜索。
913 0
Select2(4.0.6)城市搜索
|
传感器 编解码 定位技术
ARHUD驾车导航技术概览
ARHUD (Augmented Reality Head Up Display),即增强现实与抬头显示的结合,是一种将渲染元素投影在真实世界的技术,也是目前用户理解成本最低的展示方式。
ARHUD驾车导航技术概览
|
小程序 JavaScript 定位技术
小程序里显示店铺地址,可在地图上查看,可点击导航到店铺
小程序里显示店铺地址,可在地图上查看,可点击导航到店铺
253 0
|
前端开发
用HTML+css制作一个动态的天气图标
用HTML+css制作一个动态的天气图标
210 0
用HTML+css制作一个动态的天气图标
|
前端开发 定位技术 API
高德地图实现 定位,拖拽选址,搜索选址,搜索记录,城市切换(推荐)
高德地图实现 定位,拖拽选址,搜索选址,搜索记录,城市切换(推荐)
350 0
|
前端开发 定位技术 API
前端通过高德地图实现 定位,拖拽选址,搜索选址,搜索记录,城市切换【推荐】
前端通过高德地图实现 定位,拖拽选址,搜索选址,搜索记录,城市切换【推荐】
345 0
|
索引
好客租房145-渲染城市列表(展示城市索引)
好客租房145-渲染城市列表(展示城市索引)
165 0
好客租房145-渲染城市列表(展示城市索引)
|
索引
好客租房148-渲染右侧索引列表(滚动城市列表高亮)
好客租房148-渲染右侧索引列表(滚动城市列表高亮)
119 0
好客租房148-渲染右侧索引列表(滚动城市列表高亮)
|
索引
好客租房149-渲染右侧索引列表(点击索引指定该索引城市)
好客租房149-渲染右侧索引列表(点击索引指定该索引城市)
110 0
好客租房149-渲染右侧索引列表(点击索引指定该索引城市)