表格选中效果展示

源代码地址:https://github.com/EizoiOS/ImagePickerClass

效果图如下:

在单元格上增加一张图片,此处的实例是把背景阴影也一起做为一张图片,平时可以通过一个VIEW来设置它的透明度;还要单元格给它赋于相应的点击事件;

1:此为单元格视图,用于处理选中的效果

EiaoAsset.h文件

@interface EizoAsset : UIView{
    UIImageView * selectedView; // 创建一个ImageView -- 用来添加到选中的这个图片上
    BOOL selected;              // 创建一个bool值 -- 用来标识有无选中
}
@property (strong,nonatomic)ALAsset * asset; // 通过ALAsset获得相应的资源

@property (assign , nonatomic) id parent;
-(id)initWithAsset:(ALAsset*)asset;
-(BOOL)selected;
-(void)toggleSelection;
@end
EiaoAsset.m文件:

#import "EizoAsset.h"
@interface EizoAsset(){
    UIImageView * assetImageView; // 展示这个每一张图片的ImageView
}
@end

@implementation EizoAsset

-(id)initWithAsset:(ALAsset *)asset {
    if (self = [super initWithFrame:CGRectMake(0, 0, 0, 0)]) {
        self.asset = asset;
        assetImageView = [[UIImageView alloc]init];
        assetImageView.contentMode = UIViewContentModeScaleAspectFill;
        assetImageView.image = [UIImage imageWithCGImage:[self.asset thumbnail]];
        // ALAsset的thumbnail是图片的缩略图
        [self addSubview:assetImageView];
        selectedView = [[UIImageView alloc]init];
        selectedView.image = [UIImage imageNamed:@"Select.png"];
        selectedView.hidden = YES;
        [self addSubview:selectedView];
    }
    return self;
}

- (BOOL)selected {
    return !selectedView.hidden;
}

-(void)setSelected:(BOOL)_selected {
    [selectedView setHidden:!_selected];
}

// 在单元格 也就是上一个层面添加了一个手势 点击变化选中的状态 也就是改变这个bool值
- (void)toggleSelection {
    selectedView.hidden = !selectedView.hidden;
}

-(void)setFrame:(CGRect)frame {
    [super setFrame:frame];
    assetImageView.frame = self.bounds;
    selectedView.frame = self.bounds;
}

@end

注意:这边已经把选中的效果去加上去,只是让它先隐藏起来,还设置它点击触发的事件;ALAsset就是数据模型,用来存一些图片的数据;

2:单元格文件:

eiaoAssetCell.h文件

#import <UIKit/UIKit.h>
#define topMargin 5

@interface EizoAssetCell : UITableViewCell
// 单元格的创建方法
-(instancetype)initWithAssets:(NSArray *)assets reuseIdentifier:(NSString *)identifier;
// 传入这个assets的方法
-(void)setAssets:(NSArray *)assets;
//
@property (nonatomic,retain) NSArray * linesAssets; // 传入的图片的数组 -- 应该是所有的图片
@end

eiaoAssetCell.m 文件:

#import "EizoAssetCell.h"
#import "EizoAsset.h"
@implementation EizoAssetCell
-(instancetype)initWithAssets:(NSArray *)assets reuseIdentifier:(NSString *)identifier {
    if (self = [super initWithStyle:UITableViewCellStyleDefault reuseIdentifier:identifier]) {
        self.linesAssets = assets;
    }
    return self;
}

-(void)layoutSubviews {
    CGFloat h = self.bounds.size.height - topMargin;
    CGFloat margin = (self.bounds.size.width - 4 * h) / 5.0;
    CGRect frame = CGRectMake(margin,topMargin, h, h);
    for(EizoAsset * eizoAsset in self.linesAssets) {
        eizoAsset.frame = frame;
        UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]initWithTarget:eizoAsset action:@selector(toggleSelection)];
        [eizoAsset addGestureRecognizer:tap];
        [self addSubview:eizoAsset];
        frame.origin.x = frame.origin.x + frame.size.width + margin;
    }
}
@end

注意:这边最为重要的是在layoutSubviews里面的代码,UITapGestureRecognizer把target指向上面创建的EizoAsset视图,这样便可以调用上面创建的选中及反选的事件;

时间: 2024-08-24 21:45:06

表格选中效果展示的相关文章

OSG选中效果展示

<OpenSceneGraph三维渲染引擎编程指南>书中选中高亮效果示例.osgFX特效 2.得到鼠标的位置 osgFX特效1.高亮,在开头的时候写了: 2.线框: 1 #include<osgFX/Outline> 2 osg::Geode *geode = new osg::Geode; 3 geode->addDrawable(new osg::ShapeDrawable(new osg::Box(osg::Vec3(), 2))); 测试可行 4 //声明Effect

