【Android】 简单的朋友圈界面设计

Android 简单的朋友圈界面设计

1. 在Eclipse中创建Android项目，名称为friend
2. 修改新建项目的res/layout目录下的布局文件activity_main.xml,将默认添加的布局代码修改为垂直线性布局管理器，并删除上、下、左、右内边距的设置代码，删除默认文本框组件
3. 在添加的垂直线性布局管理器中，添加一个用于显示第一条朋友圈信息的相对布局管理器，在其添加一个显示头像的图像视图组件（ImageView），与父容器左对齐
4. 在头像ImageView组件的右侧添加3个文本框组件，分别用于显示发布人、内容、和时间
5. 在内容文本框下方，与父窗口右对其的位置添加一个View组件，用于显示评论图标
6. 在相对布局管理器下方添加一个ImageView组件，显示一个分隔线
7. 按照步骤（3）到步骤（5）的方法添加显示第二条朋友圈信息代码

【注】程序中用到的图片资源文件需要自行添加

添加位置：/res/drawable/

运行结果

activity_main.xml布局文件代码

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.friends.MainActivity" >
    
<RelativeLayout 
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="10dp">
    
        <ImageView
            android:id="@+id/ico1"
            android:layout_width="65dp"
            android:layout_height="65dp"
            android:layout_alignParentLeft="true"
            android:layout_margin="10dp"
            android:src="@drawable/v_ico1" />
    
        <TextView 
            android:id="@+id/name1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:layout_toRightOf="@id/ico1"
            android:text="@string/ico_name1"
            android:textColor="#576B95" />
    
        <TextView
            android:id="@+id/content1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/name1"
            android:layout_marginTop="5dp"
            android:layout_toRightOf="@id/ico1"
            android:minLines="3"
            android:text="@string/ico_content1" />
        
        <TextView
            android:id="@+id/time1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/content1"
            android:layout_marginTop="3dp"
            android:layout_toRightOf="@id/ico1"
            android:text="@string/ico_time1"
            android:textColor="#9A9A9A" />
        
	   <ImageView
	        android:id="@+id/comment"
	        android:layout_width="35dp"
	        android:layout_height="35dp"
	        android:layout_alignParentRight="true"
	        android:layout_below="@id/content1"
	        android:src="@drawable/comment" />

</RelativeLayout>

		<ImageView
		    android:layout_width="match_parent"
		    android:layout_height="wrap_content"
		    android:src="@drawable/line" />
		

<RelativeLayout 
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="10dp">
    
        <ImageView
            android:id="@+id/ico2"
            android:layout_width="65dp"
            android:layout_height="65dp"
            android:layout_alignParentLeft="true"
            android:layout_margin="10dp"
            android:src="@drawable/v_ico2" />
    
        <TextView 
            android:id="@+id/name2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:layout_toRightOf="@id/ico2"
            android:text="@string/ico_name2"
            android:textColor="#576B95" />
    
        <TextView
            android:id="@+id/content2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/name2"
            android:layout_marginTop="5dp"
            android:layout_toRightOf="@id/ico2"
            android:minLines="3"
            android:text="@string/ico_content2" />
        
        <TextView
            android:id="@+id/time2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/content2"
            android:layout_marginTop="3dp"
            android:layout_toRightOf="@id/ico2"
            android:text="@string/ico_time2"
            android:textColor="#9A9A9A" />
        
	   <ImageView
	        android:layout_width="35dp"
	        android:layout_height="35dp"
	        android:layout_alignParentRight="true"
	        android:layout_below="@id/content2"
	        android:src="@drawable/comment" />

</RelativeLayout>

		<ImageView
		    android:layout_width="match_parent"
		    android:layout_height="wrap_content"
		    android:src="@drawable/line" />
		
</LinearLayout>

public class MainActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
	}
}