Android社交类APP动态详情代码实现通用模板

た入场券 2023-10-16 22:17 6阅读 0赞

**Android社交类APP动态详情代码实现通用模板**

Android平台上一些比较流行的社交类APP比如微信、陌陌等，都有动态详情页，在该页面，用户发表的动态详情，好友可以发起评论、点赞等等。这种设计在微信和陌陌上大同小异。我自己写了一个较为通用的模板，记下作为备忘和参考，更多更丰富的内容可据此深入定制和开发。  
思路：整体是一个ListView实现，ListView添加一个header，作为该用户发送的动态详情呈现页面，然后在ListView下面的item里面是该用户的好友们发表的评论等等。  
ListView下方是一个单独的布局，该布局放置一个EditText和Button，供发送评论。  
先看代码运行的结果：

![Center][]

实现代码：  
测试的主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：

其中，图片素材head.png、comment.png、favorite.png可以自行根据喜好选取。

附我写的另外一篇与此相关的参考文章：  
《Android社交类APP常用的动态消息发布通用模板》  
文章链接：[http://blog.csdn.net/zhangphil/article/details/48467309][http_blog.csdn.net_zhangphil_article_details_48467309]

[Center]: https://img-blog.csdn.net/20150916143705486?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[http_blog.csdn.net_zhangphil_article_details_48467309]: http://blog.csdn.net/zhangphil/article/details/48467309