Android CoordinatorLayout打造酷炫的顶部栏
16lz
2021-01-23
CoordinatorLayout常常与AppBarLayout和CollapsingToolbarLayout一起使用，用于打造各种炫酷效果的顶部栏。之前写过一篇Android 实现酷炫的顶部栏，不过要注意的是这次我们用到Androidx，原因是Google 发布了 Android support library 28，同时也发布了 androidx 1.0.0 第一个正式版本，然后支持库的 “28.0.0” 将会是最后一次更新，之后的更新都会迁移到 Androidx 中，所以我们这里也使用Androidx 了。
一、迁移到 Androidx
我们顺便讲一下迁移到 Androidx的迁移步骤，首先在 gradle.properties 文件中添加
# 表示使用 androidxandroid.useAndroidX=true# 表示将第三方库迁移到 androidxandroid.enableJetifier=true迁移后如果会报错，需要 Flie -> Invalidate Caches /Restart 一下就可以了。
具体可以参考迁移到 AndroidX
二、按照惯例，我们先看看效果图：
从效果图来看，当设置了layout_behavior的控件响应起了CollapsingToolbarLayout中的layout_scrollFlags事件时，ImageView会有视差效果的向上滚动移除屏幕，当开始折叠时，我们代码上来设置 toolbar 背景透明图。
三、我们先来看看布局文件：
<?xml version="1.0" encoding="utf-8"?> （1）我们在CollapsingToolbarLayout中设置了一个ImageView和一个Toolbar，并将这个CollapsingToolbarLayout作为一个整体放在AppBarLayout中；
（2）在CollapsingToolbarLayout中，我们设置了app:layout_scrollFlags=“scroll|enterAlwaysCollapsed”，它的值还包括：
- scroll - 想滚动就必须设置这个，也就是说值设为scroll的View会跟随滚动事件一起滚动
- enterAlways - 值设为enterAlways的View,当RecyclerView往下滚动时，该View会直接往下滚动
- exitUntilCollapsed - 值设为exitUntilCollapsed的View，当这个View要往上逐渐“消逝”时，会一直往上滑动，直到剩下的的高度达到它的最小高度后，再响应RecyclerView的内部滑动事件。
- enterAlwaysCollapsed - 当值设为enterAlwaysCollapsed 的View已经设置minHeight属性又使用此标志时，这个View只能以最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度
（3）在Toolbar控件中，我们设置了app:layout_collapseMode=“pin”，layout_collapseMode (折叠模式) - 有两个值:
- pin - 设置为这个模式时，当CollapsingToolbarLayout完全收缩后，Toolbar还可以保留在屏幕上
- parallax - 设置为这个模式时，在内容滚动时，CollapsingToolbarLayout中的View（比如ImageView)也可以同时滚动，实现视差滚动效果，通常和layout_collapseParallaxMultiplier(设置视差因子)搭配使用
四、我们先来看看代码
package per.juan.coordinatorlayoutdome;import android.content.res.Resources;import android.graphics.Color;import android.os.Build;import android.os.Bundle;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.view.Window;import android.view.WindowManager;import android.widget.TextView;import androidx.appcompat.app.AppCompatActivity;import androidx.appcompat.widget.Toolbar;import androidx.recyclerview.widget.LinearLayoutManager;import androidx.recyclerview.widget.RecyclerView;import com.google.android.material.appbar.AppBarLayout;import java.lang.reflect.Field;public class MainActivity extends AppCompatActivity { private Toolbar toolbar; private AppBarLayout app_bar; private RecyclerView mRecyclerView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initToolBar(); initView(); } private void initView() { mRecyclerView = findViewById(R.id.recyclerview); toolbar = findViewById(R.id.toolbar); app_bar = findViewById(R.id.app_bar); final int alphaMaxOffset = dpToPx(150); toolbar.getBackground().setAlpha(0); app_bar.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() { @Override public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) { // 设置 toolbar 背景 if (verticalOffset > -alphaMaxOffset) { toolbar.getBackground().setAlpha(255 * -verticalOffset / alphaMaxOffset); } else { toolbar.getBackground().setAlpha(255); } } }); mRecyclerView.setLayoutManager(new LinearLayoutManager(this)); mRecyclerView.setAdapter(new ContentAdapter()); } protected void initToolBar() { try { Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); if (toolbar != null) { // 沉浸模式 int statusBarHeight = getStatusBarHeight(); if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { openAndroidLStyle(); toolbar.setPadding(0, statusBarHeight, 0, 0); toolbar.getLayoutParams().height = dpToPx(46) + statusBarHeight; } } } catch (Exception e) { e.printStackTrace(); } } /** * 开启沉浸式模式支持 */ public void openAndroidLStyle() { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { Window window = getWindow(); window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS); window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_STABLE); window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS); window.setStatusBarColor(Color.TRANSPARENT); } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS); } } /** * 获取状态栏高度 */ public int getStatusBarHeight() { try { Class<?> c = Class.forName("com.android.internal.R$dimen"); Object obj = c.newInstance(); Field field = c.getField("status_bar_height"); int x = Integer.parseInt(field.get(obj).toString()); return getResources().getDimensionPixelSize(x); } catch (Exception e) { e.printStackTrace(); } return 0; } /** * dp转换为px */ public static int dpToPx(float dp) { return (int) (dp * Resources.getSystem().getDisplayMetrics().density + 0.5f); } private class ContentAdapter extends RecyclerView.Adapter { @Override public ContentAdapter.ContentHolder onCreateViewHolder(ViewGroup parent, int viewType) { return new ContentHolder(LayoutInflater.from(MainActivity.this).inflate(android.R.layout.simple_list_item_1, parent, false)); } @Override public void onBindViewHolder(ContentAdapter.ContentHolder holder, int position) { holder.itemTv.setText("item"); } @Override public int getItemCount() { return 35; } class ContentHolder extends RecyclerView.ViewHolder { private TextView itemTv; public ContentHolder(View itemView) { super(itemView); itemTv = (TextView) itemView.findViewById(android.R.id.text1); } } }} （1）这里我们需要开启沉浸式模式的支持；
（2）通过AppBarLayout.addOnOffsetChangedListener来监听折叠过程中AppBarLayout垂直方向上的偏移量的改变，我们代码上来设置 toolbar 背景透明图。
好了，本篇文章就这样啦，存在总结不到位的地方还望指导，感谢 _
源码下载
更多相关文章
- Activity启动模式详解
- android获取当前窗口的宽度和高度
- Android情景模式、文件管理器 完整示例编程详解
- Android 内功心法(1.2)——android常用设计模式之工厂模式
- Android P HIDL服务绑定模式与直通模式的分析
- android mvp模式讲解