Material Design【Android-Toolbar，滑动菜单，悬浮按钮，卡片布局，下拉刷新和可折叠式标题栏及案例】

---

---

Material Design——界面设计

1.Toolbar，标题栏

1】修改配置文件

<application
        android:name="org.litepal.LitePalApplication"
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.Android">
        
        <activity
            android:name=".MainActivity"
            android:label="Dummer">
         ......
        </activity>
    </application>

2】添加xml文件，目录res-meau-toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/backup"
        android:icon="@drawable/ic_small"
        android:title="Backup"
        app:showAsAction="always" />

    <item
        android:id="@+id/deletes"
        android:icon="@drawable/ic_biggest"
        android:title="Delete"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/setting"
        android:icon="@drawable/ic_car24"
        android:title="Settings"
        app:showAsAction="never" />
</menu>

3】修改activity，增加两个重写方法

 @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.toolbar, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(@NonNull MenuItem item) {
        switch (item.getItemId()) {
            case R.id.backup:
                Log.i(TAG, "you clicked Backup");
                break;
            case R.id.deletes:
                Log.i(TAG, "you clicked Delete");
                break;
            case R.id.setting:
                Log.i(TAG, "you clicked Settings");
                break;
            default:
                break;
        }
        return true;
    }

效果如下，Pass

2.滑动菜单

滑动菜单就是将菜单选项隐藏起来，而不是放置在主屏幕，可以通过滑动的方式将菜单显示出来，即节省空间，又呈现非常好的动画效果
1】DrawerLayout布局
在布局中允许放入两个直接子控件，第一个子控件是在主屏幕中显示的内容，第二个子控件是滑动菜单中显示的内容.
a.代码如下：

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
    </FrameLayout>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="#FFF"
        android:text="This is meau"
        android:textSize="24dp" />
</androidx.drawerlayout.widget.DrawerLayout>

运行效果，从屏幕左侧向右侧滑动，显示隐藏菜单，Pass
b.在导航栏中添加一个按钮，点击按钮，将隐藏菜单内容显示出来，修改activity代码如下：

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mDrawerLayout = findViewById(R.id.drawer);
        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null) {
            actionBar.setDisplayHomeAsUpEnabled(true);
            actionBar.setHomeAsUpIndicator(R.drawable.ic_drawer);
        }
    }
    .....
@Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            .....
            case android.R.id.home:
                mDrawerLayout.openDrawer(GravityCompat.START);
                break;
            default:
                break;
        }
        return true;
    }

运行程序，点击按钮或滑动屏幕，隐藏菜单会显示出来，Pass
2】NavigationView
NavigationView是Material Design库中一个控件，将滑动菜单页面的实现变得更加简单
NavigationView 常用方法：

addHeaderView(View view)
将视图添加为导航菜单的标题

getHeaderCount()
获取此 NavigationView 中标头的数量

getHeaderView(int index)
获取指定位置的标题视图

getMenu()
返回 Menu 与此导航视图关联的实例

inflateMenu(int resId)
在此导航视图中添加菜单资源

removeHeaderView(View view)
删除先前添加的标题视图

setItemBackgroundResource(int resId)
将菜单项的背景设置为给定资源

setItemIconSize(int iconSize)
设置用于菜单项图标的大小（以像素为单位）

setItemTextAppearance(int resId)
将菜单项的文本外观设置为给定资源

setItemTextColor(ColorStateList textColor)
设置要在菜单项上使用的文本颜色

setItemIconTintList(ColorStateList tint)
设置菜单项上使用 Icon 的颜色

setNavigationItemSelectedListener(NavigationView listener)     
设置一个侦听器，当选择菜单项时将用来通知该侦听器                     

