Continue with the card design from the previous blog, and we'll continue from WeChat To find some clues, let's start by looking at an interface that is the default public number in WeChat, mainly to publish the latest developments on Tencent News. As we can see, it uses a card layout similar to the one we used in the previous article.So, let's make such an interface today!

The first step, of course, is to create the layout of the layout_item, which is the layout of the list item. The layout code is given here directly. The code is not complicated, but the property settings are cumbersome.

1. <?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:background="@drawable/radius_bg"  
6.     android:paddingBottom="10dp"  
7.     android:orientation="vertical">  
8.     <ImageView  
9.         android:id="@+id/News_Pic"  
10.         android:layout_width="wrap_content"  
11.         android:layout_height="100dp"  
12.         android:layout_alignParentLeft="true"  
13.         android:layout_alignParentRight="true"  
14.         android:layout_alignParentTop="true"  
15.         android:layout_marginLeft="10dp"  
16.         android:layout_marginRight="10dp"  
17.         android:layout_marginTop="10dp"  
18.         android:contentDescription="@string/Description"  
19.         android:scaleType="center" />  
20.     <TextView  
21.         android:id="@+id/News_Title"  
22.         android:layout_width="wrap_content"  
23.         android:layout_height="30dp"  
24.         android:layout_alignLeft="@+id/News_Pic"  
25.         android:layout_alignRight="@+id/News_Pic"  
26.         android:layout_below="@+id/News_Pic"  
27.         android:background="#707070"  
28.         android:gravity="left|center"  
29.         android:textColor="#ffffff"  
30.         android:contentDescription="@string/Description"  
31.         android:textIsSelectable="true" />  
32.   
33.    <TextView  
34.        android:id="@+id/News_Title1"  
35.        android:layout_width="200dp"  
36.        android:layout_height="45dp"  
37.        android:layout_alignLeft="@+id/News_Title"  
38.        android:layout_alignRight="@+id/News_Title2"  
39.        android:layout_below="@+id/News_Title"  
40.        android:layout_marginTop="10dp"  
41.        android:gravity="center"  
42.        android:textIsSelectable="true" />  
43.   
44.     <ImageView  
45.         android:id="@+id/News_Pic1"  
46.         android:layout_width="45dp"  
47.         android:layout_height="45dp"  
48.         android:layout_alignRight="@+id/News_Title"  
49.         android:layout_alignTop="@+id/News_Title1"  
50.         android:contentDescription="@string/Description"  
51.         android:scaleType="center" />  
52.   
53.     <TextView  
54.         android:id="@+id/News_Title2"  
55.         android:layout_width="200dp"  
56.         android:layout_height="45dp"  
57.         android:layout_alignParentLeft="true"  
58.         android:layout_below="@+id/News_Title1"  
59.         android:layout_margin="10dp"  
60.         android:layout_toLeftOf="@+id/News_Pic1"  
61.         android:gravity="center"  
62.         android:textIsSelectable="true" />  
63.   
64.     <ImageView  
65.         android:id="@+id/News_Pic2"  
66.         android:layout_width="45dp"  
67.         android:layout_height="45dp"  
68.         android:layout_alignTop="@+id/News_Title2"  
69.         android:layout_toRightOf="@+id/News_Title2"  
70.         android:contentDescription="@string/Description"  
71.         android:scaleType="center" />  
72.   
73.     <TextView  
74.         android:id="@+id/News_Title3"  
75.         android:layout_width="200dp"  
76.         android:layout_height="45dp"  
77.         android:layout_alignLeft="@+id/News_Title1"  
78.         android:layout_alignRight="@+id/News_Title2"  
79.         android:layout_below="@+id/News_Title2"  
80.         android:gravity="center"  
81.         android:textIsSelectable="true" />  
82.   
83.     <ImageView  
84.         android:id="@+id/News_Pic3"  
85.         android:layout_width="45dp"  
86.         android:layout_height="45dp"  
87.         android:layout_alignRight="@+id/News_Pic2"  
88.         android:layout_alignTop="@+id/News_Title3"  
89.         android:layout_toRightOf="@+id/News_Title2"  
90.         android:contentDescription="@string/Description"  
91.         android:scaleType="center" />  
92.   
93. </RelativeLayout>  

