Material Design 實戰

1.Toolbar

由于ActionBar被限定智能位于活動的頂部,從而不能實現一些MaterialDesign的效果,因此官方現在已經不再建議使用ActionBar。
Toolbar的強大之處在于,不僅繼承了ActionBar的所有功能,而且可以配合其他空間來完成一些MaterialDesign的效果。

Toolbar的實現

1.1 指定一個不帶ActionBar的主題
打開res/values/styles.xml文件
修改AppTheme 的 parent屬性為Theme.AppCompat.NoActionBar(深色)或者 Theme.AppCompat.Light.NoActionBar(淡色)
修改Xml布局文件

<android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/colorPrimary"
                android:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                />

在Activity添加代碼

 toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

我們還可以在Toolbar上添加一些按鈕來讓Toolbar更豐富一些。

首先,在res文件夾下添加menu文件夾,新建一個Menu resource file文件。

<?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:title="BackUp"
        app:showAsAction="always"
        android:icon="@mipmap/backup"
        />
    <item
        android:id="@+id/delete"
        android:title="Delete"
        app:showAsAction="ifRoom"
        android:icon="@mipmap/delete"
        />
    <item
        android:id="@+id/settings"
        android:title="Settings"
        android:icon="@mipmap/setting"
        app:showAsAction="never"/>
</menu>

接下來在Activity中重寫onCreateOptionsMenu和onOptionsItemSelected方法,與普通的菜單項添加方法一樣。

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

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()){
            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;
            case android.R.id.home:
                drawerLayout.openDrawer(GravityCompat.START);

        }
        return true;
    }

附:

  • 添加xmlns:app="http://schemas.android.com/apk/res-auto"可以讓item使用ap:前綴的語句。
  • app:showAsAction 的三個屬性always代表按鈕總是顯示,ifRoom代表按鈕如果有空間才顯示,沒空間則顯示在菜單中,never代表只顯示在菜單中。

效果圖:

只需要關注Toolbar,其他下面詳細說明

2.滑動菜單(抽屜)

所謂的滑動菜單就是將一些菜單選項隱藏起來,而不是在主屏幕上,可以通過滑動的方式將菜單顯示出來。
先介紹一下DrawerLayout的用法,在布局中允許放入兩個直接的子控件。第一個控件是主屏幕中顯示的內容,可以使用一個布局包裹其他子控件來作為DrawerLayout的第一個子控件。DrawerLayout的第二個子控件是滑動菜單中顯示的內容。

<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"
    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="wrap_content"
                android:background="@color/colorPrimary"
                android:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                app:layout_scrollFlags="snap|scroll|enterAlways" />
        </android.support.design.widget.AppBarLayout>

        <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/recyclerView"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_behavior="@string/appbar_scrolling_view_behavior" />
        </android.support.v4.widget.SwipeRefreshLayout>


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

    </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:headerLayout="@layout/nav_header"
        app:menu="@menu/nav_menu" />


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

控件中的代碼在后面會詳細說明。

在Acitivity中添加代碼

DrawerLayout drawerLayout = (DrawerLayout)findViewById(R.id.drawer);

ActionBar actionBar = getSupportActionBar();
        if(actionBar!=null){
            actionBar.setDisplayHomeAsUpEnabled(true); //在toolbar添加HomeAsUp按鈕,點擊可以打開抽屜
        }

在onOptionsItemSelected方法中添加代碼

case android.R.id.home:
                drawerLayout.openDrawer(GravityCompat.START);//打開抽屜

附:

  • HomeAsUp按鈕的id默認為 android.R.id.home (不用聲明)

3. NavigationView

NavigationView是嚴格按照MaterialDesign的要求來進行設計的一個控件,使用NavigationView使滑動菜單頁面的實現變得非常簡單。
NavigationView的設計分為menu設計和header設計。

  1. 首先添加依賴
compile 'com.android.support:design:25.3.1'
compile 'de.hdodenhof:circleimageview:2.1.0'

第一個是design support庫,第二個是一個開源項目,可以實現圖片圓形化。

  1. 然后設計menu,即活動菜單中的菜單項
<?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:title="BackUp"
        app:showAsAction="always"
        android:icon="@mipmap/backup"
        />
    <item
        android:id="@+id/delete"
        android:title="Delete"
        app:showAsAction="ifRoom"
        android:icon="@mipmap/delete"
        />
    <item
        android:id="@+id/settings"
        android:title="Settings"
        android:icon="@mipmap/setting"
        app:showAsAction="never"/>
</menu>

編寫的方法與上面的一樣。

  1. 然后設計header
    新建XML布局文件(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="180dp"
    android:background="?attr/colorPrimary"
    android:padding="10dp">
    <de.hdodenhof.circleimageview.CircleImageView
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:src="@mipmap/headicon"
        android:id="@+id/icon_image"
        android:layout_centerInParent="true"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/mail"
        android:text="uhsdiahdsi@qq.com"
        android:textColor="#ffffff"
        android:textSize="14sp"
        android:layout_alignParentBottom="true"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/username"
        android:layout_above="@id/mail"
        android:text="zjj"
        android:textSize="14sp"
        android:textColor="#ffffff"/>
</RelativeLayout>

布局的設計與普通的布局設計一樣,只需把ImageView改為de.hdodenhof.circleimageview.CircleImageView,把圖片裁剪為圓形。

  1. 修改布局文件,把滑動菜單的主控件改為NavigationView,代碼在上面已經貼出。
  <android.support.design.widget.NavigationView  //第二個子控件,菜單內容
        android:id="@+id/nav_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start" //滑動菜單從哪個方向滑出,start為按系統語言的方向
        app:headerLayout="@layout/nav_header" //header的ID
        app:menu="@menu/nav_menu"http://menu的ID 
/>

5.在Activity中添加代碼

NavigationView navView = (NavigationView) findViewById(R.id.nav_view);

navView.setCheckedItem(R.id.nav_call); //設置默認選擇項
        navView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener(){
            @Override
            public boolean onNavigationItemSelected(MenuItem item) {
                drawerLayout.closeDrawers();
                return true;
            }
        }); // 選擇的監聽事件

效果圖:

Drawer

4.懸浮按鈕和可交互提示

FloatingActionButton

在主屏幕中添加代碼

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

代碼很好理解,就不羅嗦了。還可以使用app:elevation設置懸浮的高度,高度影響投影的深淺和大小。

然后再Acitivity中添加懸浮按鈕的點擊事件,方法其實與普通按鈕一樣。

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Snackbar.make(v,"Data deleted",Snackbar.LENGTH_SHORT).setAction("Undo", new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Toast.makeText(MainActivity.this,"Data restored",Toast.LENGTH_SHORT).show();
                    }
                }).show(); 
            }
        });//可交互的提示
Snackbar(可交互提示)

代碼在上面。
與Toast很類似,但是第一個參數是一個View類型的值,而不是Context值。它可以通過View值獲得其最外層的父布局。
Snackbar的出現可以防止用戶操作失誤,例如當用戶需要刪除圖片的時候,可以詢問用戶是否確認刪除。而不是Toast那樣直接返回刪除成功與否。

效果圖:

Snackbar ,Undo可以點擊

5. CoordinatorLayout

CoordinatorLayout是一個加強版的FrameLayout,把他作為主屏幕的主控件,可以確保Snackbar的出現不會遮擋住懸浮按鈕。
代碼在上面出現過。

6. 卡片式布局

CardView可以讓人看上去每一個RecyclerView子項有立體的感覺。RecyclerView在這里就不詳細說明,以后我會在新的文章中系統的說明。

  1. 首先添加依賴
compile 'com.android.support:recyclerview-v7:25.3.1' //RecyclerView的依賴
compile 'com.android.support:cardview-v7:25.3.1' //卡片式布局
compile 'com.github.bumptech.glide:glide:3.7.0' //圖片加載庫,輕松加載網絡圖片

2.添加RecyclerView
新增Dog類

package com.example.peek_mapdemotest.materialdesign;

/**
 * Created by Administrator on 2017/7/25.
 */

public class Dog {
    private String name;
    private String introduce;
    private int pic;

    public Dog(String name, String introduce, int pic) {
        this.name = name;
        this.introduce = introduce;
        this.pic = pic;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getIntroduce() {
        return introduce;
    }

    public void setIntroduce(String introduce) {
        this.introduce = introduce;
    }

    public int getPic() {
        return pic;
    }

    public void setPic(int pic) {
        this.pic = pic;
    }
}

新增適配器

package com.example.peek_mapdemotest.materialdesign;

import android.content.Context;
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 java.util.ArrayList;

/**
 * Created by Administrator on 2017/7/25.
 */

public class DogAdapter extends RecyclerView.Adapter<DogAdapter.ViewHolder> {
    private ArrayList<Dog>  mDogList;
    private Context mContext;
    public DogAdapter(ArrayList<Dog> dogList){
        mDogList = dogList;
    }
    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        if(mContext == null){
            mContext = parent.getContext();
        }
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.dog_item,parent,false);
        ViewHolder holder = new ViewHolder(view);
        return holder;
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        Dog dog = mDogList.get(position);
        holder.dogImage.setImageResource(dog.getPic());
        holder.dogIntroduce.setText(dog.getIntroduce());
        holder.dogName.setText(dog.getName());

    }

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

    public class ViewHolder extends RecyclerView.ViewHolder {
        ImageView dogImage;
        TextView dogName;
        TextView dogIntroduce;

        public ViewHolder(View itemView) {
            super(itemView);
            dogImage= (ImageView) itemView.findViewById(R.id.dog_image);
            dogName = (TextView) itemView.findViewById(R.id.dog_name);
            dogIntroduce = (TextView) itemView.findViewById(R.id.introduce);
        }
    }
}

在Activity中添加數據源

 private void initData() {
        Dog dog1 = new Dog("哈士奇","西伯利亞雪橇犬是原始的古老犬種,在西伯利亞東北部、格陵蘭南部生活。",R.drawable.hashiqi);
        dogList.add(dog1);
        dogs.add(dog1);
        Dog dog2 = new Dog("博美","頭部相當短小,頭蓋寬廣且平,形狀像狐貍頭。眼睛大小中等,古銅色,略成橢圓形,兩眼間距適中黑色眼眶。鼻端部較細,呈楔形,鼻子和被毛同色。耳朵小,兩耳間距較近,多為直立耳,就如狐貍的耳朵。",R.drawable.bomei);
        dogs.add(dog2);
        dogList.add(dog2);
        Dog dog3 = new Dog("貴賓","貴賓犬,Poodle,也稱“貴婦犬”,又稱“卷毛狗”",R.drawable.guibin);
        dogList.add(dog3);
        dogs.add(dog3);
        Dog dog4 = new Dog("牛頭梗","牛頭梗是為紳士們飼養的,為此這些紳士強烈要求公平競賽,大家不要與弄虛作假的人進行比賽。牛頭梗被教以勇敢地進行自衛和保護它的主人,但決不允許它去嘗試挑戰——白色的品種被稱作“白色的騎士”,這是它保持至今的榮譽。",R.drawable.niutougeng);
        dogList.add(dog4);
        dogs.add(dog4);
        Dog dog5 = new Dog("牧羊犬","國內血統比較好的邊境牧羊犬如乾通名犬俱樂部繁育的卡爾,都是國內頂尖級別的血統,多次在美國西敏寺犬展中獲得優異成績。",R.drawable.muyangquan);
        dogList.add(dog5);
        dogs.add(dog5);
        Dog dog6 = new Dog("柴犬","柴犬是體型中等并且又最古老的犬。柴犬能夠應付陡峭的丘陵和山脈的斜坡,擁有靈敏的感官,使得柴犬屢次成為上乘的狩獵犬。",R.drawable.chaiquan1);
        dogList.add(dog6);
        dogs.add(dog6);
        Dog dog7 = new Dog("巴哥","巴哥犬是體貼,可愛的小型犬種",R.drawable.bage);
        dogList.add(dog7);
        dogs.add(dog7);

    }