用法如下 ：
a.将这个库引入到项目中，打开app/build.grade文件中，在dependencies闭包中添加如下内容：
b.在menu-nav_menu.xml，编写代码如下：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_call"
            android:icon="@drawable/ic_call"
            android:title="Call" />

        <item
            android:id="@+id/nav_friend"
            android:icon="@drawable/ic_people"
            android:title="Friend" />

        <item
            android:id="@+id/nav_email"
            android:icon="@drawable/ic_email"
            android:title="Email" />

        <item
            android:id="@+id/nav_label"
            android:icon="@drawable/ic_label"
            android:title="Label" />
    </group>
</menu>

group标签表示一个组，android:checkableBehavior指定为single表示组中的所有菜单项只能单选
c.在menu-nav_header.xml，设置头像，用户名和邮箱，编写代码如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:padding="10dp">

    <ImageView
        android:id="@+id/icon_img"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_margin="10dp"
        android:src="@drawable/icon_img" />

    <TextView
        android:id="@+id/username"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="15dp"
        android:layout_toRightOf="@id/icon_img"
        android:text="梦醒时见你"
        android:textColor="@android:color/black"
        android:textSize="18sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/email"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/username"
        android:layout_margin="10dp"
        android:layout_toRightOf="@id/icon_img"
        android:text="***@qq.com"
        android:textColor="@android:color/black"
        android:textSize="14sp" />
</RelativeLayout>

d.修改activity_main.xml代码，添加NavigationView，滑动菜单时隐藏菜单会显示NavigationView中对应的内容，如下：

<com.google.android.material.navigation.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/nav_menu" />

e.修改MainActivity，给菜单项添加监听事件

mDavigation = findViewById(R.id.nav_view);
        mDavigation.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(MenuItem item) {
                mDrawerLayout.closeDrawers();
                return true;
            }
        });

运行项目，显示结果如下：

3.悬浮按钮和可交互提示

1】FloatingActionButton是Design Support库中提供的一个控件，可实现悬浮按钮的效果，悬浮按钮默认会使用colorAccent来作为按钮的颜色，还可以通过给按钮指定一个图标来表明这个按钮的作用是什么。
a.代码如下：

<com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/floatAb"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_margin="15dp"
            android:src="@drawable/ic_done"
            app:elevation="8dp" />
        <!--        app:elevation用于指定高度，值越大，投影范围越大，但投影效果越淡-->

2】Snackbar
Snackbar，它允许在提示当中加入一个可交互按钮，当用户点击按钮的时候可以执行一些额外的逻辑操作，如点击删除按钮，提出提示框，可以选择否
a.用法如下：

FloatingActionButton floatAb = findViewById(R.id.floatAb);
        floatAb.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Data deleted", Snackbar.LENGTH_SHORT)
                        .setAction("否", new View.OnClickListener() {
                            @Override
                            public void onClick(View v) {
                                Log.i(TAG, "Data restored");
                            }
                        })
                        .show();
            }
        });

运行项目，Pass
缺点，提示框会遮住悬浮按钮，使用CoordinatorLayout布局解决
3】CoordinatorLayout
CoordinatorLayout布局为加强版FrameLayout布局，可以监听其所有子控件的各种事件，再做出合理的响应，如悬浮按钮，弹出提示框，按钮会上移，提示框消失，按钮会下移
使用:
将FrameLayout布局替换为CoordinatorLayout布局
运行项目，Pass

4.卡片布局

卡片布局将内容填充到卡片中，还有立体效果，增加圆角和投影，使用过程如下：
a.app/build.grade文件中中添加依赖

implementation 'com.github.bumptech.glide:glide:4.12.0'

b.实体类Fruit

public class Fruit {
    private String name;
    private int imageId;

    public Fruit(String name, int imageId) {
        this.name = name;
        this.imageId = imageId;
    }

    public String getName() {
        return name;
    }

    public int getImageId() {
        return imageId;
    }
}

c.卡片布局中子布局fruit_item.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView 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="wrap_content"
    android:layout_margin="5dp"
    app:cardCornerRadius="4dp">

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

        <ImageView
            android:id="@+id/fruit_img"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:scaleType="centerInside" />

        <TextView
            android:id="@+id/fruit_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_margin="5dp"
            android:textSize="16sp" />
    </LinearLayout>
