吸顶toolbar的使用,以前我用两个布局显示隐藏做的吸顶写的真

2020-08-18  本文已影响0人  莫不如哦

布局代码

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#ffffff">

        <com.google.android.material.appbar.AppBarLayout
            android:id="@+id/app_bar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#ffffff"
            app:elevation="0dp">

            <!--layout_scrollFlags
            enterAlways永远先记着自己滚
            enterAlwaysCollapsed先记着自己滚一点等到头了在全展开
            exitUntilCollapsed永远先记着别人滚
            snap类似viewpager的吸附效果
            -->
            <com.google.android.material.appbar.CollapsingToolbarLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#f7f7f7"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

                <!-- 这里便是顶部会划走的内容  -->
                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                    <androidx.viewpager.widget.ViewPager
                        android:id="@+id/vp"
                        android:layout_width="match_parent"
                        android:layout_height="350dp" />
                </RelativeLayout>

                <!--                layout_collapseMode=””
                1、 pin
                在view折叠的时候Toolbar仍然被固定在屏幕的顶部。

                2、 parallax
                设置为这个模式时,在内容滚动时,
                CollapsingToolbarLayout中的View(比如ImageView)也可以同时滚动,实现视差滚动效果,
                通常和layout_collapseParallaxMultiplier(设置视差因子,值为0~1)搭配使用。-->
                <!--                toolbar 跟Collapsingtoolbarlayout联动-->
                <androidx.appcompat.widget.Toolbar
                    android:id="@+id/toolbaretail"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@color/white"
                    android:fitsSystemWindows="true"
                    app:layout_collapseMode="pin">

                    <!--                    这就是一个动态计算状态栏高度的自定义控件-->
                    <com.example.myapplication.util.StatusBarHeightView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:orientation="vertical"
                        app:use_type="use_padding_top">
                        <!--这里放内容布局或View-->
                        <androidx.constraintlayout.widget.ConstraintLayout
                            android:layout_width="match_parent"
                            android:layout_height="70dp"
                            android:background="#000000">

                        </androidx.constraintlayout.widget.ConstraintLayout>
                    </com.example.myapplication.util.StatusBarHeightView>

                </androidx.appcompat.widget.Toolbar>

            </com.google.android.material.appbar.CollapsingToolbarLayout>

            <!--tablyout
                这是会吸顶的内容
             不多介绍-->
            <com.google.android.material.tabs.TabLayout
                android:id="@+id/tab"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                app:tabIndicatorColor="#FF791F"
                app:tabIndicatorFullWidth="false"
                app:tabRippleColor="@android:color/transparent"
                app:tabSelectedTextColor="#656565"
                app:tabTextColor="#7a7d83" />
        </com.google.android.material.appbar.AppBarLayout>


        <!--       这个是底部滑动内容,可以用recyclerview,也可已放其他可滑动的控件-->
        <androidx.viewpager.widget.ViewPager
            android:id="@+id/vp_rlv"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    </androidx.coordinatorlayout.widget.CoordinatorLayout>

</LinearLayout>

java代码 做toolbar渐变

  appBarLayout.addOnOffsetChangedListener(new AppBarLayout.BaseOnOffsetChangedListener() {
            @Override
            public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
                //verticalOffset  当前偏移量 appBarLayout.getTotalScrollRange() 最大高度 便宜值
                Log.e("偏移量", verticalOffset + "");
                Log.e("appbar高度", appBarLayout.getTotalScrollRange() + "");

                int Offset = Math.abs(verticalOffset); //目的是将负数转换为绝对正数;
                //标题栏的渐变
                toolbaretail.setBackgroundColor(changeAlpha(getResources().getColor(R.color.white)
                        , Math.abs(verticalOffset * 1.0f) / appBarLayout.getTotalScrollRange()));

                if (Offset >= appBarLayout.getTotalScrollRange()) {

                } else {
                   
                }
            }
        });
   /**
     * 根据百分比改变颜色透明度
     */
    public int changeAlpha(int color, float fraction) {
        int alpha = (int) (Color.alpha(color) * fraction);
        return Color.argb(alpha, 255, 0, 0);
    }

记录下,以后直接copy

上一篇下一篇

猜你喜欢

热点阅读