在很多APP中,我们都可以看见那些特效绚丽的滑动选项条,那么如何才能够简单,快速的实现那样的效果呢?首先我们分析一下那样的控件都需要什么?
1、既然是选项条,必然需要选择,因此我们需要UIButton。
2、选择那个button,那个button的背景从之前选择的那个平滑的移动到当前选择的button上,因此我们不能单纯的使用button的背景色,我们需要一个转为提供颜色的view,这样才有可能达到视图的平滑移动。
3、我们这些view需要一个载体,进行同意管理,因此我们需要一个MainView,来承载这些控件。
好了,分析完了,我们动手吧。
第一步:我们需要定义一些我们需要的对象,某些变量需要全局使用,定义的时候根据需要在权衡。
#import <UIKit/UIKit.h>
@interface ViewController : UIViewController{
NSMutableArray *btnArray;
NSMutableArray *titleArray;
}
@property (nonatomic,strong) UIView *customView;
@property (nonatomic,strong) UIView *backView;
@property (nonatomic,strong) UIButton *myButton;
-(void)myButtonClcik:(id)sender;
@end
第二步:在我们的额viewdidload方法中,或者自定义一个方法中创建我么的界面元素。《这里我引日了QuartzCore框架,是为了使用其layer属性》
#import "ViewController.h"
#import <QuartzCore/QuartzCore.h>
@interface ViewController ()
@end
@implementation ViewController
@synthesize customView;
@synthesize backView;
@synthesize myButton;
//每行显示的button个数
#define kSelectNum 6
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
//创建背景视图,并设置背景颜色或者图片
customView = [[UIView alloc]initWithFrame:CGRectMake(20, 100, 900, 60)];
customView.backgroundColor = [UIColor blackColor];
//设置customView的样式,变为圆角
customView.layer.cornerRadius = 15.0f;
customView.layer.masksToBounds = YES;
//将customView add 到当前主View中
[self.view addSubview:customView];
//创建button的背景视图
backView = [[UIView alloc] initWithFrame:CGRectMake(5, 5, 95, 50)];
backView.backgroundColor = [UIColor blueColor];
//设置为圆角。以免造成重叠显示
backView.layer.cornerRadius = 15.0f;
backView.layer.masksToBounds = YES;
//将backView视图add到customView中
[customView addSubview:backView];
//创建button,首先button的个数是不固定的,因此我们需要动态的生成button
//创建数组,保存button的title
btnArray = [[NSMutableArray alloc]init];
titleArray = [[NSMutableArray alloc]initWithObjects:@"热播大片",@"最新更新",@"最热观看",@"美剧大片",@"韩剧频道",@"综艺娱乐", nil];
//动态生成button
for (int i = 0; i < kSelectNum; i ++){
myButton = [UIButton buttonWithType:UIButtonTypeCustom];
myButton.titleLabel.font = [UIFont boldSystemFontOfSize:20.0f];
[myButton setTitle:[titleArray objectAtIndex:i] forState:UIControlStateNormal];
[myButton setTitleColor:[UIColor grayColor] forState:UIControlStateNormal];
[myButton setTitleColor:[UIColor whiteColor] forState:UIControlStateSelected];
[myButton setFrame:CGRectMake(i%(kSelectNum + 1)*140+5, 5, 95, 50)];
[myButton addTarget:self action:@selector(myButtonClcik:) forControlEvents:UIControlEventTouchUpInside];
myButton.tag = i;
[btnArray addObject:myButton];
[customView addSubview:myButton];
//设置默认选择的button.title的颜色
if(i == 0){
myButton.selected = YES;
}
}
}
第三步:我们为button添加按钮点击事件,同时设置背景色滑动特效。
- (void)myButtonClcik:(id)sender{
// NSString *selectedBtn = [NSString stringWithFormat:@"%@",[titleArray objectAtIndex:button.tag]];
// UIAlertView *alert = [[UIAlertView alloc]initWithTitle:nil message:selectedBtn delegate:self cancelButtonTitle:@"OK" otherButtonTitles:nil, nil];
// [alert show];
//添加动画过度效果
[UIView beginAnimations:@"slowGlide" context:nil];
[UIView setAnimationDuration:0.3f];
//设置每次只能选择一个button
UIButton *button = (UIButton *)sender;
if(!button.selected){
for (UIButton *eachBtn in btnArray) {
if(eachBtn.isSelected){
[eachBtn setSelected:NO];
}
}
[button setSelected:YES];
//设置点击那个按钮,那个按钮的背景改变为backView的颜色
[backView setFrame:button.frame];
}
[UIView commitAnimations];
}
最后成型,我们就可以根据我们的样式需要进行调整了。
此种方法简单,但是可能有些地方不合理,望高手指点。
demo 下载地址:http://download.csdn.net/detail/zyc851224/4492735
分享到:
相关推荐
新手自定义背景滑动的选项条,有待改进,适合新手。
Android自定义SeekBar滑动条
自定义控件实现横向滑动背景图视差效果
HTML调用JS实现多项滑动门选项卡特效 国开电大Dreamweaver网页设计形考任务八答案, 更新版国家开放大学/电大专科《Dreamweaver网页设计》形考任务八。
原生js选项卡插件自定义图片滑动选项卡切换 原生js选项卡插件自定义图片滑动选项卡切换 原生js选项卡插件自定义图片滑动选项卡切换
winform 实现类似于TrackBar的自定义滑动条,功能更全
形考任务八 HTML 调用js实现多项滑动门选项卡特效。
一个给自定义控件加滑动条的简单例子,适合比较简单的自定义控件。基本思路是外层在套一个自定义控件,加Panel.
ViewPager实现一个Activity装载多个自定义layout文件,实现左右滑动 页面效果。 (实现电视遥控器效果。)
一个实现Android自定义滑动选择的简单Demo,简单、可读性强,但只有简单的注释
自定义(滑动条)input[type="range"]样式; 完成以下的五个步骤: 去除系统默认的样式; 给滑动轨道(track)添加样式; 给滑块(thumb)添加样式; 根据滑块所在位置填充进度条; 实现多浏览器兼容。
对应博客:http://blog.csdn.net/u013347241/article/details/51560290
android--解决方案--自定义tabhost(动态添加选项+带自动水平滑动选项卡+手势切换选项卡及内容功能)
自定义TabHost实现背景图片随选项卡切换滑动效果
用ViewPager+自定义的MonthDateView实现可无限滑动的日历查看、事务标识
Android自定义滑动条,简单又实用。。。
一个自定义的可以滑动的时间选择控件
主要介绍了微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能,结合实例形式分析了微信小程序自定义顶部TabBar选项卡页面切换功能的相关布局、样式及功能实现技巧,需要的朋友可以参考下
当滑动时:数值显示,滑动停止时显示数字,使用FrameLayout结合SeekBar。 首先我们看看。 Layout: <?xml version=1.0 encoding=utf-8?> xmlns:tools=http://schemas.android.com/tools> <...
首先非常感谢网友Ivin的无私分享,这是他分享到JquerySchool网站上的第一个作品,是用jquery仿京东滑动选项卡特效,他在做项目的过程中用到了这种特效,跟以往分享的选择卡特效有点不一样,它是带游标在菜单下面滑动...