聲明RecyclerView,把RecyclerView設置為瀑布型。

RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerView);
         adapter = new DogAdapter(dogList);
        StaggeredGridLayoutManager layoutManager = new StaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL);
        recyclerView.setLayoutManager(layoutManager);
        recyclerView.setAdapter(adapter);

7.AppBarLayout

你做了上面的操作會發現RecyclerView會把ToolBar遮擋住,主要是因為CoordinatorLayout是一個加強版的FrameLayout,所以默認在左上角開始擺放控件。
添加了AppBarLayout之后會解決到這種問題,并且可以設計出,當往上滑動的時候,ToolBar會隱藏了。因為此時,用戶的注意力會放在RecyclerView上,隱藏ToolBar會更適合用戶的體驗。

修改代碼,在ToolBar上加一層AppBarLayout布局。并且在Recyclerview中添加以下屬性,這樣可以解決遮擋問題。

app:layout_behavior="@string/appbar_scrolling_view_behavior"

然后再RecyclerView中添加以下屬性,這樣可以設計出Toolbar隱藏效果。

app:layout_scrollFlags="snap|scroll|enterAlways"

scroll指當RecyclerView向上滾動的時候,Toolbar會隱藏。enterAlways表示當RecyclerView向下滾動的時候,Toolbar會一起滾動。snap表示當Toolbar還沒有完全隱藏或者顯示的時候,會根據當前滾動的距離,自動選擇隱藏還是顯示。

效果圖:

Toolbar在向上滾動的過程中隱藏了

8.下拉刷新

在RecyclerView的外層添加

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

注意,在RecyclerView中的布局行為要移動到SwipeRefreshLayout布局中。

然后在Activity中添加代碼,聲明SwipeRefreshLayout。

  swipeRefreshLayout = (SwipeRefreshLayout) findViewById(R.id.swipe_refresh);
        swipeRefreshLayout.setColorSchemeResources(R.color.colorPrimary);
        swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {
                refreshDog();
            }
        });

添加下拉刷新的邏輯

private void refreshDog() {
        new Thread(new Runnable() {
            @Override
            public void run() {
                try {
                    Thread.sleep(2000);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
                runOnUiThread(new Runnable() {
                    @Override
                    public void run() {
                        randomData();
                        adapter.notifyDataSetChanged();
                        swipeRefreshLayout.setRefreshing(false);
                    }
                });
            }
        }).start();
    }

public void randomData(){
        int j =dogs.size();
        dogList.clear();
        for(int i= 0;i<=8;i++){
            Random random = new Random();
            int index = random.nextInt(j);
            dogList.add(dogs.get(index));
        }
    }

下拉刷新的效果只是模擬出來,因為讀取的是本地數據,所以很快完成,看不到效果。因此,在線程中sleep了2秒,模擬從網絡服務器拉數據下來的過程。

效果圖:

下拉刷新中

總結:
Material design的設計規范細致入微,需要消化好一陣子。雖然今天只是學習Material design的第一天,但是越讀越感受到它的妙處。這只是Material design的冰山一角。假如每個細節都嚴格遵照Material design的思想來設計,哪怕你不是設計人員,你的產品也一定不會難用和難看。

學習資料:重磅教程!幫你全面徹底搞定MATERIAL DESIGN的學習筆記

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容