IM模块--点击按钮显示照片视图


  参考资料:  

 [简书地址](http://www.jianshu.com/users/23d0ae412e19/latest_articles)


     点击更多按钮, 显示出   照相,摄像,语音这样的一个视图出来。代码如下:  

    

#import "BottomMoreView.h"
#import "MoreViewBtn.h"


@interface BottomMoreView()<UIScrollViewDelegate>


@property (nonatomic,strong) UIScrollView  *scrollView;
@property (nonatomic,strong) UIPageControl *pageControl;

@property (nonatomic,strong) NSMutableArray *dataArray;// 模拟数据


@end



@implementation BottomMoreView


- (instancetype)initWithFrame:(CGRect)frame{

    self = [super initWithFrame:frame];
    if (self) {
        
        [self setUpUi];
        
    }
    return self;

}

- (void)setData{
    _dataArray = [[NSMutableArray alloc]init];
    [_dataArray addObject:@"相册"];
    [_dataArray addObject:@"照相"];
    [_dataArray addObject:@"电话"];
    [_dataArray addObject:@"语音"];
    [_dataArray addObject:@"摄影"];
    [_dataArray addObject:@"测试"];
    [_dataArray addObject:@"测试2"];

}



- (void)setUpUi{
    [self setData];
    _scrollView = [[UIScrollView alloc]initWithFrame:self.bounds];
    _scrollView.contentSize = CGSizeMake(self.bounds.size.width*2, 0);
    _scrollView.pagingEnabled = YES;
    _scrollView.delegate = self;
    _scrollView.showsVerticalScrollIndicator = NO;
    _scrollView.showsHorizontalScrollIndicator = NO;
    [self addSubview:_scrollView];
    
    // 添加按钮
    int clumCount = 3; // 3列
    int KMargin =  10; // 每一列相隔10
    
    CGFloat w = [UIScreen mainScreen].bounds.size.width;
    CGFloat btnWidth =  (w - KMargin*(clumCount + 1))/clumCount;
    CGFloat btnHeight = 80;
    
    UIButton *btn = nil;
    for (int  i = 0; i < _dataArray.count; i++) {
        
        btn = [[MoreViewBtn alloc]init];
        btn.frame = [self getFrameWithColumesOfPerRow:i btnWidth:btnWidth btnHeight:btnHeight clumCount:clumCount KMargin:KMargin];
        [btn setImage:[UIImage imageNamed:@"1"] forState:UIControlStateNormal];
        [btn setTitle:[_dataArray objectAtIndex:i] forState:UIControlStateNormal];
        [btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
        btn.tag = i;
        [_scrollView addSubview:btn];
    }
    
    _pageControl = [[UIPageControl alloc]initWithFrame:CGRectMake(w/2, 260, 10, 10)];
    _pageControl.numberOfPages = 2;
    _pageControl.currentPage = 0;
    _pageControl.currentPageIndicatorTintColor = [UIColor redColor];
    _pageControl.pageIndicatorTintColor = [UIColor grayColor];
    [self addSubview:self.pageControl];
}


// 设置 btn Frame

- (CGRect)getFrameWithColumesOfPerRow:(int)currentIndex btnWidth:(CGFloat)btnWidth btnHeight:(CGFloat)btnHeight clumCount:(int)clumCount KMargin:(CGFloat)KMargin{
    
    CGFloat x = currentIndex%clumCount * btnWidth + KMargin*(currentIndex%clumCount+1);
    int  a = currentIndex/3;
    CGFloat y = (a + 1)*KMargin + a*btnHeight;
    
    return CGRectMake(x, y, btnWidth, btnHeight);
}


#pragma mark   UIScrollViewDelegate 

- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
    int page = _scrollView.contentOffset.x / self.bounds.size.width;
    _pageControl.currentPage = page;
    
    
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        
        // 往回走距离
//        [_scrollView setContentOffset:CGPointMake(0, 0) animated:true];
    });
    
    
}


@end


#import "MoreViewBtn.h"

@implementation MoreViewBtn


- (instancetype)initWithFrame:(CGRect)frame{
   
    self = [super initWithFrame:frame];
    if (self) {
        self.titleLabel.textAlignment = NSTextAlignmentCenter;
        self.titleLabel.font = [UIFont systemFontOfSize:15];
    }
    return self;
}


/**
 *  Description: 这个地方才是控制组件的位置的地方。 所有的成型的布局,都可以在这里从新进行改变。 
 */
- (void)layoutSubviews{
    [super layoutSubviews];
    
    CGFloat w = self.frame.size.width;
    self.imageView.frame = CGRectMake(w/2-60/2, 0, 60, 60);
    self.titleLabel.frame = CGRectMake(0, CGRectGetMaxY(self.imageView.frame), w, 20);
}




@end

效果图如下: 


   


  

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值