Android學習筆記:界面設計Material Design的基本使用方法(二)

接上一篇文章,地址:Android學習筆記:界面設計Material Design的基本使用方法(一)

本文使用到的圖片資源地址:https://pan.baidu.com/s/1c2PpZ0k

四、卡片式佈局

1、使用CardView實現卡片式佈局

CardView由appcompat-v7庫提供,它也是一個FrameLayout,只是額外的提供了圓角和陰影等效果。

CardView的使用方法:

<android.support.v7.widget.CardView 
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:elevation="5dp"
    app:cardCornerRadius="4dp">

   <TextView
        android:id="@+id/fruit_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</android.support.v7.widget.CardView>

代碼含義很好理解,其中:

app:elevation="5dp"		//指定卡片高度
app:cardCornerRadius="4dp"	//指定卡片圓角弧度

這樣這個TextView就顯示在一個卡片中了。

下面開始使用CardView佈局。項目目標:使用RecyclerView填充主界面,實現水果圖片的列表展現。

使用準備:

①、準備好水果圖片資源(可以在我給的圖片資源中找到)。放入drawable下。

②、添加庫依賴。

因爲會使用到CardView、RecyclerView和Glide庫來實現,所以在(preject模式)app/build.gradle中添加三個依賴。

dependencies {
    
	...
	
    compile 'com.android.support:recyclerview-v7:25.3.1'
    compile 'com.android.support:cardview-v7:25.3.1'
    compile 'com.github.bumptech.glide:glide:3.7.0'
}

然後點擊 Sync Now進行同步。Glide庫是一個超級強大的加載圖片的開源項目。

Glide開源項目地址:https://github.com/bumptech/glide

準備完成後開始具體實現:

(1)、修改activity_main.xml的代碼,使RecyclerView填充整個主界面。

在Toolbar和FloatingActionButton標籤的中間加入以下代碼:

<android.support.v7.widget.RecyclerView
    android:id="@+id/recycler_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

(2)使用RecyclerView

①、創建Fruit實體類,包括水果名、資源ID和getter方法。

package com.my.materialdesigntest;
	
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;
    }

}

②、爲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">

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

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

最外層使用CardView佈局,代碼很好理解,值得注意的是:android:scaleType="centerCrop",這條語句的含義是:指定圖片的縮放模式,若水果圖片的長寬比例不同,爲了能讓圖片能填充整個ImageView,使用centerVrop模式,可以使圖片保持原有比例填充ImageView,並將多餘部分裁剪掉。

③、爲RecyclerView自定義適配器

新建FruitAdapter類,繼承RecyclerView.Adapter,並指定泛型爲FruitAdapter.ViewHolder,代碼如下:

package com.my.materialdesigntest;

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;	//裝載水果信息的列表

    //構造函數,傳入數據源
    public FruitAdapter(List<Fruit> mFruitList) {
        this.mFruitList = mFruitList;
    }

    static class ViewHolder extends RecyclerView.ViewHolder {
        private CardView cardView;	//RecyclerView子項的最外層佈局
        private ImageView fruitImage;
        private TextView fruitName;

        public ViewHolder(View view) {
            super(view);
            cardView = (CardView) view;	//RecyclerView子項最外層佈局
            fruitImage = (ImageView) view.findViewById(R.id.fruit_image);
            fruitName = (TextView) view.findViewById(R.id.fruit_name);
        }
    }

    //必須重寫的第一個方法:創建ViewHolder方法
    @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);
        //創建ViewHolder實例
        final ViewHolder holder = new ViewHolder(view);
        return holder;
    }

    //必須重寫的第二個方法:對子項數據賦值
    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        //獲取當前項的水果實例
        Fruit fruit = mFruitList.get(position);
        //賦值
        holder.fruitName.setText(fruit.getName());
        //根據資源ID獲取水果圖片資源並填充ImageView
        Glide.with(mContext).load(fruit.getImageId()).into(holder.fruitImage);
    }

    //必須重寫的第三個方法:獲取所有子項的個數
    @Override
    public int getItemCount() {
        return mFruitList.size();
    }

}

按照註釋很容易理解。

(3)、修改MainActivity中的代碼:

public class MainActivity extends AppCompatActivity {

    private DrawerLayout mDrawerLayout; //DrawerLayout佈局,用於實現滑動菜單

    //將水果信息裝填到水果數組中
    private Fruit[] fruits = {new Fruit("Apple", R.drawable.apple), new Fruit("Banana", R.drawable.banana),
            new Fruit("Orange", R.drawable.orange), new Fruit("Watermelon", R.drawable.watermelon),
            new Fruit("Pear", R.drawable.pear), new Fruit("Grape", R.drawable.grape),
            new Fruit("Pineapple", R.drawable.pineapple), new Fruit("Strawberry", R.drawable.strawberry),
            new Fruit("Cherry", R.drawable.cherry), new Fruit("Mango", R.drawable.mango)};

