用UIScrollview做一个网易scrollviewbar

效果如上，点击出现的图片是用UIImageview添加上的，比较简陋

我用了两种方法，第一种是直接在viewcontroller里面写代码

第二种是用了一个类来封装这个scrollviewbar 对外开放接口方法

下面就把我比较满意的第二种方法放上来

----------------------------------------假装分割线----------------

我首先新建了一个类类名如下

对外可以使用该类的类方法，直接得到一个ScrollViewBar类型的对象

在使用一个对象方法来设置scrollviewbar上要表示的标题

 1 #import <UIKit/UIKit.h>
 2 
 3 @interface ScrollViewBar : UIScrollView
 4 
 5 @property (nonatomic , strong)NSArray *nameArr;
 6 
 7 //-(void)setNameArr:(NSArray *)nameArr;
 8 
 9 
10 +(ScrollViewBar *)showScrollviewWithFrame :(CGRect)frame andContainerView :(UIView *)father andNameCount:(NSInteger)count;
11 
12 -(void)addBtnsNameArr;
13 @end

以下是类方法的实现

 1 +(ScrollViewBar *)showScrollviewWithFrame :(CGRect)frame andContainerView :(UIView *)father andNameCount:(NSInteger)count{
 2     ScrollViewBar *scrViewBar = [[ScrollViewBar alloc]initWithFrame:frame];
 3     [scrViewBar setBackgroundColor:[UIColor whiteColor]];
 4     scrViewBar.contentSize = CGSizeMake(20+90*count, frame.size.height);
 5     scrViewBar.showsHorizontalScrollIndicator = false;
 6     scrViewBar.bounces = NO;
 7     [father addSubview:scrViewBar];
 8     
 9     
10     return scrViewBar;
11 }

对象方法的实现

 1 -(void)addBtnsNameArr{
 2 
 3     self.btnArr = [NSMutableArray array];
 4     for (int i = 0; i < self.nameArr.count; i++) {
 5         UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
 6         [self addSubview:btn];
 7         //设置frame
 8         btn.frame = CGRectMake(10+90*i, 5, 80, 50);
 9         //加tag值
10         btn.tag = i + 1;
11         //设置标题 字体大小 颜色 事件
12         [btn setTitle:[self.nameArr objectAtIndex:i] forState:UIControlStateNormal];
13         [self setBtnEnabled:btn andValue:YES];
14         [btn addTarget:self action:@selector(btnDidClicked:) forControlEvents:UIControlEventTouchUpInside];
15         
16         //把btn放进数组里面去
17         [_btnArr addObject:btn];
18     }
19     UIButton * firBtn = [_btnArr objectAtIndex:0];
20     [self setBtnEnabled:firBtn andValue:NO];
21     //添加视图
22     [self initUIImageView];
23 }

给scrollviewbar上的uibutton 加点击方法

 1 -(void)btnDidClicked:(UIButton *)btn{
 2     if (btn.isEnabled == NO) {//说明已经被点击了，那么就不能再点击，
 3         
 4     }else{//还没被点 点击就会变换字的大小
 5         //先把已经点击过的字体变回来
 6         
 7         for (UIButton *clickedBtn in _btnArr) {
 8             if (clickedBtn.isEnabled == NO) {
 9                 [self setBtnEnabled:clickedBtn andValue:YES];
10             }
11         }
12         [self setBtnEnabled:btn andValue:NO];
13 
14         //改变位置
15         if (btn.tag > 2 && btn.tag < self.nameArr.count - 1) {//从第三个开始滑动 到倒数第二个
16             [self setContentOffset:CGPointMake(btn.frame.origin.x+40-self.frame.size.width/2, 0) animated:YES];
17         }else{
18             if (btn.tag < 3) {
19                 [self setContentOffset:CGPointMake(0, 0) animated:YES];
20             }else{
21                 [self setContentOffset:CGPointMake(640-self.frame.size.width, 0) animated:YES];
22                 
23             }
24         }
25         //imgview的hidden值为yes
26         
27         //把其他视图的hidden值设为yes
28     
29         for (UIImageView *imgv in _imgViewArr) {
30             imgv.hidden = YES;
31         }
32         UIImageView *imgview = [_imgViewArr objectAtIndex:btn.tag-1];
33         imgview.hidden = NO;
34     
35         
36     }
37 }