<?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="match_parent"
    android:background="@drawable/radius_bg"
    android:paddingBottom="10dp"
    android:orientation="vertical">
    <ImageView
        android:id="@+id/News_Pic"
        android:layout_width="wrap_content"
        android:layout_height="100dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="10dp"
        android:contentDescription="@string/Description"
        android:scaleType="center" />
    <TextView
        android:id="@+id/News_Title"
        android:layout_width="wrap_content"
        android:layout_height="30dp"
        android:layout_alignLeft="@+id/News_Pic"
        android:layout_alignRight="@+id/News_Pic"
        android:layout_below="@+id/News_Pic"
        android:background="#707070"
        android:gravity="left|center"
        android:textColor="#ffffff"
        android:contentDescription="@string/Description"
        android:textIsSelectable="true" />

   <TextView
       android:id="@+id/News_Title1"
       android:layout_width="200dp"
       android:layout_height="45dp"
       android:layout_alignLeft="@+id/News_Title"
       android:layout_alignRight="@+id/News_Title2"
       android:layout_below="@+id/News_Title"
       android:layout_marginTop="10dp"
       android:gravity="center"
       android:textIsSelectable="true" />

    <ImageView
        android:id="@+id/News_Pic1"
        android:layout_width="45dp"
        android:layout_height="45dp"
        android:layout_alignRight="@+id/News_Title"
        android:layout_alignTop="@+id/News_Title1"
        android:contentDescription="@string/Description"
        android:scaleType="center" />

    <TextView
        android:id="@+id/News_Title2"
        android:layout_width="200dp"
        android:layout_height="45dp"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/News_Title1"
        android:layout_margin="10dp"
        android:layout_toLeftOf="@+id/News_Pic1"
        android:gravity="center"
        android:textIsSelectable="true" />

    <ImageView
        android:id="@+id/News_Pic2"
        android:layout_width="45dp"
        android:layout_height="45dp"
        android:layout_alignTop="@+id/News_Title2"
        android:layout_toRightOf="@+id/News_Title2"
        android:contentDescription="@string/Description"
        android:scaleType="center" />

    <TextView
        android:id="@+id/News_Title3"
        android:layout_width="200dp"
        android:layout_height="45dp"
        android:layout_alignLeft="@+id/News_Title1"
        android:layout_alignRight="@+id/News_Title2"
        android:layout_below="@+id/News_Title2"
        android:gravity="center"
        android:textIsSelectable="true" />

    <ImageView
        android:id="@+id/News_Pic3"
        android:layout_width="45dp"
        android:layout_height="45dp"
        android:layout_alignRight="@+id/News_Pic2"
        android:layout_alignTop="@+id/News_Title3"
        android:layout_toRightOf="@+id/News_Title2"
        android:contentDescription="@string/Description"
        android:scaleType="center" />

</RelativeLayout>

Step 2, we need to write a rounded radius_bg shape for the card.The code is the same as the previous article:

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

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

Step 3, Card class, where there are two Card classes, BaseCard is the base class and Card is a class inherited from BaseCard:

1. /* 
2.  * Message interface of WeChat public platform 
3.  * @Author: Qin Yuanpei 
4.  *  
5.  */  
6. package com.Android.WeChatCard;  
7.   
8. public class BaseCard   
9. {  
10.    private int mDrawable;  
11.   
12.    private String mDescription;  
13.   
14.    public BaseCard(int Drawable,String Description)  
15.    {  
16.        this.mDrawable=Drawable;  
17.        this.mDescription=Description;  
18.    }  
19.      
20.    public int getDrawable()   
21.    {  
22.     return mDrawable;  
23.    }  
24.      
25.    public void setDrawable(int mDrawable)   
26.    {  
27.     this.mDrawable = mDrawable;  
28.    }  
29.      
30.    public String getDescription()   
31.    {  
32.     return mDescription;  
33.    }  
34.      
35.    public void setDescription(String mDescription)   
36.    {  
37.     this.mDescription = mDescription;  
38.    }  
39.      
40. }  

/*
 *Mimic WeChat Public Platform Message Interface
 * @Author: Qin Yuanpei
 * 
 */
