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

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

猜你喜欢
  • iOS UISegmentControl如何实现自定义分栏效果
    小编给大家分享一下iOS UISegmentControl如何实现自定义分栏效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!具体内容如下iOS 自带的...
    99+
    2023-06-29
  • iOSUISegmentControl实现自定义分栏效果
    本文实例为大家分享了iOS UISegmentControl实现自定义分栏效果的具体代码,供大家参考,具体内容如下 iOS 自带的UISegmentControl实现的就是类似上图...
    99+
    2024-04-02
  • Android Switch自定义实现IOS效果
    先看下效果图 自定义View public class Seniorswitch extends Switch { priva...
    99+
    2022-06-06
    switch IOS Android
  • iOS实现简单分栏效果
    本文实例为大家分享了iOS实现简单分栏效果的具体代码,供大家参考,具体内容如下 直接贴代码喽 GMSubfieldViiew.h #import <UIKit/UIKit.h&...
    99+
    2024-04-02
  • iOS自定义滑杆效果
    本文实例为大家分享了iOS自定义滑杆的具体代码,供大家参考,具体内容如下 先让我们看看效果: 主要实现的代码: UIImage *thumbWithLevel(float aLev...
    99+
    2024-04-02
  • IOS自定义UIButton九宫格效果
    此篇文章给大家描写如何写自定义九宫格,因为在开发中,这种需求也是常见不少。因此,主要利用UIButton阐述的; 实列不复杂,就两三个步骤完成: 一、定义宽度与高度(self.vie...
    99+
    2022-05-28
    IOS 九宫格
  • 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
  • js如何实现自定义进度条效果
    这篇文章主要介绍js如何实现自定义进度条效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!效果图:代码如下:<!DOCTYPE html> <html&g...
    99+
    2024-04-02
  • JS如何实现自定义滚动条效果
    这篇文章给大家分享的是有关JS如何实现自定义滚动条效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。具体内容如下<head>  <meta ...
    99+
    2024-04-02
  • 详解QListWidget如何实现自定义Item效果
    首先,我们来看以下实现的最终效果吧! 我觉得这并不是一个很难得问题,最近新招了一个应届生,发现在实现上述效果时,被困扰住了,是不是刚刚接触Qt的这种稍微有难度的界面时,都会有些无头...
    99+
    2024-04-02
  • Android如何实现自定义view画圆效果
    这篇文章主要介绍了Android如何实现自定义view画圆效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。看图代码:package sjx.com.custonv...
    99+
    2023-05-30
    android view
  • 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如何自定义View实现数字雨效果
    今天小编给大家分享一下Android如何自定义View实现数字雨效果的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。效果图在安...
    99+
    2023-06-29
  • 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
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作