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 ...
随机推荐
- 关于mysql远程连接
windows环境下简单,这里讲linux环境下的 首先,linux系统有一道防火墙 我用的是ubutun16.04LTS 要用ufw工具(命令)开启3306端口(ufw allow ) (如果安装的 ...
- c# 串口关闭死机
用C#编写的wince串口通信程序基本大功告成了,与之前用API函数和线程来做串口通信不同,这次直接使用SerialPort控件来做,原本以为使用控件做会简单和方便许多,没成想,还遇到了很多麻烦. 通 ...
- 12.4 hdfs总结
启动hdfs 需要在namenode 节点 上 s11 启动yarn 需要在resourceManager 节点上 namenode, resourceManager 都需要在整个集群中都是可以无密登 ...
- React Router 用法
React Router 用法 一.DEMO import React from "react"; import { HashRouter as Router, Route, Li ...
- AudioUnit录音和播放同时进行的一些注意点
录音(播放)和暂停 -(void)start { self.soundTotalLength = 0.0f; if (!self.unitHaveStart) { NSError *error = n ...
- angular 表单元素的使用总结
工作中form表单元素最常用的是input,问题没有太多,现在总结下select ,radio组,checkbox的使用 1 select 常用的使用方式,如下 var Cityis = [{id:0 ...
- LeetCode 559 Maximum Depth of N-ary Tree 解题报告
题目要求 Given a n-ary tree, find its maximum depth. The maximum depth is the number of nodes along the ...
- 20165225《Java程序设计》第三周学习总结
20165225<Java程序设计>第三周学习总结 1.视频与课本中的学习: 遇到的问题: 问题如下,无法编译. 最后经同学点出要放在同一个打包的文件夹里,于是就运行成功了,下面是4_15 ...
- sqlserver2014两台不同服务器上数据库同步
sqlserver2014两台不同服务器上数据库同步 同步了快一个月了,哈哈,因为途中比较麻烦,第一次,遇到烦的地方就停下了,今天终于同步成功了,哈哈,下面我就来介绍一下我实现两台数据库同步的过程 ...
- panda核心数据结构
Series Series是一维带标签的数组,数组里可以放任意的数据(整数.浮点数.字符串.python Object)等等 创建函数: (1)s = pd.Series(data,index=ind ...