Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> Android開發 >> 關於android開發 >> Android中使用RecyclerView和CardView實現瀑布流效果(StaggeredGrid)

Android中使用RecyclerView和CardView實現瀑布流效果(StaggeredGrid)

編輯:關於android開發

Android中使用RecyclerView和CardView實現瀑布流效果(StaggeredGrid)


在Android 5.0 中引入了Material Design的設計理念,並加入了RecyclerView和CardView兩個控件。本文就講解如何使用者兩個控件來實現瀑布流效果(StaggeredGrid)。

先上效果圖

效果圖

RecyclerView

RecyclerView 是一個更加高級和靈活的ListView。它簡化了顯示和處理數據的過程,比如,為positioning item提供了layout 的管理,為item刪除和添加提供了默認的動畫。當然,你也可以自定義這些動畫。

RecyclerView

LayoutManger<喎?http://www.Bkjia.com/kf/ware/vc/" target="_blank" class="keylink">vc3Ryb25nPr72tqhSZWN5Y2xlclZpZXfW0NSqy9i1xM671sO6zbrOyrHW2NPDxMfQqbK71NnP1Mq+tcRpdGVtoaNMYXlvdXRNYW5hZ2Vyzai5/bHcw+K0tL2osrux2NKqtcR2aWV3us2yu7X308O30cqxtcRmaW5kVmlld0J5SWQoKSDAtMzhuN/Qp8LKoaM8YnIgLz4NClJlY3ljbGVyVmlld8zhuanBy8j91tbE2r2otcRMYXlvdXRNYW5nZXKjujwvcD4NCjxzdHJvbmc+TGluZWFyTGF5b3V0TWFuYWdlcjwvc3Ryb25nPiC0udaxu/LV38uuxr21xL/J0tS7rLavtcRsaXN0IDxzdHJvbmc+R3JpZExheW91dE1hbmFnZXI8L3N0cm9uZz4g0tRncmlktcS3vcq9z9TKviA8c3Ryb25nPlN0YWdnZXJlZEdyaWRMYXlvdXRNYW5hZ2VyPC9zdHJvbmc+INLUxtmyvMH3tcTQzsq9z9TKvqOosb7OxNbYteMgKKHRdqHRKeDFo6kNCjxoMyBpZD0="動畫">動畫

RecyclerView是有默認的添加刪除item的動畫的,如果想要自定義這些動畫,繼承RecyclerView.ItemAnimator 這個類,並使用RecyclerView.setItemAnimator() 這個方法。

例子

activity_recycler_view.xml




    

view_holder.xml




    

    

Activity

public class RecyclerViewActivity extends AppCompatActivity {

    private RecyclerView mRecyclerView;
    private RecyclerView.Adapter mAdapter;
    private RecyclerView.LayoutManager mLayoutManager;
    private String[] myDataset = {1, 2, 3, 4, 5, 6, 7};

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

        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 StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);
        mRecyclerView.setLayoutManager(mLayoutManager);

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

}

這裡的Adaper是一個數據和UI之間的橋梁,把數據顯示在UI上。
下面一個例子是一個簡單的Adapter實現。

class MyAdapter extends RecyclerView.Adapter {
    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 ImageView mImageView;
        public TextView mTextView;

        public ViewHolder(View v) {
            super(v);
            mTextView = (TextView) v.findViewById(R.id.tv_title);
            mImageView = (ImageView) v.findViewById(R.id.iv_title);
        }
    }

    // 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.view_holder, parent, false);
        // set the view's size, margins, paddings and layout parameters
        //TO-DO

        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.mImageView.setImageResource(R.mipmap.ic_launcher);
        holder.mTextView.setText(mDataset[position]);

    }

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

關於RecyclerView.Adapter 的說明:

以下三個方法是必須要實現的。
- onCreateViewHolder 返回每一個Item的ViewHolder
- onBindViewHolder 給Item中的控件賦值
- getItemCount 返回Item的個數

效果

效果圖

CardView

CardView繼承自FrameLayout,利用它可以使你的信息在卡片中顯示,並且在不同的平台中具有一致性。
利用以下的屬性可以自定義CardView的外觀:
card_view:cardCornerRadius 設置圓角的半徑
CardView.setRadius 在代碼中設置圓角的半徑
card_view:cardBackgroundColor 設置卡片的背景

例子


    
    

        
    

依賴的包

RecyclerView 和 CardView是v7 Support Libraries的一部分,所以需要在你app的Gradle dependencies 裡加入以下內容:

dependencies {

compile ‘com.android.support:cardview-v7:21.0.+’
compile ‘com.android.support:recyclerview-v7:21.0.+’
}

實現瀑布流效果(StaggeredGrid)

效果

效果圖

activity_recycler_view.xml




    


Activity

public class RecyclerViewActivity extends AppCompatActivity {

    private RecyclerView mRecyclerView;
    private RecyclerView.Adapter mAdapter;
    private RecyclerView.LayoutManager mLayoutManager;
    private String[] myDataset = {1, 2, 3, 4, 5, 6, 7,1, 2, 3, 4, 5, 6, 7};

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

        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 StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);
        mRecyclerView.setLayoutManager(mLayoutManager);

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

}

class MyAdapter extends RecyclerView.Adapter {
    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 ImageView mImageView;
        public TextView mTextView;

        public ViewHolder(View v) {
            super(v);
            mTextView = (TextView) v.findViewById(R.id.tv_title);
            mImageView = (ImageView) v.findViewById(R.id.iv_title);
        }
    }

    // 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.view_holder, parent, false);
        // set the view's size, margins, paddings and layout parameters
        //TO-DO

        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
        if(position %2 == 0) {
            holder.mImageView.setImageResource(R.drawable.icon);
        }
        else {
            holder.mImageView.setImageResource(R.mipmap.ic_launcher);
        }
        holder.mTextView.setText(mDataset[position]);

    }

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

class TestAdapter extends RecyclerView.Adapter{

    @Override
    public MyAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return null;
    }

    @Override
    public void onBindViewHolder(MyAdapter.ViewHolder holder, int position) {

    }

    @Override
    public int getItemCount() {
        return 0;
    }
}

ViewHolder



 

  1. 上一頁:
  2. 下一頁:
熱門文章
閱讀排行版
Copyright © Android教程網 All Rights Reserved