Android 滑动渐变背景Toolbar、点击置顶ScrollView

晨曦_LLW

发布于 2020-09-25 13:28:43

1.6K0

发布于 2020-09-25 13:28:43

文章被收录于专栏：Android、鸿蒙开发Android、鸿蒙开发

效果图如下：

点击置顶ScrollView

这个置顶是滑动的置顶，不包括外层布局。好了，效果图看到了，你有没有动力开始写代码呢？创建一个SlideLayoutDemo的项目然后在res下新建一个network_security_config.xml

里面的代码很少,如下

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <base-config cleartextTrafficPermitted="true" />
</network-security-config>

然后进入AndroidManifest.xml

增加了网络权限和http访问许可

在app的build.gradle中添加相关的依赖

先增加DataBind的使用

	dataBinding {
        enabled = true
    }

	//Google Material控件,以及迁移到AndroidX下一些控件的依赖
    implementation 'com.google.android.material:material:1.0.0'
    //图片加载框架
    implementation 'com.github.bumptech.glide:glide:4.10.0'
    annotationProcessor 'com.github.bumptech.glide:compiler:4.10.0'

然后记得Sync

最后修改样式，打开res下的values下的styles.xml

现在进入到activity_main.xml中这里面用了两个图片资源 top_bg.jpg

icon_return_top.png

布局中用到了一个自定义VIew, 新建一个GoTopNestedScrollView类代码如下：

package com.llw.slidelayoutdemo;

import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.widget.ImageView;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.core.widget.NestedScrollView;

/**
 * 回到顶部ScrollView
 */
public class GoTopNestedScrollView extends NestedScrollView implements View.OnClickListener {


    private ImageView goTopBtn;//展示置顶的图片按钮
    private int screenHeight = 500;//屏幕高度 没有设置则默认500

    public GoTopNestedScrollView(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    //设置滑动到多少出现
    public void setScreenHeight(int screenHeight) {
        this.screenHeight = screenHeight;
    }

    //设置滚动置顶按钮以及其点击监听事件,
    public void setImageViewOnClickGoToFirst(ImageView goTopBtn) {
        this.goTopBtn = goTopBtn;
        this.goTopBtn.setOnClickListener(this);
    }

    //重写滚动改变返回的回调
    // l oldl 分别代表水平位移
    // t oldt 代表当前左上角距离Scrollview顶点的距离
    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);
        /**
         * 滑动距离超过500px,出现置顶按钮,可以做为自定义属性
         * 滑动距离如果用户设置了使用用户的 如果用户没有设置使用默认的
         */
        //当 当前的左上角距离顶点距离 大于某个值的时候就显现置顶按钮出来 如果小于某个值就隐藏
        if (screenHeight != 0) {
            if (t > screenHeight) {
                goTopBtn.setVisibility(VISIBLE);
            } else {
                goTopBtn.setVisibility(GONE);
            }
        }
    }

    //置顶按钮的点击事件监听
    @Override
    public void onClick(View view) {
        //滑动到ScrollView的顶点
        this.smoothScrollTo(0, 0);
    }

}

activity_main.xml布局

