AppBar布局的使用方式

作者: SpikeKing | 来源:发表于2015-11-09 16:11 被阅读10277次

    欢迎Follow我的GitHub, 关注我的简书. 其余参考Android目录.

    AppBar作为Android5.0的重要动画效果, 非常绚丽的UI, 通过内容驱动, 可以减少页面的访问, 更加便捷的传递主题思想. 那么我们看看如何使用.

    本文源码的GitHub下载地址

    效果

    1. 准备

    创建一个Navigation Drawer的工程, 修改主题颜色.

    <resources>
        <color name="colorPrimary">#FF1493</color>
        <color name="colorPrimaryDark">#FF1493</color>
        <color name="colorAccent">#FF4081</color>
    </resources>
    

    修改抽屉的渐变颜色side_nav_bar.xml

    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle" >
        <gradient
            android:startColor="#FF34"
            android:centerColor="#FF3E96"
            android:endColor="#FF1493"
            android:type="linear"
            android:angle="135"/>
    </shape>
    

    2. ViewPager

    修改app_bar_main.xml, 在CoordinatorLayout中添加ViewPager.

        <android.support.v4.view.ViewPager
            android:id="@+id/main_vp_container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
    

    设置ViewPager的Fragment内容

    /**
     * 简单的Fragment
     * <p/>
     * Created by wangchenlong on 15/11/9.
     */
    public class SimpleFragment extends Fragment {
        private static final String ARG_SELECTION_NUM = "arg_selection_num";
    
        @Bind(R.id.main_tv_text) TextView mTvText;
    
        public SimpleFragment() {
        }
    
        public static SimpleFragment newInstance(int selectionNum) {
            SimpleFragment simpleFragment = new SimpleFragment();
            Bundle args = new Bundle();
            args.putInt(ARG_SELECTION_NUM, selectionNum);
            simpleFragment.setArguments(args);
            return simpleFragment;
        }
    
    
        @Nullable @Override
        public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
            View view = inflater.inflate(R.layout.fragment_main, container, false);
    
            ButterKnife.bind(this, view);
            return view;
        }
    
        @Override public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
            super.onViewCreated(view, savedInstanceState);
            mTvText.setText("Page " + String.valueOf(getArguments().getInt(ARG_SELECTION_NUM)));
        }
    
        @Override public void onDestroyView() {
            super.onDestroyView();
            ButterKnife.unbind(this);
        }
    }
    

    设置ViewPager的适配器

    /**
     * ViewPager的适配器
     * <p/>
     * Created by wangchenlong on 15/11/9.
     */
    public class SimpleAdapter extends FragmentPagerAdapter {
    
        private static final String[] TITLE = {"SELECTION 1", "SELECTION 2", "SELECTION 3"};
    
        public SimpleAdapter(FragmentManager fm) {
            super(fm);
        }
    
        @Override public Fragment getItem(int position) {
            return SimpleFragment.newInstance(position + 1);
        }
    
        @Override public int getCount() {
            return TITLE.length;
        }
    
        @Override public CharSequence getPageTitle(int position) {
            if (position >= 0 && position < TITLE.length) {
                return TITLE[position];
            }
            return null;
        }
    }
    

    在MainActivity中添加ViewPager逻辑

    mVpContainer.setAdapter(new SimpleAdapter(getSupportFragmentManager()));
    

    3. AppBarLayout

    修改AppBarLayout, 添加CollapsingToolbarLayout.

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fitsSystemWindows="true"
            android:theme="@style/AppTheme.AppBarOverlay">
    
            <android.support.design.widget.CollapsingToolbarLayout
                android:layout_width="match_parent"
                android:layout_height="400dp"
                android:fitsSystemWindows="true"
                app:contentScrim="?attr/colorPrimary"
                app:expandedTitleMarginStart="16dp"
                app:expandedTitleMarginEnd="16dp"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">
    
                <ImageView
                    android:id="@+id/toolbar_iv_image"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:adjustViewBounds="true"
                    android:contentDescription="@null"
                    android:fitsSystemWindows="true"
                    android:scaleType="centerCrop"
                    android:src="@drawable/taeyeon"
                    app:layout_collapseMode="parallax"/>
    
                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    app:layout_collapseMode="pin"
                    app:popupTheme="@style/AppTheme.PopupOverlay"/>
    
            </android.support.design.widget.CollapsingToolbarLayout>
    

    删除Toolbar的background颜色, 避免Toolbar挡住图片;
    AppBarLayout设置fitsSystemWindows覆盖StatusBar背景;
    CollapsingToolbarLayout包含图片和Toolbar.

    4. TabLayout

    在AppBarLayout中, 添加TabLayout

            <android.support.design.widget.TabLayout
                android:id="@+id/toolbar_tl_tab"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:layout_gravity="bottom"
                app:layout_scrollFlags="scroll"/>
    

    TabLayout添加layout_scrollFlags确保滑动.

    把ViewPager加入TabLayout

    mTlTab.setupWithViewPager(mVpContainer);
    

    基本功能已经完成, 再添加随着页面切换AppBarLayout的图片视图.

    5. 渐变效果

    在图片视图中, 再添加一层图片, 模拟渐变动画.

                <FrameLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:fitsSystemWindows="true"
                    app:layout_collapseMode="parallax">
    
                    <ImageView
                        android:id="@+id/toolbar_iv_outgoing"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:adjustViewBounds="true"
                        android:contentDescription="@null"
                        android:scaleType="centerCrop"
                        android:visibility="gone"/>
    
                    <ImageView
                        android:id="@+id/toolbar_iv_image"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:adjustViewBounds="true"
                        android:contentDescription="@null"
                        android:fitsSystemWindows="true"
                        android:scaleType="centerCrop"
                        android:src="@drawable/tiffany"
                        app:layout_collapseMode="parallax"/>
                </FrameLayout>
    

    修改Adapter, 为每个页面添加一个图片

    /**
     * ViewPager的适配器
     * <p/>
     * Created by wangchenlong on 15/11/9.
     */
    public class SimpleAdapter extends FragmentPagerAdapter {
    
        private static final Section[] SECTIONS = {
                new Section("Tiffany", R.drawable.tiffany),
                new Section("Taeyeon", R.drawable.taeyeon),
                new Section("Yoona", R.drawable.yoona)
        };
    
        public SimpleAdapter(FragmentManager fm) {
            super(fm);
        }
    
        @Override public Fragment getItem(int position) {
            return SimpleFragment.newInstance(position + 1);
        }
    
        @Override public int getCount() {
            return SECTIONS.length;
        }
    
        @Override public CharSequence getPageTitle(int position) {
            if (position >= 0 && position < SECTIONS.length) {
                return SECTIONS[position].getTitle();
            }
            return null;
        }
    
        @DrawableRes
        public int getDrawable(int position) {
            if (position >= 0 && position < SECTIONS.length) {
                return SECTIONS[position].getDrawable();
            }
            return -1;
        }
    
        private static final class Section {
            private final String mTitle; // 标题
            @DrawableRes private final int mDrawable; // 图片
    
            public Section(String title, int drawable) {
                mTitle = title;
                mDrawable = drawable;
            }
    
            public String getTitle() {
                return mTitle;
            }
    
            public int getDrawable() {
                return mDrawable;
            }
        }
    }
    

    两个图像页面的渐变动画

    /**
     * 渐变的动画效果
     * <p/>
     * Created by wangchenlong on 15/11/9.
     */
    public class ImageAnimator {
    
        private final SimpleAdapter mAdapter; // 适配器
        private final ImageView mTargetImage; // 原始图片
        private final ImageView mOutgoingImage; // 渐变图片
    
        private int mActualStart; // 实际起始位置
    
        public ImageAnimator(SimpleAdapter adapter, ImageView targetImage, ImageView outgoingImage) {
            mAdapter = adapter;
            mTargetImage = targetImage;
            mOutgoingImage = outgoingImage;
        }
    
        /**
         * 启动动画, 之后选择向前或向后滑动
         *
         * @param startPosition 起始位置
         * @param endPosition   终止位置
         */
        public void start(int startPosition, int endPosition) {
            mActualStart = startPosition;
    
            // 终止位置的图片
            @DrawableRes int incomeId = mAdapter.getDrawable(endPosition);
    
            // 原始图片
            mOutgoingImage.setImageDrawable(mTargetImage.getDrawable()); // 原始的图片
            mOutgoingImage.setVisibility(View.VISIBLE);
            mOutgoingImage.setAlpha(1.0f);
    
            // 目标图片
            mTargetImage.setImageResource(incomeId);
        }
    
        /**
         * 滑动结束的动画效果
         *
         * @param endPosition 滑动位置
         */
        public void end(int endPosition) {
            @DrawableRes int incomeId = mAdapter.getDrawable(endPosition);
            mTargetImage.setTranslationX(0f);
    
            // 设置原始图片
            if (endPosition == mActualStart) {
                mTargetImage.setImageDrawable(mOutgoingImage.getDrawable());
            } else {
                mTargetImage.setImageResource(incomeId);
                mTargetImage.setAlpha(1f);
                mOutgoingImage.setVisibility(View.GONE);
            }
        }
    
        // 向后滚动, 比如0->1, offset滚动的距离(0->1), 目标渐渐淡出
        public void forward(float positionOffset) {
            mTargetImage.setAlpha(positionOffset);
        }
    
        // 向前滚动, 比如1->0, offset滚动的距离(1->0), 目标渐渐淡出
        public void backwards(float positionOffset) {
            mTargetImage.setAlpha(1 - positionOffset);
        }
    }
    

    注释已经写的很详细了, 注意的是向前向后滑动, position的值不同. 向前滑动, position的值是当前值减一; 向后滑动, position的值不变. 也就是说, position总是较小值. 偏移量, 向后滑动时, 从0至1; 向前滑动时, 从1至0.

    ViewPager的监听, 使用动画效果

    /**
     * ViewPager滑动页面监听
     * <p/>
     * Created by wangchenlong on 15/11/9.
     */
    public class PagerChangeListener implements ViewPager.OnPageChangeListener {
        private ImageAnimator mImageAnimator;
    
        private int mCurrentPosition;
    
        private int mFinalPosition;
    
        private boolean mIsScrolling = false;
    
        public PagerChangeListener(ImageAnimator imageAnimator) {
            mImageAnimator = imageAnimator;
        }
    
        public static PagerChangeListener newInstance(SimpleAdapter adapter, ImageView originImage, ImageView outgoingImage) {
            ImageAnimator imageAnimator = new ImageAnimator(adapter, originImage, outgoingImage);
            return new PagerChangeListener(imageAnimator);
        }
    
        /**
         * 滑动监听
         *
         * @param position             当前位置
         * @param positionOffset       偏移[当前值+-1]
         * @param positionOffsetPixels 偏移像素
         */
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    
            Log.e("DEBUG-WCL", "position: " + position + ", positionOffset: " + positionOffset);
    
            // 以前滑动, 现在终止
            if (isFinishedScrolling(position, positionOffset)) {
                finishScroll(position);
            }
    
            // 判断前后滑动
            if (isStartingScrollToPrevious(position, positionOffset)) {
                startScroll(position);
            } else if (isStartingScrollToNext(position, positionOffset)) {
                startScroll(position + 1); // 向后滚动需要加1
            }
    
            // 向后滚动
            if (isScrollingToNext(position, positionOffset)) {
                mImageAnimator.forward(positionOffset);
            } else if (isScrollingToPrevious(position, positionOffset)) { // 向前滚动
                mImageAnimator.backwards(positionOffset);
            }
        }
    
        /**
         * 终止滑动
         * 滑动 && [偏移是0&&滑动终点] || 动画之中
         *
         * @param position       位置
         * @param positionOffset 偏移量
         * @return 终止滑动
         */
        public boolean isFinishedScrolling(int position, float positionOffset) {
            return mIsScrolling && (positionOffset == 0f && position == mFinalPosition);
        }
    
        /**
         * 从静止到开始滑动, 下一个
         * 未滑动 && 位置是当前位置 && 偏移量不是0
         *
         * @param position       位置
         * @param positionOffset 偏移量
         * @return 是否
         */
        private boolean isStartingScrollToNext(int position, float positionOffset) {
            return !mIsScrolling && position == mCurrentPosition && positionOffset != 0f;
        }
    
        /**
         * 从静止到开始滑动, 前一个[position会-1]
         *
         * @param position       位置
         * @param positionOffset 偏移量
         * @return 是否
         */
        private boolean isStartingScrollToPrevious(int position, float positionOffset) {
            return !mIsScrolling && position != mCurrentPosition && positionOffset != 0f;
        }
    
        /**
         * 开始滚动, 向后
         *
         * @param position       位置
         * @param positionOffset 偏移
         * @return 是否
         */
        private boolean isScrollingToNext(int position, float positionOffset) {
            return mIsScrolling && position == mCurrentPosition && positionOffset != 0f;
        }
    
        /**
         * 开始滚动, 向前
         *
         * @param position       位置
         * @param positionOffset 偏移
         * @return 是否
         */
        private boolean isScrollingToPrevious(int position, float positionOffset) {
            return mIsScrolling && position != mCurrentPosition && positionOffset != 0f;
        }
    
        /**
         * 开始滑动
         * 滚动开始, 结束位置是position[前滚时position会自动减一], 动画从当前位置到结束位置.
         *
         * @param position 滚动结束之后的位置
         */
        private void startScroll(int position) {
            mIsScrolling = true;
            mFinalPosition = position;
    
            // 开始滚动动画
            mImageAnimator.start(mCurrentPosition, position);
        }
    
        /**
         * 如果正在滚动, 结束时, 固定position位置, 停止滚动, 调动截止动画
         *
         * @param position 位置
         */
        private void finishScroll(int position) {
            if (mIsScrolling) {
                mCurrentPosition = position;
                mIsScrolling = false;
                mImageAnimator.end(position);
            }
        }
    
        @Override
        public void onPageScrollStateChanged(int state) {
            //NO-OP
        }
    
        @Override
        public void onPageSelected(int position) {
            if (!mIsScrolling) {
                mIsScrolling = true;
                mFinalPosition = position;
                mImageAnimator.start(mCurrentPosition, position);
            }
        }
    }
    

    详细内容参见注释

    ViewPager添加滚动监听.

            SimpleAdapter adapter = new SimpleAdapter(getSupportFragmentManager());
            mVpContainer.setAdapter(adapter);
            mVpContainer.addOnPageChangeListener(PagerChangeListener.newInstance(adapter, mIvTarget, mIvOutgoing));
    

    6. 页面滚动

    在ViewPager上, 嵌套NestedScrollView.

        <android.support.v4.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fillViewport="true"
            android:scrollbars="none"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">
    
            <android.support.v4.view.ViewPager
                android:id="@+id/main_vp_container"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
    
        </android.support.v4.widget.NestedScrollView>
    

    android:fillViewport允许ScrollView内的组件填充, 否则ViewPager显示.

    设置标题, MainActivity.

    setTitle("Girls' Generation");
    

    动画效果


    AppBar

    7. 偏移滚动

    额, 与其说是AppBar, 不如说是ViewPager, 再添加一些动画效果, 和修复Bug.
    把图片的左右10%, 隐藏起来, 滑动时, 一边渐变一边侧移.
    app_bar_main中, 替换FrameLayoutPercentFrameLayout, 宽度设置为120%.

                <android.support.percent.PercentFrameLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:fitsSystemWindows="true"
                    app:layout_collapseMode="parallax">
    
                    <ImageView
                        android:id="@+id/toolbar_iv_outgoing"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_horizontal"
                        android:adjustViewBounds="true"
                        android:contentDescription="@null"
                        android:scaleType="centerCrop"
                        android:visibility="gone"
                        app:layout_widthPercent="120%"/>
    
                    <ImageView
                        android:id="@+id/toolbar_iv_target"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_horizontal"
                        android:adjustViewBounds="true"
                        android:contentDescription="@null"
                        android:fitsSystemWindows="true"
                        android:scaleType="centerCrop"
                        android:src="@drawable/tiffany"
                        app:layout_collapseMode="parallax"
                        app:layout_widthPercent="120%"/>
    
                </android.support.percent.PercentFrameLayout>
    

    修改滑动动画(Image), 在向前向后滑动时, setTranslationXX轴平移.

    /**
     * 渐变的动画效果
     * <p/>
     * Created by wangchenlong on 15/11/9.
     */
    public class ImageAnimator {
    
        private static final float FACTOR = 0.1f;
    
        private final SimpleAdapter mAdapter; // 适配器
        private final ImageView mTargetImage; // 原始图片
        private final ImageView mOutgoingImage; // 渐变图片
    
        private int mActualStart; // 实际起始位置
    
        private int mStart;
        private int mEnd;
    
        public ImageAnimator(SimpleAdapter adapter, ImageView targetImage, ImageView outgoingImage) {
            mAdapter = adapter;
            mTargetImage = targetImage;
            mOutgoingImage = outgoingImage;
        }
    
        /**
         * 启动动画, 之后选择向前或向后滑动
         *
         * @param startPosition 起始位置
         * @param endPosition   终止位置
         */
        public void start(int startPosition, int endPosition) {
            mActualStart = startPosition;
    
            // 终止位置的图片
            @DrawableRes int incomeId = mAdapter.getDrawable(endPosition);
    
            // 原始图片
            mOutgoingImage.setImageDrawable(mTargetImage.getDrawable()); // 原始的图片
    
            // 起始图片
            mOutgoingImage.setTranslationX(0f);
    
            mOutgoingImage.setVisibility(View.VISIBLE);
            mOutgoingImage.setAlpha(1.0f);
    
            // 目标图片
            mTargetImage.setImageResource(incomeId);
    
            mStart = Math.min(startPosition, endPosition);
            mEnd = Math.max(startPosition, endPosition);
        }
    
        /**
         * 滑动结束的动画效果
         *
         * @param endPosition 滑动位置
         */
        public void end(int endPosition) {
            @DrawableRes int incomeId = mAdapter.getDrawable(endPosition);
            mTargetImage.setTranslationX(0f);
    
            // 设置原始图片
            if (endPosition == mActualStart) {
                mTargetImage.setImageDrawable(mOutgoingImage.getDrawable());
            } else {
                mTargetImage.setImageResource(incomeId);
                mTargetImage.setAlpha(1f);
                mOutgoingImage.setVisibility(View.GONE);
            }
        }
    
        // 向前滚动, 比如0->1, offset滚动的距离(0->1), 目标渐渐淡出
        public void forward(float positionOffset) {
            Log.e("DEBUG-WCL", "forward-positionOffset: " + positionOffset);
            int width = mTargetImage.getWidth();
            mOutgoingImage.setTranslationX(-positionOffset * (FACTOR * width));
            mTargetImage.setTranslationX((1 - positionOffset) * (FACTOR * width));
    
            mTargetImage.setAlpha(positionOffset);
        }
    
        // 向后滚动, 比如1->0, offset滚动的距离(1->0), 目标渐渐淡入
        public void backwards(float positionOffset) {
            Log.e("DEBUG-WCL", "backwards-positionOffset: " + positionOffset);
            int width = mTargetImage.getWidth();
            mOutgoingImage.setTranslationX((1 - positionOffset) * (FACTOR * width));
            mTargetImage.setTranslationX(-(positionOffset) * (FACTOR * width));
    
            mTargetImage.setAlpha(1 - positionOffset);
        }
    
        // 判断停止
        public boolean isWithin(int position) {
            return position >= mStart && position < mEnd;
        }
    }
    

    修复滚动Bug, 连续滚动时, 及时更新当前图片, 否则图片异常.

        /**
         * 终止滑动
         * 滑动 && [偏移是0&&滑动终点] || 动画之中 || 未在区间即连续滚动
         *
         * @param position       位置
         * @param positionOffset 偏移量
         * @return 终止滑动
         */
        public boolean isFinishedScrolling(int position, float positionOffset) {
            return mIsScrolling && (positionOffset == 0f && position == mFinalPosition) || !mImageAnimator.isWithin(position);
        }
    

    全部功能都已经完成了. AppBar的知识就这些了.

    OK, that's all! Enjoy it!

    相关文章

      网友评论

      • xiaoamao:大神,能够帮我一下吗?我里面也是用的TabLayout,然后在fragment中使用的是ScrollView加载网页,嵌套滑动可以实现了,但是网页内容却无法滑动,这是为什么???
      • 75cbe2d43f14:自己新建了个项目,只想单纯的设置通知栏透明,让该栏跟APP颜色一样。除了需要fitsSystemWindows属性,还需要写别的吗?
      • 小鹏Mart:SimpleFragment写的是Listview我给他40条数据,但是不能正常滑动了(Listview),请问大神这是怎么破
      • 82388420a39a:大神 把 最上面的 设置ViewPager的适配器中的
        @Override public Fragment getItem(int position) {
        return SimpleFragment.newInstance(position + 1);
        }
        中的+1给去掉吧
      • 你家鹏大大:怎么实现Webview下滑隐藏Toolbar呢?我百度了,Google了。没有找到一个合适的解决方案。
        statusbar和toolbar的颜色是一致的。
        你家鹏大大:@SpikeKing 还是没实现最后的那个效果。怎么办。。。救救我吧。。。
        SpikeKing: @你家鹏大大 赞👍
        你家鹏大大:@你家鹏大大 实现了。但是还想实现将statusbar变成透明的,让webview可以显示到status中。大意是,往下滑动webview隐藏statusbar和toolbar。只要一往上滑动,就显示statusbar和toolbar。只能监听webview的滑动事件来改变statusbar的状态了。还有没有更优美的?
      • SScience:博主请教下,4.4 CollapsingToolbarLayout头部图片沉浸如何实现啊(和android5.+一样的效果)?酷安市场v6版在4.4下可以实现~~
        nothingwxq:@幸运Science 状态栏透明~~
        SScience:@万年游客 我要的效果是图片位于状态栏下,加个深色的view,就会挡住了
        zayn_xu:@幸运Science 4.4应该是在顶部加了个深色的view,高度和状态栏一样,fitSystemWindow为false实现的。有个开源的systemTintManger有实现。
      • Euterpe:4.4 貌似 沉浸式 与 CoordinatorLayout 不兼容 怎么解决?
        Euterpe:@幸运Science 这个是bug 4.4以上正常 4.4 状态栏不透明……
        SScience:@Euterpe 请问下4.4 CollapsingToolbarLayout头部图片沉浸搞好没有呢?
        SpikeKing:@Euterpe maven库可以看出来, support-v7, 表示7版本以上都是兼容的, 有些属性只不过是在低版本没有显示而已, 并不会影响使用.
      • 954ee51d6b38:还有一个问题,我对比过color.xml、style.xml、布局,基本一致,也无法实现本文章截图中透明的status bar,不知道是要点是哪里?
        activity布局是通过android studio生成的drawer layout activity
        954ee51d6b38:@CLWang 我一开始回复说的对比,正是下载了该项目的GitHub代码进行的对比,我是属于实在无法自己解决问题才发问的
        954ee51d6b38:@CLWang fitsystem 都是有的,我是用Android studio 新建的drawer layout activity,都是自带fitsystem属性的,所以才不确定是哪里的不同导致状态栏的效果的不同
        SpikeKing:@碌木 文章写的有点长, 你可能没看仔细, 在AppBarLayout和CollapsingToolbarLayout的android:fitsSystemWindows="true", 这个需要添加, 控制status bar的透明. 这篇文章最后是有GitHub的源码的, 你可以比对一下, 欢迎Follow我.
      • 954ee51d6b38:大神您好,打扰了,目前在仿制最新版Google Play的apk的标题栏折叠效果,但一直不成功
        布局:
        -CoordinatorLayout
        --AppBarLayout
        ---CollapsingToolbarLayout(scrollFlags="scroll|exitUntilCollapsed|snap")
        ----FrameLayout(展示内容的容器)
        ----Toolbar
        --FrameLayout(Fragment的容器,有appbar_scrolling_view_behavior)

        用于显示列表的Fragment的布局
        -CoordinatorLayout(有appbar_scrolling_view_behavior)
        --SwipeRefreshLayout(有appbar_scrolling_view_behavior)
        ---RecyclerView(有appbar_scrolling_view_behavior)
        --FloatingActionButton(有检测RecyclerView滚动的Behavior)
        因为有些Fragment不需要FloatingActionButton,所以放在了列表Fragment的布局内

        现在的问题是:
        滚动RecyclerView,无法折起标题栏,有时甚至出现无法滚动RecyclerView的情况,实在是无解,特来求教
        954ee51d6b38:@CLWang 你说的在布局文件都有设置的(回复里的简述布局都带有那个scroll_behavior),其实一开始做是可以滚动并且可以折叠app bar的,但是后来不知道改动了哪里,recycleview就无法滚动了,但我确保是都有scroll_behavior的
        SpikeKing:@碌木 恩, 这个需要TabLayout的app:layout_scrollFlags属性, ViewPager的app:layout_behavior="@string/appbar_scrolling_view_behavior"属性, 你可以看看.
        连续滚动需要添加一些支持, 因为属于跨控件, 不过Android还是提供很多属性控制这些的.
      • ba71f8ecb892:学习了!
      • YuGoal:太棒了
      • edec31c89bcb:不错!

      本文标题:AppBar布局的使用方式

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