實現基礎：
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中，如有錯誤請批評指正！

Android 學習之《第一行代碼》第二版筆記（二十三）Material Design 實戰 —— 卡片式佈局

卡片式佈局

1. 效果圖

2. 代碼

前端使用 Konva 實現可視化設計器（13）- 折線 - 最優路徑應用【思路篇】

Java 再學習模糊的知識（五）

Java 再學習模糊的知識（二）

Java BUG1：獲取本週第一天即得到週一的日期

Java 再學習模糊的知識（三）

Android學習之屬於自己的 GitHub UI 庫

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

Android 學習之《第一行代碼》第二版 筆記（二十三）Material Design 實戰 —— 卡片式佈局

卡片式佈局

1. 效果圖

2. 代碼

Android 學習之《第一行代碼》第二版筆記（二十三）Material Design 實戰 —— 卡片式佈局