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

开篇废话

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

滑动广告条

大概效果就是下图这样。

1979444d63a8?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

滑动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比较简单,没什么技术难点,如果还是有些不懂的,可以留言,我在文中可以做更多的解释。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值