Android 学习之《第一行代码》第二版笔记（二十三）Material Design 实战 —— 卡片式布局

2023-10-27

实现基础：
Android 学习之《第一行代码》第二版笔记（二十二）Material Design 实战 —— 悬浮按钮和可交互提示

卡片式布局

卡片式布局是 Materials Design 中提出的一个新的概念，可以让页面中的元素看起来就像在卡片中一样，并且拥有圆角和投影，实际上也是一个FrameLayout

1. 效果图

效果说明：未使用AppBarLayout时，RecyclerView 会把Toolbar给遮挡住，因为：CoordinatorLayout 就是一个加强版的 FrameLayout，里面的所有控件在不进行明确定位的情况下，默认都会摆在布局左上角，从而产生遮挡现象。使用 AppBarLayout 后解决此问题，而且向上滚动 RecyclerView 时，Toolbar 消失；向下滚动 RecyclerView Toolbar 出现。

A.）CardView 未使用AppBarLayout

B.）CardView 使用AppBarLayout

2. 代码

A.）添加库依赖（app/build.gradle）
在 dependencies 里面添加，版本号啥的根据实际情况调整

implementation 'com.android.support:recyclerview-v7:26.1.0'
implementation 'com.android.support:cardview-v7:26.1.0'
implementation 'com.github.bumptech.glide:glide:3.7.0'

B.）activity_main.xml

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

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        
        <!--使用AppBarLayout解决覆盖问题
            第一步：将Toolbar嵌套到AppBarLayout中；
            第二步：给RecyclerView指定一个布局行为
        -->
        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <android.support.v7.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"
                app:layout_scrollFlags="scroll|enterAlways|snap">
                <!--当AppBarLayout接收到滚动事件的时候，它内部的子控件可以指定如何去影响这些事件。
                    app:layout_scrollFlags属性：
                    scroll表示当RecyclerView向上滚动时，Toolbar会跟着向上滚动并实现隐藏
                    enterAlways表示当RecyclerView向下滚动时，Toolbar会跟着向下滚动并重新显示
                    snap表示当Toolbar还没有完全隐藏或显示时，会根据当前滚动的距离，自动选择隐藏还是显示
                -->
            </android.support.v7.widget.Toolbar>

        </android.support.design.widget.AppBarLayout>

        <android.support.v7.widget.RecyclerView
            android:id="@+id/recycler_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">
            <!--使用layout_behavior指定布局行为-->
        </android.support.v7.widget.RecyclerView>

        <!--app:elevation="8dp"设置悬浮按钮的悬浮高度为8dp，高度值越大，投影范围越大，投影效果越淡-->
        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_margin="16dp"
            android:src="@drawable/ic_done"
            app:elevation="8dp"/>

    </android.support.design.widget.CoordinatorLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:menu="@menu/nav_menu"
        app:headerLayout="@layout/nav_header">

    </android.support.design.widget.NavigationView>

</android.support.v4.widget.DrawerLayout>

C.）水果实体类（Fruit.java）

public class Fruit {

    private String name; //水果名字

    private int imageId; //水果对应资源id

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

    public String getName() {
        return name;
    }

    public int getImageId() {
        return imageId;
    }
}

D.）为RecyclerView的子项指定一个自定义布局（layout/fruit_item.xml）

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.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">
    <!--app:cardCornerRadius="4dp"指定卡片圆角的弧度，数值越大弧度越大-->
    <!--app:elevation 属性可以指定卡片高度，高度值越大，投影范围越大，投影效果越淡-->

    <!--由于CardView是一个FrameLayout没有什么方便的定位方式，所以在其中嵌套一个LinearLayout-->
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <!--用于显示水果图片，scaleType属性指定图片缩放模式，
        值centerCrop让图片保持原有比例填满整个ImageView，并将超出屏幕的部分裁减掉-->
        <ImageView
            android:id="@+id/fruit_image"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:scaleType="centerCrop" />

        <!--用于显示水果名称-->
        <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>
</android.support.v7.widget.CardView>

E.）为RecyclerView 准备一个适配器（FruitAdapter.java）

import android.content.Context;
import android.support.v7.widget.CardView;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import com.bumptech.glide.Glide;

import java.util.List;

public class FruitAdapter extends RecyclerView.Adapter<FruitAdapter.ViewHolder> {

    private Context mContext;

    private List<Fruit> mFruitList;

    //静态内部类，用于缓存子项控件实例
    static class ViewHolder extends RecyclerView.ViewHolder{
        CardView cardView;
        ImageView fruitImage;
        TextView fruitName;
        //静态内部类的构造函数，参数view通常就是RecyclerView子项的最外层布局
        public ViewHolder (View view){
            super(view);
            cardView = (CardView) view;
            fruitImage = (ImageView)view.findViewById(R.id.fruit_image);
            fruitName = (TextView)view.findViewById(R.id.fruit_name);
        }
    }

    //构造函数
    public FruitAdapter(List<Fruit> fruitList){
        mFruitList = fruitList;
    }

