【移動應用開發(fā)技術】Android如何知乎廣告效果

【移動應用開發(fā)技術】Android如何知乎廣告效果

這篇文章將為大家詳細講解有關Android如何知乎廣告效果，在下覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。知乎的廣告效果一直想寫，無奈最近才有時間。先看效果：肯定要自定義view了，一個類似imageView的控件，還要給它一個值用來指定廣告圖片的顯示位置。問題：1.圖片如何在范圍內（單個item范圍）上下移動,如窗戶一般,后面的圖是可以動的，但是窗戶是固定的。2.圖片移動的時機肯定和recycleView滾動監(jiān)聽item有關，用哪些方法?解決:1.窗戶問題首先想到imageView的scaleType屬性,而scaleType中只有matrix和center可以在不縮放圖片的情況下顯示一張大圖中的部分,center始終顯示在圖片中間部分，不符合要求，matrix不指定顯示位置。2.recycleViewItem的滾動監(jiān)聽，剛好前段時間在仿寫微博視頻自動播放時接觸過，recycleView提供了一些譬如FindFirstVisibleItemPosition(當前屏幕第一個item的position)，FindFirstCompletelyVisibleItemPosition(當前屏幕第一個完全顯示item的position)等方法，可以利用這些方法,把當前的item找到，再利用instanceof關鍵字比較當前item是不是我的廣告item，如果是再想辦法讓廣告圖片動起來。步驟：1.自定義一個廣告imageView,把他變成窗戶：繼承imageView，只需要重寫他的2個方法,onSizeChanged和onDraw。onSizeChanged用來得到控件高度onDraw移動廣告圖片int

itemHeight

=

0;

//自定義imageView高度

private

float

rate

=

1;

//初始化顯示比率

@Override

protected

void

onSizeChanged(int

w,

int

h,

int

oldw,

int

oldh)

{

super.onSizeChanged(w,

h,

oldw,

oldh);

itemHeight

=

h;

//廣告item的高度

}

@Override

protected

void

onDraw(Canvas

canvas)

{

Drawable

drawable

=

getDrawable();

if

(drawable

==

null)

{

return;

}

int

w

=

getWidth();

int

h

=

(int)

(getWidth()

*

1.0f

/

drawable.getIntrinsicWidth()

*

drawable.getIntrinsicHeight());

drawable.setBounds(0,

0,

w,

h);//設置圖片顯示的絕對范圍

int

maxDy

=

h

-

itemHeight;

//圖片可以移動的最大距離為(圖片有效移動距離)：

(0

~

-maxDy)

canvas.save();

canvas.translate(0,

-rate

*

maxDy);

super.onDraw(canvas);

canvas.restore();

}

public

void

setDy(int

itemDy,

int

rvheight)

{

int

allHeight

=

rvheight

-

itemHeight;

//有效滑動高度(廣告有效移動距離)

rate

=

itemDy

*

1f

/

allHeight;

if

(rate

<=

0)

{

rate

=

0;

}

if

(rate

>=

1)

{

rate

=

1;

}

invalidate();

}setDy方法可以先不管。onDraw中說幾個點：super.onDraw(canvas)代碼中的位置super.onDraw(canvas)是實現原本imageView邏輯的地方，涉及自定義view繪制先后問題；假如我用canvas畫了一個圓，畫圓代碼寫在super之前：這個圓會先繪制出來，再走super，就會出現imageView把圓擋住的情況，畫圓代碼寫在super之后：先走super再畫圓，圓就在imageView的上面。參考上面代碼中的super位置，先把圖片的位置通過canvas.translate方法移動之后，再利用super原本邏輯繪制出圖片，就實現圖片在窗口中移動的效果了。(此番解釋只針對繼承已有的imageview，textview等，如果是繼承View，super位置就很隨意了，因為super是個空實現)drawable.setBounds(l,t,r,b)方法這個方法給圖片設定一個絕對位置范圍~(或者說相對屏幕的顯示范圍)~，上面代碼中的范圍計算~(參數r，b)~其實就是整個屏幕除開狀態(tài)欄導航欄以外的范圍~(recycleView的范圍)~。intw=getWidth()算出圖片可以顯示的最大寬度，再通過最大寬度/圖片原本寬度=最大高度/圖片原本高度計算出最大高度h。也就是inth=這一句。通過onDraw方法，已經可以實現：一個imageView控件，動態(tài)的去移動它的內部圖片。這個自定義的imageView就算是完成了。2.獲取recycleView監(jiān)聽以及位置計算寫監(jiān)聽之前想想如何把recycleView的item與自定義imageView聯系起來，通過canvas.translate（dx，dy）讓圖片動起來,必須要求出dy：可以看看效果，只要廣告的item有一點不在屏幕內，那么其中的圖片是不會移動的,那么我們廣告item有效移動距離就是整個recycleView的高度減去廣告item的高度，如圖綠色線：而我們自定義imageView中圖片有效移動距離是整個圖片的高度減去窗口的高度,如圖綠色線：(紅色框就相當于自定義imageView窗口，整張圖就是窗后可以translate的圖片)關系就出來了:廣告item位置/廣告有效移動距離=dy/圖片有效移動距離重寫RecyclerView.OnScrollListener中的onScrolled方法，我們要得到：廣告item位置和廣告有效移動距離@Override