<?xml version="1.0" encoding="utf-8"?>
<layout><!--databind-->
    <!--相对-->
    <RelativeLayout 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">

        <!--协调布局-->
        <androidx.coordinatorlayout.widget.CoordinatorLayout
            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=".MainActivity">

            <com.google.android.material.appbar.AppBarLayout
                android:id="@+id/appbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

                <com.google.android.material.appbar.CollapsingToolbarLayout
                    android:layout_width="match_parent"
                    android:layout_height="300dp"
                    app:layout_scrollFlags="scroll|exitUntilCollapsed">

                    <ImageView
                        android:id="@+id/iv_top"
                        android:layout_width="match_parent"
                        android:layout_height="300dp"
                        android:scaleType="centerCrop"
                        android:src="@drawable/top_bg" />

                    <!--标题控件-->
                    <androidx.appcompat.widget.Toolbar
                        android:layout_width="match_parent"
                        android:layout_height="80dp"
                        app:contentInsetStart="0dp"
                        app:layout_collapseMode="pin">

                        <LinearLayout
                            android:id="@+id/fl_layout"
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:background="#FFF"
                            android:gravity="center"
                            android:paddingTop="20dp"
                            app:layout_collapseMode="pin">

                            <TextView
                                android:id="@+id/tv_title"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:text="在座的各位都是正人君子"
                                android:textColor="#000"
                                android:textSize="18sp" />
                        </LinearLayout>

                    </androidx.appcompat.widget.Toolbar>

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

            <com.llw.slidelayoutdemo.GoTopNestedScrollView
                android:id="@+id/go_top_scrollview"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:overScrollMode="never"
                app:layout_behavior="@string/appbar_scrolling_view_behavior">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical">

                    <ImageView
                        android:id="@+id/iv_one"
                        android:layout_width="match_parent"
                        android:layout_height="600dp"
                        android:scaleType="centerCrop" />

                    <ImageView
                        android:id="@+id/iv_two"
                        android:layout_width="match_parent"
                        android:layout_height="600dp"
                        android:scaleType="centerCrop" />

                    <ImageView
                        android:id="@+id/iv_three"
                        android:layout_width="match_parent"
                        android:layout_height="600dp"
                        android:scaleType="centerCrop" />

                    <ImageView
                        android:id="@+id/iv_four"
                        android:layout_width="match_parent"
                        android:layout_height="600dp"
                        android:scaleType="centerCrop" />

                    <ImageView
                        android:id="@+id/iv_five"
                        android:layout_width="match_parent"
                        android:layout_height="600dp"
                        android:scaleType="centerCrop" />
                </LinearLayout>


            </com.llw.slidelayoutdemo.GoTopNestedScrollView>

        </androidx.coordinatorlayout.widget.CoordinatorLayout>

        <!--置顶图标-->
        <ImageView
            android:id="@+id/ivReturnTop"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_alignParentRight="true"
            android:layout_alignParentBottom="true"
            android:layout_margin="10dp"
            android:src="@mipmap/icon_return_top"
            android:visibility="gone" />

    </RelativeLayout>

</layout>

这里还有一个状态栏工具类，代码如下：

package com.llw.slidelayoutdemo;

import android.app.Activity;
import android.graphics.Color;
import android.os.Build;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;

import java.lang.reflect.Field;
import java.lang.reflect.Method;

public class StatusBarUtils {

    /**
     * 兼容状态栏透明（沉浸式）
     *
     * @param activity
     */
    public static void setImmersionStateMode(Activity activity) {
        StatusBarLightMode(activity);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT && Build.VERSION.SDK_INT != Build.VERSION_CODES.LOLLIPOP) {
            // 透明状态栏
            activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            // 透明导航栏
            // getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
        } else if (Build.VERSION.SDK_INT == Build.VERSION_CODES.LOLLIPOP) {
            Window window = activity.getWindow();
            window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS |
                    WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
            window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                    // | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
                    | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
            window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
            window.setStatusBarColor(Color.TRANSPARENT);
            window.setNavigationBarColor(Color.TRANSPARENT);
        }
    }

    /**
     * 设置状态栏黑色字体图标，
     * 适配4.4以上版本MIUIV、Flyme和6.0以上版本其他Android
     *
     * @param activity
     * @return 1:MIUUI 2:Flyme 3:android6.0
     */
    public static int StatusBarLightMode(Activity activity) {
        int result = 0;
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            if (MIUISetStatusBarLightMode(activity.getWindow(), true)) {
                result = 1;
            } else if (FlymeSetStatusBarLightMode(activity.getWindow(), true)) {
                result = 2;
            } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
                activity.getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);
                result = 3;
            }
        }
        return result;
    }

    /**
     * 设置状态栏图标为深色和魅族特定的文字风格
     * 可以用来判断是否为Flyme用户
     *
     * @param window 需要设置的窗口
     * @param dark   是否把状态栏字体及图标颜色设置为深色
     * @return boolean 成功执行返回true
     */
    public static boolean FlymeSetStatusBarLightMode(Window window, boolean dark) {
        boolean result = false;
        if (window != null) {
            try {
                WindowManager.LayoutParams lp = window.getAttributes();
                Field darkFlag = WindowManager.LayoutParams.class
                        .getDeclaredField("MEIZU_FLAG_DARK_STATUS_BAR_ICON");
                Field meizuFlags = WindowManager.LayoutParams.class
                        .getDeclaredField("meizuFlags");
                darkFlag.setAccessible(true);
                meizuFlags.setAccessible(true);
                int bit = darkFlag.getInt(null);
                int value = meizuFlags.getInt(lp);
                if (dark) {
                    value |= bit;
                } else {
                    value &= ~bit;
                }
                meizuFlags.setInt(lp, value);
                window.setAttributes(lp);
                result = true;
            } catch (Exception e) {

            }
        }
        return result;
    }

    /**
     * 设置状态栏字体图标为深色，需要MIUIV6以上
     *
     * @param window 需要设置的窗口
     * @param dark   是否把状态栏字体及图标颜色设置为深色
     * @return boolean 成功执行返回true
     */
    public static boolean MIUISetStatusBarLightMode(Window window, boolean dark) {
        boolean result = false;
        if (window != null) {
            Class clazz = window.getClass();
            try {
                int darkModeFlag = 0;
                Class layoutParams = Class.forName("android.view.MiuiWindowManager$LayoutParams");
                Field field = layoutParams.getField("EXTRA_FLAG_STATUS_BAR_DARK_MODE");
                darkModeFlag = field.getInt(layoutParams);
                Method extraFlagField = clazz.getMethod("setExtraFlags", int.class, int.class);
                if (dark) {
                    extraFlagField.invoke(window, darkModeFlag, darkModeFlag);//状态栏透明且黑色字体
                } else {
                    extraFlagField.invoke(window, 0, darkModeFlag);//清除黑色字体
                }
                result = true;
            } catch (Exception e) {

            }
        }
        return result;
    }
}

