項目地址：github.com/razerdp/Fri… （能弱弱的求個star或者fork么QAQ）

• 上篇鏈接：一起擼個朋友圈吧 （Step6）- 評論對齊（點擊評論對齊）【下】

• 下篇鏈接：一起擼個朋友圈吧 - 圖片瀏覽（中）【圖片瀏覽器】

---

前言

終于，這個系列的文章進入了全新的篇章，咱們的朋友圈系列進入研磨階段，目前我們可以成功展示數據，可以進行點贊或者取消點贊，可以進行評論。

但完成這些基本功能是不夠的。

一款產品之所以深入人心，是因為**“用著舒服”，說是“用著舒服”倒不如說是“看著舒服”**，而視覺交互，或者說交互動畫，正是一款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的數組
• 根據狀態是否改變來得到對應狀態的drawable
• draw方法

---

##實現

梳理了一遍過程之后，我們只需要對癥下藥就好了。

于是我們正式開工：

首先還是我的習慣，在自定義一個view之前，先配置attrs，在這里我們就只配置一個屬性用來改變前景色。

attrs:

<!--ForceClickImageView--><declare-styleable name="ForceClickImageView"><attr name="foregroundColor" format="reference|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狀態 - 則是我們的前景色drawable
• pressed狀態 - 同上
• 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:id="@+id/img"android:scaleType="centerCrop"android:layout_width="match_parent"android:layout_height="match_parent"app:foregroundColor="@color/img_foregroundColor"/> 復制代碼

其中img_foregroundColor的色值為： "#85414141"

總結

以上是生活随笔為你收集整理的一起撸个朋友圈吧 图片浏览（上）【图片点击前景色】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。