</androidx.cardview.widget.CardView>

d.适配器

public class FruitAdapter extends RecyclerView.Adapter<FruitAdapter.ViewHolder> {
    private List<Fruit> mFruitList;
    private Context mContext;

    static class ViewHolder extends RecyclerView.ViewHolder {
        CardView cardView;
        ImageView fruitImage;
        TextView fruitName;

        public ViewHolder(View view) {
            super(view);
            cardView = (CardView) view;
            fruitImage = view.findViewById(R.id.fruit_img);
            fruitName = view.findViewById(R.id.fruit_name);
        }
    }

    public FruitAdapter(List<Fruit> fruitList) {
        mFruitList = fruitList;
    }

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

    @Override
    public void onBindViewHolder(FruitAdapter.ViewHolder holder, int position) {
        Fruit fruit = mFruitList.get(position);
        holder.fruitName.setText(fruit.getName());
        Glide.with(mContext).load(fruit.getImageId()).into(holder.fruitImage);
    }

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

e.在主布局activity.xml中添加recycleView子布局

 <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
......................
        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recycler_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
....................
    </androidx.coordinatorlayout.widget.CoordinatorLayout>

f.修改MainActivity，通过适配器将子布局绑定到卡片布局中

@Override
    protected void onCreate(Bundle savedInstanceState) {
    ..............
private void setFruits() {
        initFruits();
        RecyclerView recyclerView = findViewById(R.id.recycler_view);
        GridLayoutManager manager = new GridLayoutManager(this, 2);
        recyclerView.setLayoutManager(manager);
        mAdapter = new FruitAdapter(mFruitList);
        recyclerView.setAdapter(mAdapter);
    }

    private void initFruits() {
        mFruitList.clear();
        for (int i = 0; i < 50; i++) {
            Random random = new Random();
            int index = random.nextInt(fruits.length);
            mFruitList.add(fruits[index]);
        }
    }
    .....................
 }

    private Fruit[] fruits = {new Fruit("apple", R.drawable.apple),
            new Fruit("strawberry", R.drawable.strawberry),
            new Fruit("cherry", R.drawable.cherry),
            new Fruit("litchi", R.drawable.litchi),
            new Fruit("watermelon", R.drawable.watermelon),
            new Fruit("apple", R.drawable.apple),
            new Fruit("strawberry", R.drawable.strawberry),
            new Fruit("cherry", R.drawable.cherry),
            new Fruit("litchi", R.drawable.litchi),
            new Fruit("watermelon", R.drawable.watermelon)};

运行结果，Pass
不足之处，recycleView会遮挡标题栏Toolbar，使用AppBarLayout工具解决，如下介绍
1】AppBarLayout
第一步，将Toolbar嵌套到AppBarLayout中
第二步，给recycleView指定一个布局行为

app:layout_behavior="@string/appbar_scrolling_view_behavior"

运行结果，Pass，不足之处解决
2】优化，recycleView滚动的时候就已经将滚动事件通知给AppBarLayout，但没有进行处理，当AppBarLayout接收到滚动事件时，它内部子控件是可以指定如何去影响事件的，通过app:layout_scrollFlags属性实现，修改activity_main.xml代码如下：

app:layout_scrollFlags="scroll|enterAlways|snap"

给Toolbar添加属性app:layout_scrollFlags，其中scroll表示当recycleView向上滚动时，Toolbar会跟着一起向上滚动并实现隐藏；enterAlways表示当recycleView向下滚动时Toolbar会跟着一起向下滚动并重新显示；snap表示当Toolbar还没有完全隐藏或显示的时候，会根据当前滚动的距离，自动选择隐藏还是显示。
运行结果，Pass，效果，向上滚动时Toolbar隐藏，向下滚动时Toolbar自动显示

错误1，Android编译出错.

Execution failed for task':app:checkDebugDuplicateClasses'. 
> A failure occurred while executing com.android.build.gradle.......

解决方法：
在gradle.properties中添加以下内容

android.useAndroidX=true
android.enableJetifier=true

5.下拉刷新

SwipeRefreshLayout用于实现下拉刷新功能的核心类
a.添加配置

implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.0.0'

b.将recyclerView布局放置SwipeRefreshLayout布局中，修改activity_main.xml

<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
            android:id="@+id/swipe_refresh"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

