ANDROID L - RecyclerView,CardView導入和使用（Demo）

jopen 10年前發布 | 57K 次閱讀 Android開發移動開發 Material Design

簡介：

這篇文章是ANDROID L——Material Design詳解（UI控件）的一個補充或者說是應用實例，如果有時間建議大家稍微瀏覽一下上篇文章。

本文主要介紹Android L新增加的兩個UI控件RecyclerView，CardView的導入和使用。

RecyclerView是ListView的升級版

CardView則是Google提供的一個卡片式視圖組件

本例就是使用RecyclerView來展示多個CardView的一個小例子，先看下效果圖：

導入RecyclerView,CardView

由于RecyclerView,CardView是放在support library v7包中，所以我們想要使用就必須要導包。

下面就介紹下在Eclipse和Android Studio中是如何導入這兩個包的。

Eclipse：

第一步：通過SDK manager下載/更新Android Support Libraries（5.0版本最新為21）

第二步：導入CardView和RecyclerView項目（都在support v7中）

1.在Eclipse中點擊Import，導入Android項目

2.導入CardView和RecycleView，路徑為your sdk path\extras\android\support\v7\cardview（RecycleView則為相同目錄下的recyclerview）

3.導入時記得將工程copy到本地并建議重命名，這樣方便以后管理例如：

第三步：設置Library

1..將兩個工程設置為Library

2..在主工程中引入這兩個Library例如：

通過這三步就可以將這兩個包導入進來了。

Android Studio

Android Stuido相對于Eclipse簡單的多：

第一步：

首先要確保已經將Android Support Libraries升級到最新.

第二步：

打開項目中的build.gradle文件，在dependencies中添加如下代碼。

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

</div> </div>

第三步：

重新Build一下工程。

Build完成后就會發現這兩個包就已經導入進來了

代碼介紹：

主題：

首先這個黑色基調的主題是使用了Material.Dark.ActionBar樣式。

設置方法：修改values-v21文件夾下styles.xml文件：

    <resources>  
        <style name="AppTheme" parent="android:ThemeOverlay.Material.Dark.ActionBar">  
        </style>  
    </resources>

</div> </div>

布局文件：</span>

recycler_view.xml（RecyclerView布局文件）:

    <?xml version="1.0" encoding="utf-8"?>

    <FrameLayout xmlns:android="
        xmlns:tools="
        android:layout_width="match_parent"

        android:layout_height="match_parent"

        tools:context=".MyActivity">

    <android.support.v7.widget.RecyclerView  
        android:id="@+id/list"  
        android:layout_width="match_parent"  
        android:layout_height="match_parent"  
        tools:context=".MyActivity" />  
</FrameLayout>  </pre><a style="text-indent:0px;" title="派生到我的代碼片" href="/misc/goto?guid=4959619263721336696" target="_blank"></a></div>

</div>
</div>
FrameLayout里包含了RecyclerView控件 






card_view.xml（CardView布局文件）：




    <android.support.v7.widget.CardView xmlns:android="
        xmlns:card_view="
        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:layout_margin="5dp"

        android:orientation="horizontal"

        card_view:cardBackgroundColor="@color/cardview_dark_background"

        card_view:cardCornerRadius="5dp" >

    <RelativeLayout  
        android:layout_width="match_parent"  
        android:layout_height="100dp"  
        android:padding="5dp" >  

        <ImageView  
            android:id="@+id/pic"  
            android:layout_width="match_parent"  
            android:layout_height="match_parent"  
            android:layout_centerInParent="true"  
            android:scaleType="centerCrop" />  

        <TextView  
            android:clickable="true"  
            android:id="@+id/name"  
            android:layout_width="match_parent"  
            android:layout_height="match_parent"  
            android:layout_marginBottom="10dp"  
            android:layout_marginRight="10dp"  
            android:gravity="right|bottom"  
            android:textColor="@android:color/white"  
            android:textSize="24sp" />  
    </RelativeLayout>  

