接着上一篇博客中的卡片式设计，我们继续从微信中寻找一些线索，我们首先来看这样一个界面，这是微信中默认的一个公众号，主要是发布腾讯新闻上的最新动态，我们可以看出，它采用了类似于我们在上一篇文章中采用的卡片式布局。那么，今天就让我们一起来做这样一个界面吧！
第一步，当然是创建layout_item的布局，即列表项目的布局，这里直接给出布局代码，代码并不复杂，只是属性设置较为繁琐。
[html]view plain copy print ?<?xmlversion=“1.0”encoding=“utf-8”?><RelativeLayoutxmlns:android=“/apk/res/android”android:layout_width=“match_parent”android:layout_height=“match_parent”android:background=“@drawable/radius_bg”android:paddingBottom=“10dp”android:orientation=“vertical”><ImageViewandroid: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”/><TextViewandroid: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”/><TextViewandroid: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”/><ImageViewandroid: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”/><TextViewandroid: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”/><ImageViewandroid: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”/><TextViewandroid: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”/><ImageViewandroid: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>
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:background="@drawable/radius_bg"android:paddingBottom="10dp"android:orientation="vertical"><ImageViewandroid: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" /><TextViewandroid: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" /><TextViewandroid: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" /><ImageViewandroid: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" /><TextViewandroid: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" /><ImageViewandroid: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" /><TextViewandroid: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" /><ImageViewandroid: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>
第二步，我们需要为卡片编写一个圆角的形状radius_bg。代码和上一篇文章是一样的 ： [java]view plain copy print ?<?xmlversion=“1.0”encoding=“utf-8”?><shapexmlns:android=”/apk/res/android”><solidandroid:color=”#ffffff”/><cornersandroid:radius=”10dp”/></shape>
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="/apk/res/android" ><solid android:color="#ffffff"/><corners android:radius="10dp"/></shape>
第三步，卡片类，这里卡片类共有两个，BaseCard为基类，Card为继承自BaseCard的一个类： [java]view plain copy print ?/**仿微信公众平台消息界面*@作者：秦元培**/packagecom.Android.WeChatCard;publicclassBaseCard{privateintmDrawable;privateStringmDescription;publicBaseCard(intDrawable,StringDescription){this.mDrawable=Drawable;this.mDescription=Description;}publicintgetDrawable(){returnmDrawable;}publicvoidsetDrawable(intmDrawable){this.mDrawable=mDrawable;}publicStringgetDescription(){returnmDescription;}publicvoidsetDescription(StringmDescription){this.mDescription=mDescription;}}
/** 仿微信公众平台消息界面* @作者：秦元培* */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;}}
[java]view plain copy print ?packagecom.Android.WeChatCard;importjava.util.ArrayList;importjava.util.List;publicclassCardextendsBaseCard{privateList<BaseCard>mSubCards;publicCard(intDrawable,StringDescription){super(Drawable,Description);mSubCards=newArrayList<BaseCard>();}publicvoidAppendCard(BaseCardmCard){mSubCards.add(mCard);}publicList<BaseCard>getSubCards(){returnmSubCards;}}
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;}}
第四步，我们来编写自定义适配器类CardAdapter： [java]view plain copy print ?packagecom.Android.WeChatCard;importjava.util.List;importandroid.content.Context;importandroid.view.LayoutInflater;importandroid.view.View;importandroid.view.ViewGroup;importandroid.widget.BaseAdapter;importandroid.widget.ImageView;importandroid.widget.TextView;publicclassCardAdapterextendsBaseAdapter{privateContextmContext;privateList<Card>mCards;publicCardAdapter(ContextmContext,List<Card>mCards){this.mContext=mContext;this.mCards=mCards;}@OverridepublicintgetCount(){returnmCards.size();}@OverridepublicObjectgetItem(intIndex){returnmCards.get(Index);}@OverridepubliclonggetItemId(intIndex){returnIndex;}@OverridepublicViewgetView(intIndex,ViewmView,ViewGroupmParent){mView=LayoutInflater.from(mContext).inflate(R.layout.layout_item,null);//头条消息ImageViewNews_Pic=(ImageView)mView.findViewById(R.id.News_Pic);News_Pic.setImageResource(mCards.get(Index).getDrawable());TextViewNews_Title=(TextView)mView.findViewById(R.id.News_Title);News_Title.setText(mCards.get(Index).getDescription());//消息一ImageViewNews_Pic1=(ImageView)mView.findViewById(R.id.News_Pic1);News_Pic1.setImageResource(mCards.get(Index).getSubCards().get(0).getDrawable());TextViewNews_Title1=(TextView)mView.findViewById(R.id.News_Title1);News_Title1.setText(mCards.get(Index).getSubCards().get(0).getDescription());//消息二ImageViewNews_Pic2=(ImageView)mView.findViewById(R.id.News_Pic2);News_Pic2.setImageResource(mCards.get(Index).getSubCards().get(1).getDrawable());TextViewNews_Title2=(TextView)mView.findViewById(R.id.News_Title2);News_Title2.setText(mCards.get(Index).getSubCards().get(1).getDescription());//消息三ImageViewNews_Pic3=(ImageView)mView.findViewById(R.id.News_Pic3);News_Pic3.setImageResource(mCards.get(Index).getSubCards().get(2).getDrawable());TextViewNews_Title3=(TextView)mView.findViewById(R.id.News_Title3);News_Title3.setText(mCards.get(Index).getSubCards().get(2).getDescription());returnmView;}}
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;}@Overridepublic int getCount() {return mCards.size();}@Overridepublic Object getItem(int Index) {return mCards.get(Index);}@Overridepublic long getItemId(int Index) {return Index;}@Overridepublic 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供这里绑定使用，这一点在使用的时候需要注意。
第五步，主界面的布局和相关逻辑：
[html]view plain copy print ?<LinearLayoutxmlns:android=“/apk/res/android”xmlns:tools=“/tools”android:layout_width=“match_parent”android:layout_height=“match_parent”android:orientation=“vertical”tools:context=“.MainActivity”><TextViewandroid: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”/><ListViewandroid: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>
<LinearLayout xmlns:android="/apk/res/android"xmlns:tools="/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"tools:context=".MainActivity" ><TextViewandroid: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" /><ListViewandroid: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>
[java]view plain copy print ?/**仿微信公众号消息界面*作者：秦元培*时间：12月30日*这个程序的原理是重写适配器，然后绑定列表。我觉得微信的实现原理应该使用的ScrollView吧*这个程序目前的缺点有：*1、Card和BaseCard两个类还需要完善*2、滚动条不是在屏幕边缘，而是在卡片边缘，也就是说这个方法本身有问题.[解决方法：scrollbarStyle=”outsideOverlay]*3、两个卡片间的间距问题无法解决，尝试着用了divider和dividerHeight属性，发现有一定的色差[解决方法：android:divider=”@null”]*4、如果要实现微信的那个通知，需要增加一个布局、一个类型判断*5、当图片较多时解决内存消耗的问题*/packagecom.Android.WeChatCard;importjava.util.ArrayList;importjava.util.List;importandroid.os.Bundle;importandroid.app.Activity;importandroid.view.Menu;importandroid.view.Window;importandroid.widget.ListView;publicclassMainActivityextendsActivity{privateListViewmListView;privateCardAdaptermAdapter;@OverrideprotectedvoidonCreate(BundlesavedInstanceState){super.onCreate(savedInstanceState);this.requestWindowFeature(Window.FEATURE_NO_TITLE);setContentView(R.layout.layout_main);mListView=(ListView)findViewById(R.id.ListView);mAdapter=newCardAdapter(this,getItems());mListView.setAdapter(mAdapter);}privateList<Card>getItems(){List<Card>mCards=newArrayList<Card>();//第一个卡片CardmCard=newCard(R.drawable.pic_0,“这是第一个头条信息”);BaseCardmBaseCard1=newBaseCard(R.drawable.pic_0,“这是第一个文本消息”);BaseCardmBaseCard2=newBaseCard(R.drawable.pic_0,“这是第一个文本消息”);BaseCardmBaseCard3=newBaseCard(R.drawable.pic_0,“这是第一个文本消息”);mCard.AppendCard(mBaseCard1);mCard.AppendCard(mBaseCard2);mCard.AppendCard(mBaseCard3);//添加卡片mCards.add(mCard);//第二个卡片mCard=newCard(R.drawable.pic_1,“这是第二个头条信息”);mBaseCard1=newBaseCard(R.drawable.pic_1,“这是第一个文本消息”);mBaseCard2=newBaseCard(R.drawable.pic_1,“这是第一个文本消息”);mBaseCard3=newBaseCard(R.drawable.pic_1,“这是第一个文本消息”);mCard.AppendCard(mBaseCard1);mCard.AppendCard(mBaseCard2);mCard.AppendCard(mBaseCard3);//添加卡片mCards.add(mCard);//第三个卡片mCard=newCard(R.drawable.pic_2,“这是第三个头条信息”);mBaseCard1=newBaseCard(R.drawable.pic_2,“这是第一个文本消息”);mBaseCard2=newBaseCard(R.drawable.pic_2,“这是第一个文本消息”);mBaseCard3=newBaseCard(R.drawable.pic_2,“这是第一个文本消息”);mCard.AppendCard(mBaseCard1);mCard.AppendCard(mBaseCard2);mCard.AppendCard(mBaseCard3);//添加卡片mCards.add(mCard);//第四个卡片mCard=newCard(R.drawable.pic_3,“这是第四个头条信息”);mBaseCard1=newBaseCard(R.drawable.pic_3,“这是第一个文本消息”);mBaseCard2=newBaseCard(R.drawable.pic_3,“这是第一个文本消息”);mBaseCard3=newBaseCard(R.drawable.pic_3,“这是第一个文本消息”);mCard.AppendCard(mBaseCard1);mCard.AppendCard(mBaseCard2);mCard.AppendCard(mBaseCard3);//添加卡片mCards.add(mCard);returnmCards;}@OverridepublicbooleanonCreateOptionsMenu(Menumenu){//Inflatethemenu;thisaddsitemstotheactionbarifitispresent.getMenuInflater().inflate(R.menu.main,menu);returntrue;}}
/** 仿微信公众号消息界面* 作者：秦元培* 时间：12月30日* 这个程序的原理是重写适配器，然后绑定列表。我觉得微信的实现原理应该使用的ScrollView吧* 这个程序目前的缺点有：* 1、Card和BaseCard两个类还需要完善* 2、滚动条不是在屏幕边缘，而是在卡片边缘，也就是说这个方法本身有问题.[解决方法：scrollbarStyle="outsideOverlay]* 3、两个卡片间的间距问题无法解决，尝试着用了divider和dividerHeight属性，发现有一定的色差[解决方法：android:divider="@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;@Overrideprotected 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>();//第一个卡片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;}@Overridepublic 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;}}
最终运行效果如图所示：
至于微信中的消息发送时间的实现，大家可以参考这篇文章：
/qinyuanpei/article/details/17727767
如果觉得《Android开发学习之微信公众号界面》对你有帮助，请点赞、收藏，并留下你的观点哦！
