返回顶部
首页 > 资讯 > 移动开发 >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://lsjlt.com/news/143268.html(转载时请注明来源链接)

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

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

  • 微信公众号

  • 商务合作