android 仿知乎广告,Android仿制知乎滑动广告条

开篇废话

前些天看到知乎和网易在APP中加了一个滑动的广告，所以就仿做了一个，其实没什么技术含量，也没什么难度，滑动广告之GitHub地址，帮我点个Star。

滑动广告条

大概效果就是下图这样。

滑动Banner

思路

我能想到两种解决方案：

自定义view，使滑动的时候，绘制改变。

将父布局设置背景色，子布局背景色透明。

方法一：自定义view

自定义view

自定义一个ScrollBannerView，就是我们显示广告的view。

public class ScrollBannerView extends View {

private Bitmap mBannerBitmap;

private Rect rectSrc;

private Rect rectDst;

private int screenWidth;

private int screenHeight;

public ScrollBannerView(Context context) {

super(context);

}

public ScrollBannerView(Context context, @Nullable AttributeSet attrs) {

super(context, attrs);

}

public ScrollBannerView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

}

public void setBannerImageResource(@DrawableRes int resId) {

mBannerBitmap = BitmapFactory.decodeResource(getResources(), resId);

// 获取屏幕宽高

WindowManager wm = (WindowManager) getContext().getSystemService(Context.WINDOW_SERVICE);

DisplayMetrics dm = new DisplayMetrics();

wm.getDefaultDisplay().getMetrics(dm);

screenWidth = dm.widthPixels;

screenHeight = dm.heightPixels;

// 把图片修改为屏幕大小

mBannerBitmap = scaleBitmap(mBannerBitmap, screenWidth, screenHeight);

}

public void notifyLayoutChange() {

// 获取view当前位置

int[] location = new int[2];

getLocationOnScreen(location);

int x = location[0];

int y = location[1];

// 定义需要截取图片的位置

int showLeft = 0;

int showTop = y;

int showRight = mBannerBitmap.getWidth();

int showBottom = y + getHeight();

// 显示在屏幕上view的宽高

int width = getWidth();

int height = y + getHeight() > screenHeight ? screenHeight - y : getHeight();

// 图片范围

rectSrc = new Rect(showLeft, showTop, showRight, showBottom);

// 绘制范围

rectDst = new Rect(0, showTop < 0 ? -showTop : 0, width, height);

invalidate();

}

@Override

protected void onDraw(Canvas canvas) {

// 绘制

if (mBannerBitmap != null && rectSrc != null && rectDst != null) {

canvas.drawBitmap(mBannerBitmap, rectSrc, rectDst, null);

}

}

private Bitmap scaleBitmap(Bitmap origin, int newWidth, int newHeight) {

if (origin == null) {

return null;

}

int height = origin.getHeight();

int width = origin.getWidth();

float scaleWidth = ((float) newWidth) / width;

float scaleHeight = ((float) newHeight) / height;

Matrix matrix = new Matrix();

matrix.postScale(scaleWidth, scaleHeight); // 使用后乘

Bitmap newBM = Bitmap.createBitmap(origin, 0, 0, width, height, matrix, false);

if (!origin.isRecycled()) {

origin.recycle();

}

return newBM;

}

}

布局中使用

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context="com.example.danlan.bannerimageviewdemo.MainActivity">

android:id="@+id/scroll"

android:layout_width="match_parent"

android:layout_height="match_parent"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent">

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="vertical" >

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center_horizontal"

android:text="@string/more_text"

/>

android:id="@+id/banner"

android:layout_width="match_parent"

android:layout_height="180dp"

android:src="@drawable/banner" />

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center_horizontal"

android:text="@string/more_text"

/>

在Activity中使用

public class BannerViewActivity extends AppCompatActivity {

private NestedScrollView mScroll;

private ScrollBannerView mBanner;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_banner_view);

initView();

}

private void initView() {

mScroll = (NestedScrollView) findViewById(R.id.scroll);

mScroll.setOnScrollChangeListener(new NestedScrollView.OnScrollChangeListener() {

@Override

public void onScrollChange(NestedScrollView v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {

if (mBanner != null){

mBanner.notifyLayoutChange();

}

}

});

mBanner = (ScrollBannerView) findViewById(R.id.banner);

mBanner.setBannerImageResource(R.drawable.banner);

}

}

这里使用了NestedScrollView，NestedScrollView可以在滑动时回调，然后我们去对mBanner做相应的改变。

方法二：背景色透明

布局

xmlns:app="http://schemas.android.com/apk/res-auto"

android:layout_width="match_parent"

android:layout_height="match_parent">

android:id="@+id/scroll"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@drawable/banner"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent">

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="vertical" >

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_gravity="center_horizontal"

android:background="@color/colorAccent"

android:text="@string/more_text"

/>

android:id="@+id/banner"

android:layout_width="match_parent"

android:layout_height="180dp" />

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_gravity="center_horizontal"

android:background="@color/colorAccent"

android:text="@string/more_text"

/>

Activity

public class BannerAlphaActivity extends AppCompatActivity {

private ScrollView mScroll;

private View mBanner;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_banner_alpha);

initView();

}

private void initView() {

mScroll = (ScrollView) findViewById(R.id.scroll);

mScroll.setBackground(getResources().getDrawable(R.drawable.banner)); // 设置Banner

mBanner = (View) findViewById(R.id.banner);

mTv = findViewById(R.id.tv);

mTv.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

startActivity(new Intent(BannerAlphaActivity.this, BannerViewActivity.class));

}

});

}

}

写在后面

有两种方法解决，在使用中，方法二比较方便，如果这个广告被应用到很多地方，将方法一更好的再封装一下，用起来也许会更方便。

这个Demo比较简单，没什么技术难点，如果还是有些不懂的，可以留言，我在文中可以做更多的解释。