IOS改变UISearchBar中搜索框的高度

2016-02-19 09:15 10 1 收藏

只要你有一台电脑或者手机,都能关注图老师为大家精心推荐的IOS改变UISearchBar中搜索框的高度,手机电脑控们准备好了吗?一起看过来吧!

【 tulaoshi.com - 编程语言 】

一、系统的searchBar
1、UISearchBar的中子控件及其布局
UIView(直接子控件) frame 等于 searchBar的bounds,view的子控件及其布局

UISearchBarBackground(间接子控件) frame 等于searchBar的bounds
UISearchBarTextField(间接子控件) frame.origin等于(8.0, 6.0),即不等于searchBar的bounds

2、改变searchBar的frame只会影响其中搜索框的宽度,不会影响其高度,原因如下:

系统searchBar中的UISearchBarTextField的高度默认固定为28
左右边距固定为8,上下边距是父控件view的高度减去28除以2

二、改变UISearchBar的高度
1、方案
重写UISearchBar的子类(IDSearchBar),重新布局UISearchBar子控件的布局
增加成员属性contentInset,控制UISearchBarTextField距离父控件的边距

若用户没有设置contentInset,则计算出默认的contentInset
若用户设置了contentInset,则根据最新的contentInset布局UISearchBarTextField

2、具体实现
重写UISearchBar的子类

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/bianchengyuyan/)
class IDSearchBar: UISearchBar {}

增加成员属性contentInset(可选类型),控制UISearchBarTextField距离父控件的边距,监听其值的改变,重新布局searchBar子控件的布局

var contentInset: UIEdgeInsets? {  didSet {self.layoutSubviews()  }}

重写layoutSubviews()布局searchBar的子控件

override func layoutSubviews() {  super.layoutSubviews()  // view是searchBar中的唯一的直接子控件  for view in self.subviews {// UISearchBarBackground与UISearchBarTextField是searchBar的简介子控件for subview in view.subviews {  // 找到UISearchBarTextField  if subview.isKindOfClass(UITextField.classForCoder()) {if let textFieldContentInset = contentInset { // 若contentInset被赋值  // 根据contentInset改变UISearchBarTextField的布局  subview.frame = CGRect(x: textFieldContentInset.left, y: textFieldContentInset.top, width: self.bounds.width - textFieldContentInset.left - textFieldContentInset.right, height: self.bounds.height - textFieldContentInset.top - textFieldContentInset.bottom)} else { // 若contentSet未被赋值  // 设置UISearchBar中UISearchBarTextField的默认边距  let top: CGFloat = (self.bounds.height - 28.0) / 2.0  let bottom: CGFloat = top  let left: CGFloat = 8.0  let right: CGFloat = left  contentInset = UIEdgeInsets(top: top, left: left, bottom: bottom, right: right)}  }}  }}

三、IDSearchBar使用示例
1、未设置contentInset
设置searchBar的frame

searchBar.frame = CGRect(x: 80, y: 100, width: 200, height: 40)

效果如图


2、设置contentInset
设置searchBar的frame

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/bianchengyuyan/)
searchBar.frame = CGRect(x: 80, y: 100, width: 200, height: 40)

设置searchBar的contentInset

// 设置contentInsetsearchBar.contentInset = UIEdgeInsets(top: 0, left: 8, bottom: 0, right: 8)

效果如图

四、IDSearchBar的设计原则
1、注意

UISearchBar默认是有自己默认的布局方式的
设计IDSearchBar旨在改变searBar中搜索框的高度,但是可能会有改变宽的的需求

2、设计原则

在没有改变searchBar中搜索框的高度的需求时,需要使用UISearchBar的默认布局
若需要改变searchBar中搜索框的高度的需求时,需要按照需求来改变UISearchBar的布局
为了增加可控性,在IDSearchBar中增加成员属性contentInset来控制IDSearchBar的内边距

以上就是本文的全部内容,希望对大家的学习有所帮助。

来源:http://www.tulaoshi.com/n/20160219/1590063.html

延伸阅读
标签: Web开发
今天我将介绍一下如何使用CSS中的背景图片来设计你的搜索框。之前我使用别的方法来实现我的表单和搜索框,但是这种方法看起来会更容易些,所以我想将它与感兴趣的朋友分享。 View Demo 原始方式 首先来让我们看看我的原始的使用input type=”image” src=”image_url” /的方法: form method="get" id="searchform" actio...
首先在Interface Builder中选择TextFields,然后在Text Field Attributes中找到Text Input Traits,选择Return Key为done。OK 定义方法 - (IBAction) textFieldDoneEditing:(id)sender; //按下Done键关闭键盘 实现方法 代码如下: //按完Done键以后关闭键盘 - (IBAction) textFieldDoneEditing:(id)sender { [sender resignFirstRespond...
在用VC开发应用程序时,经常会要做一些可以改变大小的对话框,而这个时候就要求对话框上的控件会随着对话框大小的改变而改变自己的位置和大小。如果控件比较少,那可以在对话框的OnSize()事件里面添加代码,通过计算来调整各个控件的位置和大小;但是,如果对话框上的控件比较多的话,那这将是一件非常痛苦的事情!要是程序中又有很多可以...
家具高度有学问,装修中家具高度的选择 经常有朋友问居室装修中各种家具的高度。的确如此,到了一个环境如果各个家具高度对您来说都是得心应手的,那会生活的非常舒服,如果家具高度不正确,那么生活起来就十分的别扭,哪怕只差1cm,也会使我们束手束脚。家庭中的日用品和常用器具,宜放在容易靠近的地方或置于容易使用的位置。下...
钉钉搜索框支持关键字搜索吗?   支持,可以通过拼音、关键字进行搜索;

经验教程

667

收藏

87
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部