开篇废话
前些天看到知乎和网易在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;
}
}
布局中使用
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
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.support.v4.widget.NestedScrollView
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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="@string/more_text"
/>
<com.cc.scrollbannerview.ScrollBannerView
android:id="@+id/banner"
android:layout_width="match_parent"
android:layout_height="180dp"
android:src="@drawable/banner" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="@string/more_text"
/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.constraint.ConstraintLayout>
在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做相应的改变。
方法二：背景色透明
布局
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView
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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:background="@color/colorAccent"
android:text="@string/more_text"
/>
<View
android:id="@+id/banner"
android:layout_width="match_parent"
android:layout_height="180dp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:background="@color/colorAccent"
android:text="@string/more_text"
/>
</LinearLayout>
</ScrollView>
</android.support.constraint.ConstraintLayout>
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比较简单，没什么技术难点，如果还是有些不懂的，可以留言，我在文中可以做更多的解释。
