iOS 新浪微博-2.0 搜索框/标题带箭头/下拉菜单
不管是搜索框还是下拉菜单,我们都需要对背景的图片进行拉伸。定义一个Category分类对图片进行操作。
UIImage+Effect.h
#import <UIKit/UIKit.h> @interface UIImage (Effect) /**
* 返回一张可以随意拉伸不变形的图片
*
* @param name 图片名字
*/
+ (UIImage *)imageToResizable:(NSString *)name; @end
UIImage+Effect.m
#import "UIImage+Effect.h" @implementation UIImage (Effect) /**
* 返回一张可以随意拉伸不变形的图片
*
* @param name 图片名字
*/
+ (UIImage *)imageToResizable:(NSString *)name
{
UIImage *normal = [UIImage imageNamed:name];
CGFloat w = normal.size.width * 0.5;
CGFloat h = normal.size.height * 0.5;
return [normal resizableImageWithCapInsets:UIEdgeInsetsMake(h, w, h, w)];
} @end
搜索框
由于系统自带的不符合我们的要求,自定义一个搜索框
思路:
继承UITextField,设置背景图片,左边显示的图标。
SearchBar.h
#import <UIKit/UIKit.h> @interface SearchBar : UITextField +(instancetype)searchBar; @end
SearchBar.m
#import "SearchBar.h"
#import "UIImage+Effect.h" @implementation SearchBar -(instancetype)initWithFrame:(CGRect)frame
{
if (self=[super initWithFrame:frame]) {
self.font=[UIFont systemFontOfSize:];
self.placeholder=@"请输入搜索条件";
self.background =[UIImage imageToResizable:@"searchbar_textfield_background"]; UIImageView *searchIcon=[[UIImageView alloc]init];
searchIcon.image=[UIImage imageNamed:@"searchbar_textfield_search_icon"];
searchIcon.height=;
searchIcon.width=;
// 保持图片原来的尺寸
searchIcon.contentMode=UIViewContentModeCenter;
self.leftView=searchIcon;
self.leftViewMode=UITextFieldViewModeAlways;
}
return self;
} +(instancetype)searchBar
{
return [[self alloc]init];
} @end
使用时候很简单:
- (void)viewDidLoad {
[super viewDidLoad]; SearchBar *searchBar=[SearchBar searchBar];
searchBar.width=;
searchBar.height=;
self.navigationItem.titleView=searchBar;
}
标题带箭头
思路:
- 自定义按钮
- 原生的按钮,箭头是在左边,文字在右边,通过在加载layoutSubviews,调整文字的x值是箭头的x值,箭头的x值是文字的最大x值。
- 每次文字更改,重新计算文字的size
TitleButton.h
#import <UIKit/UIKit.h> @interface TitleButton : UIButton @end
TitleButton.m
//
// TitleButton.m
//
// Created by jiangys on 15/10/8.
// Copyright © 2015年 Jiangys. All rights reserved.
// #import "TitleButton.h" @implementation TitleButton - (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
[self setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
self.titleLabel.font = [UIFont boldSystemFontOfSize:];
[self setImage:[UIImage imageNamed:@"navigationbar_arrow_down"] forState:UIControlStateNormal];
[self setImage:[UIImage imageNamed:@"navigationbar_arrow_up"] forState:UIControlStateSelected];
}
return self;
} // 目的:想在系统计算和设置完按钮的尺寸后,再修改一下尺寸
/**
* 重写setFrame:方法的目的:拦截设置按钮尺寸的过程
* 如果想在系统设置完控件的尺寸后,再做修改,而且要保证修改成功,一般都是在setFrame:中设置
*/
- (void)setFrame:(CGRect)frame
{
frame.size.width += ;
[super setFrame:frame];
} - (void)layoutSubviews
{
[super layoutSubviews];
// 如果仅仅是调整按钮内部titleLabel和imageView的位置,那么在layoutSubviews中单独设置位置即可 // 1.计算titleLabel的frame
self.titleLabel.x = self.imageView.x; // 2.计算imageView的frame
self.imageView.x = CGRectGetMaxX(self.titleLabel.frame) + ;
} - (void)setTitle:(NSString *)title forState:(UIControlState)state
{
[super setTitle:title forState:state]; // 只要修改了文字,就让按钮重新计算自己的尺寸
[self sizeToFit];
} - (void)setImage:(UIImage *)image forState:(UIControlState)state
{
[super setImage:image forState:state]; // 只要修改了图片,就让按钮重新计算自己的尺寸
[self sizeToFit];
} @end
使用:
/* 中间的标题按钮 */
TitleButton *titleButton = [[TitleButton alloc] init];
[titleButton setTitle:@"首页" forState:UIControlStateNormal]; // 监听标题点击
[titleButton addTarget:self action:@selector(titleClick:) forControlEvents:UIControlEventTouchUpInside]; self.navigationItem.titleView = titleButton;
下拉菜单
思路:
- 自定义一个下拉框DropdownMenu,该下拉框是继承一个UIView,在DropdownMenu显示的时候,设置尺寸为整个windows宽高,并设置背景颜色为无色。
- 往DropdownMenu 增加一个用来显示菜单的容器UIImageView,该容器的背景图是新浪提供,在初始化的时候,传入tableController.View ,并设置大小。
- 显示的位置,在DropdownMenu显示时设置。
- 定义两个方法,除了Show显示方法,还需要定义一个销毁方法,当DropdownMenu被点击touchesBegan时,销毁(隐藏掉)
- 定义代理,当DropdownMenu显示或者隐藏的时候,对外通知
DropdownMenu.h
#import <UIKit/UIKit.h> @class DropdownMenu; @protocol DropdownMenuDelegate <NSObject>
@optional
- (void)dropdownMenuDidDismiss:(DropdownMenu *)menu;
- (void)dropdownMenuDidShow:(DropdownMenu *)menu;
@end @interface DropdownMenu : UIView @property (nonatomic, weak) id<DropdownMenuDelegate> delegate; /**
* 内容
*/
@property (nonatomic, strong) UIView *content; /**
* 内容控制器
*/
@property (nonatomic, strong) UIViewController *contentController; /**
* 初始化菜单
*/
+(instancetype)menu; /**
* 显示
*
* @param from 要显示的控件上
*/
- (void)showFrom:(UIView *)from; /**
* 销毁
*/
- (void)dismiss; @end
DropdownMenu.m
//
// DropdownMenu.m
//
// Created by jiangys on 15/10/6.
// Copyright © 2015年 Jiangys. All rights reserved.
// #import "DropdownMenu.h"
#import "UIImage+Effect.h" @interface DropdownMenu()
/**
* 将来用来显示具体内容的容器
*/
@property (nonatomic, weak) UIImageView *containerView;
@end @implementation DropdownMenu - (UIImageView *)containerView
{
if (!_containerView) {
// 添加一个灰色图片控件
UIImageView *containerView = [[UIImageView alloc] init];
// 拉伸图片
containerView.image =[UIImage imageToResizable:@"popover_background"];
containerView.userInteractionEnabled = YES; // 开启交互
[self addSubview:containerView];
self.containerView = containerView;
}
return _containerView;
} - (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
// 清除颜色
self.backgroundColor = [UIColor clearColor];
}
return self;
} + (instancetype)menu
{
return [[self alloc] init];
} - (void)setContent:(UIView *)content
{
_content = content; // 调整内容的位置
content.x = ;
content.y = ; // 设置灰色的高度
self.containerView.height = CGRectGetMaxY(content.frame) + ;
// 设置灰色的宽度
self.containerView.width = CGRectGetMaxX(content.frame) + ; // 添加内容到灰色图片中
[self.containerView addSubview:content];
} - (void)setContentController:(UIViewController *)contentController
{
_contentController = contentController; self.content = contentController.view;
} /**
* 显示
*/
- (void)showFrom:(UIView *)from
{
// 1.获得最上面的窗口
UIWindow *window = [[UIApplication sharedApplication].windows lastObject]; // 2.添加自己到窗口上
[window addSubview:self]; // 3.设置尺寸
self.frame = window.bounds; // 4.调整灰色图片的位置
// 默认情况下,frame是以父控件左上角为坐标原点
// 转换坐标系
CGRect newFrame = [from convertRect:from.bounds toView:window];
// CGRect newFrame = [from.superview convertRect:from.frame toView:window];
self.containerView.centerX = CGRectGetMidX(newFrame);
self.containerView.y = CGRectGetMaxY(newFrame); // 通知外界,自己显示了
if ([self.delegate respondsToSelector:@selector(dropdownMenuDidShow:)]) {
[self.delegate dropdownMenuDidShow:self];
}
} /**
* 销毁
*/
- (void)dismiss
{
[self removeFromSuperview]; // 通知外界,自己被销毁了
if ([self.delegate respondsToSelector:@selector(dropdownMenuDidDismiss:)]) {
[self.delegate dropdownMenuDidDismiss:self];
}
} /**
* 点击其它空白地方销毁
*/
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
[self dismiss];
} @end
通用的时候,很简单,先实现代理,设置当前控制器为代理
/**
* 标题点击
*/
- (void)titleClick:(UIButton *)titleButton
{
// 1.创建下拉菜单
DropdownMenu *menu = [DropdownMenu menu];
menu.delegate = self; // 2.设置内容
TitleMenuViewController *vc = [[TitleMenuViewController alloc] init];
vc.view.height = ;
vc.view.width = ; menu.contentController = vc; // 3.显示
[menu showFrom:titleButton];
}
该章节源码下载:http://pan.baidu.com/s/1pJ5UTjd
新浪微博Github:https://github.com/jiangys/Weibo
iOS 新浪微博-2.0 搜索框/标题带箭头/下拉菜单的更多相关文章
- IOS第二天-新浪微博 - 添加搜索框,弹出下拉菜单 ,代理的使用 ,HWTabBar.h(自定义TabBar)
********HWDiscoverViewController.m(发现) - (void)viewDidLoad { [super viewDidLoad]; // 创建搜索框对象 HWSearc ...
- jQuery 前端复选框 全选 反选 下拉菜单联动
jQuery 页面中复选框全选.反选.下拉联动(级联) <!DOCTYPE html> <html lang="en"> <head> < ...
- 『心善渊』Selenium3.0基础 — 13、Selenium操作下拉菜单
目录 1.使用Selenium中的Select类来处理下拉菜单(推荐) 2.下拉菜单对象的其他操作(了解) 3.通过元素二次定位方式操作下拉菜单(重点) (1)了解元素二次定位 (2)示例: 页面中的 ...
- iOS开发之实现半透明蒙层背景效果[用于下拉菜单页和分享页]
郝萌主倾心贡献.尊重作者的劳动成果,请勿转载. 假设文章对您有所帮助.欢迎给作者捐赠.支持郝萌主,捐赠数额任意.重在心意^_^ 我要捐赠: 点击捐赠 Cocos2d-X源代码下载:点我传送 游戏官方下 ...
- iOS 下拉菜单 FFDropDownMenu自定义下拉菜单样式实战-b
Demo地址:https://github.com/chenfanfang/CollectionsOfExampleFFDropDownMenu框架地址:https://github.com/chen ...
- jquery带下拉菜单和焦点图
jQuery,下拉菜单,二级菜单,索引按钮,焦点图代码,jquery带下拉菜单和焦点图是一款顶部通栏带二级下拉菜单和banner导航菜单代码. JQuery特效代码来源:http://www.huiy ...
- iOS 新浪微博-5.0 首页微博列表
首页显示微博列表,是微博的核心部分,这一章节,我们主要是显示出微博的列表. 导入第三方类库 pod 'SDWebImage', '~> 3.7.3' pod 'MJRefresh', '~> ...
- IOS第四天-新浪微博 -存储优化OAuth授权账号信息,下拉刷新,字典转模型
*************application - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOpti ...
- JS实现带复选框的下拉菜单
这段时间在做后台的时候需要一个可以复选的下拉菜单,用到的是easyUI中的combo的Demo,先看看官方easyUI:http://www.jeasyui.com/documentation/ind ...
随机推荐
- 移位运算符:<<,>>,>>>总结
位移总结篇:带demo讲解 https://www.cnblogs.com/yyangblog/archive/2011/01/14/1935656.html
- 关于tomcat服务器
如果遇到jsp代码反复运行不成功,并且不报错 而且代码也重复检查过,正确无误了 那么 就不要把精力放在代码上了 有可能是服务器的问题 重启下服务器试试 ……不要问我尽经历过什么
- 在windows下用nvm 安装node
nvm 可以帮助切换node版本 在此文中,会特意指明一些坑,防止再次踩坑.第一个坑就是,如果你已经单独安装了node,建议先卸载,再来看本文. 1. nvm 下载 nvm 的下载地址:https:/ ...
- Ubuntu 18.04 安装中文输入法ibus
在安装ubuntu时,如果选择英文安装默认会不启用中文输入法的.可以通过下述方法开启 安装 pingyin 输入法 sudo apt-get install ibus-pinyin 然后在 setti ...
- iOS之WKWebView加载的网页自适应大小
一,前言 有时候在WKWebView加载页面后会发现页面的字会很小, 这是因为原网页没有做手机屏幕尺寸的适配, 那么在后台不做调整的情况下我们移动端怎样来适配页面呢? 以下代码可以适配大小(原本不可以 ...
- ms sql server读取xml文件存储过程-sp_xml_preparedocument
最近要在存储过程中读取xml中节点的值,然后进行sql操作: 要使用到的系统存储过程如下:sp_xml_preparedocument create procedure [dbo].[pro_Test ...
- 对线程发送signal
学习对线程 发送 signal #include <stdio.h> #include <stdlib.h> #include <string.h> #includ ...
- svn 部署 配置
创建目录并配置 建立版本库目录 创建一个项目名叫wy 在/data/svndata/wy mkdir -p /data/svndata/wy 建立项目版本库 创建一个新的Subversion项目wy, ...
- 20180820 JS 片段
$.post异步发送容易引起后台没有处理完,就提示错误异常.在不必要的情况下,请采用.同步的方式 $.ajaxSetup({ async: false }); 但在$.post结束后记得恢复系统默认的 ...
- what' the python之面向对象(进阶)
面向对象的知识点补充(进阶版) classmethod和staticmethod:这两个函数的用途就是可以不用实例化对象就可以调用方法 class Classmethod_Demo(): role = ...