iOS实现简单分栏效果

本文实例为大家分享了iOS实现简单分栏效果的具体代码,供大家参考,具体内容如下

直接贴代码喽

GMSubfieldViiew.h

#import <UIKit/UIKit.h>

@interface GMSubfieldViiew : UIView

/**
 * select index
 */
@property(nonatomic,copy) void(^clickIndex)(NSInteger index);

- (instancetype)initWithFrame:(CGRect)frame titles:(NSArray *)thiTitles;

/**
 *  默认勾选
 */
@property(nonatomic,assign) NSInteger selectedIndex;

@end

GMSubfieldViiew.m

#import "GMSubfieldViiew.h"

#define lineH 2
@interface GMSubfieldViiew ()
/**
 *  titles
 */
@property(nonatomic,strong) NSArray * titles;
/**
 *  lineView
 */
@property(nonatomic,weak) UIView *lineView;
/**
 *  itemWidth
 */
@property(nonatomic,assign) CGFloat itemWidth;
@end

@implementation GMSubfieldViiew

#pragma mark - initUI
- (instancetype)initWithFrame:(CGRect)frame titles:(NSArray *)thiTitles
{
    if (self = [super initWithFrame:frame]) {
        self.titles = thiTitles;
        //initSubViews
        [self initSubViews];
    }
    return self;
}

