效果图如下
demo5.gif
主布局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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=".demo4.Demo4Activity">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="@string/no_scroll_behavior">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="@dimen/dimen_180"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="@mipmap/banner_4" />
<View
android:id="@+id/bg_img"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="@dimen/dimen_50"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:layout_collapseMode="pin">
<include layout="@layout/layout_demo5_toolbar" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="@layout/layout_demo5_content" />
</android.support.design.widget.CoordinatorLayout>
</LinearLayout>
Activity主要方法都有注释
private void initView() {
StatusBarUtil.setTranslucentForImageView(mActivity, 50, null);
//防止toolbar顶入状态栏
CollapsingToolbarLayout.LayoutParams lp2 = (CollapsingToolbarLayout.LayoutParams) toolbar.getLayoutParams();
lp2.topMargin = PhoneUtil.getStatusBarHeight(mActivity);
toolbar.setLayoutParams(lp2);
myAppBarLayoutBehavoir = (NoScrollBehavior)
((CoordinatorLayout.LayoutParams) appBar.getLayoutParams()).getBehavior();
}
private void initListener() {
appBar.addOnOffsetChangedListener(this);
viewpager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
//拿到当前fragment
currentFragment = (Demo5ItemFragment) list_fragment.get(position);
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
private void initTab() {
//初始化tab
list_title = new ArrayList<>();
list_title.add("军事");
list_title.add("娱乐");
list_title.add("萌宠");
list_title.add("生活");
list_id = new ArrayList<>();
list_id.add(1);
list_id.add(2);
list_id.add(3);
list_id.add(4);
list_fragment = new ArrayList<>();
for (int i = 0; i < list_id.size(); i++) {
Demo5ItemFragment orderItemFragment = Demo5ItemFragment.newInstance(list_id.get(i));
list_fragment.add(orderItemFragment);
}
currentFragment = (Demo5ItemFragment) list_fragment.get(0);
indicatorAdapter = new TabPageIndicatorAdapter(getSupportFragmentManager(), list_fragment, list_title);
viewpager.setAdapter(indicatorAdapter);
tabLayout.setupWithViewPager(viewpager);
}
@Override
public void onDestroy() {
super.onDestroy();
appBar.removeOnOffsetChangedListener(this);
}
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
//顶部渐变 标题栏处理
float percent = Float.valueOf(Math.abs(verticalOffset)) / Float.valueOf(appBarLayout.getTotalScrollRange());
int alpha = (int) (255 * percent);
titleLayout.setBackgroundColor(Color.argb(alpha, 26, 128, 210));
tvTitle.setAlpha(alpha);
bgImg.setBackgroundColor(Color.argb(alpha, 26, 128, 210));
if (percent < 0.5) {
rlBack.setBackgroundResource(R.drawable.oval_shadow);
} else {
rlBack.setBackground(null);
}
//滑动事件处理
if (percent == 0) {
//当完全展开时 appbar可滑动 禁止refresh(可根据需求不禁止刷新)
myAppBarLayoutBehavoir.setNoScroll(false);
currentFragment.setRefreshState(false);
} else if (percent == 1) {
//当完全折叠时 appbar不可滑动使tab吸顶 允许refresh
currentFragment.setRefreshState(true);
myAppBarLayoutBehavoir.setNoScroll(true);
} else {
//滑动中 appbar可滑动 禁止refresh(建议禁止刷新,否则会appbar影响滑动流畅)
myAppBarLayoutBehavoir.setNoScroll(false);
currentFragment.setRefreshState(false);
}
}
@Override
public void onBackPressed() {
//返回监听 当appBar处于不可滑动(即完全折叠)时，先释放appBar
if (myAppBarLayoutBehavoir.isNoScroll()) {
myAppBarLayoutBehavoir.setNoScroll(false);
appBar.setExpanded(true, true);
} else {
super.onBackPressed();
}
}
@OnClick(R.id.rl_back)
public void onViewClicked() {
//返回监听 当appBar处于不可滑动(即完全折叠)时，先释放appBar
if (myAppBarLayoutBehavoir.isNoScroll()) {
myAppBarLayoutBehavoir.setNoScroll(false);
appBar.setExpanded(true, true);
} else {
mSwipeBackHelper.backward();
}
}
自定义behavior
/**
* created by dalang at 2018/10/23
* 自定义behavior 用于解决CoordinatorLayout布局将imgView顶入状态栏后 下面的content显示不全的问题
* 代替系统的@string/appbar_scrolling_view_behavior
*/
public class FixScrollingFooterBehavior extends AppBarLayout.ScrollingViewBehavior {
private AppBarLayout appBarLayout;
public FixScrollingFooterBehavior() {
super();
}
public FixScrollingFooterBehavior(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {
if (appBarLayout == null) {
appBarLayout = (AppBarLayout) dependency;
}
final boolean result = super.onDependentViewChanged(parent, child, dependency);
final int bottomPadding = calculateBottomPadding(appBarLayout);
final boolean paddingChanged = bottomPadding != child.getPaddingBottom();
if (paddingChanged) {
child.setPadding(
child.getPaddingLeft(),
child.getPaddingTop(),
child.getPaddingRight(),
bottomPadding);
child.requestLayout();
}
return paddingChanged || result;
}
private int calculateBottomPadding(AppBarLayout dependency) {
final int totalScrollRange = dependency.getTotalScrollRange();
return totalScrollRange + dependency.getTop();
}
}
/**
* created by dalang at 2018/10/23
* 自定义behavior 用于控制appbar的滑动
* 当tabLayout吸顶后 使下滑不触发appBar的滑动 使下拉刷新更顺畅
*/
public class NoScrollBehavior extends AppBarLayout.Behavior{
public boolean noScroll;
public NoScrollBehavior() {
}
public NoScrollBehavior(Context context, AttributeSet attrs) {
super(context, attrs);
}
public boolean isNoScroll() {
return noScroll;
}
public void setNoScroll(boolean noScroll) {
this.noScroll = noScroll;
}
@Override
public boolean onStartNestedScroll(CoordinatorLayout parent, AppBarLayout child, View directTargetChild, View target, int nestedScrollAxes, int type) {
if (noScroll) {
return false;
} else {
return super.onStartNestedScroll(parent, child, directTargetChild, target, nestedScrollAxes, type);
}
}
}
将持续更新.. 不喜勿喷，仅个人分享，希望能帮助到你
源码地址：Github传送门
网友评论