CoordinatorLayout解析(一): 实现Toolbar隐藏效果

Kayyoo
0 阅读4分钟

本章目录

1 CoordinatorLayout概述

CoordinatorLayout是Android Design Support Library中比较难的控件。它是用来组织其子View之间的协作的一个父View。它继承自ViewGroup，默认情况下可以被理解为一个FrameLayout，它的布局方式是一层一层叠上去的。

CoordinatorLayout源码：

package androidx.coordinatorlayout.widget;

public class CoordinatorLayout extends ViewGroup implements NestedScrollingParent2,
        NestedScrollingParent3 {
        
    ...
    
    public static abstract class Behavior<V extends View> {
        ...
    }
    
    public static class LayoutParams extends MarginLayoutParams {
        ...
    }
    
    ...
}

2 实现Toolbar隐藏效果

项目结构.png

项目结构

2.1 编码

app模块下的build.gradle

plugins {
    alias(libs.plugins.android.application)
}

android {
    namespace 'com.example.coordinatordemo'
    compileSdk 36

    defaultConfig {
        applicationId "com.example.coordinatordemo"
        minSdk 22
        targetSdk 36
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_11
        targetCompatibility JavaVersion.VERSION_11
    }
}

dependencies {

    implementation libs.appcompat
    implementation libs.material
    implementation libs.activity
    implementation libs.constraintlayout
    testImplementation libs.junit
    androidTestImplementation libs.ext.junit
    androidTestImplementation libs.espresso.core
}

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    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">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#ffff00ff"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabIndicatorColor="#ADBE107E"
            app:tabMode="scrollable" />

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

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:clickable="true"
        android:contentDescription="悬浮按钮"
        android:focusable="true"
        android:onClick="checkIn"
        android:src="@mipmap/ic_launcher"
        app:layout_anchor="@id/viewpager"
        app:layout_anchorGravity="bottom|right" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

能实现隐藏Toolbar的关键是<Toolbar>中的app:layout_scrollFlags="scroll | enterAlways"这个属性，设置滚动事件，属性里面必须至少启用scroll这个flag，这样View才会滚动出屏幕，否则它将一直固定在顶部。

布局中用到了FloatingActionButton，它和CoordinatorLayout结合会有一个特殊效果。即当点击FloatingActionButton时会弹出Snackbar，为了给Snackbar留出空间，浮动的FloatingActionButton会向上移动。因为FloatingActionButton有一个默认的Behavior来检测Snackbar的添加并让自己在Snackbar之上，呈现上移与Snackbar登高的效果。

my_fragment.xml:

<?xml version="1.0" encoding="utf-8"?>
<androidx.recyclerview.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

</androidx.recyclerview.widget.RecyclerView>

my_fragment_item.xml:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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="wrap_content"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.3"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/img"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="提示文字" />

</androidx.constraintlayout.widget.ConstraintLayout>

MyFragment.java:

package com.example.coordinatordemo;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import java.util.List;


public class MyFragment extends Fragment {
    private RecyclerView mRecyclerView;
    private List<String> mContent;

    public MyFragment(List<String> content) {
        mContent = content;
    }


    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        mRecyclerView = (RecyclerView) inflater.inflate(R.layout.my_fragment, container, false);
        return mRecyclerView;
    }

    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        mRecyclerView.setLayoutManager(new LinearLayoutManager(mRecyclerView.getContext()));
        mRecyclerView.setAdapter(new RecyclerViewAdapter(getActivity(), mContent));
    }

    /*@Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
    }*/
}

FragmentAdapter.java:

package com.example.coordinatordemo;

import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.lifecycle.Lifecycle;
import androidx.viewpager2.adapter.FragmentStateAdapter;

import java.util.List;


public class FragmentAdapter extends FragmentStateAdapter {
    private List<Fragment> mFragments;

    public FragmentAdapter(FragmentManager fm, Lifecycle lc, List<Fragment> fragments) {
        super(fm, lc);
        mFragments = fragments;
    }

    @NonNull
    @Override
    public Fragment createFragment(int position) {
        return mFragments.get(position);
    }

