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];

效果图:

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

时间: 2022-03-19

iOS&nbsp;UISegmentControl实现自定义分栏效果

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

js 分栏效果实现代码

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

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

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

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

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

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

iOS中给自定义tabBar的按钮添加点击放大缩小的动画效果

之前想过一些通过第三方的方式实现动画,感觉有点麻烦,就自己写了一个 不足之处还望大家多多指出 // 一句话,写在UITabBarController.m脚本中,tabBar是自动执行的方法 // 点击tabbarItem自动调用 -(void)tabBar:(UITabBar *)tabBar didSelectItem:(UITabBarItem *)item { NSInteger index = [self.tabBar.items indexOfObject:item]; [self a

iOS利用MJRefresh实现自定义刷新动画效果

本文主要介绍iOS 利用MJRefresh实现自定义动画的上拉刷新下拉加载效果,一般的类型(包括更新时间与loading图案)这里不做介绍. 要想实现此功能,首先得有一套load的图片数组. 接下来就是实现过程: 引入头文件: #import "MJRefresh.h" //自定义一个方法实现 - (void)prepareRefresh { NSMutableArray *headerImages = [NSMutableArray array]; for (int i = 1; i

jQuery实现平滑滚动的标签分栏切换效果

本文实例讲述了jQuery实现平滑滚动的标签分栏切换效果.分享给大家供大家参考.具体如下: 这是一款老外的作品,后半部分的代码有点乱,具体就不细整理了,喜欢的朋友自己拷贝代码慢慢整理一下吧,呵呵,虽乱但功能不乱,预览看效果吧,很不错的标签滚动切换. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-scroll-bq-menu-cha-style-codes/ 具体代码如下: <!DOCTYPE html> <head&g

Android 自定义View实现芝麻分曲线图效果

1.简介 其实这个效果几天之前就写了,但是一直没有更新博客,本来想着把芝麻分雷达图也做好再发博客的,然后今天看到鸿洋的微信公众号有朋友发了芝麻分的雷达图,所以就算了,算是一个互补吧.平时文章也写的比较少,所以可能有点杂乱,有什么需要改进的地方欢迎给出建议,不胜感激. 效果图: 2.步骤: 初始化View的属性 初始化画笔 绘制代表最高分和最低分的两根虚线 绘制文字 绘制代表月份的属性 绘制芝麻分折线 绘制代表芝麻分的圆点 绘制选中分数的悬浮文字以及背景 处理点击事件 3.编码: 初始化View属

Android开发基于ScrollView实现的渐变导航栏效果示例

本文实例讲述了Android开发基于ScrollView实现的渐变导航栏效果.分享给大家供大家参考,具体如下: 前些日子项目要在原来的页面上加入渐变导航栏的功能,查了很多资料,很多资源都是监听到listview的高度来实现渐变导航栏的效果,可是项目里面很多的界面都是使用ScrollView来实现滑动效果. 实在没办法,就自己写了一个test来实现这个效果. 话不多说,马上看一下思路吧,其实渐变导航栏无非就是改变导航栏的透明度也就是可以设定一个高度,根据这个高度,监听ScrollView滑动的距离

微信小程序自定义导航栏实例代码

背景 在做快狗打车小程序时,关于默认导航栏,我们遇到了以下的问题: Android.IOS手机对于页面title的展示不一致,安卓title的显示不居中 页面的title只支持纯文本级别的样式控制,不能够做更丰富的title效果 左上角的事件无法监听.定制 路由导航单一,只能够返回上一页,深层级页面的返回不够友好 我们希望的是:在各个机型页面上title一致性 & 个性化展示.取得左上角点击事件控制权及深层级页面的一键返回 实现 step1 自定义 第一步 取得导航栏的控制权 小程序支持自定义导