翻翻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));
                }