iis服务器助手广告广告
返回顶部
首页 > 资讯 > 精选 >iOS UISegmentControl如何实现自定义分栏效果
  • 169
分享到

iOS UISegmentControl如何实现自定义分栏效果

2023-06-29 13:06:05 169人浏览 安东尼
摘要

小编给大家分享一下iOS UISegmentControl如何实现自定义分栏效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!具体内容如下ioS 自带的

小编给大家分享一下iOS UISegmentControl如何实现自定义分栏效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

具体内容如下

iOS UISegmentControl如何实现自定义分栏效果

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

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

iOS UISegmentControl如何实现自定义分栏效果

主要那里有一根短红线,需要滑动 来切换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);        }];    }}

以上是“iOS UISegmentControl如何实现自定义分栏效果”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网精选频道!

--结束END--

本文标题: iOS UISegmentControl如何实现自定义分栏效果

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

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

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

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

下载Word文档
猜你喜欢
  • iOS UISegmentControl如何实现自定义分栏效果
    小编给大家分享一下iOS UISegmentControl如何实现自定义分栏效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!具体内容如下iOS 自带的...
    99+
    2023-06-29
  • iOSUISegmentControl实现自定义分栏效果
    本文实例为大家分享了iOS UISegmentControl实现自定义分栏效果的具体代码,供大家参考,具体内容如下 iOS 自带的UISegmentControl实现的就是类似上图...
    99+
    2024-04-02
  • iOS实现简单分栏效果
    本文实例为大家分享了iOS实现简单分栏效果的具体代码,供大家参考,具体内容如下 直接贴代码喽 GMSubfieldViiew.h #import <UIKit/UIKit.h&...
    99+
    2024-04-02
  • iOS自定义滑杆效果
    本文实例为大家分享了iOS自定义滑杆的具体代码,供大家参考,具体内容如下 先让我们看看效果: 主要实现的代码: UIImage *thumbWithLevel(float aLev...
    99+
    2024-04-02
  • ios怎么自定义滑杆效果
    本篇内容介绍了“ios怎么自定义滑杆效果”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!先让我们看看效果:主要实现的代码:UIImage&nb...
    99+
    2023-06-30
  • ionic如何实现自定义弹框效果
    这篇文章给大家分享的是有关ionic如何实现自定义弹框效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。思路利用ionic自带的弹框$ionicPopup。隐藏头部和尾部,只保留...
    99+
    2024-04-02
  • CSS+HTML如何实现自定义checkbox效果
    这篇文章主要介绍CSS+HTML如何实现自定义checkbox效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! checkbox应该是一个比较常用的html功能了,不过浏...
    99+
    2024-04-02
  • js+css如何自定义分页效果
    这篇文章给大家分享的是有关js+css如何自定义分页效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。网上看了好多分页插件都不太满意,所以根据网上的一些东西自己做了一个,可以搭配...
    99+
    2024-04-02
  • 详解QListWidget如何实现自定义Item效果
    首先,我们来看以下实现的最终效果吧! 我觉得这并不是一个很难得问题,最近新招了一个应届生,发现在实现上述效果时,被困扰住了,是不是刚刚接触Qt的这种稍微有难度的界面时,都会有些无头...
    99+
    2024-04-02
  • JS如何实现自定义滚动条效果
    这篇文章给大家分享的是有关JS如何实现自定义滚动条效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。具体内容如下<head>  <meta ...
    99+
    2024-04-02
  • Android如何实现自定义view画圆效果
    这篇文章主要介绍了Android如何实现自定义view画圆效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。看图代码:package sjx.com.custonv...
    99+
    2023-05-30
    android view
  • js如何实现自定义进度条效果
    这篇文章主要介绍js如何实现自定义进度条效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!效果图:代码如下:<!DOCTYPE html> <html&g...
    99+
    2024-04-02
  • Android如何自定义View实现数字雨效果
    今天小编给大家分享一下Android如何自定义View实现数字雨效果的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。效果图在安...
    99+
    2023-06-29
  • Android如何用自定义View实现雪花效果
    效果图 1.SnowView 类 package com.ilz.rocketapplication.handaccount.view; import android.co...
    99+
    2024-04-02
  • Android如何自定义view实现半圆环效果
    小编给大家分享一下Android如何自定义view实现半圆环效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!具体内容如下1.自定义属性<declare-s...
    99+
    2023-06-29
  • Android自定义Drawable实现圆角效果
    Drawable是一种可绘制资源的载体,如图形、图像等。在实际开发中可以作为view的背景。主要有静态和动态两种方式,静态通过xml描述使用,动态即自定义Drawable。本文实现一个圆形和圆角的背景图片效果。效果图:实现方式:初始化一个B...
    99+
    2023-05-30
    drawable 圆角 roi
  • javascript实现自定义滚动条效果
    在实际项目中,遇到上下滚动条和左右滚动条不在一个DIV内部,所以某些情况下,右侧滚动条不可见。但是需要咋同一个视口内显示两个滚动条。 一个解决思路是:自定义滚动条,隐藏原始滚动条。 ...
    99+
    2024-04-02
  • Android自定义View实现扫描效果
    本文实例为大家分享了Android自定义View实现扫描效果的具体代码,供大家参考,具体内容如下 演示效果如下: 实现内容: 1、控制动画是竖向或者横向 2、控制动画初始是从底部/...
    99+
    2024-04-02
  • Android自定义View实现时钟效果
    本文实例为大家分享了Android自定义View实现时钟效果的具体代码,供大家参考,具体内容如下 自定义时钟 初学自定义View,先画一个不太成熟的时钟(甚至只有秒针) 时钟效果 ...
    99+
    2024-04-02
  • Android自定义scrollview实现回弹效果
    在ios手机上经常看到页面上下滑动回弹效果,安卓中没有原生控件支持,这里自己就去自定义一个scrollview实现回弹效果 1. 新建MyScrollView并继承ScrollVie...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作