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

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

作者: 莫不如哦 | 来源:发表于2020-08-18 17:22 被阅读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

    相关文章

      网友评论

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

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