創建Material Design風格的Android應用

DeannaMount 8年前發布 | 9K 次閱讀 Android開發 移動開發

 引言

在程序中創建復雜的Material Design 樣式的 List和Card,可以使用RecyclerView和CardView組件,這兩個組件是在最新的support v7包(version 21)中提供的。因此需要引入依賴包:

dependencies {
compile 'com.android.support:appcompat-v7:+'
compile 'com.android.support:cardview-v7:+'
compile 'com.android.support:recyclerview-v7:+'
}

創建List

可以將RecyclerView看作是一個更高級靈活的ListView。該控件和ListView一樣都是可以高效展示大量數據的容器,他們在滾動的時候只是維護了幾個有限的View來展示不同數據,因此是非常節省資源的。當你的數據需要在運行的時候動態改變(比如用戶操作或者是從網絡獲取),你就可以用RecyclerView

但是RecyclerView和ListView的不同是它簡化了顯示以及數據提供的方式:

1.使用Layout manager來定位元素;

2.自帶動畫:當添加或者刪除item的時候會自發的產生動畫效果。

使用RecyclerView組件,你需要指定一個Adapter和布局管理器,創建一個Adapter繼承RecyclerView.Adapter類,具體的實現細節要根據數據集合視圖的類型變化,具體信息,看下面的例子。

布局管理器管理item在RecyclerView中顯示的位置,并且決定何時回收(重用)那些不在視野范圍的item。

重用(或者說回收)view的時候,layout manager會請求adapter用新的數據替換掉這個View的內容。Recyclingview的這種機制不僅避免了創建不必要的新view,而且還避免了不停的調用開銷很大的findViewById()。注意后面這點是ListView本身不具備的(在ListView中為了解決這個問題我們一般是使用ViewHolder)。

RecyclerView提供了以下內建的布局管理器:

LinearLayoutManager 顯示Item 在一個水平或者垂直的滾動列表中。
GridLayoutManager 顯示Item 作為網格布局。
StaggeredGridLayoutManager 顯示Item在交錯的網格布局。

也可以自己通過繼承RecyclerView.LayoutManager類創建自定義的布局管理器。

RecylerView組件

RecylerView組件

動畫:

RecyclerView默認情況下就有動畫,在刪除或者增加Ite的時候。如果需要自定義動畫,繼承RecyclerView.ItemAnimator類,并且使用RecyclerView.setItemAnimator()方法將定義的動畫設置到我們的視圖中。

下面開始看例子:
1.首先在xml布局文件增加一個RecyclerView

<!-- A RecyclerView with some commonly used attributes -->
<android.support.v7.widget.RecyclerView
android:id="@+id/my_recycler_view"
android:scrollbars="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"/>

2.然后在我們的Java代碼中使用,附加Adapter和數據就可以顯示了。

public class MyActivity extends Activity {
    private RecyclerView mRecyclerView;
    private RecyclerView.Adapter mAdapter;
    private RecyclerView.LayoutManager mLayoutManager;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.my_activity);
    mRecyclerView = (RecyclerView) findViewById(R.id.my_recycler_view);

    // use this setting to improve performance if you know that changes
    // in content do not change the layout size of the RecyclerView
    mRecyclerView.setHasFixedSize(true);

    // use a linear layout manager
    mLayoutManager = new LinearLayoutManager(this);
    mRecyclerView.setLayoutManager(mLayoutManager);

    // specify an adapter (see also next example)
    mAdapter = new MyAdapter(myDataset);
    mRecyclerView.setAdapter(mAdapter);
}
...

}</pre>

3.Adapter提供訪問數據集中的Item,創建視圖映射到數據上,并且替換布局的內容數據用新的item。下面的代碼顯示一個簡單的實現,使用TextView顯示簡單的String數組。

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {
    private String[] mDataset;

// Provide a reference to the views for each data item
// Complex data items may need more than one view per item, and
// you provide access to all the views for a data item in a view holder
public static class ViewHolder extends RecyclerView.ViewHolder {
    // each data item is just a string in this case
    public TextView mTextView;
    public ViewHolder(TextView v) {
        super(v);
        mTextView = v;
    }
}

// Provide a suitable constructor (depends on the kind of dataset)
public MyAdapter(String[] myDataset) {
    mDataset = myDataset;
}

// Create new views (invoked by the layout manager)
@Override
public MyAdapter.ViewHolder onCreateViewHolder(ViewGroup parent,
                                               int viewType) {
    // create a new view
    View v = LayoutInflater.from(parent.getContext())
                           .inflate(R.layout.my_text_view, parent, false);
    // set the view's size, margins, paddings and layout parameters
    ...
    ViewHolder vh = new ViewHolder(v);
    return vh;
}

// Replace the contents of a view (invoked by the layout manager)
@Override
public void onBindViewHolder(ViewHolder holder, int position) {
    // - get element from your dataset at this position
    // - replace the contents of the view with that element
    holder.mTextView.setText(mDataset[position]);

}

// Return the size of your dataset (invoked by the layout manager)
@Override
public int getItemCount() {
    return mDataset.length;
}

}</pre>

創建Card

CardView繼承FrameLayout類,通過它可以顯示信息在卡片內部,并且在不同的平臺上有統一的樣式。CardView組件可以有陰影和圓角。

創建有陰影的Card,使用card_view:cardElevation屬性。CardView 使用真實的高度和動態陰影在Android5.0(API 21)和更高版本,較早的版本則使用傳統的陰影。

使用這些屬性去定制CardView的外觀:

 

使用card_view:cardCornerRadius屬性設置圓角的半徑,在布局文件中。
使用CardView.setRadius方法設置圓角的半徑在java代碼中。
設置卡片的背景顏色,使用card_view:cardBackgroundColor屬性。

下面是一個在xml布局文件中包含一個CardView的示例:

<LinearLayout xmlns:android="

    <TextView
        android:id="@+id/info_text"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</android.support.v7.widget.CardView>

</LinearLayout></pre>

Card示例圖

Card示例圖

亂彈

通過上面可以看到RecyclerView。跟我們經常使用的ListView很像,不過它的父類并不是AbsListView,因此不能混著使用。但是在很多地方可以替換ListView,通過ViewHolder,View重用,可以看到這是一個更加高效的視圖組件,推薦使用。

CardView,本質上就是一個比較符合Material Design的組件,使用Card布局,效果更好。很多人之前可能也使用一些CardUi,谷歌官方出了這個,強烈推薦使用。

上面RecyclerView和CardView,是分開寫的,但是我們可以用在一起的哦,不要糊涂了呀。

參考資料:http://developer.android.com/training/material/lists-cards.html

 

 本文由用戶 DeannaMount 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!