布局管理器的嵌套实现微信朋友圈界面
布局管理器嵌套原则:
- 根布局管理器必须包含xmlns属性
- 在一个布局文件中,最多只能有一个根布局管理器,如果需要有多个还需要使用一个根布局管理器将他们括起来。
- 不能嵌套太深,如果嵌套太深,会影响性能。
实例:微信朋友圈界面
垂直线性布局管理器中,嵌套相对布局管理器实现
<?xml version="1.0" encoding="utf-8"?>
# 根线性布局管理器
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:orientation="vertical" # 设为垂直布局
tools:context="com.example.MainActivity">
# 嵌套的第一个相对布局管理器
<RelativeLayout
android:layout_width="match_parent" # 设置宽度为与父容器相同
android:layout_height="wrap_content" # 设置高度为包裹自身内容
android:layout_margin="10dp" # 设置外边距
>
# 第一个朋友圈头像
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/ico1" # 设置id
android:layout_alignParentLeft="true" # 与父容器左对齐
android:layout_margin="10dp" # 外边距
android:src="@mipmap/m" # 头像图片
/>
# 第一个朋友圈昵称
<TextView
android:id="@+id/name1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="玛丽黛佳"
android:textColor="#576B95" # 文本颜色
android:layout_marginTop="10dp" # 顶外边距
android:layout_toRightOf="@id/ico1" # 位于组件ico1右下方
/>
# 第一个朋友圈内容
<TextView
android:id="@+id/content1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="祝福我的亲人、朋友国庆快乐!!"
android:textColor="#576B95"
android:layout_marginTop="5dp" # 顶外边距
android:layout_marginBottom="5dp" # 底外边距
android:minLines="3" # 设置文本框内容有3个
android:layout_toRightOf="@id/ico1" # 位于组件ico1右下方
android:layout_below="@id/name1" # 位于组件name1下方
/>
# 第一个朋友圈时间
<TextView
android:id="@+id/time1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="昨天"
android:textColor="#9A9A9A"
android:layout_marginTop="3dp" # 顶外边距
android:layout_below="@id/content1" # 位于组件content1下方
android:layout_toRightOf="@id/ico1" # 位于组件ico1右下方
/>
# 第一个朋友圈评论图标
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true" # 位于父容器右侧
android:layout_below="@id/content1" # 位于组件content1下方
android:src="@mipmap/d" # 评论图标
/>
# 第一个朋友圈底部分割线图片
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@mipmap/line" # 分割线图片
/>
</RelativeLayout>
# 嵌套的第二个相对布局管理器
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp" # 设置外边距
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/ico12"
android:layout_alignParentLeft="true"
android:layout_margin="10dp"
android:src="@mipmap/bg1"
/>
<TextView
android:id="@+id/name2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hahaha"
android:textColor="#576B95"
android:layout_marginTop="10dp"
android:layout_toRightOf="@id/ico12"
/>
<TextView
android:id="@+id/content2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="学习没有尽头,只有不断跟上技术前沿才不会被淘汰,而这种不断学习的愿望和能力,对所以开发者都非常重要!"
android:textColor="#576B95"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:minLines="3"
android:layout_toRightOf="@id/ico12"
android:layout_below="@id/name2"
/>
<TextView
android:id="@+id/time2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="昨天"
android:textColor="#9A9A9A"
android:layout_marginTop="3dp"
android:layout_below="@id/content2"
android:layout_toRightOf="@id/ico12"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="@id/content2"
android:src="@mipmap/d"
/>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@mipmap/line"/>
</RelativeLayout>
</LinearLayout>
结果: