翻翻git之---实现QQ空间点赞部分实现的自定义控件 EasyLikeArea

转载请注明出处：王亟亟的大牛之路

昨天在家里弄鱼的事没上班，也就没写东西，决定今天早上补一篇，正好看到了

Easy like area in the circle of friends or QQ qzone (｡>﹏<｡)

这个标题，就下了下代码研习一下，觉得不错就分享给大家。

效果图:(这熟悉的icon,大家一目了然，干妹子的作者那位，名字叫啥我还真叫不出抱歉哈。)

作者git：https://github.com/CaMnter

效果很明显，如果你想在自己的项目中要类似的效果，EasyLikeArea是你不错的选择。

让我们来看看怎么用的,因为今天不打算把源码扣出来重新打包，所以就全部贴在这里了！

How to use?

Gradle:

dependencies { compile 'com.camnter.easylikearea:easylikearea:1.3' }

Eclipse

Copy下这2个类，然后把自定义的XML也放进来就好

XML部分看这里

<resources>
    <declare-styleable name="EasyLikeImageView">
        <attr name="easyLikeImageType">
            <enum name="round" value="2601" />
            <enum name="circle" value="2602" />
        </attr>
        <attr name="easyLikeImageBorderRadius" format="dimension" />
    </declare-styleable>

    <declare-styleable name="EasyLikeArea">
        <attr name="easyLikeAreaLikeSpacing" format="dimension" />
        <attr name="easyLikeAreaOmitSpacing" format="dimension" />
        <attr name="easyLikeAreaOmitCenter" format="boolean" />
    </declare-styleable>
</resources>

OK,我们来看看如何使用的

<com.camnter.easylikearea.EasyLikeArea
        android:id="@+id/topic_ela"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/topic_content_bottom_v"
        android:background="@color/white"
        android:paddingBottom="10dp"
        android:paddingLeft="12.5dp"
        android:paddingRight="12.5dp"
        android:paddingTop="10dp"
        app:easyLikeAreaLikeSpacing="5dp"
        app:easyLikeAreaOmitCenter="true"
        app:easyLikeAreaOmitSpacing="8dp" />

高度啊，位置啊，颜色啊等一系列就不解释了，来说下这3个自定义标签

一个代表每一个小图片之间的间距，一个代表是否居中，一个代表最右侧区域到左侧那些小图的间距（非小图区域的大小，例子中“….10赞过”这一部分）

具体的实现我大致描述下吧，就是一个大的ViewGroup，然后里面嵌套了各种小图，然后一排排列好，多余部分也就不显示了，里面小图是作者的一个自定义控件EasyLikeImageView（有圆的，方的）

上面把XML引入部分说了，这里说下Activity里的操作

绑ID那一圈不说了，直接讲重要步骤

先是初始化EasyLikeImageView，然后给他Set个图片，代表赞了之后出现的头像。

  //设置大小
  EasyLikeImageView iv = new EasyLikeImageView(this);
  iv.setLayoutParams(new ViewGroup.LayoutParams(this.dp2px(36), this.dp2px(36)));
        //设置图片
  this.addIv.setImageResource(R.mipmap.ic_camnter);

然后是把所有的子控件都塞到试图组里去

  for (int idRes : Constant.AVATARS) {
            EasyLikeImageView iv = this.createEasyLikeImageView();
            GlideUtils.displayNative(iv, idRes);
            this.topicEla.addView(iv);
        }

再接下来绘制右侧那个”…..9人赞过部分”

//获取布局内容，然后给TextView设置文字内容
  View omitView = LayoutInflater.from(this).inflate(R.layout.view_omit_style_topic, null);
 this.omitTv = (TextView) omitView.findViewById(R.id.topic_omit_tv);
        this.omitTv.setText(this.getString(this.getOmitVieStringFormatId(), count));
        //添加到视图组里去
        this.topicEla.setOmitView(omitView);

然后根据用户的点击判断来决定是否加载我们前面绘制的EasyLikeImageView空间

//是否被添加
 if (!added) {
     //添加操作
     this.topicEla.addView(this.addIv);
     this.added = true;
     this.likeTv.setTextColor(likeAddedColor);
                    this.omitTv.setText(this.getString(this.getOmitVieStringFormatId(),
                            Constant.AVATARS.length + 1));
} else {
     //移除操作
     this.topicEla.removeView(this.addIv);
     this.added = false;
     this.likeTv.setTextColor(likeColor);
                              this.omitTv.setText(this.getString(this.getOmitVieStringFormatId(),
                            Constant.AVATARS.length));
                }

使用起来还算简单，只要对你塞进去的图片加以设置就好

源码地址：https://github.com/CaMnter/EasyLikeArea/archive/master.zip