Android开发学习之卡片式布局的简单实现

转自：http://blog.csdn.net/qinyuanpei/article/details/17729607

GoogleNow是Android4.1全新推出的一款应用，它可以全面了解你的使用习惯，并为你提供现在或者未来可能用到的各种信息，GoogleNow提供的信息关联度较高，几乎是瞬间返回答案，总而言之，GoogleNow是Google提出的全新搜索概念。当然，GoogleNow最为引人注目的当属它的卡片式设计。我们首先来看几张GoogleNow的图片：

                                        

            我们可以看出，这种卡片式的界面设计更为简洁，可以将用户需要的信息直接地呈现在用户面前，简洁而不失美观。那么现在我们就来一起做一个这样的卡片式界面吧！

       首先我们先来建立一个布局：

[html] view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="wrap_content"  
5.     android:orientation="vertical"   
6.     android:background="@drawable/radius_bg"  
7.     android:padding="15dp">  
8.     <TextView  
9.         android:id="@+id/Card_Title"  
10.         android:layout_width="match_parent"  
11.         android:layout_height="wrap_content"  
12.         android:textSize="20sp"  
13.         android:textIsSelectable="true"/>  
14.   
15.     <ImageView  
16.         android:id="@+id/Card_Pic"  
17.         android:layout_width="match_parent"  
18.         android:layout_height="wrap_content"  
19.         android:contentDescription="@string/Description"  
20.         android:scaleType="center" />  
21.   
22. </LinearLayout>  

        通过这个布局我们将完成一个圆角卡片的设计，其中圆角的实现是定义了一个Shape，具体代码如下：

[html] view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <shape xmlns:android="http://schemas.android.com/apk/res/android" >  
3.     <corners android:radius="8dp"/>  
4.     <solid android:color="#ffffff"/>  
5. </shape>  

        下面我们定义一个GoogleCard的类：

[java] view plain copy

1. package com.Android.GoogleCard;  
2.   
3. public class GoogleCard   
4. {  
5.   
6.    private String mDescription;  
7.    private int mDrawable;  
8.      
9.    public GoogleCard(String mDescription,int mDrawable)  
10.    {  
11.        this.mDescription=mDescription;  
12.        this.mDrawable=mDrawable;  
13.    }  
14.      
15.    public String getDescription()   
16.    {  
17.     return mDescription;  
18.    }  
19.      
20.    public void setDescription(String mDescription)   
21.    {  
22.     this.mDescription = mDescription;  
23.    }  
24.      
25.    public int getDrawable()   
26.    {  
27.     return mDrawable;  
28.    }  
29.      
30.    public void setDrawable(int mDrawable)   
31.    {  
32.     this.mDrawable = mDrawable;  
33.    }  
34.   
35. }  

       接下里我们定义一个适配器类GoogleCardAdapter

[java] view plain copy

1. package com.Android.GoogleCard;  
2.   
3. import java.util.List;  
4.   
5. import android.content.Context;  
6. import android.view.LayoutInflater;  
7. import android.view.View;  
8. import android.view.ViewGroup;  
9. import android.widget.BaseAdapter;  
10. import android.widget.ImageView;  
11. import android.widget.TextView;  
12.   
13. public class GoogleCardAdapter extends BaseAdapter   
14. {  
15.     private List<GoogleCard> mCards;  
16.     private Context mContext;  
17.       
18.     public GoogleCardAdapter(Context mContext,List<GoogleCard> mCards)  
19.     {  
20.         this.mContext=mContext;  
21.         this.mCards=mCards;  
22.     }  
23.     @Override  
24.     public int getCount()   
25.     {  
26.         return mCards.size();  
27.     }  
28.   
29.     @Override  
30.     public Object getItem(int Index)   
31.     {  
32.         return mCards.get(Index);  
33.     }  
34.   
35.     @Override  
36.     public long getItemId(int Index)   
37.     {  
38.         return Index;  
39.     }  
40.   
41.     @Override  
42.     public View getView(int Index, View mView, ViewGroup mParent)   
43.     {  
44.         ViewHolder mHolder=new ViewHolder();  
45.         mView=LayoutInflater.from(mContext).inflate(R.layout.layout_item, null);  
46.         mHolder.Card_Title=(TextView)mView.findViewById(R.id.Card_Title);  
47.         mHolder.Card_Title.setText(mCards.get(Index).getDescription());  
48.         mHolder.Card_Pic=(ImageView)mView.findViewById(R.id.Card_Pic);  
49.         //记住啊，这里是setImageResource()方法，不是setBackgroundResource(),否则图像会变形啊  
50.         mHolder.Card_Pic.setImageResource(mCards.get(Index).getDrawable());  
51.         return mView;  
52.     }  
53.   
54.     private static class ViewHolder  
55.     {  
56.         TextView Card_Title;  
57.         ImageView Card_Pic;  
58.     }  
59. }  

       最后我们来看主界面的布局和主要代码：

[html] view plain copy

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:orientation="vertical"  
6.     tools:context=".MainActivity" >  
7.     <ListView  
8.         android:id="@+id/ListView"  
9.         android:layout_width="match_parent"  
10.         android:layout_height="match_parent"  
11.         android:divider="@null"  
12.         android:paddingLeft="15dp"  
13.         android:paddingRight="15dp"  
14.         android:dividerHeight="15dp"  
15.         android:scrollbarStyle="outsideOverlay" >  
16.     </ListView>  
17. </LinearLayout>  

[java] view plain copy

1. package com.Android.GoogleCard;  
2.   
3. import java.util.ArrayList;  
4. import java.util.List;  
5.   
6. import android.os.Bundle;  
7. import android.app.Activity;  
8. import android.view.Menu;  
9. import android.view.Window;  
10. import android.widget.ListView;  
11.   
12. public class MainActivity extends Activity {  
13.   
14.   
15.     private ListView mListView;  
16.     @Override  
17.     protected void onCreate(Bundle savedInstanceState) {  
18.         super.onCreate(savedInstanceState);  
19.         this.requestWindowFeature(Window.FEATURE_NO_TITLE);  
20.         setContentView(R.layout.layout_main);  
21.         mListView=(ListView) findViewById(R.id.ListView);  
22.         GoogleCardAdapter mAdapter=new GoogleCardAdapter(this, getItems());  
23.         mListView.setAdapter(mAdapter);  
24.     }  
25.   
26.     private List<GoogleCard> getItems()   
27.     {  
28.         List<GoogleCard> mCards=new ArrayList<GoogleCard>();  
29.         for(int i=0;i<20;i++)  
30.         {  
31.             GoogleCard mCard=new GoogleCard("这是第"+(i+1)+"张卡片", getResource(i));  
32.             mCards.add(mCard);  
33.         }  
34.         return mCards;  
35.     }  
36.   
37.     private int getResource(int Index)   
38.     {  
39.         int mResult=0;  
40.         switch(Index%2)  
41.         {  
42.           case 0:  
43.               mResult=R.drawable.card_0;  
44.             break;  
45.           case 1:  
46.               mResult=R.drawable.card_1;  
47.             break;  
48.         }  
49.         return mResult;  
50.     }  
51.   
52.     @Override  
53.     public boolean onCreateOptionsMenu(Menu menu) {  
54.         // Inflate the menu; this adds items to the action bar if it is present.  
55.         getMenuInflater().inflate(R.menu.main, menu);  
56.         return true;  
57.     }  
58.   
59. }  

         最终程序运行效果如图所示：