时间戳

首页 > 技术文章 > 翻翻git之---实现QQ空间点赞部分实现的自己定义控件 EasyLikeArea

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

yutingliuyl 2017-08-06 08:26 原文

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

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

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

推荐阅读