轉載請註明出處：王亟亟的大牛之路

昨天在家裏弄魚的事沒上班，也就沒寫東西。決定今天早上補一篇，正好看到了

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

翻翻git之---實現QQ空間點贊部分實現的自己定義控件 EasyLikeArea