    //裝載水果的鏈表
    //爲什麼有了數組還要定義List:因爲我們要顯示的水果數據個數不確定,使用多少個就往List中裝多少水果數據
    //水果數組只是裝填水果信息的模具,具體使用數據還是使用List
    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);
        //使用GridLayoutManger佈局,設置每行顯示2列數據
        GridLayoutManager layoutManager = new GridLayoutManager(this, 2);
        recyclerView.setLayoutManager(layoutManager);
        //創建適配器
        adapter = new FruitAdapter(fruitList);
        //綁定RecyclerView
        recyclerView.setAdapter(adapter);

    }

    //初始化水果數據
    private void initFruits() {
        //清空水果列表的數據
        fruitList.clear();
        //向List中裝填50個水果數據
        for (int i = 0; i < 50; i++) {
            Random random = new Random();
            //從水果數組中隨機一個不超過水果數組長度的整數
            int index = random.nextInt(fruits.length);
            //將隨機出來的水果數據裝到水果List中
            fruitList.add(fruits[index]);
        }
    }
    
    ...

}

運行程序:


效果很不錯,但是Toolbar被蓋住了。

原因:我們使用的最外層佈局是CoordinatorLayout,他是一個加強版的FrameLayout,FrameLayout在其控件不指定位置時,都默認放在左上角。RecyclerView和Toolbar都是放在該佈局中,沒有指定位置。自然就產生了這種現象。

解決:解決方法可以是採用傳統方法,把RecyclerView向下偏移一個Toolbar的高度。CoordinatorLayout佈局不是普通的FrameLayout,它有更巧妙的解決方法。

2、使用AppBarLayout

APPBarLayout由Design Support庫提供。它實際上是一個垂直方向的LinearLayout,並且在內部做了很多滾動事件的封裝,應用了一些Material Design的設計理念。

使用AppBarLayout解決上面出現的問題只需要兩步:

①、把Toolbar嵌套到AppBarLayout中。

②、爲RecyclerView指定一個佈局行爲。

修改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">

        <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"/>

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

        <android.support.v7.widget.RecyclerView
            
			...
			
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />

        ...

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

    ...

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

只需要幾行代碼就可以完成。爲RecyclerView添加的佈局行爲是:

app:layout_behavior="@string/appbar_scrolling_view_behavior"

它可以把滾動事件發送給它外層的AppBarLayout佈局。

運行程序:


已經可以解決Toolbar被遮蓋的問題了。

當RecyclerView滾動時,會將滾動事件通知給AppBarLayout,上述代碼中並沒有進行處理。

當AppBarLayout收到滾動事件時,它內部的子控件可以指定如何去相應這些事件。

修改activity_main.xml代碼,在Toolbar代碼塊後面加上一條語句即可:

<android.support.v7.widget.Toolbar
    
	...
	
    app:layout_scrollFlags="scroll|enterAlways|snap" />

它的作用是指定Toolbar響應RecyclerView滾動事件的方法。其中:

scroll:當RecyclerView向上滾動時,Toolbar會跟着一起向上滾動並實現隱藏。

enterAlways:當RecyclerView向下滾動時,Toolbar會跟着一起向下滾動並重新顯示。

snap:當Toolbar還沒有完全隱藏或顯示的時候,Toolbar會根據當前滾動的距離,自動選擇隱藏還是顯示。

運行結果:


五、使用SwipeRefreshLayout實現下拉刷新

SwipeRefreshLayout由Support-v4庫提供,使用時,把需要實現下拉刷新的控件放到SwipeRefreshLayout中就可以了,本文所述就是將RecyclerView放到SwipeRefreshLayout中。

修改activity_main.xml文件:

<android.support.v4.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">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
		
</android.support.v4.widget.SwipeRefreshLayout>

剛剛爲了解決Toolbar被覆蓋的問題,爲Toolbar嵌套了一層AppBarLayout,併爲RecyclerView添加了一個佈局行爲,這個滾動行爲會把滾動事件發送給它的外層AppBarLayout。現在需要把它挪到SwipRefreshLayout中,否則滾動事件發送不到AppBarLayout。若它的位置不動,則Toolbar還是會被遮蓋。只需要記住它是追隨AppBarLayout的就可以了。

修改MainActivity的代碼:

public class MainActivity extends AppCompatActivity {

    ...

    private SwipeRefreshLayout swipeRefreshLayout;  //下拉刷新佈局,用於實現下拉刷新

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

        ...

        swipeRefreshLayout = (SwipeRefreshLayout) findViewById(R.id.swipe_refresh);
        //設置下拉刷新時的進度條顏色
        swipeRefreshLayout.setColorSchemeResources(R.color.colorPrimary);
        //觸發下拉刷新的事件
        swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {
                //刷新水果圖片
                refreshFruits();
            }
        });

    }

    //刷新顯示的水果圖片
    private void refreshFruits() {
        //刷新操作一般是從網絡上獲取數據,需要開啓線程,這裏採用的是本地刷新
        new Thread(new Runnable() {
            @Override
            public void run() {
                try {
                    //使線程睡眠2s,因爲本地刷新速度太快,不設置睡眠容易看不到刷新進度條
                    Thread.sleep(2000);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
                //從主線程更新UI
                runOnUiThread(new Runnable() {
                    @Override
                    public void run() {
                        //再次初始化水果數據,因爲每次初始化的水果數據都是不同的
                        initFruits();
                        //通知FruitAdapter的適配器,數據發生了變化
                        adapter.notifyDataSetChanged();
                        //表示刷新事件結束,隱藏刷新進度條,若無此語句,進度條一直存在。
                        swipeRefreshLayout.setRefreshing(false);
                    }
                });
            }
        }).start(); //不要忘記啓動線程
    }

    ...
	
}

運行程序:


六、使用CollapsingToolbarLayout實現可摺疊式標題欄

看到CollapsingToolbarLayout這個名字就能夠想到,它是一個和Toolbar相關的佈局。它由Design Support庫提供,作用於Toolbar之上,它可以讓Toolbar的效果更加豐富,實現非常華麗的效果。

注意:CollapsingToolbarLayout並不是獨立存在的,它被限定只能作爲AppBarLayout的直接子佈局,而AppBarLayout又必須是CoordinatorLayout的子佈局。

需求:用一個額外的活動來展示水果詳情頁面,實現標題欄可摺疊,內容包括標題欄、水果圖片、水果內容詳情和懸浮按鈕。

新建一個Empty活動,指定活動名爲FruitActivity,指定佈局名爲activity_fruit.xml。

活動佈局主要分爲兩部分,一個是水果標題欄,一個是水果內容詳情。分步驟來實現:

1、實現標題欄部分

(1)、使用CoordinatorLayout作爲最外層佈局

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.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">

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

(2)、在CoordinatorLayout中嵌套一個AppBarLayout佈局

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.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">
	
    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="250dp">

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

定義了AppBarLayout的高度爲250dp,這個高度是一會標題欄展開後圖片的顯示高度。

(3)、在AppBarLayout中嵌套一個CollapsingToolbarLayout佈局

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.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">
	
    <android.support.design.widget.AppBarLayout
		android:id="@+id/appBar"
		android:layout_width="match_parent"
		android:layout_height="250dp">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            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">

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

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

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

CollapsingToolbarLayout佈局中:

theme屬性:用於設置主題,在MainActivity的Toolbar就是這個主題,現在把這個主題提到上一級來。app:contentScrim屬性:用於指定CoordinatorLayout在趨於摺疊以及摺疊之後的背景色,CoordinatorLayout摺疊之後就是一個普通的Toolbar,所以指定顏色爲colorPrimary。
app:layout_scrollflags屬性:
scroll表示CollapsingToolbarLayout會隨着水果內容詳情的滾動一起滾動。
exitUntilCollapsed表示當CollapsingToolbarLayout隨滾動完成摺疊後就保留在界面上,不再移出屏幕。

(4)、在CollapsingToolbarLayout中定義具體內容                                                     

<android.support.design.widget.CollapsingToolbarLayout
    android:id="@+id/collapsing_toolbar"
    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" />

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:layout_collapseMode="pin" />

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

app:layout_collapseMode屬性:用於指定當前控件在CollapsingToolbarLayout摺疊過程中的摺疊模式。
Toolbar被指定成pin:表示摺疊的過程中,Toolbar的位置始終保持不變。
ImageView被指定成parallax:表示會在摺疊的過程中產生一定的錯位偏移,即產生一定的視覺效果。

2、實現水果內容詳情部分

(1)、在最外層使用NestedScrollView佈局。

NestedScrollView由Support-v4庫提供。像ScrollView一樣,它支持使用滾動的方式來查看屏幕以外的數據,而NestedScrollView在此基礎上還增加了嵌套相應滾動事件的功能。由於CoordinatorLayout本身已經可以響應滾動事件了,所以在它的內部就需要使用NestedScrollView或RecyclerView這樣的佈局。

NestedScrollView與AppBarLayout是平級的。在AppBarLayout下使用NestedScrollView標籤:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.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">
	
    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="250dp">
		
		...
		
    </android.support.design.widget.AppBarLayout>
	
	<android.support.v4.widget.NestedScrollView
		android:layout_width="match_parent"
		android:layout_height="match_parent"
		app:layout_behavior="@string/appbar_scrolling_view_behavior">

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

通過app:behavior屬性指定了一個佈局行爲,和之前在RecyclerView中的用法一樣,不會遮蓋到標題欄。

注:不論是ScrollView還是NestedScrollView,它們的內部都只允許存在一個直接子佈局,所以,想要在裏面放很多東西的話通常會先嵌套一個LinearLayout佈局,在LinearLayout佈局中放入具體內容。

(2)、設置NestedScrollView裏的具體內容

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

	<android.support.v7.widget.CardView
		android:layout_width="match_parent"
		android:layout_height="wrap_content"
		android:layout_marginBottom="15dp"
		android:layout_marginLeft="15dp"
		android:layout_marginRight="15dp"
		android:layout_marginTop="35dp"
		app:cardCornerRadius="4dp">
	
		<TextView
			android:id="@+id/fruit_content_text"
			android:layout_width="match_parent"
			android:layout_height="wrap_content"
			android:layout_margin="10dp" />

    </android.support.v7.widget.CardView>

</LinearLayout>	

3、加入懸浮按鈕

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.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">
	
	...
	
    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        ...

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

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:src="@drawable/ic_comment"
        app:layout_anchor="@id/appBar"
        app:layout_anchorGravity="bottom|end" />

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

通過app:layout_anchor屬性爲懸浮按鈕設置了一個錨點,並將它的位置設置爲右下角。這樣懸浮按鈕就會出現在展開後的標題欄中,且跟隨着標題欄移動。

4、佈局編寫完畢,開始編寫邏輯功能。

修改FruitActivity中的代碼:

package com.my.materialdesigntest;

import android.content.Intent;
import android.os.Bundle;
import android.support.design.widget.CollapsingToolbarLayout;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;
import android.widget.ImageView;
import android.widget.TextView;

import com.bumptech.glide.Glide;

public class FruitActivity extends AppCompatActivity {

    //水果名字段
    public static final String FRUIT_NAME = "fruit_name";

    //水果圖片資源ID字段
    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(FRUIT_NAME);
        int fruitImageId = intent.getIntExtra(FRUIT_IMAGE_ID, 0);

        //關聯控件
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        CollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
        ImageView fruitImageView = (ImageView) findViewById(R.id.fruit_image_view);
        TextView fruitContentText = (TextView) findViewById(R.id.fruit_content_text);

        //使用Toolbar
        setSupportActionBar(toolbar);

        //獲取ActionBar實例,具體由Toolbar實現
        ActionBar actionBar = getSupportActionBar();

        //此時顯示返回按鈕
        if (actionBar != null) {
            actionBar.setDisplayHomeAsUpEnabled(true);
        }

        //設置標題
        collapsingToolbar.setTitle(fruitName);

        //加載圖片
        Glide.with(this).load(fruitImageId).into(fruitImageView);

        //通過generateFruitContent方法獲取一段水果內容信息
        String fruitContent = generateFruitContent(fruitName);

        //將獲取到的信息設置到控件上
        fruitContentText.setText(fruitContent);
    }

    //通過水果名獲取一段水果信息
    private String generateFruitContent(String fruitName) {

        //字符串緩衝區
        StringBuilder fruitContent = new StringBuilder();

        //將水果名拼接500次
        for (int i = 0; i < 500; i++) {
            fruitContent.append(fruitName);
        }
        return fruitContent.toString();
    }

    //重寫的標題欄返回按鈕的點擊事件,結束活動。即返回主活動
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case android.R.id.home:
                finish();
                return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

5、設置RecyclerView的點擊事件。

不設置點擊事件,自然沒有辦法進入到FruitActivity中。修改FruitAdapter的代碼:

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

    ...
	
    //必須重寫的第一個方法:創建ViewHolder方法
    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        
		...
		
        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);

                //啓動FruitActivity,放入水果的名稱、資源ID信息
                Intent intent = new Intent(mContext, FruitActivity.class);
                intent.putExtra(FruitActivity.FRUIT_NAME, fruit.getName());
                intent.putExtra(FruitActivity.FRUIT_IMAGE_ID, fruit.getImageId());
                mContext.startActivity(intent);
            }
        });

        return holder;
    }

    ...

}

運行程序:



篇幅太長了,最後的部分轉到下一篇。地址:Android學習筆記:界面設計Material Design的基本使用方法(三)

相關文章:Android學習筆記:界面設計Material Design的基本使用方法(一)


本文總結參考自郭神(郭霖)的《第一行代碼 第2版》

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章