android 模仿微信布局,Android开发学习之仿微信腾讯新闻界面

接着上一篇博客中的卡片式设计，我们继续从微信中寻找一些线索，我们首先来看这样一个界面，这是微信中默认的一个公众号，主要是发布腾讯新闻上的最新动态，我们可以看出，它采用了类似于我们在上一篇文章中采用的卡片式布局。那么，今天就让我们一起来做这样一个界面吧！

第一步，当然是创建layout_item的布局，即列表项目的布局，这里直接给出布局代码，代码并不复杂，只是属性设置较为繁琐。

喎�"/kf/ware/vc/" target="_blank" class="keylink">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