Android社交类APP动态详情代码实现通用模板
2018-01-04 00:00
453 查看
Android社交类APP动态详情代码实现通用模板
Android平台上一些比较流行的社交类APP比如微信、陌陌等,都有动态详情页,在该页面,用户发表的动态详情,好友可以发起评论、点赞等等。这种设计在微信和陌陌上大同小异。我自己写了一个较为通用的模板,记下作为备忘和参考,更多更丰富的内容可据此深入定制和开发。
思路:整体是一个ListView实现,ListView添加一个header,作为该用户发送的动态详情呈现页面,然后在ListView下面的item里面是该用户的好友们发表的评论等等。
ListView下方是一个单独的布局,该布局放置一个EditText和Button,供发送评论。
先看代码运行的结果:
![](https://static.oschina.net/uploads/img/201801/04145037_wW2S.jpg)
实现代码:
测试的主Activity:MainActivity.java:
MainActivity.java需要的布局文件:activity_main.xml文件:
ListView头部布局用到的listview_head.xml:
ListView适配器加载的每一个item的布局文件:comment_item.xml:
其中,图片素材head.png、comment.png、favorite.png可以自行根据喜好选取。
附我写的另外一篇与此相关的参考文章:
《Android社交类APP常用的动态消息发布通用模板》
文章链接:http://blog.csdn.net/zhangphil/article/details/48467309
Android社交类APP动态详情代码实现通用模板
Android平台上一些比较流行的社交类APP比如微信、陌陌等,都有动态详情页,在该页面,用户发表的动态详情,好友可以发起评论、点赞等等。这种设计在微信和陌陌上大同小异。我自己写了一个较为通用的模板,记下作为备忘和参考,更多更丰富的内容可据此深入定制和开发。
思路:整体是一个ListView实现,ListView添加一个header,作为该用户发送的动态详情呈现页面,然后在ListView下面的item里面是该用户的好友们发表的评论等等。
ListView下方是一个单独的布局,该布局放置一个EditText和Button,供发送评论。
先看代码运行的结果:
![](https://static.oschina.net/uploads/img/201801/04145037_wW2S.jpg)
实现代码:
测试的主Activity:MainActivity.java:
package zhangphil.detail; import java.util.Random; import android.app.Activity; import android.content.Context; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.ArrayAdapter; import android.widget.ImageView; import android.widget.ListView; import android.widget.TableLayout; import android.widget.TableRow; public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); LayoutInflater mLayoutInflater = LayoutInflater.from(this); View view = View.inflate(this, R.layout.activity_main, null); ListView listView = (ListView) view.findViewById(android.R.id.list); // 每条评论的适配器 ArrayAdapter adapter = new MyArrayAdapter(this, -1); listView.setAdapter(adapter); listView.setHeaderDividersEnabled(false); // ListView的头部 View v = mLayoutInflater.inflate(R.layout.listview_head, null); listView.addHeaderView(v); TableLayout tableLayout = (TableLayout) v.findViewById(R.id.tableLayout); final int WC = ViewGroup.LayoutParams.WRAP_CONTENT; // 随机生成若干张测试图片的量值。 int total = new Random().nextInt(10); int ROW = 0; int mod = total % 3; if (mod == 0) ROW = total / 3; else ROW = total / 3 + 1; Context context = this; // 转换成ROW行3列的格式。 int k = 0; for (int i = 0; i < ROW; i++) { TableRow tableRow = new TableRow(this); for (int j = 0; j < 3; j++) { if (k < total) { // 测试图片 ImageView iv = new ImageView(context); iv.setImageResource(R.drawable.ic_launcher); tableRow.addView(iv); k++; } } tableLayout.addView(tableRow, new TableLayout.LayoutParams(WC, WC)); } setContentView(view); } private class MyArrayAdapter extends ArrayAdapter { private LayoutInflater mLayoutInflater; public MyArrayAdapter(Context context, int resource) { super(context, resource); mLayoutInflater = LayoutInflater.from(context); } @Override public View getView(int pos, View convertView, ViewGroup parent) { if (convertView == null) convertView = mLayoutInflater.inflate(R.layout.comment_item, null); return convertView; } // 返回一个测试数据量值 @Override public int getCount() { return 5; } } }
MainActivity.java需要的布局文件:activity_main.xml文件:
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <ListView android:id="@android:id/list" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_above="@+id/commentLinearLayout" android:layout_gravity="center" android:scrollbars="none" /> <LinearLayout android:id="@+id/commentLinearLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:background="#e0e0e0" android:orientation="horizontal" > <EditText android:id="@+id/commentEditText" android:layout_width="0dip" android:layout_height="wrap_content" android:layout_weight="8" android:hint="发表评论" /> <Button android:id="@+id/buttonSend" style="?android:attr/buttonStyleSmall" android:layout_width="0dip" android:layout_height="wrap_content" android:layout_weight="2" android:text="发送" /> </LinearLayout> </RelativeLayout>
ListView头部布局用到的listview_head.xml:
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#f5f5f5" android:padding="5dip" android:paddingBottom="20dip" > <ImageView android:id="@+id/imageViewHead" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:layout_marginTop="5dip" android:adjustViewBounds="true" android:maxHeight="60dip" android:maxWidth="60dip" android:padding="1dip" android:src="@drawable/head" /> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginTop="5dip" android:layout_toRightOf="@+id/imageViewHead" android:orientation="vertical" android:padding="1dip" > <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="1dip" > <TextView android:id="@+id/name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_centerVertical="true" android:text="姓名某某某" android:textColor="@android:color/black" android:textSize="13sp" android:textStyle="bold" /> <TextView android:id="@+id/time" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_alignParentTop="true" android:layout_centerVertical="true" android:text="2015-09-16" android:textSize="9sp" /> </RelativeLayout> <View android:layout_width="match_parent" android:layout_height="1dip" android:background="#EFEFEF" android:padding="1dip" /> <TextView android:id="@+id/title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="5dip" android:text="标题" /> <TextView android:id="@+id/detail" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="5dip" android:text="一些文字,一些文字,一些文字,一些文字,一些文字,一些文字,一些文字,一些文字,一些文字,一些文字,一些文字,一些文字,一些文字,一些文字,一些文字,一些文字,一些文字" android:textSize="11sp" /> <TableLayout android:id="@+id/tableLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:shrinkColumns="0,1,2" /> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="1dip" > <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:orientation="horizontal" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:drawableLeft="@drawable/favorite" android:gravity="bottom|right" android:padding="1dip" android:text="99+" android:textSize="8sp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:drawableLeft="@drawable/comment" android:gravity="bottom|right" android:padding="1dip" android:text="99+" android:textSize="8sp" /> </LinearLayout> </RelativeLayout> </LinearLayout> </RelativeLayout>
ListView适配器加载的每一个item的布局文件:comment_item.xml:
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" android:padding="15dip" > <ImageView android:id="@+id/head" android:layout_width="30dip" android:layout_height="30dip" android:layout_alignParentLeft="true" android:layout_centerVertical="true" android:src="@drawable/ic_launcher" /> <TextView android:id="@+id/comment" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_marginLeft="2dip" android:layout_toRightOf="@+id/head" android:gravity="center" android:padding="1dip" android:text="哎哟,不错哦!" /> <TextView android:id="@+id/time" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:gravity="center" android:text="20:30" /> </RelativeLayout>
其中,图片素材head.png、comment.png、favorite.png可以自行根据喜好选取。
附我写的另外一篇与此相关的参考文章:
《Android社交类APP常用的动态消息发布通用模板》
文章链接:http://blog.csdn.net/zhangphil/article/details/48467309
相关文章推荐
- Android社交类APP动态详情代码实现通用模板
- Android社交类APP常用的动态消息发布通用模板
- 社交类APP动态详情代码通用模板
- Android社交类APP常用的动态消息发布通用模板
- Android实现动态改变app图标的示例代码
- android通过C代码实现动态和静态链接
- 在Android代码中实现动态布局
- Android App的国际化-代码里实现
- Android数字动态显示,仿支付宝app效果简单的实现。字数从0-x!!!
- Android基础:代码中实现界面动态布局
- Android中利用App实现消息推送机制的代码
- Android:Java代码实现APP普通安装卸载和静默安装卸载
- 【移动安全】Android App Smail代码动态跟踪调试方法
- android自动更新代码实现------------安卓开发第一步:让APP学会自动更新
- 一个功能,两个平台,三种语言 -(iOS,Swift,Android)App代码实现对比篇
- Android中利用App实现消息推送机制的代码实例
- 在android中利用多线程实现对控件的更新(动态修改文本框中的值)。简述原理并上传代码。
- Android中利用App实现消息推送机制的代码
- DataGrid 动态添加模板列 实现代码
- Android App的国际化-代码里实现