制作一个星星评分视图,VLayout的使用总结

作者:澳门新葡京平台游戏

实现思路

新澳门葡京赌场国际 1starGrame.png

1、使用互相重叠的两套星星,将上面的一套星星添加到一个clipsToBounds = YES的容器视图V1中,改变容器视图的宽度可以达到显示亮星星的数量。2、点击事件使用UITapGestureRecognizer添加到最底层的父视图,根据点击的locationInView:判断点击的位置,移动V1的宽度,同时可添加动画

之前有个朋友有个需求,需要做一个评分视图,视图由5颗星星构成,根据评分,星星对应比例填充好颜色,效果如下:

先展示三张效果图:

不怕跌倒,所以飞翔

主要代码

视图初始化代码

- setUpNormalStars {//初始化灰色星星 NSMutableArray *array = [NSMutableArray array]; for (NSInteger index = 0; index < _totalStars; index   ) { UIImageView *star = [[UIImageView alloc] initWithImage:_normalImage]; [self addSubview:star]; [array addObject:star]; } _normalStars = array.copy;}- setUpSelectedStars {//初始化亮星星,及其容器 _progressView = [[UIView alloc] initWithFrame:CGRectMake(0, (self.bounds.size.height - _starSize.height) / 2, [self progressWidth], _starSize.height)]; _progressView.backgroundColor = [UIColor clearColor]; //裁切属性,实现星星数量的展示 _progressView.clipsToBounds = YES; [self addSubview:_progressView]; NSMutableArray *array = [NSMutableArray array]; for (NSInteger index = 0; index < _totalStars; index   ) { UIImageView *star = [[UIImageView alloc] initWithImage:_selectedImage]; [_progressView addSubview:star]; [array addObject:star]; } _selectedStars = array.copy;}

设置得分

- setCurrentScores:currentScores {//星星显示逻辑 _currentScores = [self translateScore:currentScores]; if (_progressView) { [UIView animateWithDuration:(_hasAnimation ? 0.2 : 0) animations:^{ _progressView.frame = CGRectMake(0, (self.bounds.size.height - _starSize.height) / 2, [self progressWidth], _starSize.height); }]; }}- translateScore:score {//将分数转化为符合当前显示模式的分数 if (score < 0) { return 0; } if (score > _totalStars) { return _totalStars; } if (self.style == ZJRateStarStyleTotalOnly) {//只显示整数 return ceil; } else if (self.style == ZJRateStarStyleAllowHalf) {//精确为0.5 return ceil(score * 2) / 2.0; } else if (self.style == ZJRateStarStyleAllowFloat) {//精确为0.1 return ceil(score * 10) / 10.0; } return score;}- progressWidth { //得分显示容器的计算宽度 CGFloat score = [self translateScore:_currentScores]; NSInteger total = floor; CGFloat more = score - total; return total * (_paddingWidth   _starSize.width)   more * _starSize.width;}

点击事件

- tapGestureDidTap:(UITapGestureRecognizer *)tap { if (!_allowRate) {//不允许点击事件,只显示 return; } CGFloat tapOffsetX = [tap locationInView:self].x; NSInteger totalSores = floor(tapOffsetX / (_starSize.width   _paddingWidth)); CGFloat more = tapOffsetX - totalSores * (_starSize.width   _paddingWidth); if (more > _starSize.width) {//点击空白间隔处 return; } //调用上面的得分方法实现打分 self.currentScores = [self translateScore:totalSores   more / _starSize.width]; //todo: 代理事件}

新澳门葡京赌场国际 2

新澳门葡京赌场国际 3新澳门葡京赌场国际 4新澳门葡京赌场国际 5

参考文献:
Carson_Ho 的Android开源库V - Layout:淘宝、天猫都在用的UI框架,赶紧用起来吧!
我就是马云飞的android VLayout 全面解析

demo地址

github地址 以下为可自定义属性 可使用autolayout布局

//星星总数@property (nonatomic, assign) NSInteger totalStars;//显示星星的类型 整星,半星,小数星@property (nonatomic, assign) ZJRateStarStyle style;//当前得分@property (nonatomic, assign) CGFloat currentScores;//星星的大小@property (nonatomic, assign) CGSize starSize;//星星的间隔@property (nonatomic, assign) CGFloat paddingWidth;//两种状态星星的图片@property (nonatomic, strong) UIImage *normalImage;@property (nonatomic, strong) UIImage *selectedImage;//是否允许点击事件进行评分@property (nonatomic, assign) BOOL allowRate;//是否需要动画@property (nonatomic, assign) BOOL hasAnimation;

刚好在学paintcode,所以就尝试做一个。

===================2017.02.08======================= 有朋友反应在iOS 7和8上有些问题,刚过完年公司事情不是很多,今天得空将项目大幅度修改了下,主要在以下几个方面进行了完善:

V- Layout 是阿里出品的基础 UI 框架,用于快速实现页面的复杂布局。这个控件一般用于实现种类较多的页面展示。

具体paintcode 怎么用,就不细讲了,可以参看叶孤城大神博客,他正在翻译教程,大家可以紧跟他,他肯定会很快发表新文章的。在这里膜拜下叶孤城,写了很多好的文章。

  1. 去除了复杂的视图结构,以 Cell 自带的 contentView 作为容器。另外多一个侧滑按钮容器视图装载侧滑按钮,视图层级处于 contentView 下方。
  2. 去除自动布局,改用 frame 计算。
  3. 简化一些复杂的逻辑,使代码清晰易懂。
  4. 侧滑按钮在用时才创建。
  5. 模仿 iOS 8 出来的 UITableViewRowAction 形式创建侧滑按钮。
  6. 支持 block 和 代理回调。

一直以来都想看看这个开源项目怎么用,但是一直也没有太多时间去看,今天特意花了点时间去看了一下这个开源项目,没有深入的研究源码,只是简单的使用,把使用心得记录下来,以便学习它的人能快速的上手使用;

当然也可以去paintcode 的官网查看视频教程,不过要翻墙。有英文的字母,中文的也有,不过感觉还是看英文的更好理解。

代码里也做了相应的注释。有疑问的地方欢迎探讨啊。

1.使用

首先先介绍几种布局形式

   - LinearLayoutHelper: 线性布局 
   - GridLayoutHelper: Grid布局, 支持横向的colspan 
   - FixLayoutHelper: 固定布局,始终在屏幕固定位置显示 
   - ScrollFixLayoutHelper: 固定布局,但之后当页面滑动到该图片区域才显示, 可以用来做返回顶部或其他书签等 
   - FloatLayoutHelper: 浮动布局,可以固定显示在屏幕上,但用户可以拖拽其位置 
   - ColumnLayoutHelper: 栏格布局,和布局在一排,可以配置不同列之间的宽度比值 
   - SingleLayoutHelper: 通栏布局,只会显示一个组件View 
   - OnePlusNLayoutHelper: 一拖N布局,可以配置1-5个子元素 
   - StickyLayoutHelper: stikcy布局, 可以配置吸顶或者吸底 
   - StaggeredGridLayoutHelper: 瀑布流布局,可配置间隔高度/宽度

以上这几种布局格式包含了多种布局的格式。

好了,开始。

===================================================项目代码原文地址 目前,在微信里我能观察到的交互细节,基本都实现了。如果有哪儿效果不对,或者有些细节没有考虑到,还望指出。

1.引入类库

这个没有什么好说的直接按照gitHub上的方法直接引入就可以了

 compile('com.alibaba.android:vlayout:1.0.7@aar') {
        transitive = true
    }

看了这个需求后,可以把控件分成3层,第一层,可以想象一下,一张纸上挖了5颗星走了,漏空的。第二次就是橙色的填充层,第三层就是背景层了。

以下是我观察到以及实现的细节:

1.将cell向右推,向右推,移动的距离是被限制的.2.将cell向右推松手之后有一个反弹的动画.

新澳门葡京赌场国际 6

3.将cell向左推至极限之后松手,会回弹部分.

新澳门葡京赌场国际 7

4.侧滑出来的按钮,有一个,有两个,有自定义的

新澳门葡京赌场国际 8新澳门葡京赌场国际 9新澳门葡京赌场国际 10

5.当按钮出来后,除了点击按钮操作之外,无论其他什么操作,侧滑按钮都会隐藏起来。比如在松手按钮出来后,1⃣️继续向左滑2⃣️向右滑3⃣️滑动其他cell4⃣️滑动tableView5⃣️点击任何个cell。 都是会触发隐藏动画.

新澳门葡京赌场国际 11

2.创建VirtualLayoutManager对象

VirtualLayoutManager layoutManager = new VirtualLayoutManager(this);
rv.setLayoutManager(layoutManager);

这个其实就是相当于RecycleView中的LayoutManager只不过是重写了罢了。

1.打开paintcode,绘制一个漏空的星星:

实现

那么该注意的都列好之后,接下来就一步一步实现。

首先让cell能侧滑先,那是用scrollView还是pan移动手势来实现呢? 下面动画图是系统自带的侧滑效果,当你很用力向左边甩的时候,是有弹性动画,滑动的速度不同,反弹的距离也不同。然而你再回去看微信上面,无论你多么用力向左边甩,当你手抬起来的一瞬间,cell都是按照固定的速度在做移动。所以从这可以得出结论,微信是用手势来实现的侧滑.

新澳门葡京赌场国际 12

那么手势是添加在self上,还是contentView上还是自定义视图?本文项目是自定义了视图,因为第六感告诉我,加在self或者contentView上也许可以实现效果,不过目测可能将会是一条崎岖的道路。

- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier { if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) { [self setupSideslipCell]; } return self;}- (instancetype)initWithCoder:(NSCoder *)aDecoder { if (self = [super initWithCoder:aDecoder]) { [self setupSideslipCell]; } return self;}- setupSideslipCell { _containView = [UIView new]; _containView.backgroundColor = [UIColor lightGrayColor]; NSArray *cellSubViews = self.subviews; [self insertSubview:_containView atIndex:0]; for (UIView *subView in cellSubViews) { [_containView addSubview:subView]; } _panGesture = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(containViewPan:)]; _panGesture.delegate = self; [_containView addGestureRecognizer:_panGesture];}- containViewPan:(UIPanGestureRecognizer *)pan { NSLog(@"containViewPan");}- layoutSubviews { [super layoutSubviews]; _containView.frame = self.bounds;}

重写initWithStyle:reuseIdentifier:initWithCoder:方法,再统一调用setupSideslipCell是因为,使用我们写的cell的开发者,可能是用代码创建cell,也可能用xib、storyboard来创建。那么initWithStyle:reuseIdentifier:这个方法代码创建之后必须会调用,而initWithCoder:是非代码创建cell时会调用的。(好吧,说的有点初级了) 接下来创建个_containView视图用来容纳cell上的所有视图,遍历cell目前的所有子视图都添加到_containView上,再添加_panGesture手势,移动_containView时,所有的内容跟着移动。 但是加完手势,你会发现上下左右的手势事件都被cell的获取了,使得tableView上下滚不了,一动不动。解决的方式就是实现手势代理方法gestureRecognizerShouldBegin:,做手势是否接收的判断.

- gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer { if (gestureRecognizer == _panGesture) { UIPanGestureRecognizer *gesture = (UIPanGestureRecognizer *)gestureRecognizer; CGPoint translation = [gesture translationInView:gesture.view]; return fabs(translation.y) <= fabs(translation.x); } return YES;}

fabs是去绝对值,fabs(translation.y) <= fabs(translation.x)用来判断,手势是上下滑,还是左右滑。如果是上下滑,就return NO;不激活cell的pan手势,tableView就可以拿到移动事件了。

接着实现手势方法containViewPan,让cell动起来吧!

- containViewPan:(UIPanGestureRecognizer *)pan { CGPoint point = [pan translationInView:pan.view]; [pan setTranslation:CGPointZero inView:pan.view]; CGRect frame = _containView.frame; frame.origin.x  = point.x; _containView.frame = frame;}

新澳门葡京赌场国际 13

跟着应该要说创建侧面出现的侧滑按钮了。这边说起来有点复杂,我是用的autolayout约束来实现的控制侧滑按钮的宽。建议看下代码,不懂autolayout的先去补补知识。 侧滑按钮主要是用了_sideslipContainView_sideslipView视图。_sideslipView是加在_sideslipContainView上面的。_sideslipView的右边是紧贴_sideslipContainView的右边。_sideslipView是用来容纳侧滑按钮,_sideslipView的宽度是由里面按钮数量、按钮的宽度决定的,_sideslipContainView的右边是紧贴cell的右边,其中最重要的是_sideslipContainView的左边是紧贴着_containView的右边,所以当_containView没有侧滑的时候,它的右边也是紧贴着cell右边的,_sideslipContainView受左右约束的挤压而使得宽度为0,就看不见了。随着_containView因手势而像左移的时候,_sideslipContainView的宽度就变大,里面的子视图_sideslipView也就漏出来了。(这段文字显得有点惨白无力,图文又不好去创造,靠自己理解啦。如果你考虑用frame来实现,当然也是可以的,就自行发挥撒。)

下面做他的滑动范围限制。

#define LYSideslipCellLeftLimitScrollMargin 15#define LYSideslipCellRightLimitScrollMargin 30if (pan.state == UIGestureRecognizerStateChanged) { CGRect frame = _containView.frame; if (frame.origin.x > LYSideslipCellLeftLimitScrollMargin) { frame.origin.x = LYSideslipCellLeftLimitScrollMargin; } else if (frame.origin.x < -LYSideslipCellRightLimitScrollMargin - CGRectGetWidth(_sideslipView.frame)) { frame.origin.x = -LYSideslipCellRightLimitScrollMargin - CGRectGetWidth(_sideslipView.frame); } _containView.frame = frame;}

LYSideslipCellLeftLimitScrollMargin是左边能移动的最大距离,LYSideslipCellRightLimitScrollMargin是右边侧滑按钮出来后再接着能移动的最大距离。CGRectGetWidth(_sideslipView.frame)获取按钮的总宽度。

限制移动范围之后,在pan.state == UIGestureRecognizerStateEnded手势状态结束的时候判断,此时是什么状态,应该做什么样的操作及动画,动画实现都比较简单。 反弹动画就是动画之后再一个反方向动画,代码如下:

_containLeftConstraint.constant = _sideslipLeftConstraint.constant = -10;[UIView animateWithDuration:0.25 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{ [self layoutIfNeeded];} completion:^(BOOL finished) { _containLeftConstraint.constant = _sideslipLeftConstraint.constant = 0; [UIView animateWithDuration:0.2 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{ [self layoutIfNeeded]; } completion:^(BOOL finished) { }];}];

要注意cell如果向右移动的距离不是很大的话,微信是没有反弹动画的。而且在动画的过程中,所有的cell,tableView上面的交互都是关闭不处理的。 还有个细节可能也要在意一下,如果在做手势侧滑按钮漏出一半的过程中,突然电话或者其他事件打断之后,手势状态不一定传UIGestureRecognizerStateEnded,也可能是UIGestureRecognizerStateCancelled或其他状态,也要做相应的处理判断。

3.设置复用池大小

// 设置组件复用回收池
RecyclerView.RecycledViewPool viewPool = new RecyclerView.RecycledViewPool(); 
recyclerView.setRecycledViewPool(viewPool); 
viewPool.setMaxRecycledViews(0, 10);

新澳门葡京赌场国际 14

1⃣️当按钮显示出来的动画一旦触发的时候,就应该让所有cell以及tableView的交互关闭[self closeAllOperation];。动画结束后再开启交互cell.userInteractionEnabled = YES;
- showSideslipButton { [self closeAllOperation]; _containLeftConstraint.constant = _sideslipLeftConstraint.constant = -CGRectGetWidth(_sideslipView.frame); [UIView animateWithDuration:0.2 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{ [self layoutIfNeeded]; } completion:^(BOOL finished) { for (LYSideslipCell *cell in self.tableView.visibleCells) if ([cell isKindOfClass:LYSideslipCell.class]) { cell.userInteractionEnabled = YES; } }];}- closeAllOperation { self.tableView.scrollEnabled = NO; self.tableView.allowsSelection = NO; for (LYSideslipCell *cell in self.tableView.visibleCells) if ([cell isKindOfClass:LYSideslipCell.class]) { cell.sideslip = YES; cell.tapGesture.enabled = YES; cell.userInteractionEnabled = NO; }}

在自定义cell中获取tableView的方法:

- (UITableView *)tableView { if (!_tableView) { id view = self.superview; while (view && [view isKindOfClass:[UITableView class]] == NO) { view = [view superview]; } _tableView = (UITableView *)view; } return _tableView;}

4.创建管理Adapter的适配器

DelegateAdapter delegateAdapter = new DelegateAdapter(manager, true);

这个相当于适配器的类,但是他可以管理更多适配器去进行布局,所以相当于适配器的管理类,用于之后添加所有的适配器的集合

操作为:创建canvas 大小30 * 30;修改名称为Star;绘制一个矩形 30 * 30;绘制一个星星 30 * 30 ,星星弧度改为55 %;选中矩形和星星,点击difference,变成bezier 曲线。

2⃣️继续向左滑&向右滑&滑动其他cell

侧滑按钮出来后,此时应该添加一个BOOL值sideslip,用来记录当前是否侧滑按钮是显示状态。且要遍历tableView可视的所有cell,将这个值都设为YES。所以一旦pan手势触发的时候,在pan.state == UIGestureRecognizerStateBegan的时候,判断如果sideslip为YES,如果是再判断手势是在侧滑按钮显示的cell上还是不在当前手势的cell上。

if (_containLeftConstraint.constant == 0) { for (LYSideslipCell *cell in self.tableView.visibleCells) if ([cell isKindOfClass:LYSideslipCell.class]) [cell hiddenSideslipButton]; } else { [self hiddenSideslipButton]; }

如果手势在当前cell上,那么直接调用隐藏动画。如果不在,则遍历可视cell都调用隐藏动画。为防止没有显示出侧滑按钮的cell做动画,所以在[self hiddenSideslipButton];方法里做判断if (_containLeftConstraint.constant == 0) return;

5.创建一个集合管理其中的适配器

List<DelegateAdapter.Adapter> adapters = new ArrayList<>();

这个集合是用来存放你写的适配器的。

接下来,我们添加一个新的canvas,绘制我们需要的控件

4⃣️滑动tableView

要使滑动tableView,就触发隐藏动画,简单的方式就是将self.tableView.scrollEnabled = NO;,另外在cell的pan手势代理里判断加上一句if (!self.tableView.scrollEnabled) return YES;,如果tableView不能滚动,cell的pan上下滑的手势也可以触发。所以把这事就扔给pan手势吧。不然还需要在内部设置tableView.contentOffsetobserver,怪麻烦。

6.实现适配器

其实实现适配器的话和以前的实现没有什么区别就是多覆写了一个类,继承关系也发生了改变而已。

public class BaseItemsAdapter extends DelegateAdapter.Adapter<ItemHolder> {

    private Context mContext;
    private LayoutHelper mHelper;
    private String mColor;/*这个颜色值主要是为了区分样式的*/
    private int mCount;

    public BaseItemsAdapter(Context context, LayoutHelper helper, String color, int count) {
        mContext = context;
        mHelper = helper;
        this.mColor = color;
        this.mCount = count;
    }

    @Override
    public LayoutHelper onCreateLayoutHelper() {
        return mHelper;
    }

    @Override
    public ItemHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View itemView = LayoutInflater.from(mContext).inflate(R.layout.items_linear, parent, false);
        return new ItemHolder(itemView);
    }

    @Override
    public void onBindViewHolder(ItemHolder holder, int position) {
        holder.itemView.setBackgroundColor(Color.parseColor(mColor));
        holder.mTvContent.setText("这是基类的布局"   position);
    }

    @Override
    public int getItemCount() {
        return mCount;
    }
}

新澳门葡京赌场国际 15

5⃣️点击任何个cell

在初始化cell的时候,就添加个tap手势,平时enabled = NO;不让使用。侧滑按钮出来后再设为YES。

注意几点问题:

1.这里你主要看一下继承的不在是RecycleView的Adapter了而是DelegateAdapter的Adapter了;
2.重新覆写了一个onCreateLayoutHelper()这个方法,这个方法返回的是一个LayoutHelper;
3.关于这个LayoutHelper是上面提到的几种类型,这里可以从上个页面通过构造方法传过来。

操作为:创建星星评分canvas 150 * 30;创建背景矩形 150 * 30;创建填充矩形 100 * 30;放置5个第一步中绘制的漏空的星星到canvas 上,5个星星组成一个group;然后就可以看到我们想要的视图基本已经出来了。

END

自此,比较重要的点都说的差不多了。有什么疑问或建议欢迎评论里与我交流。

6.最后把相应的适配器进行添加就好了

/*添加了所有的适配器之后添加到*/
delegateAdapter.addAdapters(adapters);

 /*设置recycleView*/
mRecycleView.setAdapter(delegateAdapter);

以上方法就能实现简单的组合布局了;还有一些细节的问题我会在下面进行讲解。。。

下一步:将我们画好的生成style文件加入到我们的工程中;

2.其他特点添加:

先创建一个新的空白工程,添加一个自定义的类ScoreStarsView 继承自UIView;

1.margin和padding

这里面的Margin和Padding指的是LayoutHelper的Margin和Padding而不是整个RecycleView的Margin和Padding
新澳门葡京赌场国际,设置方法如下:

setPadding(int leftPadding, int topPadding, int rightPadding, int bottomPadding)
setMargin(int leftMargin, int topMargin, int rightMargin, int bottomMargin)

新澳门葡京赌场国际 16

引用网络上的一张图片

新澳门葡京赌场国际 17

2.设置背景颜色和图片

bgColor, bgImg这两个属性都是针对于非fix类型的LayoutHelper
设置方法如下:

setBgColor(int bgColor);

设置背景的方法我觉得没有用所以没有去研究怎么使用。

操作为点击paintcode 的file- export 生成stylekit文件放到我们新建的工程下,然后打开xcode ,添加生成是ScoreStarsKit 文件。然后在自定义的ScoreStarsView 类中导入kit,然后在drawRect 进行绘制。最后在storyboard中添加uiview ,把这个view的类改成ScoreStarsView;然后我们用模拟器运行,效果如下:

3.设置宽高比属性aspectRatio

这个宽高比要从两个方面来说

  • LayoutHelper定义的aspectRatio,指的是一行视图整体的宽度与高度之比,当然整体的宽度是减去了RecyclerView和对应的LayoutHelper的margin, padding。
  • 视图的LayoutParams定义的aspectRatio,指的是在LayoutHelper计算出视图宽度之后,用来确定视图高度时使用的,它会覆盖通过LayoutHelper的aspectRatio计算出来的视图高度,因此具备更高优先级。
![](https://upload-images.jianshu.io/upload_images/2546238-571ed5c5bae5af52.png)

引用网络上的一张图片



设置方法如下:
//对于LayoutHelper,调用
setAspectRatio(float aspectRatio);
//对于LayoutParams,调用
((VirutalLayoutManager.LayoutParams) layoutParams).mAspectRatio

新澳门葡京赌场国际 18

4. 设置dividerHeight 行间距

这个行间距是针对LinearLayoutHelper的
设置方法如下:

setDividerHeight(int dividerHeight);

看,基本就出来效果了。不过我们希望它的自定义程度更高点,所以我们先来把三层视图的颜色作为参数创建。

5.设置weights属性

这个属只是针对于ColumnLayoutHelper, GridLayoutHelper的属性

  • weights属性是一个float数组,每一项代表某一列占父容器宽度的百分比,总和建议是100,否则布局会超出容器宽度;如果布局中有4列,那么weights的长度也应该是4;长度大于4,多出的部分不参与宽度计算;如果小于4,不足的部分默认平分剩余的空间。
    设置方法如下:
setWeights(float[] weights);

新澳门葡京赌场国际 19

引用网络上的一张图片

新澳门葡京赌场国际 20

6.vGap, hGap

这个属性是针对GridLayoutHelper与StaggeredGridLayoutHelper都有这两个属性,分别控制视图之间的垂直间距和水平间距。

新澳门葡京赌场国际 21

引用网络上的一张图片

设置方法如下:

setHGap(int hGap);
setVGap(int vGap);

操作为,三个颜色分别对应起来,frontColor,fillColor,backColor,这三个颜色均设置为parameter,方便我们进行绘制时自定义,然后重新export,快捷键为command

7.spanCount, spanSizeLookup

只针对GridLayoutHelper的属性,但通过提供自定义的spanSizeLookUp,可以指定某个位置的视图占用多个网格区域。

新澳门葡京赌场国际 22

引用网络上的一张图片

设置方法如下:

setSpanCount(int spanCount);
setSpanSizeLookup(SpanSizeLookup spanSizeLookup);
  • R;回到xcode 发现报错了,因为scorestarskit 代码已经改变了,我们使用三个颜色进行创建,运行之后看看效果,颜色变了。

8.autoExpand

GridLayoutHelper的属性,当一行里视图的个数少于spanCount值的时候,如果autoExpand为true,视图的总宽度会填满可用区域;否则会在屏幕上留空白区域。

新澳门葡京赌场国际 23

引用网络上的一张图片

设置方法如下:

setAutoExpand(boolean isAutoExpand);

接下来,我们希望它使用更方便,那么我们来把这三个颜色做成property 方便在storyboard中创建;

9.lane

StaggeredGridLayoutHelper中有这个属性,设置瀑布流的列数

设置方法如下:

setLane(int lane)

新澳门葡京赌场国际 24

10.fixAreaAdjuster

fix类型的LayoutHelper的属性,在可能需要设置一个相对父容器四个边的偏移量,比如整个页面里有一个固定的标题栏添加在vlayout容器上,vlayout内部的fix类型视图不希望与外部的标题有所重叠,那么就可以设置一个fixAreaAdjuster来做偏移。

新澳门葡京赌场国际 25

引用网络上的一张图片

设置方法如下:

setAdjuster(FixAreaAdjuster adjuster);

现在可以看到,已经可以在storyboard中看到效果,而且可以随心所欲改变颜色了,那么我们还有一个需求,就是评分是变化的,所以填充的多少也是变化的,我们来看下一步;

11.alignType, x, y

FixLayoutHelper, ScrollFixLayoutHelper, FloatLayoutHelper的属性,表示吸边时的基准位置,有四个取值,分别是TOP_LEFT, TOP_RIGHT, BOTTOM_LEFT, BOTTOM_RIGHT。x和y是相对这四个位置的偏移量,最终的偏移量还要受上述的fixAreaAdjuster影响

  • TOP_LEFT:基准位置是左上角,x是视图左边相对父容器的左边距偏移量,y是视图顶边相对父容器的上边距偏移量;
  • TOP_RIGHT:基准位置是右上角,x是视图右边相对父容器的右边距偏移量,y是视图顶边相对父容器的上边距偏移量;
  • BOTTOM_LEFT:基准位置是左下角,x是视图左边相对父容器的左边距偏移量,y是视图底边相对父容器的下边距偏移量;
  • BOTTOM_RIGHT:基准位置是右下角,x是视图右边相对父容器的右边距偏移量,y是视图底边相对父容器的下边距偏移量;
![](https://upload-images.jianshu.io/upload_images/2546238-deb052dba76b1655.png)

引用网络上的一张图片

设置代码如下:

//设置基准调用
setAlignType(int alignType);
//设置偏移量调用
setX(int x);
setY(int y);

新澳门葡京赌场国际 26

12.showType

ScrollFixLayoutHelper的属性,取值有SHOW_ALWAYS, SHOW_ON_ENTER, SHOW_ON_LEAVE。

  • SHOW_ALWAYS:与FixLayoutHelper的行为一致,固定在某个位置;
  • SHOW_ON_ENTER:默认不显示视图,当页面滚动到这个视图的位置的时候,才显示;
  • SHOW_ON_LEAVE:默认不显示视图,当页面滚出这个视图的位置的时候显示;

新澳门葡京赌场国际 27

引用网络上的一张图片

设置代码如下:

setShowType(int showType);

操作为:添加一个value 的fraction ,然后添加一个width 的expression ,让width = value * 150;然后拉一个线到fillRect 的宽度上,这样value 改变,我们就看到width 跟着改变了,然后重新export,回到xcode 添加一个新的property value,重新修改代码,就可以在storybord 中设置value 然后看到评分不同,星星填充的也就不同了。

13.stickyStart, offset

StickyLayoutHelper的属性,当视图的位置在屏幕范围内时,视图会随页面滚动而滚动;当视图的位置滑出屏幕时,StickyLayoutHelper会将视图固定在顶部(stickyStart = true)或者底部(stickyStart = false),固定的位置支持设置偏移量offset。

新澳门葡京赌场国际 28

引用网络上的一张图片

设置代码如下:

setStickyStart(boolean stickyStart);
setOffset(int offset);

现在还有一个问题,我们看到画的三个view 的frame 明显不同可是,我们看到的师徒除了颜色不一样,大小都是一样的,原因很简单,生成的代码的大小都是写死的;下面我们来看怎么让他大小跟着改变。

关于这个开源框架里面有好多的细节需要注意,这里面有写得不好的话还希望大神们指点

Demo有很多都没有完善,等到有时间的时候去完善
Demo地址

新澳门葡京赌场国际 29

操作为:为了让整体有个比例,改变画布大小为200 * 40,同时把三层view 均重新设置大小;添加一个frame,让底层view 和 最上层的漏空星星跟随frame 变化,类似于自动布局的约束;重新export;我们可以看到fillRect 的约束是不对的,他的宽度和高度写死了,我们自己来调整代码,让它的宽度随value 和视图的宽度变化,让它的高度随视图的高度变化。就这样,一个评分用的星星视图就完成了。

当然这个还有一些问题,当背景不是纯色的时候,就会稍显无力了,希望大家可以想出更好的设计方案,此文抛砖引玉,同时希望大家多多支持,多多点赞!

demo下载地址

本文由新葡京8455发布,转载请注明来源

关键词: