android精美卡片式布局Cardview_RecyclerView

一、activity_main.xml要這么寫，其中主要是包含一個RecyclerView.

<?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_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
<!--    CoordinatorLayout是一個加強版的FrameLayout-->
    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
<!--        AppBarLayout實際是一個垂直方向的LinearLayout,它在內部做了很多滾動事件的封裝-->
        <com.google.android.material.appbar.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
<!--            將layout_scrollFlags的屬性指定成了scroll|enterAlways|snap，scroll表示當RecyclerView向上滾動的時候，Toolbar會跟著一起向上滾動并實作隱藏，-->
<!--            enterAlways表示當RecyclerView向下滾動的時候，Toolbar會跟著一起向下滾動并重新顯示，snap表示當Toolbar還沒有完全隱藏或顯示的時候，會根據當前滾動的-->
<!--            距離，自動選擇是隱藏還是顯示，-->
            <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"
                app:layout_scrollFlags="scroll|enterAlways|snap"/>
        </com.google.android.material.appbar.AppBarLayout>

        <!-- 下面layout_behavior使用ScrollingViewBehavior這個布局行為，這樣recyclerview_view這個控制元件就不會遮擋上面的toolbar，而且當recyclerview_view滾動的時候會把滾動事件通知給上面的toolbar-->
        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recycler_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior"/>
    </androidx.coordinatorlayout.widget.CoordinatorLayout>
</androidx.drawerlayout.widget.DrawerLayout>

二、RecyclerView子項所需要的一個物體類Fruit,要這么寫

package com.example.magicalpai.beautiful_cardview;

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;
    }
}

三、RecyclerView子項對應的布局fruit_item.xml，要這么寫

<?xml version="1.0" encoding="utf-8"?>
<!--這個是為recycler_view的子項指定的布局-->
<!--CardView也是一個FrameLayout，只是額外提供了圓角和陰影的效果，這里使用CardView來作為子項的最外層布局，從而使得RecyclerView中的每個元素都是在卡片當中的，-->
<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:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <ImageView
            android:id="@+id/fruit_image"
            android:layout_width="match_parent"
            android:layout_height="100dp"/>
<!--        下面這條被注釋的的代碼會讓圖片保持原有比例填滿ImageView,超出的部分將被裁切掉-->
<!--            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>
</androidx.cardview.widget.CardView>

四、RecyclerView 的配接器FruitAdapter類，要這么寫

package com.example.magicalpai.beautiful_cardview;

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

import androidx.cardview.widget.CardView;
import androidx.recyclerview.widget.RecyclerView;

import com.bumptech.glide.Glide;
import com.example.magicalpai.R;

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;
        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;
    }
    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        if (mContext == null) {
            mContext = parent.getContext();
        }
        View view = LayoutInflater.from(mContext).inflate(R.layout.fruit_item,parent, false);
        final ViewHolder holder = new ViewHolder(view);
        //為每一個子項的cardView注冊事件
        holder.cardView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                int position = holder.getAdapterPosition();
                Fruit fruit = mFruitList.get(position);
                Toast.makeText(v.getContext(), "you clicked image " + fruit.getName(), Toast.LENGTH_SHORT).show();
            }
        });
        return holder;
    }
    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        Fruit fruit = mFruitList.get(position);
        holder.fruitName.setText(fruit.getName());
        /*
        Glide的用法：呼叫Glide.with()方法并傳入一個Context、Activity或Fragment引數，然后呼叫load()方法去加載圖片，
        可以是一個URL地址，也可以是一個本地路徑，或者是一個資源id，最后呼叫into()方法將圖片設定到具體某一個ImageView中就可以了
        Glide會對高清圖片進行壓縮，這樣就不會發生記憶體溢位的問題了
        使用Glide，在app/build.grade檔案中添加implementation 'com.github.bumptech.glide:glide:3.8.0即可
        */
        Glide.with(mContext).load(fruit.getImageId()).into(holder.fruitImage);
    }
    @Override
    public int getItemCount() {
        return mFruitList.size();
    }
}

五、主方法MainActivity，要這么寫

package com.example.magicalpai.beautiful_cardview;

import androidx.appcompat.app.AppCompatActivity;
import androidx.drawerlayout.widget.DrawerLayout;
import androidx.recyclerview.widget.GridLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import android.os.Bundle;

import com.example.magicalpai.R;

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("Apple", R.drawable.apple), new Fruit("Banana",R.drawable.banana), new Fruit("Watermelon",R.drawable.watermelon)};
    private List<Fruit> fruitList = new ArrayList<>();
    private FruitAdapter adapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initFruits();
        RecyclerView recyclerView=(RecyclerView)findViewById(R.id.recycler_view);
        //GridLayoutManager的構造方法接收兩個引數，第一個是Context,第二個是列數，這里我們希望每一行中會有兩列資料
        GridLayoutManager layoutManager = new GridLayoutManager(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]);
        }
    }
}

六、這樣就可以實作以下效果

滾動界面toolbar會自動隱藏，點擊第一個水果還會有相應的提示，