public

void

onScrolled(RecyclerView

recyclerView,

int

dx,

int

dy)

{

super.onScrolled(recyclerView,

dx,

dy);

int

first

=

layoutManager.findFirstCompletelyVisibleItemPosition();

//第一個完全顯示的item

int

last

=

layoutManager.findLastCompletelyVisibleItemPosition();

//最后一個完全顯示的item

int

firstPosition

=

layoutManager.findFirstVisibleItemPosition();

//第一個顯示的item

int

lastPosition

=

layoutManager.findLastVisibleItemPosition();

//最后一個顯示的item

//循環(huán)遍歷當前屏幕中顯示的所有item

for

(int

i

=

firstPosition;

i

<=

lastPosition;

i++)

{

RecyclerView.ViewHolder

viewHolder

=

recyclerView.findViewHolderForAdapterPosition(i);

//找出屏幕中的廣告item

if

(viewHolder

instanceof

TxRecycleAdapter.ZhiHuHolder)

{

TxRecycleAdapter.ZhiHuHolder

zhiHuHolder

=

(TxRecycleAdapter.ZhiHuHolder)

viewHolder;

View

itemView

=

zhiHuHolder.itemView;

//獲取到廣告item的位置

(item的頂部

與

recycleView頂部的距離)

int

top

=

itemView.getTop();

//獲取recycleView的高度

int

height

=

recyclerView.getHeight();

//調用自定義imageView中的方法，實現圖片的移動

zhiHuHolder.adImageView.setDy(top,

height);

}

}

}inttop=itemView.getTop();top=廣告item位置;廣告有效移動距離=recycleView的高度-廣告item的高度，這一點的實現放在了自定義imageView的setDy方法中。注意方法中的for循環(huán)for(inti=firstPosition;i<=lastPosition;i++){}rate等于1圖片剛好顯示在頂部rate等于0圖片剛好顯示在底部rate從0~1：滑動慢rate可能是這么變化的：0.05,0.10,0.15,0.20,0.80,0.85,0.90,0.95,1.0?；瑒涌靣ate可能是這么變化的：0.3,0.6,0.9。壓根就不會等于1或者等于0,那圖片的translate位置肯定就不對了。rate等于1圖片剛好顯示在頂部rate等于0圖片剛好顯示在底部rate從0~1：滑動慢rate可能是這么變化的：0.05,0.10,0.15,0.20,0.80,0.85,0.90,0.95,1.0?；瑒涌靣ate可能是這么變化的：0.3,0.6,0.9。壓根就不會等于1或者等于0,那圖片的translate位置肯定就不對了。出現這個問題我試過很多方法，比如速度跟蹤類(VelocityTracker)計算速度，當速度大了再根據滑動方向直接置頂或者置底，獲取廣告item可見性置頂或者置底等等。有些方法可能有點用，但是太麻煩了,最后直接在for循環(huán)中用firstPosition和lastPosition，這樣，雖然會出現rate=-0.2這樣的負值，但是你只要給個判斷就可以了:if

(rate

<=

0){

rate

=

0;

}

if

(rate

>=

1)

{

rate

=

1;

}剛已經通過recycleView的監(jiān)聽得到了廣告item位置與廣告有效移動距