接著上一篇博客中的卡片式設計，我們繼續從微信中尋找一些線索，我們首先來看這樣一個界面，這是微信中默認的一個公眾號，主要是發佈騰訊新聞上的最新動態，我們可以看出，它采用瞭類似於我們在上一篇文章中采用的卡片式佈局。那麼，今天就讓我們一起來做這樣一個界面吧！
第一步，當然是創建layout_item的佈局，即列表項目的佈局，這裡直接給出佈局代碼，代碼並不復雜，隻是屬性設置較為繁瑣。
vcD4KPHByZSBjbGFzcz0=”brush:java;”>
第二步，我們需要為卡片編寫一個圓角的形狀radius_bg。代碼和上一篇文章是一樣的：
第三步，卡片類，這裡卡片類共有兩個，BaseCard為基類，Card為繼承自BaseCard的一個類：
/*
* 仿微信公眾平臺消息界面
* @作者：秦元培
*
*/
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;
}
}
package com.Android.WeChatCard;
import java.util.ArrayList;
import java.util.List;
public class Card extends BaseCard {
private List mSubCards;
public Card(int Drawable, String Description)
{
super(Drawable, Description);
mSubCards=new ArrayList();
}
public void AppendCard(BaseCard mCard)
{
mSubCards.add(mCard);
}
public List getSubCards()
{
return mSubCards;
}
}
第四步，我們來編寫自定義適配器類CardAdapter：
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 mCards;
public CardAdapter(Context mContext,List 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);
//頭條消息
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());
//消息一
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());
//消息二
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());
//消息三
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;
}
}
由於每個頭條消息下有三個消息，因此我們需要在構造Card的時候，使用AppendCard()方法添加三個BaseCard供這裡綁定使用，這一點在使用的時候需要註意。
第五步，主界面的佈局和相關邏輯：
/*
* 仿微信公眾號消息界面
* 作者：秦元培
* 時間：2013年12月30日
* 這個程序的原理是重寫適配器，然後綁定列表。我覺得微信的實現原理應該使用的ScrollView吧
* 這個程序目前的缺點有：
* 1、Card和BaseCard兩個類還需要完善
* 2、滾動條不是在屏幕邊緣，而是在卡片邊緣，也就是說這個方法本身有問題.[解決方法：scrollbarStyle="outsideOverlay]
* 3、兩個卡片間的間距問題無法解決，嘗試著用瞭pider和piderHeight屬性，發現有一定的色差[解決方法：android:pider="@null"]
* 4、如果要實現微信的那個通知，需要增加一個佈局、一個類型判斷
* 5、當圖片較多時解決內存消耗的問題
*/
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 getItems()
{
List mCards=new ArrayList();
//第一個卡片
Card mCard=new Card(R.drawable.pic_0,"這是第一個頭條信息");
BaseCard mBaseCard1=new BaseCard(R.drawable.pic_0,"這是第一個文本消息");
BaseCard mBaseCard2=new BaseCard(R.drawable.pic_0,"這是第一個文本消息");
BaseCard mBaseCard3=new BaseCard(R.drawable.pic_0,"這是第一個文本消息");
mCard.AppendCard(mBaseCard1);
mCard.AppendCard(mBaseCard2);
mCard.AppendCard(mBaseCard3);
//添加卡片
mCards.add(mCard);
//第二個卡片
mCard=new Card(R.drawable.pic_1,"這是第二個頭條信息");
mBaseCard1=new BaseCard(R.drawable.pic_1,"這是第一個文本消息");
mBaseCard2=new BaseCard(R.drawable.pic_1,"這是第一個文本消息");
mBaseCard3=new BaseCard(R.drawable.pic_1,"這是第一個文本消息");
mCard.AppendCard(mBaseCard1);
mCard.AppendCard(mBaseCard2);
mCard.AppendCard(mBaseCard3);
//添加卡片
mCards.add(mCard);
//第三個卡片
mCard=new Card(R.drawable.pic_2,"這是第三個頭條信息");
mBaseCard1=new BaseCard(R.drawable.pic_2,"這是第一個文本消息");
mBaseCard2=new BaseCard(R.drawable.pic_2,"這是第一個文本消息");
mBaseCard3=new BaseCard(R.drawable.pic_2,"這是第一個文本消息");
mCard.AppendCard(mBaseCard1);
mCard.AppendCard(mBaseCard2);
mCard.AppendCard(mBaseCard3);
//添加卡片
mCards.add(mCard);
//第四個卡片
mCard=new Card(R.drawable.pic_3,"這是第四個頭條信息");
mBaseCard1=new BaseCard(R.drawable.pic_3,"這是第一個文本消息");
mBaseCard2=new BaseCard(R.drawable.pic_3,"這是第一個文本消息");
mBaseCard3=new BaseCard(R.drawable.pic_3,"這是第一個文本消息");
mCard.AppendCard(mBaseCard1);
mCard.AppendCard(mBaseCard2);
mCard.AppendCard(mBaseCard3);
//添加卡片
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;
}
}
最終運行效果如圖所示：
至於微信中的消息發送時間的實現，大傢可以參考這篇文章：
https://blog.csdn.net/qinyuanpei/article/details/17727767