仿知乎廣告效果

安卓開發 · 發表 2018-10-14 09:09:36

摘要：仿知乎廣告的效果，先看效果圖效果如下：向上滑動，圖片的頭部先出來，然後隨著滾動，也一起滾動，到圖片滑出螢幕時候，圖片內部也到達底部。向下滑動，圖片的底部先出來，然後隨著滾動，也一起滾動，到圖片滑出螢幕時候，圖片內部也到達頭部。所以有幾個要點 1...

仿知乎廣告的效果，先看效果圖

效果如下：

向上滑動，圖片的頭部先出來，然後隨著滾動，也一起滾動，到圖片滑出螢幕時候，圖片內部也到達底部。

向下滑動，圖片的底部先出來，然後隨著滾動，也一起滾動，到圖片滑出螢幕時候，圖片內部也到達頭部。

所以有幾個要點

1，圖片內部肯定是使用canvas.translate

2，圖片隨著list滑動而滑動

3，圖片要設定屬性 android:scaleType=”matrix”

第一步：所以先自定義一個ImageView，根據list傳進來的距離來translate

public class ZhiHuImageView extends AppCompatImageView {

/**
* 測量的實際最小高度
*/
private int mMinDx;
/**
* 移動的距離
*/
private int mDx;

public ZhiHuImageView(Context context, AttributeSet attrs) {
super(context, attrs);
}

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mMinDx = h;
}

/**
* 暴露給外界來設定移動距離的
* @param dx滑動的距離
*/
public void setDy(int dx){
/**
* 拿到圖片的Drawable，判空處理
*/
if(getDrawable() == null){
return;
}
//需要移動的距離
mDx = dx - mMinDx;

//滑動距離 必須大於0
if (mDx <= 0) {
mDx = 0;
}
//圖片滑動最大距離=圖片實際高度-顯示的最小高度（xml佈局中設定的高度）
if (mDx > getDrawable().getBounds().height() - mMinDx) {
mDx = getDrawable().getBounds().height() - mMinDx;
}

//每次算好距離開始重繪
invalidate();
}

public int getDx(){
return mDx;
}

@Override
protected void onDraw(Canvas canvas) {

Drawable drawable = getDrawable();
if(drawable == null){
Log.e("Tag","NULL=drawable");
return;
}
int w = getWidth();
/**
* 高度= （寬度/實際寬度）*實際高度
* 因為寬度是match的，getIntrinsicWidth()獲得是固有寬度
*/
int h = (int) (getWidth() * 1.0f / drawable.getIntrinsicWidth() * drawable.getIntrinsicHeight());
drawable.setBounds(0, 0, w, h);
Log.e("Tag","h="+h);
Log.e("Tag","getIntrinsicHeight="+drawable.getIntrinsicHeight());
Log.e("Tag","getDx="+mDx);
//鎖畫布
canvas.save();
//畫布原點移動到新的座標
canvas.translate(0, -getDx());
super.onDraw(canvas);
canvas.restore();
}
}

第二步：list傳遞滑動距離傳遞

介面卡adapter用的是BaseQuickAdapter：

<code>//程式碼省略
if (position > 0 && position % 4 == 0) {
//每隔4個顯示
helper.setVisible(R.id.ll_item, false);
helper.setVisible(R.id.zh_img, true);
String url ="http://imgstore04.cdn.sogou.com/app/a/100520024/877e990117d6a7ebc68f46c5e76fc47a";
String url1 ="https://raw.githubusercontent.com/hongyangAndroid/demo_rvadimage/master/rvimageads/src/main/res/mipmap-xxhdpi/gril.jpg";
zhiHuImageView = helper.getView(R.id.zh_img);
Glide.with(mContext)
.load(url)
.into(zhiHuImageView);
} else {
helper.setVisible(R.id.ll_item, true);
helper.setVisible(R.id.zh_img, false);
}
//程式碼省略</code>
<code>核心方法addOnScrollListener，
</code>
<code> mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
@Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
super.onScrolled(recyclerView, dx, dy);
//第一個可見item
int fPos = linearLayoutManager.findFirstVisibleItemPosition();
//最後個可見item
int lPos = linearLayoutManager.findLastCompletelyVisibleItemPosition();
for (int i = fPos; i <= lPos; i++) {
//從可見的item找到顯示的圖片的item
View view = linearLayoutManager.findViewByPosition(i);
ZhiHuImageView adImageView = (ZhiHuImageView) view.findViewById(R.id.zh_img);
if (adImageView.getVisibility() == View.VISIBLE) {
adImageView.setDy(linearLayoutManager.getHeight() - view.getTop());
Log.e("Tag","linearLayoutManager.getHeight()=="+linearLayoutManager.getHeight());
Log.e("Tag","view.getTop()=="+view.getTop());
}
}
}
});</code>

第三步：item的佈局

android:scaleType=”matrix” 設定圖片顯示方式為左上原點繪製顯示

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:fresco="http://schemas.android.com/apk/res-auto"
android:id="@+id/ll_one_item"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/ripple_one_item_bg"
android:orientation="vertical"
android:paddingLeft="5dp"
android:paddingTop="5dp">
<com.hu.test.wight.ZhiHuImageView
android:id="@+id/zh_img"
android:scaleType="matrix"
android:visibility="gone"
android:src="@mipmap/grsm"
android:layout_width="match_parent"
android:layout_height="200dp"/>
<LinearLayout
android:id="@+id/ll_item"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">

<com.facebook.drawee.view.SimpleDraweeView
android:id="@+id/iv_one_photo"
android:layout_width="100dp"
android:layout_height="132dp"
android:layout_marginRight="12dp"
android:background="#f2f4f5"
android:scaleType="fitXY"
android:transitionName="@string/transition_movie_img"
fresco:placeholderImage="@mipmap/load"
/>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginRight="12dp"
android:orientation="vertical">

<!--電影名-->
<TextView
android:id="@+id/tv_one_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:gravity="center"
android:maxLines="1"
android:textColor="#ff333333"
android:textSize="17sp"
android:textStyle="bold"/>

<!--導演-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="2dp"
android:layout_marginTop="2dp"
android:orientation="horizontal">

<LinearLayout
android:layout_width="43dp"
android:layout_height="wrap_content"
android:orientation="vertical">

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="導演："/>

<View
android:layout_width="28dp"
android:layout_height="2dp"
android:layout_marginTop="2dp"
android:background="@color/colorPrimary"/>

</LinearLayout>

<TextView
android:id="@+id/tv_one_directors"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
/>
</LinearLayout>

<!--主演-->

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="主演："/>

<TextView
android:id="@+id/tv_one_casts"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="2"
/>

</LinearLayout>

<TextView
android:id="@+id/tv_one_genres"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="2dp"
android:layout_marginTop="2dp"
android:ellipsize="end"
android:maxLines="1"
/>

<TextView
android:id="@+id/tv_one_rating_rate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
/>
</LinearLayout>

</LinearLayout>

<View
android:id="@+id/view_color"
android:layout_width="match_parent"
android:layout_height="1px"
android:layout_marginLeft="112dp"
android:layout_marginTop="5dp"/>
</LinearLayout>

基本就完成了知乎廣告的效果了

仿知乎廣告效果

您可能也會喜歡…