美文网首页Android开发学习高级UI
(五)TabLayout+ViewPager悬浮吸顶及刷新数量动

(五)TabLayout+ViewPager悬浮吸顶及刷新数量动

作者: 达浪儿 | 来源:发表于2018-10-24 16:05 被阅读104次

效果图如下


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传送门

相关文章

网友评论

    本文标题:(五)TabLayout+ViewPager悬浮吸顶及刷新数量动

    本文链接:https://www.haomeiwen.com/subject/rhrxtqtx.html