package com.Android.WeChatCard;

public class BaseCard 
{
   private int mDrawable;

   private String mDescription;

   public BaseCard(int Drawable,String Description)
   {
       this.mDrawable=Drawable;
       this.mDescription=Description;
   }

   public int getDrawable() 
   {
    return mDrawable;
   }

   public void setDrawable(int mDrawable) 
   {
    this.mDrawable = mDrawable;
   }

   public String getDescription() 
   {
    return mDescription;
   }

   public void setDescription(String mDescription) 
   {
    this.mDescription = mDescription;
   }

}

1. package com.Android.WeChatCard;  
2.   
3. import java.util.ArrayList;  
4. import java.util.List;  
5.   
6. public class Card extends BaseCard {  
7.   
8.   
9.     private List<BaseCard> mSubCards;  
10.   
11.     public Card(int Drawable, String Description)   
12.     {  
13.         super(Drawable, Description);  
14.         mSubCards=new ArrayList<BaseCard>();  
15.     }  
16.       
17.     public void AppendCard(BaseCard mCard)  
18.     {  
19.         mSubCards.add(mCard);  
20.     }  
21.       
22.     public List<BaseCard> getSubCards()   
23.     {  
24.         return mSubCards;  
25.     }  
26.   
27. }  

package com.Android.WeChatCard;

import java.util.ArrayList;
import java.util.List;

public class Card extends BaseCard {


    private List<BaseCard> mSubCards;

    public Card(int Drawable, String Description) 
    {
        super(Drawable, Description);
        mSubCards=new ArrayList<BaseCard>();
    }

    public void AppendCard(BaseCard mCard)
    {
        mSubCards.add(mCard);
    }

    public List<BaseCard> getSubCards() 
    {
        return mSubCards;
    }

}

Step 4, let's write a custom adapter class, CardAdapter:

1. package com.Android.WeChatCard;  
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 CardAdapter extends BaseAdapter {  
14.   
15.     private Context mContext;  
16.     private List<Card> mCards;  
17.     public CardAdapter(Context mContext,List<Card> mCards)  
18.     {  
19.         this.mContext=mContext;  
20.         this.mCards=mCards;  
21.     }  
22.     @Override  
23.     public int getCount()   
24.     {  
25.         return mCards.size();  
26.     }  
27.   
28.     @Override  
29.     public Object getItem(int Index)   
30.     {  
31.         return mCards.get(Index);  
32.     }  
33.   
34.     @Override  
35.     public long getItemId(int Index)   
36.     {  
37.         return Index;  
38.     }  
39.   
40.     @Override  
41.     public View getView(int Index, View mView, ViewGroup mParent)   
42.     {  
43.              mView=LayoutInflater.from(mContext).inflate(R.layout.layout_item, null);  
44.              //Headline message  
45.              ImageView News_Pic=(ImageView)mView.findViewById(R.id.News_Pic);  
46.              News_Pic.setImageResource(mCards.get(Index).getDrawable());  
47.              TextView News_Title=(TextView)mView.findViewById(R.id.News_Title);  
48.              News_Title.setText(mCards.get(Index).getDescription());  
49.              //Message One  
50.              ImageView News_Pic1=(ImageView)mView.findViewById(R.id.News_Pic1);  
51.              News_Pic1.setImageResource(mCards.get(Index).getSubCards().get(0).getDrawable());  
52.              TextView News_Title1=(TextView)mView.findViewById(R.id.News_Title1);  
53.              News_Title1.setText(mCards.get(Index).getSubCards().get(0).getDescription());  
54.              //Message 2  
55.              ImageView News_Pic2=(ImageView)mView.findViewById(R.id.News_Pic2);  
56.              News_Pic2.setImageResource(mCards.get(Index).getSubCards().get(1).getDrawable());  
57.              TextView News_Title2=(TextView)mView.findViewById(R.id.News_Title2);  
58.              News_Title2.setText(mCards.get(Index).getSubCards().get(1).getDescription());  
59.              //Message Three  
60.             ImageView News_Pic3=(ImageView)mView.findViewById(R.id.News_Pic3);  
61.             News_Pic3.setImageResource(mCards.get(Index).getSubCards().get(2).getDrawable());  
62.             TextView News_Title3=(TextView)mView.findViewById(R.id.News_Title3);  
63.             News_Title3.setText(mCards.get(Index).getSubCards().get(2).getDescription());  
64.         return mView;  
65.     }  
66. }  

