城市选择之搜索框

新项目要做城市选择,效果图出来,用系统的搜索框达不到效果图的效果,设置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
时间: 2024-10-29 19:08:45

城市选择之搜索框的相关文章

类似于铁道部12306的城市选择框的实现

第一次写,有点小紧张... 这两天研究铁道部的余票查询系统,参考网上大牛们的经典案例,也有了一些自己的心得,写在自己程序猿的道路上记录一下,也和大家一起分享,写的不好莫怪,大牛可以自动过滤,非喜勿喷,谢谢~ 今天先简单的介绍一下城市选择框的实现,与12306官网有一点差距,上图,先看看效果:      如图所示,支持拼音首字母查询,全拼音查询,汉字查询等 好了,现在谈一谈我是怎么实现的 首先是准备工作: 我们需要把城市的信息存入我们的数据库中,城市数据来源:https://kyfw.12306.

Android UI(五)云通讯录项目之联系人列表,带侧滑选择,带搜索框

作者:泥沙砖瓦浆木匠网站:http://blog.csdn.net/jeffli1993个人签名:打算起手不凡写出鸿篇巨作的人,往往坚持不了完成第一章节.交流QQ群:[编程之美 365234583]http://jq.qq.com/?_wv=1027&k=XVfBTo 要捐钱的就打支付宝吧:13958686678(泥瓦匠开个玩笑~) 一.前言 继续AndroidUI系列,泥瓦匠又要开始扯淡了.哈哈今天在文章头加了个支付宝账号.我也真逗,至今没收到一笔是写博客的钱.或是分享的.泥瓦匠也就挂着逗逗乐

360浏览器搜索框下拉选择图片js模拟select效果

最近360浏览器网址导航的主页增加了一个下拉选择图片搜索的功能,也就是用js模拟出了select的效果,今天在单位闲了无事干,就把空上功能给摸索出来了,虽然做的不是太完善,但对要求不高的用户来说,已经可以了,而且也可以为学习Js的朋友提供参考. <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <style>

jquery下拉城市选择代码

非常好的下拉城市选择代码,可选择热门城市,按字母排序的城市选择,带搜索框样式. <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>jQuery下拉框美化特效-素材吧</title> <meta http-equiv="X-UA-Compatible" content=&quo

不带搜索框,数据同步请求,产品按字母分组组件

组件效果: 搜索效果: 组件js 代码: /* * * 全局空间 SearchBox * */var SearchBox = {};/* * * 静态方法集 * @name _method * */SearchBox._method = { /* 选择元素 */ $:function (arg, context) { var tagAll, n, eles = [], i, sub = arg.substring(1); context = context || document; if (ty

314 Ajax案例:邮箱地址验证,搜索框输入自动提示,省市区三级联动

Aja案例接口文档 测试地址:http://localhost:3000 请求参数类型:application/x-www-form-urlencoded 邮箱地址验证 简要描述 验证邮箱@itcast.cn地址是否唯一,已注册 [[email protected]符合规则,未注册itheima] 请求地址 /verifyEmailAdress 请求方式 GET 参数 参数名 必选 类型 说明 email 是 string 待验证邮箱地址 返回值 {message: '邮箱地址已经注册过了, 请

模拟百度搜索框,输入时显示历史记录

今天写了个小demo,利用本地存储的特点,模拟百度搜索框. 主要知识是利用本地存储的特点,模拟百度搜索时的历史记录显示. 主要HTML代码为 <div class="search"> <input type="text"/> <button class="btn">搜索</button> </div> <ul class="hidden"> <li&

iOS --- 搜索框UISearchController的使用(iOS8.0以后替代UISearchBar + UISearchDisplayController的组合)

在iOS 8.0以上版本中, 我们可以使用UISearchController来非常方便地在UITableView中添加搜索框. 而在之前版本中, 我们还是必须使用UISearchBar + UISearchDisplayController的组合方式. 添加UISearchController属性: @property(strong, nonatomic) UISearchController *searchController; @property(strong, nonatomic) NS

带分类页签搜索框的实现

需求:类似于淘宝搜索框,可以根据选择不同的分类进行帅选查询,效果图如下: aspx代码如下: <div id="divSearch" class="form-wrapper"> <div class="tab_area"> <div id="divWaterMeterCode" class="tab hover"><span onclick="setSea