茶具网站模板门户网站开发工具软件

当前位置： 首页 > news >正文

茶具网站模板,门户网站开发工具软件,先做网站先备案,网站后台管理系统查询项目地址#xff1a;github.com/razerdp/Fri… #xff08;能弱弱的求个star或者fork么QAQ#xff09; 上篇链接#xff1a;一起撸个朋友圈吧 #xff08;细节篇#xff09;- 图片浏览#xff08;preview#xff09; 下篇链接#xff1a;一起撸个朋友圈吧 - 图片浏览… 项目地址github.com/razerdp/Fri… 能弱弱的求个star或者fork么QAQ 上篇链接一起撸个朋友圈吧 细节篇- 图片浏览preview 下篇链接一起撸个朋友圈吧 - 图片浏览中【图片浏览器】 前言 终于这个系列的文章进入了全新的篇章咱们的朋友圈系列进入研磨阶段目前我们可以成功展示数据可以进行点赞或者取消点赞可以进行评论。 但完成这些基本功能是不够的。 一款产品之所以深入人心是因为 “用着舒服”说是“用着舒服”倒不如说是 “看着舒服”而视觉交互或者说交互动画正是一款App打动人的最重要的地方。 在之前的文章里我其实一直很注重这些小细节的而这些小细节也是微信现在所拥有的或许你平常没怎么留意但倘若取消掉这些动画相信你很快就会发觉 “这他喵的这么生硬” 在本系列之前的文章里我们有留意到并实现了以下的动画 下拉刷新时那个朋友圈的icon随着listview滑动而滑动并自身旋转 传送门 点赞时popup的弹出动画 传送门 点赞的时候点赞的心心放大缩小动画 传送门 在Step 4 评论时当输入法弹上来输入框自动对齐评论或者动态的底部 传送门 - 动态底部对齐传送门 - 评论底部对齐 点击评论或者点赞时对应的名字背景色改变 传送门 或许您想不到一个小小的朋友圈看似简单却有着这么多小动画。 好的说了这么多东西除了总结外实际上就是为了推销文章←_←我不知道是否真的有人会看也许会有人仅仅是为了拿源码伸伸手而已。 但我认为跟同一圈子的人交流自己的思想分享自己的经验不是一件很美妙的事情吗所以即使没什么人看我也会坚持把这个开源项目完成的以及在简书坚持更新所有思路的-V- 正文 正如前言那一堆废话所说今天我们要实现的是这么一个效果 如您所见当我们点击图片的时候你会发现图片会有一个灰色的蒙层叠加在上面看起来就像是我们选中了图片一样。 如果要实现这个效果按照我们的平时习惯肯定是“selector走起”奈何当我们真的去试了一下之后发现貌似不管用啊0.0 于是百度一番或者谷歌一番发现又是设置clickable啊又是selector什么乱七八糟的顺序问题啊。。。。 与其执着于这些倒不如咱们自定义一个出来以应付一切的imageview。 关于Selector 如果硬要解释这个东东我想我应该重新写一篇文章来专门讲解一下这个东东事实上我也打算这么做 但在这里我只会简单的说说Selector到底是如何实现view的视图变化的 无论是什么Selector实际上最终都是Drawable而Drawable可以理解为图片但如果需要更好的描述它我觉得将其理解为ps可能会更好因为Drawable是一个抽象类它提供了“something that can be drawn”的方法其实弄来弄去都是draw()方法 Selector在java中具体化的说其实就是StateListDrawable。 Drawable有一个mState数组它维护了不同状态下的drawable当view接收到touch事件会调用refreshDrawableState来更新状态一般来说通过Drawable的isStateful()函数来得知是否与上次的状态不同如果是则进行draw方法来改变view的视图在我们的眼中看起来就是颜色的改变。 上面很简单的讲述了selector的实现过程从中我们不难得到以下信息 维护不同状态对应的drawable的数组根据状态是否改变来得到对应状态的drawabledraw方法 实现 梳理了一遍过程之后我们只需要对症下药就好了。 于是我们正式开工 首先还是我的习惯在自定义一个view之前先配置attrs在这里我们就只配置一个属性用来改变前景色。 attrs: !–ForceClickImageView–declare-styleable nameForceClickImageViewattr nameforegroundColor formatreference|color//declare-styleable 复制代码 然后新建一个ForceClickImageView类继承本项目的SuperImageView实际上就是普通的imageview封装了glide的加载方法 /*** Created by 大灯泡 on 2016/4/11.* 朋友圈的imageview包含点击动作/ public class ForceClickImageView extends SuperImageView {//前景层private Drawable mForegroundDrawable;private Rect mCachedBounds new Rect();public ForceClickImageView(Context context) {this(context, null);}public ForceClickImageView(Context context, AttributeSet attrs) {this(context, attrs, 0);}public ForceClickImageView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);init(context, attrs);}} 复制代码 我们可以看到在这里我加了两个成员一个自然是drawable另一个则是一个矩形这个矩形主要是用来规定我们的drawable绘制的范围在这里我们主要是用来缓存这个view的范围。 接下来在初始化方法里面我们补充一下代码 /** 初始化*/private void init(Context context, AttributeSet attrs) {final TypedArray a context.obtainStyledAttributes(attrs, R.styleable.ForceClickImageView);mForegroundDrawable a.getDrawable(R.styleable.ForceClickImageView_foregroundColor);if (mForegroundDrawable instanceof ColorDrawable) {int foreGroundColor a.getColor(R.styleable.ForceClickImageView_foregroundColor, 0x55c6c6c6);mForegroundDrawable new StateListDrawable();ColorDrawable forceDrawable new ColorDrawable(foreGroundColor);ColorDrawable normalDrawable new ColorDrawable(Color.TRANSPARENT);((StateListDrawable) mForegroundDrawable).addState(new int[] { android.R.attr.state_focused },forceDrawable);((StateListDrawable) mForegroundDrawable).addState(new int[] { android.R.attr.state_pressed },forceDrawable);((StateListDrawable) mForegroundDrawable).addState(new int[] { android.R.attr.state_enabled },normalDrawable);((StateListDrawable) mForegroundDrawable).addState(new int[] {}, normalDrawable);}if (mForegroundDrawable ! null) mForegroundDrawable.setCallback(this);a.recycle();} 复制代码 首先我们获取到我们定义的attrs属性集然后得到drawable在这里值得注意的是 我们的attr允许传入的参数除了reference外还允许color 所以如果传入的是一个selector那么getDrawable将会得到StateListDrawable 如果传入的是color值那么getDrawable将会得到ColorDrawable而ColorDrawable无论是什么状态都只会有一个颜色。 所以如果传入的是ColorDrawable我们就需要手动new出一个StateListDrawable并设置我们不同状态下的drawable了。 在上述代码中如果我们得到的是ColorDrawable我们就new出StateListDrawable然后分别对应添加下述状态和对应的drawable focused状态 - 则是我们的前景色drawablepressed状态 - 同上enable状态 - 透明色的drawable无状态 - 同上 因为我们也不了解到底是会触发哪种状态所以就直接扔了大概会触发的状态进去因为在改变的时候系统会从数组中遍历直到找出与状态符合的drawable为止。 哦不要忘了setCallback(this)因为View已经实现了该接口所以我们把this传入就好了。 最重要的部分完成后后接下来就是一些方法的覆写了。 Overrideprotected void drawableStateChanged() {super.drawableStateChanged();if (mForegroundDrawable ! null mForegroundDrawable.isStateful()) {mForegroundDrawable.setState(getDrawableState());}invalidate();}Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);if (mForegroundDrawable ! null) {mForegroundDrawable.setBounds(mCachedBounds);mForegroundDrawable.draw(canvas);}}Overrideprotected void onSizeChanged(int w, int h, int oldw, int oldh) {super.onSizeChanged(w, h, oldw, oldh);if (mForegroundDrawable ! null) mCachedBounds.set(0, 0, w, h);} } 复制代码 首先我们覆写drawableStateChanged这个方法在view的状态有发生改变的时候比如从无焦点-有焦点就会回调。 在这里我们直接给调用 mForegroundDrawable.setState(getDrawableState()); 因为getDrawableState()方法在view里面已经是封装好的了它一共执行了两个动作 判断上一次的drawable状态如果上一次的状态不变就返回上一次的否则执行onCreateDrawableState获取符合的状态最终返回与drawablestate长度一致的int数组 在setState之后我们直接调用invalidate();要求这个view刷新。 在draw方法里面父类的draw方法执行之后也就是图片展示之后我们调用drawable的draw方法此时就会将colorDrawable绘制到图片的上层表现起来就是有selector的效果了。 最后在xml布局里面添加我们的参数就可以了 razerdp.friendcircle.widget.imageview.ForceClickImageViewandroid:idid/imgandroid:scaleTypecenterCropandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentapp:foregroundColorcolor/img_foregroundColor/ 复制代码 其中img_foregroundColor的色值为 #85414141