package com.Android.WeChatCard;

import java.util.List;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class CardAdapter extends BaseAdapter {

    private Context mContext;
    private List<Card> mCards;
    public CardAdapter(Context mContext,List<Card> mCards)
    {
        this.mContext=mContext;
        this.mCards=mCards;
    }
    @Override
    public int getCount() 
    {
        return mCards.size();
    }

    @Override
    public Object getItem(int Index) 
    {
        return mCards.get(Index);
    }

    @Override
    public long getItemId(int Index) 
    {
        return Index;
    }

    @Override
    public View getView(int Index, View mView, ViewGroup mParent) 
    {
             mView=LayoutInflater.from(mContext).inflate(R.layout.layout_item, null);
             //Headline message
             ImageView News_Pic=(ImageView)mView.findViewById(R.id.News_Pic);
             News_Pic.setImageResource(mCards.get(Index).getDrawable());
             TextView News_Title=(TextView)mView.findViewById(R.id.News_Title);
             News_Title.setText(mCards.get(Index).getDescription());
             //Message One
             ImageView News_Pic1=(ImageView)mView.findViewById(R.id.News_Pic1);
             News_Pic1.setImageResource(mCards.get(Index).getSubCards().get(0).getDrawable());
             TextView News_Title1=(TextView)mView.findViewById(R.id.News_Title1);
             News_Title1.setText(mCards.get(Index).getSubCards().get(0).getDescription());
             //Message 2
             ImageView News_Pic2=(ImageView)mView.findViewById(R.id.News_Pic2);
             News_Pic2.setImageResource(mCards.get(Index).getSubCards().get(1).getDrawable());
             TextView News_Title2=(TextView)mView.findViewById(R.id.News_Title2);
             News_Title2.setText(mCards.get(Index).getSubCards().get(1).getDescription());
             //Message 3
            ImageView News_Pic3=(ImageView)mView.findViewById(R.id.News_Pic3);
            News_Pic3.setImageResource(mCards.get(Index).getSubCards().get(2).getDrawable());
            TextView News_Title3=(TextView)mView.findViewById(R.id.News_Title3);
            News_Title3.setText(mCards.get(Index).getSubCards().get(2).getDescription());
        return mView;
    }
}

Since there are three messages under each header message, we need to use the AppendCard() method to add three BaseCard s for binding here when constructing a Card, which needs to be noted when using.

Step 5: Layout of the main interface and related logic:

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.     <TextView  
8.         android:layout_width="match_parent"  
9.         android:layout_height="40dp"  
10.         android:background="@drawable/tab_bg"  
11.         android:gravity="center"  
12.         android:textColor="#ffffff"  
13.         android:textSize="18sp"  
14.         android:text="@string/Title" />  
15.     <ListView  
16.         android:id="@+id/ListView"  
17.         android:layout_width="match_parent"  
18.         android:layout_height="wrap_content"  
19.         android:divider="@null"  
20.         android:dividerHeight="30dp"  
21.         android:paddingLeft="20dp"  
22.         android:paddingRight="20dp"  
23.         android:scrollbarStyle="outsideOverlay" >  
24.     </ListView>  
25. </LinearLayout>  

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity" >
    <TextView
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="@drawable/tab_bg"
        android:gravity="center"
        android:textColor="#ffffff"
        android:textSize="18sp"
        android:text="@string/Title" />
    <ListView
        android:id="@+id/ListView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:divider="@null"
        android:dividerHeight="30dp"
        android:paddingLeft="20dp"
        android:paddingRight="20dp"
        android:scrollbarStyle="outsideOverlay" >
    </ListView>
</LinearLayout>

