一行代码搞定淘宝视图切换效果
1、先上图，无图无真相无发言权2、基本设计思路
2.1、该控件继承自UIView，在UIView上添加一个ScrollView，再在ScrollView上添加按钮及标记(UIView)
2.2、初始化的时候创建相关子视图（ScrollView、UIButton、UIView）
2.3、用户传入一个字符串数组，根据该数组创建相对应的按钮，并自动按顺序均匀摆放在视图上
2.4、当用户点击其中一个按钮时，该按钮处理选中状态，下标通过动画形式移动到该按钮下方，并通知代理处理相关事件（如：切换视图）
2.5、扩展性：为什么下面还要放一个ScrollView呢？因为当添加的按钮过多，无法一屏显示的时候需要能够左右拖动（这里还未实现，但预留了）
3、使用说明
3.1、代码创建：
SASwitchBar *switchBar = initWithItems:@[@"标题一" @"标题二", @"标题三", @"标题四"]];
switchBar.frame = (CGRect){0, 0, 320, 40};
3.2、xib创建：
3.2.1、拖拽一个UIView到你想要的位置，并设置大小
3.2.2、设置该View的Class为SASwitchBar
3.2.3、连线，设置标题，如：self.switchBar.title = ;
4、关键代码：
SASwitchBar.h
//
//SASwitchBar.h
//MIG
//
//Created by 余西安 on 14/12/13.
//Copyright (c) 2014年 Sian. All rights reserved.
//
#import <UIKit/UIKit.h>
@class SASwitchBar;
@protocol SASwitchBarDelegate <NSObject>
- (void)switchBar:(SASwitchBar *)switchBar seletedIndex:(NSInteger)index;
@end
@interface SASwitchBar : UIView
@property (nonatomic, weak) id<SASwitchBarDelegate> delegate;
@property (nonatomic, strong) UIColor *selColor;
@property (nonatomic, strong) NSArray *items;
@property (nonatomic, assign) NSInteger selectedIndex;
- (instancetype)initWithItems:(NSArray *)items;
@end
SASwitchBar.m
//
//SASwitchBar.m
//MIG
//
//Created by 余西安 on 14/12/13.
//Copyright (c) 2014年 Sian. All rights reserved.
//
#define kSignalH 2 //下标高度
#import "SASwitchBar.h"
@interface SASwitchBar()
{
UIScrollView *_scrollView;
UIView *_signal; // 控件下标
UIButton *_selectedItem; // 当前控件
}
@end
@implementation SASwitchBar
#pragma mark - 初始化方法
// 基本控件创建
- (void)initialize
{
_signal = [ init];
_scrollView = [ init];
;
;
}
// 供xib形式创建
- (instancetype)initWithCoder:(NSCoder *)aDecoder
{
if (self = ) {
;
}
return self;
}
// 以代码形式创建
- (instancetype)init
{
if (self = ) {
;
}
return self;
}
// 以代码形式创建
- (instancetype)initWithItems:(NSArray *)items
{
if (self = ) {
;
;
}
return self;
}
// 子控件位置尺寸调整
- (void)layoutSubviews
{
_scrollView.frame = (CGRect){CGPointZero, self.frame.size};
NSInteger items = self.items.count;
CGFloat btnW = self.frame.size.width / items;
CGFloat btnH = self.frame.size.height - kSignalH;
for (int i = 0; i < items; i ++) {
UIButton *btn = self.items;
btn.frame = CGRectMake(i * btnW, 0, btnW, btnH);
}
_signal.frame = CGRectMake(0, btnH, btnW, kSignalH);
}
#pragma mark - 成员属性设置
// 设置选择项(传入字符串数组，创建对应选择控件)
- (void)setItems:(NSArray *)items
{
NSMutableArray *array = ;
// 创建多个按钮并设置tag，添加到ScrollView
for (int i = 0; i < items.count; i++) {
UIButton *btn = ;
btn.tag = i + 1;
;
forState:UIControlStateNormal];
btn.titleLabel.font = ;
forState:UIControlStateNormal];
;
;
}
_items = ;
// 默认选中颜色为橙色，选中第一个控件
self.selColor = ;
self.selectedIndex = 0;;
}
// 当前选中序号（下标跟随选中控件移动位置）
- (void)setSelectedIndex:(NSInteger)selectedIndex
{
_selectedIndex = selectedIndex;
];
}
// 设置高亮颜色（选中控件文字颜色及下标颜色）
- (void)setSelColor:(UIColor *)selColor
{
_selColor = selColor;
_signal.backgroundColor = selColor;
for (UIButton *btn in self.items) {
;
}
}
#pragma mark - 事件处理
// 按钮事件
- (void)switchItem:(UIButton *)button
{
// 切换按键，变量按钮控件状态
_selectedItem.selected = NO;
_selectedItem = button;
button.selected = YES;
// 调整下标位置，动画效果过渡
CGRect rect = button.frame;
CGFloat x = rect.origin.x;
CGFloat y = rect.origin.y + rect.size.height;
CGFloat w = rect.size.width;
CGFloat h = rect.size.height;
[UIView animateWithDuration:0.3 animations:^{
_signal.frame = CGRectMake(x, y, w, h);
}];
// 通知代理
if () {
;
}
}
@end
5、Demo下载：**** Hidden Message *****
好样的:victory: 借鉴下,望楼主多多共享资源啊 非常感谢分享. :lol:lol:lol:lol:lol:lol:lol:lol:lol:lol:lol:lol:lol 下载demo
页:
[1]