仿QQ空间动态界面分享
先看看效果:
用极少的代码实现了 动态详情 及 二级评论 的 数据获取与处理 和 UI显示与交互,并且高解耦、高复用、高灵活。
动态列表界面MomentListFragment支持 下拉刷新与上拉加载 和 模糊搜索,反复快速滑动仍然非常流畅。
缓存机制使得数据可在启动界面后瞬间加载完成。
动态详情界面MomentActivity支持 (取消)点赞、(删除)评论、点击姓名跳到个人详情 等。
只有1张图片时图片放大显示,超过1张则按九宫格显示。
用到的CommentContainerView和MomentView都是独立的组件,既可单独使用,也可用于ListView或添加至其它ViewGroup等。
CommentContainerView复用
CommentContainerView.java
setOnCommentClickListener : 设置点击评论监听 createView : 创建View bindView : 绑定数据并显示View setMaxShowCount : 设置最多显示数量,超过则折叠 setComment : 设置评论 addCommentView : 添加评论View
package apijson.demo.client.view; import android.annotation.SuppressLint; import android.app.Activity; import android.content.res.Resources; import android.view.LayoutInflater; import android.view.View; import android.view.View.OnClickListener; import android.view.View.OnLongClickListener; import android.view.ViewGroup; import java.util.ArrayList; import java.util.List; import apijson.demo.client.R; import apijson.demo.client.model.CommentItem; import apijson.demo.client.view.CommentView.OnCommentClickListener; import zuo.biao.library.base.BaseView; import zuo.biao.library.util.Log; import zuo.biao.library.util.StringUtil; /**评论容器 * @author Lemon * @use CommentContainerView commentContainerView = new CommentContainerView(context, inflater); adapter中使用convertView = commentContainerView.getView();//[具体见.DemoAdapter] 或 其它类中使用 containerView.addView(commentContainerView.getConvertView()); commentContainerView.bindView(data); commentContainerView.setOnClickPictureListener(onClickPictureListener);//非必需 commentContainerView.setOnDataChangedListener(onDataChangedListener);data = commentContainerView.getData();//非必需 commentContainerView.setOnClickListener(onClickListener);//非必需 ... */ public class CommentContainerView extends BaseView<List<CommentItem>> { private static final String TAG = "CommentContainerView"; private OnCommentClickListener onCommentClickListener; /**设置点击评论监听 * @param onCommentClickListener */ public void setOnCommentClickListener(OnCommentClickListener onCommentClickListener) { this.onCommentClickListener = onCommentClickListener; } public CommentContainerView(Activity context, Resources resources) { super(context, resources); } private LayoutInflater inflater; public ViewGroup llCommentContainerViewContainer; public View tvCommentContainerViewMore; @SuppressLint("InflateParams") @Override public View createView(LayoutInflater inflater) { this.inflater = inflater; convertView = inflater.inflate(R.layout.comment_container_view, null); llCommentContainerViewContainer = findViewById(R.id.llCommentContainerViewContainer); tvCommentContainerViewMore = findViewById(R.id.tvCommentContainerViewMore); return convertView; } @Override public void bindView(List<CommentItem> list){ llCommentContainerViewContainer.setVisibility(list == null || list.isEmpty() ? View.GONE : View.VISIBLE); if (list == null) { Log.w(TAG, "bindView data_ == null >> data_ = new List<CommentItem>();"); list = new ArrayList<CommentItem>(); } this.data = list; // 评论 setComment(list); } private int maxShowCount = 3; /**设置最多显示数量,超过则折叠 * @param maxShowCount <= 0 ? 显示全部 : 超过则折叠 */ public void setMaxShowCount(int maxShowCount) { this.maxShowCount = maxShowCount; } /**设置评论 * @param list */ public void setComment(List<CommentItem> list) { int count = list == null ? 0 : list.size(); boolean showMore = maxShowCount > 0 && count > maxShowCount; tvCommentContainerViewMore.setVisibility(showMore ? View.VISIBLE : View.GONE); llCommentContainerViewContainer.removeAllViews(); llCommentContainerViewContainer.setVisibility(count <= 0 ? View.GONE : View.VISIBLE); if (count > 0) { if (showMore) { list = list.subList(0, maxShowCount); } for (int i = 0; i < list.size(); i++) { addCommentView(i, list.get(i)); } } } /**添加评论 * @param index * @param comment */ @SuppressLint("InflateParams") private void addCommentView(final int index, final CommentItem comment) { if (comment == null) { Log.e(TAG, "addCommentView comment == null >> return; "); return; } String content = StringUtil.getTrimedString(comment.getComment().getContent()); if (StringUtil.isNotEmpty(content, true) == false) { Log.e(TAG, "addCommentView StringUtil.isNotEmpty(content, true) == false >> return; "); return; } CommentTextView commentView = (CommentTextView) inflater.inflate(R.layout.comment_item, null); commentView.setView(comment); if (onCommentClickListener != null) { commentView.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { onCommentClickListener.onCommentClick(comment, position, index, false); } }); commentView.setOnLongClickListener(new OnLongClickListener() { @Override public boolean onLongClick(View v) { onCommentClickListener.onCommentClick(comment, position, index, true); return true; } }); } llCommentContainerViewContainer.addView(commentView); } }
comment_container_view.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" style="@style/ll_vertical_match_wrap" > <LinearLayout android:id="@+id/llCommentContainerViewContainer" style="@style/ll_vertical_match_wrap" > </LinearLayout> <TextView android:id="@+id/tvCommentContainerViewMore" style="@style/text_small_blue" android:layout_width="match_parent" android:background="@drawable/bg_item_to_alpha" android:gravity="left|center_vertical" android:paddingBottom="4dp" android:paddingTop="4dp" android:text="查看全部" /> </LinearLayout>
MomentView复用
MomentView.java
setOnPictureClickListener : 设置点击图片监听 createView : 创建View bindView : 绑定数据并显示View setPraise : 设置点赞 setShowComment : 设置是否显示评论 getShowComment : 获取是否显示评论的设置 setComment : 设置评论 setPicture : 设置九宫格图片 toComment : 跳转到所有评论界面 getData : 获取动态绑定的数据 isLoggedIn : 判断是否已登录,未登录则跳到登录界面 praise : (取消)点赞 onDialogButtonClick : 处理对话框返回结果,比如删除动态 onHttpResponse : 处理Http请求的返回结果,比如点赞 onClick : 处理点击事件,比如点击内容跳到动态详情界面 onItemClick : 处理点击图片的事件,默认是查看大图,可setOnPictureClickListener接管处理
package apijson.demo.client.view; import android.annotation.SuppressLint; import android.app.Activity; import android.content.res.Resources; import android.view.LayoutInflater; import android.view.View; import android.view.View.OnClickListener; import android.view.ViewGroup; import android.widget.AdapterView; import android.widget.AdapterView.OnItemClickListener; import android.widget.GridView; import android.widget.ImageView; import android.widget.LinearLayout.LayoutParams; import android.widget.TextView; import java.util.ArrayList; import java.util.List; import apijson.demo.client.R; import apijson.demo.client.activity_fragment.LoginActivity; import apijson.demo.client.activity_fragment.MomentActivity; import apijson.demo.client.activity_fragment.UserActivity; import apijson.demo.client.activity_fragment.UserListActivity; import apijson.demo.client.application.APIJSONApplication; import apijson.demo.client.model.CommentItem; import apijson.demo.client.model.Moment; import apijson.demo.client.model.MomentItem; import apijson.demo.client.model.User; import apijson.demo.client.util.HttpRequest; import apijson.demo.client.view.CommentView.OnCommentClickListener; import zuo.biao.apijson.JSONResponse; import zuo.biao.library.base.BaseView; import zuo.biao.library.manager.CacheManager; import zuo.biao.library.manager.HttpManager.OnHttpResponseListener; import zuo.biao.library.model.Entry; import zuo.biao.library.ui.AlertDialog; import zuo.biao.library.ui.AlertDialog.OnDialogButtonClickListener; import zuo.biao.library.ui.GridAdapter; import zuo.biao.library.ui.WebViewActivity; import zuo.biao.library.util.ImageLoaderUtil; import zuo.biao.library.util.Log; import zuo.biao.library.util.ScreenUtil; import zuo.biao.library.util.StringUtil; import zuo.biao.library.util.TimeUtil; /**动态 * @author Lemon * @use MomentView momentView = new MomentView(context, inflater); adapter中使用convertView = momentView.getView();//[具体见.DemoAdapter] 或 其它类中使用 containerView.addView(momentView.getConvertView()); momentView.bindView(data); momentView.setOnPictureClickListener(onPictureClickListener);//非必需 momentView.setOnDataChangedListener(onDataChangedListener);data = momentView.getData();//非必需 momentView.setOnClickListener(onClickListener);//非必需 ... */ public class MomentView extends BaseView<MomentItem> implements OnClickListener , OnHttpResponseListener, OnDialogButtonClickListener, OnItemClickListener { private static final String TAG = "MomentView"; public interface OnPictureClickListener { void onClickPicture(int momentPosition, MomentView momentView, int pictureIndex); } private OnPictureClickListener onPictureClickListener; /**设置点击图片监听 * @param onPictureClickListener */ public void setOnPictureClickListener(OnPictureClickListener onPictureClickListener) { this.onPictureClickListener = onPictureClickListener; } public MomentView(Activity context, Resources resources) { super(context, resources); } //UI显示区(操作UI,但不存在数据获取或处理代码,也不存在事件监听代码)<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< private LayoutInflater inflater; public View llMomentViewContainer; public ImageView ivMomentViewHead; public TextView tvMomentViewName; public TextView tvMomentViewStatus; public TextView tvMomentViewContent; public GridView gvMomentView; public TextView tvMomentViewDate; public ImageView ivMomentViewPraise; public ImageView ivMomentViewComment; public ViewGroup llMomentViewPraise; public PraiseTextView tvMomentViewPraise; public View vMomentViewDivider; public ViewGroup llMomentViewCommentContainer; @SuppressLint("InflateParams") @Override public View createView(LayoutInflater inflater) { this.inflater = inflater; convertView = inflater.inflate(R.layout.moment_view, null); llMomentViewContainer = findViewById(R.id.llMomentViewContainer); ivMomentViewHead = findViewById(R.id.ivMomentViewHead, this); tvMomentViewName = findViewById(R.id.tvMomentViewName, this); tvMomentViewStatus = findViewById(R.id.tvMomentViewStatus, this); tvMomentViewContent = findViewById(R.id.tvMomentViewContent, this); gvMomentView = findViewById(R.id.gvMomentView); tvMomentViewDate = findViewById(R.id.tvMomentViewDate); ivMomentViewPraise = findViewById(R.id.ivMomentViewPraise, this); ivMomentViewComment = findViewById(R.id.ivMomentViewComment, this); llMomentViewPraise = findViewById(R.id.llMomentViewPraise, this); tvMomentViewPraise = findViewById(R.id.tvMomentViewPraise, this); vMomentViewDivider = findViewById(R.id.vMomentViewDivider); llMomentViewCommentContainer = findViewById(R.id.llMomentViewCommentContainer); return convertView; } private User user; private Moment moment; private long momentId; private long userId; private boolean isCurrentUser; private int status; public int getStatus() { return status; } @Override public void bindView(MomentItem data_){ this.data = data_; llMomentViewContainer.setVisibility(data == null ? View.GONE : View.VISIBLE); if (data == null) { Log.w(TAG, "bindView data == null >> return;"); return; } this.user = data.getUser(); this.moment = data.getMoment(); this.momentId = moment.getId(); this.userId = moment.getUserId(); this.isCurrentUser = APIJSONApplication.getInstance().isCurrentUser(moment.getUserId()); this.status = data.getMyStatus(); ImageLoaderUtil.loadImage(ivMomentViewHead, user.getHead()); tvMomentViewName.setText(StringUtil.getTrimedString(user.getName())); tvMomentViewStatus.setText(StringUtil.getTrimedString(data.getStatusString())); tvMomentViewStatus.setVisibility(isCurrentUser ? View.VISIBLE : View.GONE); tvMomentViewContent.setVisibility(StringUtil.isNotEmpty(moment.getContent(), true) ? View.VISIBLE : View.GONE); tvMomentViewContent.setText(StringUtil.getTrimedString(moment.getContent())); tvMomentViewDate.setText(TimeUtil.getSmartDate(moment.getDate())); // 图片 setPicture(moment.getPictureList()); // 点赞 setPraise(data.getIsPraised(), data.getUserList()); // 评论 setComment(data.getCommentItemList()); vMomentViewDivider.setVisibility(llMomentViewPraise.getVisibility() == View.VISIBLE && llMomentViewCommentContainer.getVisibility() == View.VISIBLE ? View.VISIBLE : View.GONE); } /**设置点赞 * @param joined * @param list */ private void setPraise(boolean joined, List<User> list) { ivMomentViewPraise.setImageResource(joined ? R.drawable.praised : R.drawable.praise); llMomentViewPraise.setVisibility(list == null || list.isEmpty() ? View.GONE : View.VISIBLE); if (llMomentViewPraise.getVisibility() == View.VISIBLE) { tvMomentViewPraise.setView(list); } } private boolean showComment = true; public void setShowComment(boolean showComment) { this.showComment = showComment; } public boolean getShowComment() { return showComment; } public CommentContainerView commentContainerView; /**设置评论 * @param list */ public void setComment(List<CommentItem> list) { llMomentViewCommentContainer.setVisibility(showComment == false || list == null || list.isEmpty() ? View.GONE : View.VISIBLE); if (llMomentViewCommentContainer.getVisibility() != View.VISIBLE) { Log.i(TAG, "setComment llMomentViewCommentContainer.getVisibility() != View.VISIBLE >> return;"); return; } if (commentContainerView == null) { commentContainerView = new CommentContainerView(context, resources); llMomentViewCommentContainer.removeAllViews(); llMomentViewCommentContainer.addView(commentContainerView.createView(inflater)); commentContainerView.setOnCommentClickListener(new OnCommentClickListener() { @Override public void onCommentClick(CommentItem item, int position, int index, boolean isLong) { toComment(item, true); } }); commentContainerView.tvCommentContainerViewMore.setOnClickListener(this); commentContainerView.setMaxShowCount(5); } commentContainerView.bindView(list); } private GridAdapter adapter; /**设置图片 * @param pictureList */ private void setPicture(List<String> pictureList) { List<Entry<String, String>> keyValueList = new ArrayList<Entry<String, String>>(); if (pictureList != null) { for (String picture : pictureList) { keyValueList.add(new Entry<String, String>(picture, null)); } } int pictureNum = keyValueList.size(); gvMomentView.setVisibility(pictureNum <= 0 ? View.GONE : View.VISIBLE); if (pictureNum <= 0) { Log.i(TAG, "setList pictureNum <= 0 >> lvModel.setAdapter(null); return;"); adapter = null; gvMomentView.setAdapter(null); return; } gvMomentView.setNumColumns(pictureNum <= 1 ? 1 : 3); if (adapter == null) { adapter = new GridAdapter(context).setHasName(false); gvMomentView.setAdapter(adapter); } adapter.refresh(keyValueList); gvMomentView.setOnItemClickListener(this); final int gridViewHeight = (int) (ScreenUtil.getScreenSize(context)[0] - convertView.getPaddingLeft() - convertView.getPaddingRight() - getDimension(R.dimen.moment_view_head_width)); try { if (pictureNum >= 7) { gvMomentView.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, gridViewHeight)); } else if (pictureNum >= 4) { gvMomentView.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, (gridViewHeight*2)/3)); } else if (pictureNum >= 2) { gvMomentView.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, gridViewHeight / 3)); } else { gvMomentView.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT)); } } catch (Exception e) { Log.e(TAG, " setPictureGrid try int gridViewHeight;...>> catch" + e.getMessage()); } } /**跳转到所有评论界面 * @param isToComment */ private void toComment(boolean isToComment) { toComment(null, isToComment); } /**跳转到所有评论界面 * @param commentItem * @param isToComment comment有效时为true */ private void toComment(CommentItem commentItem, boolean isToComment) { if (commentItem == null) { commentItem = new CommentItem(); } toActivity(MomentActivity.createIntent(context, momentId, isToComment , commentItem.getId(), commentItem.getUser().getId(), commentItem.getUser().getName())); } //UI显示区(操作UI,但不存在数据获取或处理代码,也不存在事件监听代码)>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> //Data数据区(存在数据获取或处理代码,但不存在事件监听代码)<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< @Override public MomentItem getData() {//bindView(null)不会使data == null return llMomentViewContainer.getVisibility() == View.VISIBLE ? data : null; } /**判断是否已登录,如果未登录则弹出登录界面 * @return */ private boolean isLoggedIn() { boolean isLoggedIn = APIJSONApplication.getInstance().isLoggedIn(); if (isLoggedIn == false) { context.startActivity(LoginActivity.createIntent(context)); context.overridePendingTransition(R.anim.bottom_push_in, R.anim.hold); } return isLoggedIn; } /**点赞 * @param toPraise */ public void praise(boolean toPraise) { if (data == null || toPraise == data.getIsPraised()) { Log.e(TAG, "praiseWork toPraise == moment.getIsPraise() >> return;"); return; } // setPraise(toPraise, data.getPraiseCount() + (toPraise ? 1 : -1)); HttpRequest.praiseMoment(momentId, toPraise, toPraise ? HTTP_PRAISE : HTTP_CANCEL_PRAISE, this); } //Data数据区(存在数据获取或处理代码,但不存在事件监听代码)>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> //Event事件监听区(只要存在事件监听代码就是)<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< @Override public void onDialogButtonClick(int requestCode, boolean isPositive) { if (isPositive && data != null) { data.setMyStatus(MomentItem.STATUS_DELETING); bindView(data); HttpRequest.deleteMoment(moment.getId(), HTTP_DELETE, this); } } public static final int HTTP_PRAISE = 1; public static final int HTTP_CANCEL_PRAISE = 2; public static final int HTTP_DELETE = 3; @Override public void onHttpResponse(int requestCode, String result, Exception e) { if (data == null) { Log.e(TAG, "onHttpResponse data == null >> return;"); return; } JSONResponse response = new JSONResponse(result); JSONResponse response2 = response.getJSONResponse(Moment.class.getSimpleName()); boolean isSucceed = JSONResponse.isSucceed(response2); switch (requestCode) { case HTTP_PRAISE: case HTTP_CANCEL_PRAISE: if (isSucceed) { data.setIsPraised(requestCode == HTTP_PRAISE); bindView(data); } else { showShortToast((requestCode == HTTP_PRAISE ? "点赞" : "取消点赞") + "失败,请检查网络后重试"); } break; case HTTP_DELETE: showShortToast(isSucceed ? R.string.delete_succeed : R.string.delete_failed); //只对adapter.getCount()有影响。目前是隐藏的,不需要通知,也不需要刷新adapter,用户手动刷新后自然就更新了。 if (isSucceed) { bindView(null); status = MomentItem.STATUS_DELETED; if (onDataChangedListener != null) { onDataChangedListener.onDataChanged(); } CacheManager.getInstance().remove(MomentItem.class, "" + momentId); } else { data.setMyStatus(MomentItem.STATUS_NORMAL); bindView(data); } break; } } @Override public void onClick(View v) { if (data == null) { return; } if (status == MomentItem.STATUS_PUBLISHING) { showShortToast(R.string.publishing); return; } switch (v.getId()) { case R.id.ivMomentViewHead: case R.id.tvMomentViewName: toActivity(UserActivity.createIntent(context, userId)); break; case R.id.tvMomentViewStatus: if (status == MomentItem.STATUS_NORMAL) { new AlertDialog(context, "", "删除动态", true, 0, this).show(); } break; case R.id.tvMomentViewContent: case R.id.tvCommentContainerViewMore: toComment(false); break; case R.id.tvMomentViewPraise: case R.id.llMomentViewPraise: toActivity(UserListActivity.createIntent(context, data.getPraiseUserIdList()) .putExtra(UserListActivity.INTENT_TITLE, "点赞的人")); break; default: if (isLoggedIn() == false) { return; } switch (v.getId()) { case R.id.ivMomentViewPraise: praise(! data.getIsPraised()); break; case R.id.ivMomentViewComment: toComment(true); break; default: break; } break; } } @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { if (status == MomentItem.STATUS_PUBLISHING) { showShortToast(R.string.publishing); return; } if (onPictureClickListener != null) { onPictureClickListener.onClickPicture(this.position, this, position); } else { toActivity(WebViewActivity.createIntent(context, null , adapter == null ? null : adapter.getItem(position).getKey())); } } //Event事件监听区(只要存在事件监听代码就是)>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> }
moment_view.xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" style="@style/match_wrap" android:descendantFocusability="blocksDescendants" > <LinearLayout android:id="@+id/llMomentViewContainer" style="@style/ll_horizontal_match_wrap" android:background="@color/white" android:gravity="top" android:padding="10dp" > <RelativeLayout android:id="@+id/rlMomentViewItemHead" android:layout_width="@dimen/moment_view_head_width" android:layout_height="@dimen/moment_view_head_height" android:paddingRight="@dimen/moment_view_head_padding_right" > <ImageView android:background="@color/alpha_3" android:id="@+id/ivMomentViewHead" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" /> </RelativeLayout> <LinearLayout style="@style/ll_vertical_match_wrap" android:layout_below="@+id/rlMomentViewItemHead" android:layout_toRightOf="@+id/rlMomentViewItemHead" android:gravity="left" > <LinearLayout style="@style/ll_horizontal_match_wrap" android:layout_height="match_parent" > <TextView android:id="@+id/tvMomentViewName" style="@style/text_small_blue" android:layout_width="match_parent" android:layout_weight="1" android:background="@drawable/bg_item_to_alpha" android:gravity="left" android:text="Name" /> <TextView android:id="@+id/tvMomentViewStatus" style="@style/text_small_blue" android:background="@drawable/bg_item_to_alpha" android:text="发布中" /> </LinearLayout> <TextView android:id="@+id/tvMomentViewContent" style="@style/text_small_black" android:layout_width="match_parent" android:layout_marginTop="5dp" android:background="@drawable/bg_item_to_alpha" android:gravity="left|top" android:maxLines="8" android:paddingBottom="5dp" android:text="This is a content..." /> <apijson.demo.client.view.EmptyEventGridView android:id="@+id/gvMomentView" style="@style/wrap_wrap" android:focusable="false" android:horizontalSpacing="4dp" android:listSelector="@drawable/bg_item_to_alpha" android:numColumns="3" android:paddingTop="4dp" android:scrollbars="none" android:stretchMode="columnWidth" android:verticalSpacing="4dp" /> <LinearLayout style="@style/ll_horizontal_match_wrap" android:layout_height="wrap_content" android:layout_marginTop="5dp" > <TextView android:id="@+id/tvMomentViewDate" style="@style/text_small_black" android:layout_width="match_parent" android:layout_weight="1" android:gravity="left" android:text="2015年12月" /> <ImageView android:id="@+id/ivMomentViewPraise" style="@style/img_btn" android:layout_marginRight="18dp" android:background="@drawable/bg_item_to_alpha" android:src="@drawable/praise" /> <ImageView android:id="@+id/ivMomentViewComment" style="@style/img_btn" android:background="@drawable/bg_item_to_alpha" android:src="@drawable/comment" /> </LinearLayout> <LinearLayout style="@style/ll_vertical_match_wrap" android:layout_marginTop="5dp" android:background="@color/alpha_1" android:paddingLeft="8dp" android:paddingRight="8dp" > <LinearLayout android:id="@+id/llMomentViewPraise" style="@style/ll_horizontal_match_wrap" android:layout_height="wrap_content" android:layout_marginBottom="4dp" android:layout_marginTop="4dp" android:background="@drawable/bg_item_to_alpha" android:gravity="top" > <ImageView android:layout_width="20dp" android:layout_height="20dp" android:scaleType="fitXY" android:src="@drawable/praise" /> <apijson.demo.client.view.PraiseTextView android:id="@+id/tvMomentViewPraise" style="@style/text_small_blue" android:background="@drawable/bg_item_to_alpha" android:gravity="left|top" android:lineSpacingExtra="4dp" android:text="等觉得很赞" /> </LinearLayout> <View android:id="@+id/vMomentViewDivider" style="@style/divider_horizontal_1px" /> <LinearLayout android:id="@+id/llMomentViewCommentContainer" style="@style/ll_vertical_match_wrap" android:paddingBottom="4dp" android:paddingTop="4dp" > </LinearLayout> </LinearLayout> </LinearLayout> </LinearLayout> </RelativeLayout>
由于这个项目使用了ZBLibrary快速开发框架,所以实现仿QQ空间和微信朋友圈的这种复杂界面只用了极少的代码,并且高解耦、高复用、高灵活。
服务端是用APIJSON(Server)工程快速搭建的,客户端App和服务端通过APIJSON-JSON传输结构协议通信,非常方便灵活,省去了大量的接口和文档!
今年RxJava特别火,在北京市场几乎是必备技能,所以我还把这个项目做了个RxJava版本,欢迎交流和指教。
实现UI的Java类:
MomentListFragment 395行 动态列表的获取和显示 MomentActivity 616行 动态和评论列表的获取、显示和交互(评论和删除评论等) MomentAdapter 67行 动态列表的显示 CommentAdapter 82行 评论列表的显示 MomentView 495行 动态的显示和交互(各种跳转、点赞、删除等) EmptyEventGridView 56行 动态里图片的显示和交互(触摸空白处传递触摸事件到内层View) PraiseTextView 129行 动态里点赞用户的显示和交互(点击姓名跳到个人详情,点击整体跳到点赞的用户列表界面) CommentView 153行 一级评论(头像、姓名、内容)的显示和交互(回复、删除等),添加二级评论列表 CommentContainerView 172行 二级评论列表的显示和交互(查看全部等) CommentTextView 122行 二级评论(姓名、内容)的显示和交互(回复、删除等)
实现UI的XML布局:
moment_activity 47行 动态和评论列表的显示 moment_view 148行 动态的显示 comment_view 87行 一级评论(头像、姓名、内容)的显示 comment_container_view 20行 二级评论列表的显示 comment_item 10行 二级评论(姓名、内容)的显示
为什么没有实现MomentListFragment对应的XML布局?
因为MomentListFragment继承BaseHttpListFragment,内部用XListView作为缺省列表View,所以可以不用自己实现了。
实现数据获取、提交和处理的Java类:
HttpRequest +175行 数据的获取和提交(getMoment,...,deleteComment) CommentUtil 140行 单层评论和和二级评论的处理 Comment 56行 评论数据 CommentItem 99行 评论的显示和交互数据 Moment 43行 动态数据 MomentItem 272行 动态的显示和交互数据 User 103行 用户数据
(注:未列出的代码文件要么和动态无关,要么APIJSON或ZBLibrary已提供。server.model里的类由服务端提供)
仿QQ空间和微信朋友圈,高解耦高复用高灵活
下载试用(测试服务器地址:139.196.140.118:8080)
源码及文档(记得给个Star哦)
https://github.com/TommyLemon/APIJSON
仿QQ空间动态界面分享的更多相关文章
- 仿QQ空间和微信朋友圈,高解耦高复用高灵活
先看看效果: 用极少的代码实现了 动态详情 及 二级评论 的 数据获取与处理 和 UI显示与交互,并且高解耦.高复用.高灵活. 动态列表界面MomentListFragment支持 下拉刷新与上拉加载 ...
- Fragment,仿QQ空间
转载请注明出处:http://blog.csdn.net/yangyu20121224/article/details/9023451 在今天的这篇文章当中,我依然会以实战加理论结合 ...
- JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果
JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果 今天是2014年第一篇博客是关于类似于我们的qq空间长图片展示效果,因为一张很长的图片不可能全部把他展示出来,所以外层用了一个容器给他一个高度,超 ...
- QQ空间动态爬虫
作者:虚静 链接:https://zhuanlan.zhihu.com/p/24656161 来源:知乎 著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 先说明几件事: 题目的意 ...
- iOS开发UI篇—模仿ipad版QQ空间登录界面
iOS开发UI篇—模仿ipad版QQ空间登录界面 一.实现和步骤 1.一般ipad项目在命名的时候可以加一个HD,标明为高清版 2.设置项目的文件结构,分为home和login两个部分 3.登陆界面的 ...
- Html - 仿QQ空间右下角工具浮动块
仿QQ空间右下角工具浮动块 <style type="text/css"> .cy-tp-area>.cy-tp-fixbtn>.cy-tp-text { ...
- 每日技术总结:jquery datetimepicker,微博QQ好友QQ空间微信等分享接口
前言: 1.jquery datetimepicker 今天遇到一个日期控件格式的问题,默认选中显示的并不是设定的值,而是当天的日期.于是去查了一遍文档. 参考文章:jquery datetimepi ...
- iOS传感器集锦、飞机大战、开发调试工具、强制更新、Swift仿QQ空间头部等源码
iOS精选源码 飞机大作战 MUPhotoPreview -简单易用的图片浏览器 LLDebugTool是一款针对开发者和测试者的调试工具,它可以帮... 多个UIScrollView.UITable ...
- 仿QQ空间根据位置弹出PopupWindow显示更多操作效果
我们打开QQ空间的时候有个箭头按钮点击之后弹出PopupWindow会根据位置的变化显示在箭头的上方还是下方,比普通的PopupWindow弹在屏幕中间显示好看的多. 先看QQ空间效果图: ...
随机推荐
- 关于wxpython多线程研究包括(import Publisher错误研究)
作为一个自动化测试人员,开发基本的应用桌面程序是必须的!最近在研究wxpython相关知识,目前看到多线程一块,发现官方文档介绍说:"在线程中不能修改修改窗口属性!",但是实际情况 ...
- 九度oj1163题
题目描述: 输入一个整数n(2<=n<=10000),要求输出所有从1到这个整数之间(不包括1和这个整数)个位为1的素数,如果没有则输出-1. 输入: 输入有多组数据. 每组一行,输入n. ...
- 学习ASP.NET MVC(十一)——分页
在这一篇文章中,我们将学习如何在MVC页面中实现分页的方法.分页功能是一个非常实用,常用的功能,当数据量过多的时候,必然要使用分页.在今天这篇文章中,我们学习如果在MVC页面中使用PagedList. ...
- Spring 容器可以在自动装配相互协作的 bean 之间的关系,使用autowire属性定义指定自动装配模式。
使用setter方法java public class TextEditor { private SpellChecker spellChecker; public void setSpellChec ...
- wireshark过滤规则
WireShark过滤语法 1.过 滤IP,如来源IP或者目标IP等于某个IP 例子:ip.src eq 192.168.1.107 or ip.dst eq 192.168.1.107或者ip.ad ...
- PHP流程管理,堪比小小程序
这个流程管理是从用户登录界面开始,然后提交申请,页面逐级审核通过.这个做起来其实挺简单,只是在某些逻辑方面需要 好好考虑一下. 登录页面就不再多说了,如果要存session的话,我们可以建一个假的登录 ...
- java 文件操作(二)---Files和Path
自从java 7以来,引入了FIles类和Path接口.他们两封装了用户对文件的所有可能的操作,相比于java 1的File类来说,使用起来方便很多.但是其实一些本质的操作还是很类似的.主要需要知道的 ...
- mongoose简单使用样例
新建文件 app.js 内容如下: var mongoose = require('mongoose') , Schema = mongoose.Schema; mongoose.connect('m ...
- CoreCLR源码探索(五) GC内存收集器的内部实现 调试篇
在上一篇中我分析了CoreCLR中GC的内部处理, 在这一篇我将使用LLDB实际跟踪CoreCLR中GC,关于如何使用LLDB调试CoreCLR的介绍可以看: 微软官方的文档,地址 我在第3篇中的介绍 ...
- 不使用回调函数的ajax请求实现(async和await简化回调函数嵌套)
在常规的服务器端程序设计中, 比如说爬虫程序, 发送http请求的过程会使整个执行过程阻塞,直到http请求响应完成代码才会继续执行, 以php为例子 $url = "http://www. ...