    @Override
    public int getItemCount() {
        return mFragments.size();
    }

}

RecyclerViewAdapter.java:

package com.example.coordinatordemo;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import android.widget.Toast;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import java.util.List;


public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.ViewHolder> {
    private Context mContext;
    private List<String> mContents;

    public RecyclerViewAdapter(Context context, List<String> content) {
        mContext = context;
        mContents = content;
    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.my_fragment_item, parent, false);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        final View view = holder.mView;
        TextView tv = view.findViewById(R.id.tv);
        tv.setText(mContents.get(position));

        view.setOnClickListener(v -> Toast.makeText(mContext, "奔跑在孤傲的路上", Toast.LENGTH_SHORT).show());
    }

    @Override
    public int getItemCount() {
        return mContents.size();
    }


    public static class ViewHolder extends RecyclerView.ViewHolder {
        public final View mView;

        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            mView = itemView;
        }
    }

}

MainActivity.java:

package com.example.coordinatordemo;

import android.os.Bundle;
import android.view.View;

import androidx.activity.EdgeToEdge;
import androidx.annotation.NonNull;
import androidx.appcompat.app.ActionBar;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import androidx.fragment.app.Fragment;
import androidx.viewpager2.widget.ViewPager2;

import com.google.android.material.snackbar.Snackbar;
import com.google.android.material.tabs.TabLayout;
import com.google.android.material.tabs.TabLayoutMediator;

import java.util.ArrayList;
import java.util.List;


public class MainActivity extends AppCompatActivity {
    private ViewPager2 mViewPager2;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        EdgeToEdge.enable(this);
        setContentView(R.layout.activity_main);
        /*ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main), (v, insets) -> {
            Insets systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars());
            v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom);
            return insets;
        });*/

        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        final ActionBar ab = getSupportActionBar();
        assert ab != null;
        ab.setDisplayHomeAsUpEnabled(true);

        mViewPager2 = findViewById(R.id.viewpager);
        initViewPager();
    }


    private void initViewPager() {
        List<String> titles = new ArrayList<>();
        titles.add("精选");
        titles.add("体育");
        titles.add("巴萨");
        titles.add("购物");
        titles.add("明星");
        titles.add("视频");
        titles.add("教育");
        titles.add("健康");
        titles.add("励志");
        titles.add("图文");

        List<String> content = new ArrayList<>();
        content.add("djjjj减肥萨达");
        content.add("发多少");
        content.add("阿范德萨发");
        content.add(" 额阿帆");
        content.add("答复");
        content.add("大师傅");
        content.add(" 阿发");
        content.add(" e网通");
        content.add("  二二");
        content.add("阿凡达");
        content.add("让他无任何");
        content.add("如图");
        content.add(" 人物");
        content.add(" 人员无人");
        content.add("热突然");
        content.add("提问题");
        content.add(" 人特意");
        content.add(" 人特意");
        content.add("  团任务");
        content.add("日");

        TabLayout mTabLayout = findViewById(R.id.tabs);
        for (int i = 0; i < titles.size(); i++) {
            mTabLayout.addTab(mTabLayout.newTab().setText(titles.get(i)));
        }

        List<Fragment> fragments = new ArrayList<>();
        for (int i = 0; i < titles.size(); i++) {
            fragments.add(new MyFragment(content));
        }

        FragmentAdapter Adapter = new FragmentAdapter(getSupportFragmentManager(), getLifecycle(), fragments);
        mViewPager2.setAdapter(Adapter);

        new TabLayoutMediator(mTabLayout, mViewPager2, new TabLayoutMediator.TabConfigurationStrategy() {
            @Override
            public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
                tab.setText(titles.get(position));
            }
        }).attach();

    }

    public void checkIn(View view) {
        Snackbar.make(view, "点击成功", Snackbar.LENGTH_SHORT).show();
    }

}

2.2 效果图

00.gif

上滑隐藏Toolbar

参考文献

[1] 刘望舒.Android进阶之光[M].北京:电子工业出版社，2018

[2] 《Android进阶之光》博文视点主页

微信公众号：TechU

TechU.png

avatar
文章
阅读
粉丝