下面这个方法是用来加载点击button显示的图片imageview ，只是做一个大概的样子。

（这里可以改进，我使用了imageview的hidden属性，按道理是应该用懒加载，不过我还不怎么会，等我会了以后再写一下用懒加载的方法）

 1 //添加视图
 2 -(void)initUIImageView{
 3     self.imgViewArr = [NSMutableArray array];
 4     self.imgArr = [NSArray arrayWithObjects:@"777",@"111", @"222",@"333",@"444",@"555",@"666",nil];
 5     for (int i = 0; i < self.nameArr.count; i++) {
 6         UIImageView *imgView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:[_imgArr objectAtIndex:i]]];
 7         imgView.frame = CGRectMake(0, self.frame.origin.y +self.frame.size.height+5, self.frame.size.width, self.superview.frame.size.height - self.frame.origin.y - self.frame.size.height);
 8         imgView.hidden = YES;
 9         [self.superview addSubview:imgView];
10         [_imgViewArr addObject:imgView];
11     }
12     UIImageView *firImgview = [_imgViewArr objectAtIndex:0];
13     firImgview.hidden = NO;
14 
15 }

最后是重写enabled的set方法

 1 //重写enabled的set方法
 2 -(void)setBtnEnabled :(UIButton *)btn andValue :(BOOL)enabledV{
 3     if (enabledV == YES) {//要把btn的enabled的值设置为yes 就是让btn的格式变成蓝色的
 4         btn.titleLabel.font = [UIFont systemFontOfSize:18];
 5         [btn setTitleColor:[UIColor blueColor] forState:UIControlStateNormal] ;
 6         btn.enabled = YES;
 7     }else{
 8         btn.titleLabel.font = [UIFont systemFontOfSize:24];
 9         [btn setTitleColor:[UIColor redColor] forState:UIControlStateNormal] ;
10         btn.enabled = NO;
11     }
12 }

（在这个程序中，我是通过设置uibutton的enabled属性来判断button是否被点击过了，也可以用selected属性那样就是重写selected的set方法）

全部实现代码如下：

#import "ScrollViewBar.h"
@interface ScrollViewBar ()
@property (nonatomic , strong)NSMutableArray *btnArr;
@property (nonatomic , strong)NSArray *imgArr;
@property (nonatomic , strong)NSMutableArray *imgViewArr;
@end
@implementation ScrollViewBar
+(ScrollViewBar *)showScrollviewWithFrame :(CGRect)frame andContainerView :(UIView *)father andNameCount:(NSInteger)count{
    ScrollViewBar *scrViewBar = [[ScrollViewBar alloc]initWithFrame:frame];
    [scrViewBar setBackgroundColor:[UIColor whiteColor]];
    scrViewBar.contentSize = CGSizeMake(20+90*count, frame.size.height);
    scrViewBar.showsHorizontalScrollIndicator = false;
    scrViewBar.bounces = NO;
    [father addSubview:scrViewBar];
    
    
    return scrViewBar;
}

-(void)addBtnsNameArr{

    self.btnArr = [NSMutableArray array];
    for (int i = 0; i < self.nameArr.count; i++) {
        UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
        [self addSubview:btn];
        //设置frame
        btn.frame = CGRectMake(10+90*i, 5, 80, 50);
        //加tag值
        btn.tag = i + 1;
        //设置标题 字体大小 颜色 事件
        [btn setTitle:[self.nameArr objectAtIndex:i] forState:UIControlStateNormal];
        [self setBtnEnabled:btn andValue:YES];
        [btn addTarget:self action:@selector(btnDidClicked:) forControlEvents:UIControlEventTouchUpInside];
        
        //把btn放进数组里面去
        [_btnArr addObject:btn];
    }
    UIButton * firBtn = [_btnArr objectAtIndex:0];
    [self setBtnEnabled:firBtn andValue:NO];
    //添加视图
    [self initUIImageView];
}

