新浪微博客户端开发之主界面实现

经过上面的二张，基本上完成了引导跟主界面的实现 ，现在我们来完成主界面，先看下效果图吧：

这个页面基本上和新浪的差不多吧~！！实现起来其实还是比较简单的，主要用到一个自定义的ListView的Item项，所以 我们只需设计每一个Item是什么样子，然后通过BaseAdapter进行初始化。注意这个是通过异步加载出来的，所以我们必须通过异步操作，不然显示不会友好 。

每一个ListView 的Item布局 WeiboItem.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayoutxmlns:android="/apk/res/android"android:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="horizontal"><ImageViewandroid:id="@+id/wbicon"android:layout_width="60dp"android:layout_height="60dp"android:src="@drawable/switchuser"android:layout_margin="8dp"></ImageView><LinearLayoutandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:orientation="vertical"android:paddingLeft="0dp"android:paddingRight="5dp"android:layout_marginTop="5dp"android:layout_marginBottom="5dp"><RelativeLayoutandroid:layout_width="fill_parent"android:layout_height="wrap_content"><TextViewandroid:id="@+id/wbuser"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textStyle="bold"android:textSize="15dp"android:textColor="#000000"android:layout_alignParentLeft="true"></TextView><ImageViewandroid:id="@+id/wbimage"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="3dp"android:layout_marginRight="5dp"android:layout_toLeftOf="@+id/wbtime"></ImageView><TextViewandroid:id="@+id/wbtime"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentRight="true"android:textColor="#f7a200"android:textSize="12dp"></TextView></RelativeLayout><TextViewandroid:id="@+id/wbtext"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textColor="#424952"android:textSize="15dp"android:layout_marginTop="4dp"></TextView><ImageView android:id="@+id/userInfoImage"android:layout_width="wrap_content"android:layout_height="wrap_content"android:visibility="gone"android:src="@drawable/pic"/><LinearLayout android:id="@+id/repeatlayout"android:layout_width="fill_parent"android:layout_height="wrap_content"android:orientation="vertical"android:paddingLeft="0dp"android:paddingRight="5dp"android:layout_marginTop="5dp"android:layout_marginBottom="5dp"android:visibility="gone"android:background="@drawable/popup"><TextView android:id="@+id/repeatwbcontent"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textColor="#424952"android:textSize="15dp"android:layout_marginTop="4dp"/><ImageView android:visibility="gone"android:id="@+id/repeatwboicon"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="3dp"android:layout_marginRight="5dp"android:src="@drawable/pic"/> </LinearLayout><RelativeLayout android:layout_width="fill_parent"android:layout_height="wrap_content"><TextViewandroid:id="@+id/fromwhere"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textSize="13dp"android:text="来自:华为云端手机"android:textColor="#333333"android:layout_alignParentLeft="true" /><TextView android:id="@+id/commentNum"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textSize="13dp"android:textColor="#333333"android:layout_alignParentRight="true"/><ImageView android:id="@+id/commentImage"android:src="@drawable/comment_icon"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_toLeftOf="@id/commentNum"android:layout_marginLeft="4dp"/><TextView android:id="@+id/reposeNum"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textSize="13dp"android:textColor="#333333"android:layout_toLeftOf="@+id/commentImage"/><ImageView android:id="@+id/redirecImage"android:src="@drawable/redirect_icon"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_toLeftOf="@+id/reposeNum"/></RelativeLayout></LinearLayout></LinearLayout>

布局就是这样设计 ，那么接下来我们要做的就是设计一个适配器，然后给ListView设置这个适配器。这个适配器因为布局比较复杂所以打算自定义一个适配器。实现BaseAdapter。

适配器的主要核心代码(WeiBoAdapter.java)