1. /* 
2.  * Fake WeChat Public Number Message Interface 
3.  * Author: Qin Yuanpei 
4.  * Time: Dec. 30, 2013 
5.  * The principle of this program is to override the adapter and then bind the list.I think the ScrollView should be used for how WeChat works 
6.  * The current drawbacks of this program are: 
7.  * 1,Card The BaseCard and BaseCard classes need to be improved 
8.  * 2,Scrollbars are not on the edge of the screen, but on the edge of the card, which means there is a problem with the method itself. [Solution: scrollbarStyle="outsideOverlay] 
9.  * 3,The spacing between the two cards could not be resolved. Attempting to use the divider and dividerHeight attributes, found that there is a certain color difference [Solution: android:divider="@null"] 
10.  * 4,If you want to implement that notification from WeChat, you need to add a layout, a type judgment 
11.  * 5,Resolve memory consumption when there are more pictures 
12.  */  
13. package com.Android.WeChatCard;  
14.   
15. import java.util.ArrayList;  
16. import java.util.List;  
17.   
18. import android.os.Bundle;  
19. import android.app.Activity;  
20. import android.view.Menu;  
21. import android.view.Window;  
22. import android.widget.ListView;  
23.   
24. public class MainActivity extends Activity {  
25.   
26.     private ListView mListView;  
27.     private CardAdapter mAdapter;  
28.     @Override  
29.     protected void onCreate(Bundle savedInstanceState) {  
30.         super.onCreate(savedInstanceState);  
31.         this.requestWindowFeature(Window.FEATURE_NO_TITLE);  
32.         setContentView(R.layout.layout_main);  
33.         mListView=(ListView)findViewById(R.id.ListView);  
34.         mAdapter=new CardAdapter(this,getItems());  
35.         mListView.setAdapter(mAdapter);   
36.     }  
37.   
38.     private List<Card> getItems()   
39.     {  
40.         List<Card> mCards=new ArrayList<Card>();  
41.         //First card  
42.         Card mCard=new Card(R.drawable.pic_0,"This is the first headline message");  
43.         BaseCard mBaseCard1=new BaseCard(R.drawable.pic_0,"This is the first text message");  
44.         BaseCard mBaseCard2=new BaseCard(R.drawable.pic_0,"This is the first text message");  
45.         BaseCard mBaseCard3=new BaseCard(R.drawable.pic_0,"This is the first text message");  
46.         mCard.AppendCard(mBaseCard1);  
47.         mCard.AppendCard(mBaseCard2);  
48.         mCard.AppendCard(mBaseCard3);  
49.         //add card  
50.         mCards.add(mCard);  
51.   
52.         //Second card  
53.         mCard=new Card(R.drawable.pic_1,"This is the second headline message");  
54.         mBaseCard1=new BaseCard(R.drawable.pic_1,"This is the first text message");  
55.         mBaseCard2=new BaseCard(R.drawable.pic_1,"This is the first text message");  
56.         mBaseCard3=new BaseCard(R.drawable.pic_1,"This is the first text message");  
57.         mCard.AppendCard(mBaseCard1);  
58.         mCard.AppendCard(mBaseCard2);  
59.         mCard.AppendCard(mBaseCard3);  
60.         //add card  
61.         mCards.add(mCard);  
62.   
63.         //Third card  
64.         mCard=new Card(R.drawable.pic_2,"This is the third headline message");  
65.         mBaseCard1=new BaseCard(R.drawable.pic_2,"This is the first text message");  
66.         mBaseCard2=new BaseCard(R.drawable.pic_2,"This is the first text message");  
67.         mBaseCard3=new BaseCard(R.drawable.pic_2,"This is the first text message");  
68.         mCard.AppendCard(mBaseCard1);  
69.         mCard.AppendCard(mBaseCard2);  
70.         mCard.AppendCard(mBaseCard3);  
71.         //add card  
72.         mCards.add(mCard);  
73.           
74.           
75.         //Fourth Card  
76.         mCard=new Card(R.drawable.pic_3,"This is the fourth headline message");  
77.         mBaseCard1=new BaseCard(R.drawable.pic_3,"This is the first text message");  
78.         mBaseCard2=new BaseCard(R.drawable.pic_3,"This is the first text message");  
79.         mBaseCard3=new BaseCard(R.drawable.pic_3,"This is the first text message");  
80.         mCard.AppendCard(mBaseCard1);  
81.         mCard.AppendCard(mBaseCard2);  
82.         mCard.AppendCard(mBaseCard3);  
83.         //add card  
84.         mCards.add(mCard);  
85.           
86.         return mCards;  
87.     }  
88.   
89.     @Override  
90.     public boolean onCreateOptionsMenu(Menu menu) {  
91.         // Inflate the menu; this adds items to the action bar if it is present.  
92.         getMenuInflater().inflate(R.menu.main, menu);  
93.         return true;  
94.     }  
95.   
96. }  