//添加视图
-(void)initUIImageView{
    self.imgViewArr = [NSMutableArray array];
    self.imgArr = [NSArray arrayWithObjects:@"777",@"111", @"222",@"333",@"444",@"555",@"666",nil];
    for (int i = 0; i < self.nameArr.count; i++) {
        UIImageView *imgView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:[_imgArr objectAtIndex:i]]];
        imgView.frame = CGRectMake(0, self.frame.origin.y +self.frame.size.height+5, self.frame.size.width, self.superview.frame.size.height - self.frame.origin.y - self.frame.size.height);
        imgView.hidden = YES;
        [self.superview addSubview:imgView];
        [_imgViewArr addObject:imgView];
    }
    UIImageView *firImgview = [_imgViewArr objectAtIndex:0];
    firImgview.hidden = NO;

}


-(void)btnDidClicked:(UIButton *)btn{
    if (btn.isEnabled == NO) {//说明已经被点击了，那么就不能再点击，
        
    }else{//还没被点 点击就会变换字的大小
        //先把已经点击过的字体变回来
        
        for (UIButton *clickedBtn in _btnArr) {
            if (clickedBtn.isEnabled == NO) {
                [self setBtnEnabled:clickedBtn andValue:YES];
            }
        }
        [self setBtnEnabled:btn andValue:NO];

        //改变位置
        if (btn.tag > 2 && btn.tag < self.nameArr.count - 1) {//从第三个开始滑动 到倒数第二个
            [self setContentOffset:CGPointMake(btn.frame.origin.x+40-self.frame.size.width/2, 0) animated:YES];
        }else{
            if (btn.tag < 3) {
                [self setContentOffset:CGPointMake(0, 0) animated:YES];
            }else{
                [self setContentOffset:CGPointMake(640-self.frame.size.width, 0) animated:YES];
                
            }
        }
        //imgview的hidden值为yes
        
        //把其他视图的hidden值设为yes
    
        for (UIImageView *imgv in _imgViewArr) {
            imgv.hidden = YES;
        }
        UIImageView *imgview = [_imgViewArr objectAtIndex:btn.tag-1];
        imgview.hidden = NO;
    
        
    }
}

//重写enabled的set方法
-(void)setBtnEnabled :(UIButton *)btn andValue :(BOOL)enabledV{
    if (enabledV == YES) {//要把btn的enabled的值设置为yes 就是让btn的格式变成蓝色的
        btn.titleLabel.font = [UIFont systemFontOfSize:18];
        [btn setTitleColor:[UIColor blueColor] forState:UIControlStateNormal] ;
        btn.enabled = YES;
    }else{
        btn.titleLabel.font = [UIFont systemFontOfSize:24];
        [btn setTitleColor:[UIColor redColor] forState:UIControlStateNormal] ;
        btn.enabled = NO;
    }
}



@end

在viewcontroller里面的配置

 1 #import "ViewController.h"
 2 #import "ScrollViewBar.h"
 3 @interface ViewController ()
 4 
 5 @property(nonatomic ,strong)ScrollViewBar *scrViewBar;
 6 
 7 @end
 8 
 9 @implementation ViewController
10 
11 - (void)viewDidLoad {
12     [super viewDidLoad];
13     
14     
15     
16     self.scrViewBar = [ScrollViewBar showScrollviewWithFrame:CGRectMake(0, 100, self.view.frame.size.width, 60) andContainerView:self.view andNameCount:7];
17     [self.view setBackgroundColor:[UIColor grayColor]];
18     
19     NSArray * nameArray = [[NSArray alloc]initWithObjects:@"全部",@"视频",@"声音",@"图片",@"段子",@"军事",@"科技", nil];
20     _scrViewBar.nameArr = nameArray;
21     [_scrViewBar addBtnsNameArr];
22     
23 }
24 
25 @end

在写这个程序过程中产生的疑惑：

1.一开始是想只写一个类方法，不过后来发现要在这一个类方法里面使用对象方法，就是不行的，所以又添加了一个对外的对象方法。

2.数组一定要初始化

posted on 2018-09-18 12:22 秃头女孩今夜也不睡觉阅读(291) 评论(0) 收藏举报

刷新页面返回顶部

apprendre

用UIScrollview做一个网易scrollviewbar

导航

公告