接下来进入到MainActivity中

package com.llw.slidelayoutdemo;

import androidx.appcompat.app.AppCompatActivity;
import androidx.databinding.DataBindingUtil;

import android.graphics.Color;
import android.os.Bundle;
import android.util.DisplayMetrics;

import com.bumptech.glide.Glide;
import com.google.android.material.appbar.AppBarLayout;
import com.llw.slidelayoutdemo.databinding.ActivityMainBinding;

public class MainActivity extends AppCompatActivity {

    ActivityMainBinding binding;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initView();//初始化视图

        showImg();//显示网络图片
    }

    /**
     * 初始化视图
     */
    private void initView() {
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main);//绑定视图

        StatusBarUtils.setImmersionStateMode(this);//透明状态栏

        //滑动偏移监听事件
        binding.appbar.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
            @Override
            public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
                int toolbarHeight = appBarLayout.getTotalScrollRange();
                int dy = Math.abs(verticalOffset);
                if (dy <= toolbarHeight) {
                    float scale = (float) dy / toolbarHeight;
                    float alpha = scale * 255;
                    binding.flLayout.setBackgroundColor(Color.argb((int) alpha, 255, 255, 255));//渐变背景透明度
                    binding.tvTitle.setTextColor(Color.argb((int) alpha,0,0,0));//渐变文字颜色透明度
                }
            }
        });

        //设置点击置顶的ImageView
        binding.goTopScrollview.setImageViewOnClickGoToFirst(binding.ivReturnTop);

        //ScrollView滑动超过屏幕高度则显示置顶按钮,不设置的话就会使用自定义View中的默认高度
        DisplayMetrics metric = new DisplayMetrics();//获取屏幕高度
        getWindowManager().getDefaultDisplay().getMetrics(metric);
        binding.goTopScrollview.setScreenHeight(metric.heightPixels);//设置高度
    }

    /**
     * 使用Glide加载显示网络图片 记得加网络权限和http地址url访问许可
     */
    private void showImg() {
        Glide.with(this)
                .load("http://gank.io/images/2c924db2a1b84c5d8fdb9f8c5f6d1b71")
                .into(binding.ivOne);
        Glide.with(this)
                .load("http://gank.io/images/92989b6a707b44dfb1c734e8d53d39a2")
                .into(binding.ivTwo);
        Glide.with(this)
                .load("http://gank.io/images/4817628a6762410895f814079a6690a1")
                .into(binding.ivThree);
        Glide.with(this)
                .load("http://gank.io/images/f9523ebe24a34edfaedf2dd0df8e2b99")
                .into(binding.ivFour);
        Glide.with(this)
                .load("http://gank.io/images/4002b1fd18544802b80193fad27eaa62")
                .into(binding.ivFive);
    }


}

运行起来效果就是这样的。

点击置顶ScrollView

代码下载地址

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2020-08-03 ，如有侵权请联系 cloudcommunity@tencent.com 删除

xml