/*
 *Fake WeChat Public Number Message Interface
 *Author: Qin Yuanpei
 *Time: Dec. 30, 2013
 *The principle of this program is to override the adapter and then bind the list.I think the ScrollView should be used for how WeChat works
 *The current drawbacks of this program are:
 * 1, Card and BaseCard classes need to be improved
 * 2. The scrollbar is not on the edge of the screen, but on the edge of the card, which means there is a problem with the method itself. [Solution: scrollbarStyle="outsideOverlay]
 * 3. The spacing between two cards can not be resolved. Attempting to use divider and dividerHeight attributes, found that there is a certain color difference [Solution: android:divider="@null"]
 * 4. If you want to implement the WeChat notification, you need to add a layout, a type judgment
 * 5. Resolve memory consumption when there are more pictures
 */
package com.Android.WeChatCard;

import java.util.ArrayList;
import java.util.List;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.Window;
import android.widget.ListView;

public class MainActivity extends Activity {

    private ListView mListView;
    private CardAdapter mAdapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        this.requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.layout_main);
        mListView=(ListView)findViewById(R.id.ListView);
        mAdapter=new CardAdapter(this,getItems());
        mListView.setAdapter(mAdapter); 
    }

    private List<Card> getItems() 
    {
        List<Card> mCards=new ArrayList<Card>();
        //First card
        Card mCard=new Card(R.drawable.pic_0, "This is the first headline information");
        BaseCard mBaseCard1=new BaseCard(R.drawable.pic_0, "This is the first text message");
        BaseCard mBaseCard2=new BaseCard(R.drawable.pic_0, "This is the first text message");
        BaseCard mBaseCard3=new BaseCard(R.drawable.pic_0, "This is the first text message");
        mCard.AppendCard(mBaseCard1);
        mCard.AppendCard(mBaseCard2);
        mCard.AppendCard(mBaseCard3);
        //Add Card
        mCards.add(mCard);

        //Second card
        mCard=new Card(R.drawable.pic_1, "This is the second header information");
        mBaseCard1=new BaseCard(R.drawable.pic_1, "This is the first text message");
        mBaseCard2=new BaseCard(R.drawable.pic_1, "This is the first text message");
        mBaseCard3=new BaseCard(R.drawable.pic_1, "This is the first text message");
        mCard.AppendCard(mBaseCard1);
        mCard.AppendCard(mBaseCard2);
        mCard.AppendCard(mBaseCard3);
        //Add Card
        mCards.add(mCard);

        //Third card
        mCard=new Card(R.drawable.pic_2, "This is the third headline information");
        mBaseCard1=new BaseCard(R.drawable.pic_2, "This is the first text message");
        mBaseCard2=new BaseCard(R.drawable.pic_2, "This is the first text message");
        mBaseCard3=new BaseCard(R.drawable.pic_2, "This is the first text message");
        mCard.AppendCard(mBaseCard1);
        mCard.AppendCard(mBaseCard2);
        mCard.AppendCard(mBaseCard3);
        //Add Card
        mCards.add(mCard);


        //Fourth card
        mCard=new Card(R.drawable.pic_3, "This is the fourth headline information");
        mBaseCard1=new BaseCard(R.drawable.pic_3, "This is the first text message");
        mBaseCard2=new BaseCard(R.drawable.pic_3, "This is the first text message");
        mBaseCard3=new BaseCard(R.drawable.pic_3, "This is the first text message");
        mCard.AppendCard(mBaseCard1);
        mCard.AppendCard(mBaseCard2);
        mCard.AppendCard(mBaseCard3);
        //Add Card
        mCards.add(mCard);

        return mCards;
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

}

The final result is shown in the diagram:

You can refer to this article for the implementation of the sending time of messages in micro-letters:

       http://blog.csdn.net/qinyuanpei/article/details/17727767