</android.support.v7.widget.CardView>  </pre><a style="text-indent:0px;" title="派生到我的代碼片" href="/misc/goto?guid=4959619263721336696" target="_blank"></a></div>

</div>
</div>
CardView視圖中包含了一個ImageView和一個TextView分別顯示圖片和文字信息
唯一需要介紹的就是在布局文件中使用了，如下兩個屬性： 



    card_view:cardBackgroundColor="@color/cardview_dark_background"  
       card_view:cardCornerRadius="5dp"  
</div>
</div>
他倆的作用分別是設置CardView的背景顏色和外圍的圓角大小（注意要使用card_view命名空間） 





代碼：




Actor類（封裝數據的Model類）：




    public class Actor

    {

        String name;

    String picName;  

    public Actor(String name, String picName)  
    {  
        this.name = name;  
        this.picName = picName;  
    }  

    public int getImageResourceId( Context context )  
    {  
        try  
        {  
            return context.getResources().getIdentifier(this.picName, "drawable", context.getPackageName());  

        }  
        catch (Exception e)  
        {  
            e.printStackTrace();  
            return -1;  
        }  
    }  
}  </pre><a style="text-indent:0px;" title="派生到我的代碼片" href="/misc/goto?guid=4959619263721336696" target="_blank"></a></div>

</div>
</div>
封裝了演員的名字和圖片名，getImageResourceId()方法的作用就是根據圖片命找到系統資源</span>



MyActivity(程序主控制Activity)





</div>
</div>
    public class MyActivity

        extends Activity

    {

    private RecyclerView mRecyclerView;  

    private MyAdapter myAdapter;  

    private List<Actor> actors = new ArrayList<Actor>();  

    private String[] names = { "朱茵", "張柏芝", "張敏", "鞏俐", "黃圣依", "趙薇", "莫文蔚", "如花" };  

    private String[] pics = { "p1", "p2", "p3", "p4", "p5", "p6", "p7", "p8" };  

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

        actors.add(new Actor("朱茵", "p1"));  
        getActionBar().setTitle("那些年我們追的星女郎");  

        // 拿到RecyclerView  
        mRecyclerView = (RecyclerView) findViewById(R.id.list);  
        // 設置LinearLayoutManager  
        mRecyclerView.setLayoutManager(new LinearLayoutManager(this));  
        // 設置ItemAnimator  
        mRecyclerView.setItemAnimator(new DefaultItemAnimator());  
        // 設置固定大小  
        mRecyclerView.setHasFixedSize(true);  
        // 初始化自定義的適配器  
        myAdapter = new MyAdapter(this, actors);  
        // 為mRecyclerView設置適配器  
        mRecyclerView.setAdapter(myAdapter);  

    }  

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

    @Override  
    public boolean onOptionsItemSelected(MenuItem item) {  
        switch(item.getItemId()) {  
            // 當點擊actionbar上的添加按鈕時，向adapter中添加一個新數據并通知刷新  
            case R.id.action_add:  
                if (myAdapter.getItemCount() != names.length) {  
                    actors.add(new Actor(names[myAdapter.getItemCount()], pics[myAdapter.getItemCount()]));  
                    mRecyclerView.scrollToPosition(myAdapter.getItemCount() - 1);  
                    myAdapter.notifyDataSetChanged();  
                }  
                return true;  
            // 當點擊actionbar上的刪除按鈕時，向adapter中移除最后一個數據并通知刷新  
            case R.id.action_remove:  
                if (myAdapter.getItemCount() != 0) {  
                    actors.remove(myAdapter.getItemCount()-1);  
                    mRecyclerView.scrollToPosition(myAdapter.getItemCount() - 1);  
                    myAdapter.notifyDataSetChanged();  
                }  
                return true;  
        }  
        return super.onOptionsItemSelected(item);  
    }  

}  </pre><br />

MyAdapter（自定義適配器類）