            <androidx.recyclerview.widget.RecyclerView
                android:id="@+id/recycler_view"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
        </androidx.swiperefreshlayout.widget.SwipeRefreshLayout>

c.修改Main_Activity，给下拉刷新注册监听事件，回调onRefersh()方法，处理具体逻辑，如去网络请求最新数据，然后再展示，通过线程实现，启动一个线程，然后再沉睡2秒钟，沉睡结束后，调用runOnUiThread()方法切换回到主线程，再调用initFruits()方法重新生成数据，最后调用FruitAdapter的notifyDataSetChanged()方法通知数据发生了变化，再调用SwipeRefreshLayout的setRefreshing(false)方法，用于表示刷新事件结束，并隐藏刷新进度条

        mSwipeRefresh = findViewById(R.id.swipe_refresh);
        // 设置下拉刷新时颜色
        mSwipeRefresh.setColorSchemeColors(Color.parseColor("#ff0000"));
        // 设置下拉刷新时背景颜色
        mSwipeRefresh.setProgressBackgroundColorSchemeColor(getResources().getColor(R.color.purple_200));
        // 监听事件
        mSwipeRefresh.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {
                refershFruits();
            }
        });

private void refershFruits() {
        new Thread(new Runnable() {
            @Override
            public void run() {
                try {
                    Thread.sleep(2000);
                } catch (InterruptedException exception) {
                    exception.printStackTrace();
                }
                runOnUiThread(new Runnable() {
                    @Override
                    public void run() {
                        initFruits();
                        mAdapter.notifyDataSetChanged();
                        mSwipeRefresh.setRefreshing(false);
                    }
                });
            }
        }).start();
    }

运行结果，Pass，结果，下拉刷新的进度条只会停留2秒钟，之后自动消失，界面上的数据更新

6.可折叠式标题栏

CoordinatorLayout布局作为最外层布局，必须包括子布局AppBarLayout
a.实现标题栏部分，编写布局activity_fruit.xml
1]在布局AppBarLayout中嵌套CollapsingToolbarLayout子布局，并定义子控件ImageView和Toolbar；
2]NestedScrollView布局是水果内容详情最外层布局使用的，它和AppBarLayout平级，允许使用滚动的方式来查看屏幕以外的数据，还增加了嵌套响应滚动事件的功能；由于CoordinatorLayout本身具有响应滚动事件，因此内部使用NestedScrollView或recycleView即可
3]NestedScrollView内嵌套LinearLayout子布局，子布局内嵌卡片布局，卡片布局内嵌文本框
4]添加悬浮按钮，定义在水果标题栏右下角

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

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="240dp">
        <!-- app:contentScrim属性用于指定CollapsingToolbarLayout在趋于折叠状态以及折叠之后的背景色 -->
        <!-- app:layout_scrollFlags属性,scroll表示CollapsingToolbarLayout会随着水果内容详情的滚动一起滚动，
        exitUntilCollapsed表示当CollapsingToolbarLayout随着滚动完成折叠之后就保留在界面上，不再移出屏幕 -->
        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsing_toobar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/fruit_image_view"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax" />

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/bar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin" />
            <!-- app:layout_collapseMode属性指当前控件在CollapsingToolbarLayout折叠过程中的折叠模式，
            pin指折叠过程中位置始终保持不变，parallax指折叠过程中会发生一定的错位偏移 -->
        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

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

            <androidx.cardview.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="15dp"
                android:layout_marginTop="35dp"
                android:layout_marginRight="15dp"
                android:layout_marginBottom="15dp"
                app:cardCornerRadius="6dp">

                <TextView
                    android:id="@+id/fruit_content"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="10dp" />
            </androidx.cardview.widget.CardView>
        </LinearLayout>
    </androidx.core.widget.NestedScrollView>

    <!-- app:layout_anchor指定一个锚点，将锚点设置为AppBarLayout，悬浮按钮会出现在水果标题栏的区域内 -->
    <!-- app:layout_anchorGravity将悬浮按钮定义在标题栏右下角 -->
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:src="@drawable/ic_floatab"
        app:layout_anchor="@id/appBar"
        app:layout_anchorGravity="bottom|end" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

