效果

实现方案

Behavior设置在哪里?

ViewPager样式修改

@Override
public void onPageScroll(int enterPosition, int leavePosition, float percent) {
 try {
 String picUrl = mBanners.get(enterPosition).getBackground();
 if (noEverLoad(picUrl)) {
 vArcTarget.setTag(R.id.banner_tag, picUrl);
 MMCImageLoader.getInstance().loadUrlImage(getActivity(),
 picUrl, vArcTarget, R.color.transparent);
 }
 vArcTarget.setAlpha(percent);
 //当超过0.96的时候设置当前的背景图,
 // 如果在onPageSelect或者state等于SCROLL_STATE_IDLE设置太晚了
 if (percent >= 0.96F) {
 MMCImageLoader.getInstance().loadUrlImage(getActivity(),
 picUrl, vArcCurrent, R.drawable.holder);
 }
 } catch (Exception e) {
 //下标异常,空指针异常
 }
 }

渐变效果处理

一张图的渐变方案(自定义View绘制)例如

public class ArcView extends android.support.v7.widget.AppCompatImageView {
 /**
 * rgb渐变
 * argbEvaluator.evaluate(int )
 */
 ArgbEvaluator argbEvaluator = new ArgbEvaluator();
 Paint mPaint = new Paint();
 RectF vRectF = new RectF();
 {
 mPaint.setColor(ContextCompat.getColor(getContext(), R.color.base_color_primary));
 mPaint.setStyle(Paint.Style.FILL);
 mPaint.setAntiAlias(true);
 }
 public ArcView(Context context) {
 this(context, null, 0);
 }
 public ArcView(Context context, AttributeSet attrs) {
 this(context, attrs, 0);
 }
 public ArcView(Context context, AttributeSet attrs, int defStyleAttr) {
 super(context, attrs, defStyleAttr);
 }
 @Override
 protected void onDraw(Canvas canvas) {
 super.onDraw(canvas);
 float v = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 200, getContext().getResources().getDisplayMetrics());
 vRectF.set(-v, -getHeight(), getWidth() + v, getHeight());
 canvas.drawArc(vRectF, 0F, 180, true, mPaint);
 }
 
 public void setPaintColor(int color) {
 mPaint.setColor(color);
 invalidate();
 }
}

两张图片的渐变方案,适合图片,预缓存效果更好

三张图片的方案,提前设置好前后两张图片

CoordinatorLayout,Behavior流程,源码简单分析

选取两张图片方案的实操过程

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
 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"
 android:fitsSystemWindows="true"
 tools:context=".ScrollingActivity">
 <android.support.design.widget.AppBarLayout
 android:id="@+id/app_bar"
 android:fitsSystemWindows="true"
 android:layout_height="@dimen/app_bar_height"
 android:layout_width="match_parent"
 android:theme="@style/AppTheme.AppBarOverlay">
 <android.support.design.widget.CollapsingToolbarLayout
 android:id="@+id/toolbar_layout"
 android:fitsSystemWindows="true"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 app:toolbarId="@+id/toolbar"
 app:layout_scrollFlags="scroll|exitUntilCollapsed"
 app:contentScrim="?attr/colorPrimary">
 <android.support.v7.widget.Toolbar
 android:id="@+id/toolbar"
 android:layout_height="?attr/actionBarSize"
 android:layout_width="match_parent"
 app:layout_collapseMode="pin"
 app:popupTheme="@style/AppTheme.PopupOverlay"/>
 </android.support.design.widget.CollapsingToolbarLayout>
 </android.support.design.widget.AppBarLayout>
 <android.support.v4.widget.NestedScrollView
 app:layout_behavior="@string/appbar_scrolling_view_behavior"
 android:layout_width="match_parent"
 android:layout_height="match_parent">
 <TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_margin="@dimen/text_margin"
 android:text="@string/large_text"/>
 </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

定义Behavior

public class BannerBehavior extends CoordinatorLayout.Behavior<View> {
 private int value;
 public BannerBehavior() {}
 public BannerBehavior(Context context, AttributeSet attrs) {
 super(context, attrs);
 }
 @Override
 public boolean onStartNestedScroll(
 @NonNull CoordinatorLayout coordinatorLayout,
 @NonNull View child,
 @NonNull View directTargetChild,
 @NonNull View target, int axes, int type) {
 //竖直滑动的才拦截
 return axes == ViewCompat.SCROLL_AXIS_VERTICAL;
 }
 @Override
 public void onNestedScroll(@NonNull CoordinatorLayout coordinatorLayout, @NonNull View child,
 @NonNull View target, int dxConsumed, int dyConsumed,
 int dxUnconsumed, int dyUnconsumed, int type) {
 super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed, type);
 value += dyConsumed;
 //这里用getRootView()是因为topbar_title_layout和top_bar_bg不在当前的layout上。而为了方便找arc_bg我也这样获取了,你也可以设置成dependencyView
 View titleBar = coordinatorLayout.getRootView().findViewById(R.id.topbar_title_layout);
 View topBarBg = coordinatorLayout.getRootView().findViewById(R.id.top_bar_bg);
 View arcBg = coordinatorLayout.getRootView().findViewById(R.id.arc_bg);
 int height = titleBar.getHeight();
// titleBar高度的时候全部显示
// float abs =Math.min(height, Math.max(value, 0F)) / height;
// titleBar高度一半的时候全部显示,但是最大透明度值不能超过1
 float abs = Math.min(1, Math.min(height, Math.max(value, 0F)) / height * 2);
 arcBg.setAlpha(abs);
 topBarBg.setAlpha(abs);
 }
}

设置behavior

<android.support.design.widget.CoordinatorLayout 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">
 <com.linghit.lingjidashi.base.lib.view.StatusView
 android:id="@+id/base_state_container"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 app:layout_behavior="@string/base_banner_behavior">
 <com.scwang.smartrefresh.layout.SmartRefreshLayout
 android:id="@+id/base_refresh_layout"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 app:srlDisableContentWhenRefresh="true">
 <android.support.v7.widget.RecyclerView
 android:id="@+id/base_refresh_list"
 android:layout_width="match_parent"
 android:layout_height="wrap_content" />
 </com.scwang.smartrefresh.layout.SmartRefreshLayout>
 </com.linghit.lingjidashi.base.lib.view.StatusView>
</android.support.design.widget.CoordinatorLayout>

onStartNestedScroll onNestedScroll的回调流程