</div>
</div>
    public class MyAdapter

        extends RecyclerView.Adapter<MyAdapter.ViewHolder>

    {

    private List<Actor> actors;  

    private Context mContext;  

    public MyAdapter( Context context , List<Actor> actors)  
    {  
        this.mContext = context;  
        this.actors = actors;  
    }  

    @Override  
    public ViewHolder onCreateViewHolder( ViewGroup viewGroup, int i )  
    {  
        // 給ViewHolder設置布局文件  
        View v = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.card_view, viewGroup, false);  
        return new ViewHolder(v);  
    }  

    @Override  
    public void onBindViewHolder( ViewHolder viewHolder, int i )  
    {  
        // 給ViewHolder設置元素  
        Actor p = actors.get(i);  
        viewHolder.mTextView.setText(p.name);  
        viewHolder.mImageView.setImageDrawable(mContext.getDrawable(p.getImageResourceId(mContext)));  
    }  

    @Override  
    public int getItemCount()  
    {  
        // 返回數據總數  
        return actors == null ? 0 : actors.size();  
    }  

    // 重寫的自定義ViewHolder  
    public static class ViewHolder  
        extends RecyclerView.ViewHolder  
    {  
        public TextView mTextView;  

        public ImageView mImageView;  

        public ViewHolder( View v )  
        {  
            super(v);  
            mTextView = (TextView) v.findViewById(R.id.name);  
            mImageView = (ImageView) v.findViewById(R.id.pic);  
        }  
    }  
}  </pre> <p> </p>

所有代碼介紹完畢了，可以總結為以下兩點：

 

RecyclerView：

理解為之前的ListView，不過需要設置LinearLayoutManager（目前資料不多我也有點迷糊以后再補充）和ItemAnimator（為每個條目設置操作動畫）兩個新屬性




RecyclerView.Adapter：

理解為默認自帶和基于ViewHolder的新的適配器，只不過回調方法稍有不同，但本質都是一樣的。

 

代碼下載地址：https://github.com/a396901990/AndroidDemo

 




寫在最后：




最近在寫一個ANDROID L——Material Design詳解的系列文章。


主題和布局——ANDROID L——Material Design詳解（主題和布局）

視圖和陰影——ANDROID L——Material Design詳解（視圖和陰影）

UI控件——ANDROID L——Material Design詳解（UI控件）

動畫——ANDROID L——Material Design詳解（動畫篇）




目前只差最后一個動畫部分了。原計劃是等動畫篇寫完之后再分別寫它們的使用Demo，但是上一篇UI控件感覺寫的不夠詳細，所以先把UI控件的Demo寫出來。




 轉載請注明本文出自大苞米的博客（http://blog.csdn.net/a396901990），謝謝支持！

</strong></span></p>
</span>

                    

                    
                         本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
                         轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
                         本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！
                         本文地址：http://www.baiduhome.net/lib/view/open1416663987242.html
                         Android開發 移動開發 Material Design
                    

                

                
                    
                        相關經驗
                        
  ANDROID L - RecyclerView,CardView導入和使用（Demo）
   Android L中的RecyclerView 、CardView 、Palette的使用
   Android L新增加的兩個UI控件RecyclerView，CardView的導入和使用
   Android CardView的使用細節
   Android開發 CardView 的使用
                         
                    
                    
                        相關資訊
                        
  Xamarin Alpha 支持 Android L 和 Android Wear
   Android L的API變化
   教你如何安裝 Android L
   如何讓你的手機比別人最先升級到 Android L
   Android L正式名稱曝光
                         
                    
                    
                        相關文檔
                        
   Caffe for windows使用matlab運行RCNN demo
    JAVA實現EXCEL的導入和導出
    在線文檔預覽demo方案--使用說明
    VLAN和Lan l3交換技術（教案第3-4章xg）
    CMMI L3 講稿--2011.5
    L2TP培訓
    freepbx-使用指南(中文)
    使用 C# 調用 windows API 入門
    StarUML 使用手冊
                         
                    

                    目錄