b.编写功能逻辑，修改FruitActivity

public class FruitActivity extends AppCompatActivity {
    public static final String FRUITNAME = "fruit_name";
    public static final String FRUIT_IMAGE_ID = "fruit_image_id";

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

        Intent intent = getIntent();
        String fruitName = intent.getStringExtra(FRUITNAME);
        int fruitImageId = intent.getIntExtra(FRUIT_IMAGE_ID, 0);

        Toolbar toolbar = findViewById(R.id.bar);
        CollapsingToolbarLayout collapsingToolbarLayout = findViewById(R.id.collapsing_toobar);
        ImageView fruitImageView = findViewById(R.id.fruit_image_view);
        TextView fruitContentText = findViewById(R.id.fruit_content);

        setSupportActionBar(toolbar);

        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null) {
            actionBar.setDisplayHomeAsUpEnabled(true);
        }
        collapsingToolbarLayout.setTitle(fruitName);
        Glide.with(this).load(fruitImageId).into(fruitImageView);
        String fruitContent = generateFruitContent(fruitName);
        fruitContentText.setText(fruitContent);
    }

    private String generateFruitContent(String fruitName) {
        StringBuilder fruitContent = new StringBuilder();
        for (int i = 0; i < 500; i++) {
            fruitContent.append(fruitName);
        }
        return fruitContent.toString();
    }

    @Override
    public boolean onOptionsItemSelected(@NonNull MenuItem item) {
        switch (item.getItemId()) {
            case android.R.id.home:
                finish();
                return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

c.修改适配器，处recycleView的点击事件，给卡片布局CardView注册监听事件，在点击事件中获取当前水果名和图片资源id，把他们传入intent，最后调用startActivity()方法启动FruitActivity

@Override
    public FruitAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
       ..........
        View view = LayoutInflater.from(mContext).inflate(R.layout.fruit_item, parent, false);

        final ViewHolder holder = new ViewHolder(view);
        holder.cardView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                int position = holder.getAdapterPosition();
                Fruit fruit = mFruitList.get(position);
                Intent intent = new Intent(mContext, FruitActivity.class);
                intent.putExtra(FruitActivity.FRUITNAME, fruit.getName());
                intent.putExtra(FruitActivity.FRUIT_IMAGE_ID, fruit.getImageId());
                mContext.startActivity(intent);
            }
        });
        return holder;
//        return new ViewHolder(view);
    }

运行程序，Pass，结果，点击图片，跳转至水果详情页面，如下所示，点击左侧白色箭头，会返回上一级；向下滑动水果内容详情，背景图上的标题会慢慢缩小，且背景图会产生一些错位移动的效果，直至背景图完全消失，仅剩标题栏，即标题栏自动折叠，从而节省空间，向上滑动，页面会恢复

错误2，写java时引入的库引错：

setSupportActionBar(toolbar);报错

解决方法：

//应该选这一个
import androidx.appcompat.widget.Toolbar;
//删掉下面这个
import android.widget.Toolbar;

错误3：

This Activity already has an action bar supplied by the window decor. Do not request Window.FEATURE_SUPPORT_ACTION_BAR and set windowActionBar to false in your theme to use a Toolbar instead.

解决方法：
修改themes.xml文件，在style标签内添加如下内容：

<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>