#pragma mark - action
- (void) initSubViews
{
    self.itemWidth = kScreen_Width/self.titles.count;
    //add child
    for (int i=0; i<self.titles.count; i++) {
        UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
        [btn setTitle:self.titles[i] forState:UIControlStateNormal];
        btn.titleLabel.font = FontSize(15);
        btn.tag  = 100+i;
        btn.layer.borderWidth = 0.5;
        [btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
        btn.layer.borderColor = [UIColor lightGrayColor].CGColor;
        [btn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
        [self addSubview:btn];
    }

    //添加下划线
    UIView *lineView  = [[UIView alloc]init];
    lineView.backgroundColor = [UIColor blackColor];
    [self addSubview:lineView];
    self.lineView     = lineView;
}

- (void)layoutSubviews
{
    [super layoutSubviews];

    for (int i=0; i<self.titles.count; i++) {
        UIButton *btn = [self viewWithTag:100+i];
        btn.frame = CGRectMake(i*self.itemWidth, 0, self.itemWidth, self.bounds.size.height-lineH+1);
    }
    self.lineView.frame = CGRectMake(self.selectedIndex*self.itemWidth, self.bounds.size.height-lineH, self.itemWidth, lineH);
}

- (void) btnClick:(UIButton *)btn
{
    NSInteger index = btn.tag -100;
    ESWeakSelf
    [UIView animateWithDuration:0.2 animations:^{
        ESStrongSelf
        self.lineView.frame = CGRectMake(index*self.itemWidth, self.bounds.size.height-lineH, self.itemWidth, lineH);
    }];
    if (self.clickIndex) {
        self.clickIndex(index);
    }
}

/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
    // Drawing code
}
*/

@end

调用:

GMSubfieldViiew *segView = [[GMSubfieldViiew alloc]initWithFrame:CGRectMake(0, 10, kScreen_Width, segH) titles:@[@"未还",@"已还"]];
    segView.selectedIndex = 1;
    ESWeakSelf
    segView.clickIndex = ^(NSInteger index){
        self.isHK = NO;
        ESStrongSelf
        if(index==0){
            //未还
            self.rightButton.hidden = NO;
        }
        else if(index==1){
           //已还
            self.rightButton.hidden = YES;
            self.containView.hidden = YES;
        }
        self.tableView.frame = CGRectMake(0, 60, kScreen_Width, kScreen_Height-NavHeight-60);
        [self.tableView reloadData];
    };
   [self.view addSubView:segView];

效果图:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • iOS UISegmentControl实现自定义分栏效果

    本文实例为大家分享了iOS UISegmentControl实现自定义分栏效果的具体代码,供大家参考,具体内容如下 iOS 自带的UISegmentControl实现的就是类似上图的效果但是很多用处 一般这两个分栏是两个tableView,需要左右滑动来响应分栏 下面来讲述这样的效果是怎么实现的呢? 主要那里有一根短红线,需要滑动 来切换tableView 先自定义一个SegmentView .h //定义block,用来传递点击的第几个按钮 typedef void (^PassValueBl

  • iOS实现简单分栏效果

    本文实例为大家分享了iOS实现简单分栏效果的具体代码,供大家参考,具体内容如下 直接贴代码喽 GMSubfieldViiew.h #import <UIKit/UIKit.h> @interface GMSubfieldViiew : UIView /**  * select index  */ @property(nonatomic,copy) void(^clickIndex)(NSInteger index); - (instancetype)initWithFrame:(CGRect)

  • 微信小程序开发之左右分栏效果的实例代码

    本文以一个简单的小例子,简述在微信小程序开发中左右分栏功能的实现方式,主要涉及scroll-view ,列表数据绑定,及简单样式等内容,属于初级入门内容,仅供学习分享使用. 概述 在微信小程序开发中,左右分栏(左边显示分类,右边显示明细,然后进行联动)是一种常见的布局方式,多应用于点餐,冷饮店,外卖,以及其他类似的商城. 布局分析 布局分析图示如下: 涉及知识点 •scroll-view 可滚动视图区域.使用竖向滚动时,需要给<scroll-view>一个固定高度,通过 WXSS 设置 hei

  • Android实现手机联系人分栏效果

    本文实例为大家分享了Android实现手机联系人分栏效果的具体代码,供大家参考,具体内容如下 小编在项目时期遇见了制作手机联系人分栏效果,查询了很多资料,现在总结如下: 添加的代码并不多,用ListView写好数据以后,只需在Adapter里添加一个方法,并且在getView()方法里添加几行代码即可.不过小编现在介绍的方法,只适合做简单项目,大型项目还没研究该代码是否有缺陷,欢迎各位大神批评指教. 给大家看一下,小编做的代码效果图: adapter具体代码如下: public class Co

  • js 分栏效果实现代码

    网上我也见到一些分栏效果,也有一个jquery的插件jquery.splitter.js, 但是他们基本都没有解决一个问题:如果页面上有iframe, 当拖动分割线经过iframe的时候,鼠标不听使唤了,我曾经开过帖子讨论过这个问题.本例采用一个小技巧解决了这个问题,使拖动流畅. 复制代码 代码如下: <html> <head> <title>Splitter demo</title> <style>             #splitter_

  • Java如何实现Word文档分栏效果

    分栏是报刊.书籍.杂志常用的排版样式,它不仅能方便阅读,同时也能增加页面的美观度.本文将介绍如何在Java应用程序中给Word文档添加多个栏来实现分栏效果,以及如何设置每栏的宽度.间距和分割线. 使用工具:Free Spire.Doc for Java(免费版) Jar文件导入方法 方法一: 下载Free Spire.Doc for Java包并解压缩,然后从lib文件夹下,将Spire.Doc.jar包导入到你的Java应用程序中.(导入成功后如下图所示) Java 实现 Word 文档分栏效

  • iOS实现简单的抽屉效果

    说到抽屉效果在iOS中比较有名的第三方类库就是PPRevealSideViewController.一说到第三方类库就自然而然的想到我们的CocoaPods,本文用CocoaPods引入PPRevealSideViewController,然后在我们的工程中以代码结合storyboard来做出抽屉效果. 一.在工程中用CocoaPods引入第三方插件PPRevealSideViewController. (1).在终端中搜索PPRevealSideViewController的版本 (2).在P

  • iOS仿Uber筛选栏效果

    这个是之前项目中用的仿Uber筛选栏,现在要改了,改之前把这个记录下来,万一有人用到了,就可以直接拿来用了,这个是在大神的基础上改的,还行吧,但是觉得有点丑!有需要的可以看一下,方法有点笨,大神勿喷. 1.加载数据 * 加载数据 */ - (void)loadData{ timeArray = @[@"6小时之内",@"12小时之内",@"24小时之内"]; locationArray = @[@"全城",@"附近1

  • Android实现类似iOS分栏控制器

    近公司接了一个项目,需要会安卓,人手不够的情况作为一个开发iOS的也需要跟进,开始学习android,集成开发环境以后.直接就被难到了,iOS里面的分栏控制器(tabbarcontroller)android里面根本没有这个控件,安卓都是自己来实现这个效果的.所以开始研究android是如何实现的,下面这些代码. 当我们创建一个android APP项目的时候会自动生成一个MainActivity,我们可以在这Activity实现这个效果.首先我们先看一下效果图 代码实现 <?xml versi

  • jQuery+CSS实现滑动的标签分栏切换效果

    本文实例讲述了jQuery实现平滑滚动的标签分栏切换效果.分享给大家供大家参考.具体如下: 运行代码如下 具体代码如下 <html> <head> <title>jQuery平滑滚动的标签分栏切换</title> <meta charset="gb2312"> <style> ul,li{ margin:0px; padding:0px; list-style:none } li{ float:left; back

随机推荐