    //用于告诉RecyclerView一共有多少子项，直接返回数据源的长度即可
    @Override
    public int getItemCount() {
        return mFruitList.size();
    }

    //用于对RecyclerView子项的数据进行赋值，会在每个子项被滚动到屏幕内的时候执行。
    @Override
    public void onBindViewHolder(FruitAdapter.ViewHolder holder, int position) {
        Fruit fruit = mFruitList.get(position);
        holder.fruitName.setText(fruit.getName());
        //使用Glide加载水果图片 Glide在内部有许多复杂的逻辑结构，包括图片压缩，防止内存溢出
        //Glide 用法：
        //首先调用Glide的with()方法，传入一个Context/Activity/Fragment参数
        //然后调用load()方法加载图片，传入一个URL地址或者本地路径或一个资源id
        //最后调用into()方法设置到具体某一个ImageView即可
        Glide.with(mContext).load(fruit.getImageId()).into(holder.fruitImage);
    }

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

F.）MainActivity.java

import android.support.annotation.NonNull;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.NavigationView;
import android.support.design.widget.Snackbar;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Toast;

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


public class MainActivity extends AppCompatActivity {

    private DrawerLayout mDrawerLayout;

    private Fruit[] fruits = {
            new Fruit("苹果",R.drawable.apple),
            new Fruit("香蕉",R.drawable.banana),
            new Fruit("橘子",R.drawable.orange),
            new Fruit("西瓜",R.drawable.watermelon),
            new Fruit("梨",R.drawable.pear),
            new Fruit("葡萄",R.drawable.grape),
            new Fruit("菠萝",R.drawable.pineapple),
            new Fruit("草莓",R.drawable.strawberry),
            new Fruit("樱桃",R.drawable.cherry),
            new Fruit("芒果",R.drawable.mango),
    };

    private List<Fruit> fruitList = new ArrayList<>();

    private FruitAdapter adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //获得Toolbar实例
        Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        //获得DrawerLayout实例
        mDrawerLayout = (DrawerLayout)findViewById(R.id.drawer_layout);
        //获取NavigationView实例
        NavigationView navView = (NavigationView)findViewById(R.id.nav_view);
        //获得ActionBar实例
        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null ){
            actionBar.setDisplayHomeAsUpEnabled(true);//显示导航按钮
            actionBar.setHomeAsUpIndicator(R.drawable.ic_menu);//设置导航按钮图标
        }
        navView.setCheckedItem(R.id.nav_call);
        navView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                mDrawerLayout.closeDrawers();
                return true;
            }
        });
        //获取FloatingActionButton实例
        FloatingActionButton fab = (FloatingActionButton)findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //调用Snackbar的make()方法来创建一个Snackbar对象
                //make()方法第一个参数为当前界面布局的任意一个View；
                //第二个参数为Snackbar中显示的内容；
                //第三个参数为Snackbar显示的时长。
                Snackbar.make(view,"删除数据",Snackbar.LENGTH_SHORT)//调用setAction()方法设置动作，使之可以和用户进行交互
                        .setAction("复原",new View.OnClickListener(){
                            @Override
                            public void onClick(View view) {
                                Toast.makeText(MainActivity.this,"数据恢复啦",Toast.LENGTH_SHORT).show();
                            }
                        }).show();
            }
        });
        initFruits();
        RecyclerView recyclerView = (RecyclerView)findViewById(R.id.recycler_view);
        //RecyclerView 内置的布局排列方式，网格布局排列方式，参数一：Context；参数二：列数
        GridLayoutManager layoutManager = new GridLayoutManager(MainActivity.this,2);
        recyclerView.setLayoutManager(layoutManager);
        adapter = new FruitAdapter(fruitList);
        recyclerView.setAdapter(adapter);
    }

    //进行水果的初始化，随机挑选五十个水果
    private void initFruits(){
        fruitList.clear();
        for (int i = 0 ; i < 50 ; i++){
            Random random = new Random();
            int index = random.nextInt(fruits.length);
            fruitList.add(fruits[index]);
        }
    }

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

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()){
            case android.R.id.home:
                mDrawerLayout.openDrawer(GravityCompat.START);
                break;
            case R.id.backup:
                Toast.makeText(this,"你点击了备份",Toast.LENGTH_SHORT).show();
                break;
            case R.id.delete:
                Toast.makeText(this,"你点击了删除",Toast.LENGTH_SHORT).show();
                break;
            case R.id.settings:
                Toast.makeText(this,"你点击了设置",Toast.LENGTH_SHORT).show();
                break;
            default:
        }
        return true;
    }
}

Glide项目地址：https://github.com/bumptech/glide
使用Glide加载水果图片 Glide在内部有许多复杂的逻辑结构，包括图片压缩，防止内存溢出。
Glide 用法：
首先调用Glide的with()方法，传入一个Context/Activity/Fragment参数
然后调用load()方法加载图片，传入一个URL地址或者本地路径或一个资源id
最后调用into()方法设置到具体某一个ImageView即可

整理学习自郭霖大佬的《第一行代码》
目前小白一名，持续学习Android中，如有错误请批评指正！

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)