package otcyan.otcyan.weibo.servieces;import java.util.List;import com.otcyan.weibo.activity.R;import com.otcyan.weibo.activity.ZfWeiboActivity;import com..AsyncImageLoader;import com..OtWeibo;import android.content.Context;import android.content.Intent;import android.graphics.Color;import android.graphics.drawable.Drawable;import android.os.Handler;import android.os.Message;import android.text.Html;import android.text.SpannableString;import android.text.style.ForegroundColorSpan;import android.text.style.StyleSpan;import android.util.Log;import android.view.LayoutInflater;import android.view.View;import android.view.View.OnClickListener;import android.view.ViewGroup;import android.widget.BaseAdapter;import android.widget.ImageView;import android.widget.LinearLayout;import android.widget.TextView;/*** 微博的数据显示界面数据适配器* @author Administrator**/public class WeiboAdapt extends BaseAdapter {private List<WeiBoInfo> weiboList = null ;private Context context ;private Handler handler ;public WeiboAdapt(List<WeiBoInfo> weiboList , Context context , Handler handler){this.weiboList = weiboList ;this.context = context ;this.handler = handler ;}public int getCount() {return weiboList.size();}public Object getItem(int position) {return weiboList.get(position);}public long getItemId(int position) {return position;}public View getView(int position, View convertView, ViewGroup parent) {//得到 这个item 的WeiBoInfo信息WeiBoInfo wb = weiboList.get(position) ;//设置每个item的布局convertView = LayoutInflater.from(context).inflate(R.layout.weiboitem,null) ;//给每个 view 的组件 赋值WeiboItemWidget itemWidget = new WeiboItemWidget() ;itemWidget.wbContent = (TextView) convertView.findViewById(R.id.wbtext) ;itemWidget.wbIcon = (ImageView) convertView.findViewById(R.id.wbicon) ;itemWidget.wbTime = (TextView) convertView.findViewById(R.id.wbtime) ;itemWidget.wbTimeImage = (ImageView) convertView.findViewById(R.id.wbimage) ;itemWidget.wbUser = (TextView)convertView.findViewById(R.id.wbuser) ;itemWidget.wbRespose = (TextView)convertView.findViewById(R.id.reposeNum) ;itemWidget.wbComment = (TextView)convertView.findViewById(mentNum) ;itemWidget.wbRepeatImage = (ImageView)convertView.findViewById(R.id.redirecImage) ;itemWidget.wbRepeatImage.setOnClickListener(new WeiboItemListener(context , wb.id)) ;itemWidget.wbCommentImage = (ImageView)convertView.findViewById(mentImage) ;itemWidget.wbCommentImage.setOnClickListener(new WeiboItemListener(context ,wb.id)) ;itemWidget.wbFrom = (TextView) convertView.findViewById(R.id.fromwhere) ;//判断是不是为空if(wb!=null){//每个微博设置 一个idconvertView.setTag(wb.id) ;//为文本赋值itemWidget.wbUser.setText(wb.userInfo.name) ;itemWidget.wbTime.setText(wb.time) ;itemWidget.wbContent.setText(this.setTextHight(wb.content, new String[]{"@","http://","#","@","【"}, new String[]{":"," ","#"," ","】"})) ;itemWidget.wbRespose.setText(wb.repost+"") ;itemWidget.wbComment.setText(ment+"") ;itemWidget.wbFrom.setText(Html.fromHtml("来自：<html>"+wb.source+"</html>")) ;Log.v("otcyan", wb.repeatWeiboInfo+"") ;if(wb.repeatWeiboInfo!=null){Log.v("otcyan", "转发微博的内容："+wb.repeatWeiboInfo.content) ;convertView.findViewById(R.id.repeatlayout).setVisibility(LinearLayout.VISIBLE) ; //设置 布局可见itemWidget.wbRepeatContent = (TextView) convertView.findViewById(R.id.repeatwbcontent) ;itemWidget.wbRepeatContent.setText(this.setTextHight(wb.repeatWeiboInfo.content, new String[]{"@","http://","#","@","【"}, new String[]{":"," ","#"," ","】"})) ;//判断转载微博 是不 是有图片if(!wb.repeatWeiboInfo.imageUrl.equals("")){//加载图片控件itemWidget.wbRepeatImage = (ImageView) convertView.findViewById(R.id.repeatwboicon) ;itemWidget.wbRepeatImage.setVisibility(ImageView.VISIBLE) ; //显示组件//异步加载图片Log.v("转载微博微博的图片地址------->",wb.repeatWeiboInfo.imageUrl) ;//异步加载图片信息//从网上下载 图片 显示 要实现异步加载this.asyncLoadingImage(wb.repeatWeiboInfo.imageUrl, itemWidget.wbRepeatImage) ;}}//为图片赋值itemWidget.wbTimeImage.setImageResource(R.drawable.crown) ;Log.v("otcyan", itemWidget.wbIcon+"") ;//从网上下载 图片 显示 要实现异步加载this.asyncLoadingImage(wb.userInfo.imageUrl, itemWidget.wbIcon) ;Log.v("微博的图片地址------->",wb.imageUrl) ;//用户信息图片显示if(!wb.imageUrl.equals("")){itemWidget.wbImage = (ImageView) convertView.findViewById(R.id.userInfoImage) ;itemWidget.wbImage.setVisibility(ImageView.VISIBLE) ;//显示组件//异步加载图片this.asyncLoadingImage(wb.imageUrl, itemWidget.wbImage) ;}}Log.v("otcyan", "position---------------->"+position) ;Log.v("otcyan", "count=---------------------->"+getCount()) ;if(position>=getCount()-1){//发送消息 更新 组件 显示更多 Message msg = handler.obtainMessage(OtWeibo.MSG_MORE_WEIBO, position) ;handler.sendMessage(msg) ;}else if(position==1){//向上滑动}else {Message msg = new Message() ;msg.what = OtWeibo.MSG_DEL_MORE_WEIBO ;handler.sendMessage(msg) ;}return convertView;}/*** 异步加载图片* @param imageUrl 图片的url路径* @param iv 图片显示 的控件*/public void asyncLoadingImage(String imageUrl , ImageView iv ){//异步加载图片信息//从网上下载 图片 显示 要实现异步加载Drawable drawable = new AsyncImageLoader().loadImage(imageUrl,iv , new ImageCallBack() {public void ImageLoading(Drawable drawable, ImageView imageView) {//更新 图片imageView.setImageDrawable(drawable) ;}}) ;//判断是不是有缓存 if(drawable!=null){//有缓存直接 拿来 iv.setImageDrawable(drawable) ;}}/*** 设置文本高亮* @param text 高亮的内容* @param start 高亮开始的标志* @param end 高亮结束的标志* @return SpannableString*/public SpannableString setTextHight(String text , String start[] , String end[]){SpannableString ss = new SpannableString(text) ;for (int i = 0; i < start.length; i++) {//找到开始的地方 int position = 0 ; //标志读取的位置 int startHight = 0 ; //开始 的位置 int endHight = 0 ;//结束的位置//int count = 0 ; //数组的下标while(position<text.length()){//长度文本长度startHight = text.indexOf(start[i], position) ; //找开始点if(startHight==-1){break ; //没有这个开始符}endHight = text.indexOf(end[i], startHight+1)+1 ;if(endHight==0){//没有结束符break ;}else {position = endHight ;}//高亮 ss.setSpan(new ForegroundColorSpan(Color.BLUE), startHight, endHight, SpannableString.SPAN_EXCLUSIVE_EXCLUSIVE) ;//设置粗斜体ss.setSpan(new StyleSpan(android.graphics.Typeface.BOLD_ITALIC), startHight, endHight, SpannableString.SPAN_EXCLUSIVE_EXCLUSIVE) ;}}return ss ;}}final class WeiboItemListener implements OnClickListener{private Context context ;private String wbid ;public WeiboItemListener(Context context , String wbid){this.wbid = wbid ;this.context = context;}public void onClick(View v) {switch (v.getId()) {case mentImage: //评论Intent intent = new Intent(context, ZfWeiboActivity.class) ;intent.putExtra("wbid", wbid) ;intent.putExtra("from", "0") ;intent.putExtra("flag", "1") ;context.startActivity(intent) ;break;case R.id.redirecImage:intent = new Intent(context, ZfWeiboActivity.class) ;intent.putExtra("wbid", wbid) ;intent.putExtra("from", "0") ;intent.putExtra("flag", "0") ;context.startActivity(intent) ;break ;}}}

这段代码里面有二个可能有点看不懂，一个是高亮 这个方法 如果不能理解可以把它去掉，实现方法有很多种，我这个方法实现比较笨，有较好的方法大家可以贴出来，大家一起交流交流。还有一个是图片的异步加载/缓存模块。我设计这个方法的基本思路：先把ImageView的图片全部从图片缓存里去获取，如果缓存里没有这个图片，那么我们就通过新浪的接口解释出图片的url地址。通过这个地址去下载图片然后保存到缓存里。

缓存的机制：缓存我是通过一个hashmap去保存图片的，key值是图片的网络url地址，value是一个软件引用(SoftReference：最大限度不被垃圾回收机制给回收掉，不怎么懂的去网上可以看下这方面的资料)，当然这个对象必须是一个单例，不然就会不断创建对象，而我们缓存保存在上一个对象中。所以最好的用单例，仔细想下就会明白了。

图片异步加载方法(AsyncImageLoader.java)

package otcyan.otcyan.weibo.servieces;import java.io.IOException;import java.io.InputStream;import java.lang.ref.SoftReference;import .MalformedURLException;import .URL;import java.util.HashMap;import java.util.Map;import .Weibo;import android.graphics.drawable.Drawable;import android.os.Handler;import android.os.Message;import android.util.Log;import android.widget.ImageView;public class AsyncImageLoader {//SoftReference是软引用，是为了更好的为了系统回收变量 这是一个单例 类private static Map<String, SoftReference<Drawable>> imageCache = null; //图片缓存区public AsyncImageLoader(){// imageCache = new HashMap<String, SoftReference<Drawable>>() ;synchronized ("") {if(imageCache==null){imageCache = new HashMap<String, SoftReference<Drawable>>() ;}}}//实现 一个单例 类// public synchronized static AsyncImageLoader getInstance() {// if (mWeiboInstance == null) {// mWeiboInstance = new Weibo();// }// return mWeiboInstance;//}//异步加载图片 public Drawable loadImage(final String imageUrl , final ImageView imageView , final ImageCallBack icb){//从缓存中SoftReference<Drawable> softReference = imageCache.get(imageUrl) ;if(softReference!=null){Log.v("otcyan", "not null") ;Drawable drawable = softReference.get() ;if(drawable != null){//返回缓存中的图片return drawable ;}}//开一个异步去处理图片final Handler handler = new Handler(){public void handleMessage(Message msg) {//回调接口 去更新组件icb.ImageLoading((Drawable)msg.obj, imageView) ;};} ;//开一个线程去下载 图片new Thread(new Runnable() {public void run() {Drawable drawable = AsyncImageLoader.this.loadImage(imageUrl) ;//加入到 缓存中imageCache.put(imageUrl, new SoftReference<Drawable>(drawable)) ;//发送消息 Message msg = handler.obtainMessage(0, drawable) ;handler.sendMessage(msg) ;}}).start() ;//表示没有缓存 返回 的是一个null 值 return null ;}/*** 图片的下载* @param url 图片的url地址* @return 返回图片的drawable对象*/public Drawable loadImage(String url){URL u;InputStream is = null;try {u = new URL(url) ;is = (InputStream)u.getContent() ;} catch (MalformedURLException e) {e.printStackTrace();} catch (IOException e) {e.printStackTrace();}return Drawable.createFromStream(is, "src") ;}}

主界面的类(homeActivity.java)

package com.otcyan.weibo.activity;import java.io.Serializable;import java.util.ArrayList;import java.util.Arrays;import java.util.List;import org.json.JSONException;import otcyan.otcyan.weibo.servieces.ImageCallBack;import otcyan.otcyan.weibo.servieces.MyInfo;import otcyan.otcyan.weibo.servieces.UserInfo;import otcyan.otcyan.weibo.servieces.WeiBoInfo;import otcyan.otcyan.weibo.servieces.WeiboAdapt;import com..AsyncImageLoader;import com..Oauth;import com..OtWeibo;import .Weibo;import .WeiboException;import .WeiboParameters;import android.app.Activity;import android.content.Intent;import android.content.SharedPreferences;import android.content.SharedPreferences.Editor;import android.graphics.drawable.Drawable;import android.os.Bundle;import android.os.Handler;import android.os.Message;import android.util.Log;import android.view.View;import android.view.View.OnClickListener;import android.widget.AdapterView;import android.widget.AdapterView.OnItemClickListener;import android.widget.Button;import android.widget.ImageButton;import android.widget.ImageView;import android.widget.LinearLayout;import android.widget.ListView;import android.widget.TextView;import android.widget.Toast;/*** 所有 的 新浪 数据 显示 在 这个activity上* @author Administrator**/public class HomeActivity extends Activity {private ListView msgList ;private Weibo weibo ;private Oauth oauth ;private TextView showMyName = null ;private Handler handler ;private LinearLayout loadingLayout = null ;private String info = "" ;private List<WeiBoInfo> weiboList = null ;private Button moreText = null ;private int page = 1; //记录显示数据的页数 private int position = 1 ; //listview显示的页面private ImageButton refreshBtn = null ; //刷新页面private ImageView sendMsgView = null ; //图片private ImageView myIcon = null ;//public static int flag = 0 ; //标志 发送微博信息是不是成功 0 表示失败 1 表示成功 主要用来更新界面@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);weibo = Weibo.getInstance() ;oauth = new Oauth(this) ;setContentView(R.layout.homespec) ;msgList = (ListView) findViewById(R.id.Msglist) ;showMyName = (TextView)findViewById(R.id.showName) ;moreText = (Button)findViewById(R.id.loadingmore) ;refreshBtn = (ImageButton) findViewById(R.id.refreshBtn) ;sendMsgView = (ImageView) findViewById(R.id.sendmsg) ;Log.v("otcyan", sendMsgView.toString()) ;myIcon = (ImageView) findViewById(R.id.homemyIcon) ;sendMsgView.setOnClickListener(new OnClickListener() {public void onClick(View v) {//初始化数据HomeActivity.this.page = 1 ;HomeActivity.this.position = 0 ;Intent intent = new Intent(HomeActivity.this,SendMsgActivity.class) ;startActivity(intent) ;}}) ;refreshBtn.setOnClickListener(new OnClickListener() {public void onClick(View v) {//重新加载页面HomeActivity.this.position = 0 ;//第一条HomeActivity.this.page = 1 ;HomeActivity.this.loadFriendList(); //重新HomeActivity.this.loadingLayout.setVisibility(LinearLayout.VISIBLE) ;}}) ;//显示 加载界面 loadingLayout = (LinearLayout) findViewById(R.id.loadingLayout) ;//异步加载自己的数据 handler = new Handler(){public void handleMessage(Message msg) {switch (msg.what) {case OtWeibo.MSG_MYWEIBOINFO://更新组件MyInfo myInfo = (MyInfo) msg.obj ;showMyName.setText(myInfo.name) ;//HomeActivity.this.asyncLoadingImage(myInfo.imageUrl, myIcon) ;break;case OtWeibo.MSG_MORE_WEIBO :moreText.setVisibility(TextView.VISIBLE) ; //显示可见HomeActivity.this.position = (Integer)msg.obj ;moreText.setOnClickListener(new OnClickListener() {public void onClick(View v) {++HomeActivity.this.page ;//重新加载 数据 HomeActivity.this.loadFriendList() ;HomeActivity.this.loadingLayout.setVisibility(LinearLayout.VISIBLE) ; }}) ;break ;case OtWeibo.MSG_DEL_MORE_WEIBO :moreText.setVisibility(TextView.GONE) ; //显示不可见break ;case OtWeibo.MSG_WEIBO_DATA_DONE://填充数据WeiboAdapt adapter = new WeiboAdapt(weiboList, HomeActivity.this , handler) ;//数据显示msgList.setAdapter(adapter) ;msgList.setSelection(position) ;msgList.setOnItemClickListener(new OnItemClickListener() {public void onItemClick(AdapterView<?> arg0, View view,int arg2, long arg3) {//当点击 每一个item的项时UserInfo userInfo = null ;String id = (String)view.getTag() ;for(WeiBoInfo w: weiboList){if(w.id.equals(id)){userInfo = w.userInfo ;break ;}}if(userInfo==null){Toast.makeText(HomeActivity.this, "数据传送失败", Toast.LENGTH_LONG).show() ;return ;}Intent intent = new Intent(HomeActivity.this,WeiboItemActivity.class) ;intent.putExtra("userinfo", (Serializable)userInfo) ;Bundle bundle = new Bundle() ;bundle.putString("id", id) ;intent.putExtras(bundle) ;startActivity(intent) ;}}) ;loadingLayout.setVisibility(LinearLayout.GONE) ; //显示加载对话框Toast.makeText(HomeActivity.this,"微博已更新", Toast.LENGTH_LONG).show() ;break ;default:break;}};} ;//加载自己的信息new Thread(new Runnable() {public void run() {loadMyInfo() ;}}).start() ;loadFriendList();loadCare() ;loadingLayout.setVisibility(LinearLayout.VISIBLE) ; //显示加载对话框}/*** 加载自己的信息 */public void loadMyInfo(){//加载 自己信息 先从sharedPreferencer拿数据 如果 有数据直接加载 没有则从网络上下载 SharedPreferences preferences = this.getSharedPreferences(OtWeibo.SHARED_OAUTH, 0) ;try {MyInfo myInfo = oauth.getMyInfo(weibo , preferences.getString(OtWeibo.UID, null)) ;//更新组件Message msg = handler.obtainMessage(OtWeibo.MSG_MYWEIBOINFO,myInfo) ;handler.sendMessage(msg) ;} catch (WeiboException e) {e.printStackTrace();} catch (JSONException e) {e.printStackTrace();}}/*** 加载 好友 的所有 数据 */private void loadFriendList() {//异步得到 weiboinfo信息new Thread(new Runnable() {public void run() {try {info = oauth.getFriendsTimeLineToString(weibo,page) ;Log.v("otcyan", info) ;weiboList = oauth.getFriendsTimeLineToList(info) ;//发一个通知Message msg = new Message() ;msg.what = OtWeibo.MSG_WEIBO_DATA_DONE ;handler.sendMessage(msg) ;} catch (JSONException e) {e.printStackTrace();} catch (WeiboException e) {e.printStackTrace();}}}).start() ;}/*** 获取当前登录用户的关注信息*/private void loadCare() {//异步得到 weiboinfo信息new Thread(new Runnable() {public void run() {Oauth oauth = new Oauth(HomeActivity.this) ;Weibo weibo = Weibo.getInstance() ;WeiboParameters params = new WeiboParameters() ;params.add("source", OtWeibo.CONSUMER_KEY) ;//获取当前用户的idSharedPreferences preferences = HomeActivity.this.getSharedPreferences(OtWeibo.SHARED_OAUTH, 0) ;String uid = preferences.getString(OtWeibo.UID, null) ; //自己的idparams.add("uid", uid) ;params.add("count", 3000+"") ;String url = Weibo.SERVER+"friendships/friends/ids.json" ;String info = null ;try {info = oauth.getCareId(weibo, params, url) ;info = info.substring(1, info.length()-1) ; Log.v("home", "info:"+info) ;} catch (WeiboException e) {e.printStackTrace();} catch (JSONException e) {e.printStackTrace();}//复制到集合中OtWeibo.uids = new ArrayList<String>(Arrays.asList(info.split(","))) ;}}).start() ;}/*** 异步加载图片* @param imageUrl* @param iv*/public void asyncLoadingImage(String imageUrl , ImageView iv ){//异步加载图片信息//从网上下载 图片 显示 要实现异步加载Drawable drawable = new AsyncImageLoader().loadImage(imageUrl,iv , new ImageCallBack() {public void ImageLoading(Drawable drawable, ImageView imageView) {//更新 图片imageView.setImageDrawable(drawable) ;}}) ;//判断是不是有缓存 if(drawable!=null){//有缓存直接 拿来 iv.setImageDrawable(drawable) ;}}}