广告
返回顶部
首页 > 资讯 > 移动开发 >iOSUISegmentControl实现自定义分栏效果
  • 442
分享到

iOSUISegmentControl实现自定义分栏效果

2024-04-02 19:04:59 442人浏览 安东尼
摘要

本文实例为大家分享了iOS UISegmentControl实现自定义分栏效果的具体代码,供大家参考,具体内容如下 ioS 自带的UISegmentControl实现的就是类似上图

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

ioS 自带的UISegmentControl实现的就是类似上图的效果
但是很多用处 一般这两个分栏是两个tableView,需要左右滑动来响应分栏

下面来讲述这样的效果是怎么实现的呢?

主要那里有一根短红线,需要滑动 来切换tableView

先自定义一个SegmentView

.h

//定义block,用来传递点击的第几个按钮
typedef void (^PassValueBlock)(NSInteger index);

@interface BCLCommUnitySegmentView : UIView

//定义一下block
@property (nonatomic, strong) PassValueBlock returnBlock;
@property (nonatomic, strong) UIImageView *selectImage;//这个就是短红线

//初始化数组,传入frame和名称
- (id) initWithFrame:(CGRect)frame withTitleArray:(NSArray *)array;

//block传递值方法
- (void)setReturnBlock:(PassValueBlock)returnBlock;
@end

在SegmentView.m中
循环创建按钮,几个分栏创建几个按钮

- (void)creatSegmentView {
    //设置按钮的宽度
    _itemWidth = self.frame.size.width / _itemCounts;
    //循环创建按钮
    for (int i = 0; i < _itemCounts; i++) {
        UIButton *button  = [[UIButton alloc]initWithFrame:CGRectMake((i + 1) *_itemWidth/2, 0, _itemWidth/2, self.frame.size.height)];
        [self addSubview:button];
        
        //设置button的字
        [button setTitle:_titleArray[i] forState:UIControlStateNORMal];
        //设置button的字颜色
        
        [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
        //设置字体大小
        button.titleLabel.font = [UIFont systemFontOfSize:20];
        //设置居中显示
        button.titleLabel.textAlignment = NSTextAlignmentCenter;
        //设置tag值
        button.tag = 1000 + i;
        //添加点击事件
        [button addTarget:self action:@selector(buttonAction:) forControlEvents:UIControlEventTouchUpInside];
        //如果是第一个,默认被选中
        if (i == 0) {
            button.selected = YES;
        }
    }
    
    
    //添加一个select
    _selectImage = [[UIImageView alloc]initWithFrame:CGRectMake(_itemWidth / 2, self.frame.size.height - 2, _itemWidth / 2, 2)];
    _selectImage.image = [UIImage imageNamed:@"bcl_bg_community_segment_color_line"];
    [self addSubview:_selectImage];
}

然后设置按钮的点击事件,将点击到哪个按钮 回调过去

-(void)buttonAction:(UIButton *)button{
    
    //当button被点击,所有的button都设为未选中状态
    for (UIView *view in self.subviews) {
        if ([view isKindOfClass:[UIButton class]]) {
            UIButton *subButton = (UIButton*)view;
            subButton.selected = NO;
            subButton.titleLabel.font = [UIFont systemFontOfSize:20];
        }
    }
    //然后将选中的这个button变为选中状态
    button.selected = YES;
    
    //通过当前的tag值设置select的位置
    NSInteger index = button.tag - 1000;
    [UIView animateWithDuration:0.3 animations:^{
        self->_selectImage.frame = CGRectMake((1 + index)*_itemWidth/2, _selectImage.frame.origin.y, self->_selectImage.frame.size.width, _selectImage.frame.size.height);
    }];
    
    _returnBlock(index);
}

在需要展现的controller中

.h

@interface BCLCommunityView : UIView

@property (nonatomic, strong) UIScrollView *scrollerView;
@property(nonatomic ,strong) UITableView *circleTableView;
@property(nonatomic ,strong) UITableView *squreTableView;
@property (nonatomic, strong)BCLCommunitySegmentView *segmentView;

@end

在.m中用scrollView实现分栏的两个tableView的滑动

- (instancetype) initWithFrame:(CGRect)frame {
    if(self = [super initWithFrame:frame]) {
        [self setSegmentView];
        
        _circleTableView = [self loadTableView];
        _squreTableView = [self loadTableView];
        
        _circleTableView.tag = 1;
        _squreTableView.tag = 2;
        
        _scrollerView = [[UIScrollView alloc] init];
        _scrollerView.frame = CGRectMake(0, 104, KScreenW, KScreenH);
        _scrollerView.pagingEnabled = YES;
        _scrollerView.scrollEnabled = YES;
        _scrollerView.contentSize = CGSizeMake(KScreenW * 2, KScreenH);
        _scrollerView.bounces = YES;
        _scrollerView.delegate = self;
        
        [_scrollerView addSubview:_circleTableView];
        [_scrollerView addSubview:_squreTableView];
        
        _circleTableView.frame = CGRectMake(0, 0, KScreenW, KScreenH);
        _squreTableView.frame = CGRectMake(KScreenW, 0, KScreenW, KScreenH);
        [self addSubview:_scrollerView];
    }
    return self;
}
- (UITableView *)loadTableView
{
    UITableView  *tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, KScreenW, KScreenH) style:UITableViewStyleGrouped];
    tableView.showsVerticalScrollIndicator = NO;
    [tableView reGISterClass:[UITableViewCell class] forCellReuseIdentifier:@"cell"];
    
    tableView.dataSource = self;
    
    [self addSubview:tableView];
    return tableView;
}
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    if(tableView.tag == 1) {
        return 3;
    } else {
         return 2;
    }
   
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return 1;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    if(tableView.tag == 1) {
        UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell" forIndexPath:indexPath];
        if(!cell) {
            cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"cell"];
            
        }
        cell.backgroundColor = [UIColor redColor];
        
        cell.textLabel.text = @"11111";
        return cell;
    } else {
        UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell" forIndexPath:indexPath];
        if(!cell) {
            cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"cell"];
        }
        return cell;
    }
    
}