jQuery组件开发之表格隔行选中效果实现

一.效果展示如下 jQuery组件之表格插件源码 1 //表格选中插件 2 //方式一 3 (function($){ 4 var chosTabBgColor = function(options){ 5 //设置默认值 6 var options = $.extend({ 7 odd:"odd", //奇数 8 even:"even",//偶数 9 selected:"selected" 10 },options); 11 12 $(&quo

10个Web前端值得收藏的背景全屏效果展示(附源码)(上)

作为一个前沿的 Web 开发者,对于 HTML5 和 现在流行的3D技术或多或少都有掌握.特别是在移动端大显身手.这篇文章挑选了10个绚丽的背景全景展示效果,希望对你有所帮助. 1.  JS图片背景全屏代码实现物理效果 玩法介绍:可以随意拖动鼠标.按住鼠标左键选中旋转物体.或者按住鼠标滑轮放大或者缩小,有不同的效果,赶紧来体验一下. 源码下载  /  在线演示 2.  CSS3学习 - 网站背景拉伸平铺jQuery插件 这个插件集成了一些非常好的 JavaScript 库,提供一个方便使用的文本

关于UITableView选中效果以及自定义cell上的控件响应事件

tableView默认的点击效果是:点击cell:A,出现点击效果,点另一个cell:B的时候,A的点击效果才会消失. 1.对于tableView,比较常用的效果,是点击表格行,出现效果,点击完毕,效果消失 那么就要在代码里做一些设置.代码如下: -(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath { [tableView deselectRowAtIndexPath

AndroidTV中实现飞框选中效果

相信很多从事AndroidTV开发的朋友都对如何展示item的选中效果感到苦恼,电视端开发与移动端最大的不同是用户只能通过一个遥控器进行控制(当然如果你的电视是触屏的话除外--),在这个时候,我们需要让用户知道当前选中的到底是哪一个项目,通常来说,有几种常见的实现方法: 通过给item的background属性定义一个selector,为不同状态下(focused.selected)定义不同的背景样式来展现选中的效果. 通过定义一个全局的焦点监听view.getViewTreeObserver(

几种非常精美的Web前端标签效果展示(附源码)(上)

1.  Tag标签管理jQuery插件 玩法介绍:可以随意拖动鼠标.按住鼠标左键选中旋转物体.或者按住鼠标滑轮放大或者缩小,有不同的效果,赶紧来体验一下. 源码下载  /  在线演示 2.  jquery标签回车自动完成 这个插件集成了一些非常好的 JavaScript 库,提供一个方便使用的文本动画插件. 源码下载 /  在线演示 几种非常精美的Web前端标签效果展示(附源码)(上)

TableLayout 表格布局 实现展示ViewGroup内所有View

设计需求: ViewGroup内有两个View,ViewA, ViewB,需要两个View全部展示在屏幕范围内的ViewGroup中,不允许ViewA的增长会使ViewB挤出屏幕,这就需要ViewB允许拉伸不允许收缩,并且ViewA允被收缩. 过程如下: 当ViewA缩小时,ViewB跟随拉伸: 如图所示: 当ViewA宽度过长,假设9000dp或者更大,ViewB因为不允许收缩,所以ViewB还原到设置width后保持不变,不会被挤出屏幕,ViewA自动收缩 如图所示: 抽象逻辑以后,要实现这

6个绚丽时尚的Web前端3D效果展示(附源码)

作为一个前沿的 Web 开发者,对于 HTML5 和 现在流行的3D技术或多或少都有掌握.前几年这些新技术刚萌芽的时候,开发者们已经使用它们来小试牛刀了,如今这些先进技术已经遍地开发,特别是在移动端大显身手.这篇文章挑选了6个前沿的绚丽的3D展示效果,希望对你有所帮助. 1.  3D自由立体旋转现实物理效果 3D自由立体旋转是一个基于 HTML5 技术的实验,模拟现实物理效果,让你在 Web 中感受自然物体的3D自由立体旋转运动.玩法介绍:可以随意拖动鼠标.按住鼠标左键选中旋转物体.或者按住鼠标

查询表格——建立动态表格,使用ajax输入查询条件将后台数据查询出来以表格的形式展示出来

建立动态表格,使用ajax将前台查询条件传给后台,并将查询结果以表格的形式展示出来. 页面的展示效果如下图所示: 第一步:查询条件的部分: 代码如下: <div class="text-c"> <span style="text-indent: 2em;display: inline-block;font-size:20px">账号:</span> <input type="text" name=&quo