scrollView代理 滑动scrollerView实现小红条的滑动

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
    CGRect frame = _segmentView.selectImage.frame;
    if(scrollView.contentOffset.x / KScreenW == 0) {
        [UIView animateWithDuration:0.1 animations:^{
        _segmentView.selectImage.frame = CGRectMake(KScreenW / 4, frame.origin.y, frame.size.width, frame.size.height);
        }];
    } else if(scrollView.contentOffset.x / KScreenW == 1){
        [UIView animateWithDuration:0.1 animations:^{
            _segmentView.selectImage.frame = CGRectMake(KScreenW / 2, frame.origin.y, frame.size.width, frame.size.height);
        }];
    }
}

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

--结束END--

本文标题: iOSUISegmentControl实现自定义分栏效果

本文链接: https://www.lsjlt.com/news/143268.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • iOSUISegmentControl实现自定义分栏效果
    本文实例为大家分享了iOS UISegmentControl实现自定义分栏效果的具体代码,供大家参考,具体内容如下 iOS 自带的UISegmentControl实现的就是类似上图...
    99+
    2022-11-13
  • iOS UISegmentControl如何实现自定义分栏效果
    小编给大家分享一下iOS UISegmentControl如何实现自定义分栏效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!具体内容如下iOS 自带的...
    99+
    2023-06-29
  • 微信小程序自定义导航栏效果
    本文实例为大家分享了微信小程序自定义导航栏的具体代码,供大家参考,具体内容如下 第一步 添加属性 “navigationStyle”: “cust...
    99+
    2022-11-13
  • Android Switch自定义实现IOS效果
    先看下效果图 自定义View public class Seniorswitch extends Switch { priva...
    99+
    2022-06-06
    switch IOS Android
  • Android 自定义View实现芝麻分曲线图效果
    1.简介 其实这个效果几天之前就写了,但是一直没有更新博客,本来想着把芝麻分雷达图也做好再发博客的,然后今天看到鸿洋的微信公众号有朋友发了芝麻分的雷达图,所以就算了,算是一个互...
    99+
    2022-06-06
    view 自定义view Android
  • javascript实现自定义滚动条效果
    在实际项目中,遇到上下滚动条和左右滚动条不在一个DIV内部,所以某些情况下,右侧滚动条不可见。但是需要咋同一个视口内显示两个滚动条。 一个解决思路是:自定义滚动条,隐藏原始滚动条。 ...
    99+
    2022-11-12
  • Android Canvas自定义实现时钟效果
    Android之Canvas自定义画一个时钟,供大家参考,具体内容如下 自定义控件,在安卓是也是一种无所不能的技术了,所有自带控件,以及组合自带控件不能实现的一些效果,我们都可...
    99+
    2022-06-06
    canvas Android
  • android自定义view实现钟表效果
    本文实例为大家分享了android view实现钟表的具体代码,供大家参考,具体内容如下 先看效果图: 自定义view大家肯定已经不陌生了,所以直接今天直接步入正题:如何利用...
    99+
    2022-06-06
    view Android
  • Android实现自定义的弹幕效果
    一、效果图 先来看看效果图吧~~ 二、实现原理方案 1、自定义ViewGroup-XCDanmuView,继承RelativeLayout来实现,当然也可以继承其他三大布局类...
    99+
    2022-06-06
    自定义 Android
  • Android自定义View实现扫描效果
    本文实例为大家分享了Android自定义View实现扫描效果的具体代码,供大家参考,具体内容如下 演示效果如下: 实现内容: 1、控制动画是竖向或者横向 2、控制动画初始是从底部/...
    99+
    2022-11-12
  • Android自定义scrollview实现回弹效果
    在ios手机上经常看到页面上下滑动回弹效果,安卓中没有原生控件支持,这里自己就去自定义一个scrollview实现回弹效果 1. 新建MyScrollView并继承ScrollVie...
    99+
    2022-11-13
  • QListWidget怎么实现自定义Item效果
    本文小编为大家详细介绍“QListWidget怎么实现自定义Item效果”,内容详细,步骤清晰,细节处理妥当,希望这篇“QListWidget怎么实现自定义Item效果”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧...
    99+
    2023-06-30
  • Android自定义View实现时钟效果
    本文实例为大家分享了Android自定义View实现时钟效果的具体代码,供大家参考,具体内容如下 自定义时钟 初学自定义View,先画一个不太成熟的时钟(甚至只有秒针) 时钟效果 ...
    99+
    2022-11-12
  • Android自定义Drawable实现圆角效果
    Drawable是一种可绘制资源的载体,如图形、图像等。在实际开发中可以作为view的背景。主要有静态和动态两种方式,静态通过xml描述使用,动态即自定义Drawable。本文实现一个圆形和圆角的背景图片效果。效果图:实现方式:初始化一个B...
    99+
    2023-05-30
    drawable 圆角 roi
  • Android UI控件RatingBar实现自定义星星评分效果
    本文实例为大家分享了Android RatingBar星星评分效果的具体代码,供大家参考,具体内容如下 继承关系 AppCompatRatingBar 效果图 xml ...
    99+
    2022-06-06
    自定义 Android
  • Android自定义ViewGroup实现标签流效果
    本文实例为大家分享了Android自定义ViewGroup实现标签流效果的具体代码,供大家参考,具体内容如下 自定义View,一是为了满足设计需求,二是开发者进阶的标志之一。随心所欲...
    99+
    2022-11-13
  • Android自定义recyclerView实现时光轴效果
    时光轴效果在很多app上都有出现,例如淘宝中快递的跟踪,本文将使用recyclerView实现时光轴效果,我们会到自定义控件,首先先看一下效果图: 接下来是步骤分析 1自定义属性 ...
    99+
    2022-11-13
  • JavaScript怎么实现自定义日历效果
    本篇内容主要讲解“JavaScript怎么实现自定义日历效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JavaScript怎么实现自定义日历效果”吧!实现思路:获取每个月的第一天是星期几,然...
    99+
    2023-06-25
  • Android自定义控件实现时钟效果
    在学习安卓群英传自定义控件章节的时候,有一个例子是绘制时钟,在实现了书上的例子后就想看这个时钟能不能动起来。 这里选择延迟一秒发送消息重绘view来实现的动画,对外提供了开启时...
    99+
    2022-06-06
    Android
  • Android中自定义view实现侧滑效果
    效果图: 看网上的都是两个view拼接,默认右侧的不显示,水平移动的时候把右侧的view显示出来。但是看最新版QQ上的效果不是这样的,但给人的感觉却很好,所以献丑来一发比较高...
    99+
    2022-06-06
    view 自定义view Android
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作