1. 最终的效果图
2. 总体的大的布局分布
实际代码的总体布局：
2.0 RelativeLayout常用的一些属性
由于在本示例中采用了很多的 RelativeLayout 布局，所以先了解些它的基本布局属性
重点：相对布局 (RelativeLayout) 以 父容器 或者 兄弟组件 参考+margin +padding 来设置组件的显示位置
wrap_content 和 match_parent 的区别：
wrap 翻译过来是包裹，conten是内容。
那么这个就是包裹内容的意思，也就是说你的控件里面的内容有多大，这个控件就有多大。比如说Button中的文字
2. match_parent: 让作用的控件填充满父容器的空间
1. 基本属性
| XML 属性 | 说明 |
|---|---|
| android:gravity | 设置容器内组件的排序方式 |
| android:ignoreGravity | 如果设置改属性为 true，将忽略 android:gravity |
android:gravity 本元素所有子元素的重力方向，处于怎样子的位置 ，有：
top 将对象放在其容器的顶部，不改变其大小.
bottom 将对象放在其容器的底部，不改变其大小.
left将对象放在其容器的左侧，不改变其大小.
right将对象放在其容器的右侧，不改变其大小.
center_vertical 将对象纵向居中，不改变其大小.
android:layout_gravity 和 android:gravity 的区别：
比如说对于Button控件：
android:layout_gravity 表示button在界面上的位置
android:gravity表示button上的字在button上的位置。
2.根据父容器定位属性：
| XML 属性 | 说明 |
|---|---|
| android:layout_alignParentLeft | 左对齐父容器 |
| android:layout_alignParentRight | 右对齐父容器 |
| android:layout_alignParentTop | 顶部对齐父容器 |
| android:layout_alignParentBottom | 底部对齐父容器 |
| android:layout_centerHorizontal | 在父容器中水平居中 |
| android:layout_centerVertical | 在父容器中垂直居中 |
| android:layout_centerInParent | 在父容器的居中位置 |
各个属性示意图如下
3. 根据兄弟组件定位属性
| XML 属性 | 说明 |
|---|---|
| android:layout_toLeftOf | 紧贴参考组件的左边 |
| android:layout_toRightOf | 紧贴参考组件的右边 |
| android:layout_above | 紧贴参考组件的上方 |
| android:layout_below | 紧贴参考组件的下方 |
| android:layout_alignTop | 对齐参考组件的上边界 |
| android:layout_alignBottom | 对齐参考组件的下边界 |
| android:layout_alignLeft | 对齐参考组件的左边界 |
| android:layout_alignRight | 对齐参考组件的右边界 |
兄弟组件定位就是处于同一层次容器的组件
图中的组件1,2就是兄弟组件了,
如对于组件2 ：android:layout_right = "@id/组件1"
而组件3与组件1或组件2并不是兄弟组件,所以组件3 不能通过 组件1或 2来进行定位
4. 设置外边距(偏移)属性
| XML 属性 | 说明 |
|---|---|
| android:layout_maring | 设置组件上下左右的偏移量 |
| android:layout_marginLeft | 设置组件左边的偏移量 |
| android:layout_marginRight | 设置组件右边的偏移量 |
| android:layout_marginTop | 设置组件上边的偏移量 |
| android:layout_marginBottom | 设置组件下边的偏移量 |
上面这些属性用于设置组件对本来位置的偏移量
虚线框是组件2 本来的位置，如果设置了组件上边和左边的边距，则位置会发生一定的偏移，向右下偏移
5. 设置内边距(填充)属性
| XML 属性 | 说明 |
|---|---|
| android:padding | 设置组件上下左右的填充 |
| android:paddingLeft | 设置组件左边的填充 |
| android:paddingRight | 设置组件右边的填充 |
| android:paddingTop | 设置组件上边的填充 |
| android:paddingBottom | 设置组件下边的填充 |
上面这些属性用于设置组件的内边距，内边距主要用于设置组件边框和子组件之间的间隙
6. 居中设置
android:layout_centerHorizontal 如果为true,将该控件的置于水平居中;
android:layout_centerVertical 如果为true,将该控件的置于垂直居中;
android:layout_centerInParent 如果为true,将该控件的置于父控件的中央;
2.1 小布局 之 RelativeLayout
在 其中也嵌套着 2 个 RelativeLayout 布局
<RelativeLayout
android:layout_marginTop="27dp"
android:paddingRight="13dp"
android:layout_width="match_parent"
android:layout_height="50dp">
<RelativeLayout
android:layout_width="400dp"
android:layout_height="48dp"
android:background="@drawable/search_bg"
android:layout_marginLeft="10dp"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true">
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:src="@mipmap/search"/>
<EditText
android:layout_marginTop="3dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="35dp"
android:text="震惊，这件事情影响着几万亿人 | 哈哈哈"
android:textColor="#000000"
android:background="@null"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/camera"
android:layout_width="20dp"
android:layout_height="20dp"
android:src="@mipmap/camera"/>
<TextView
android:layout_below="@id/camera"
android:layout_marginTop="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="发布"
android:textColor="#000000"
android:textSize="11sp"/>
</RelativeLayout>2.2 小布局 之 HorizontalScrollView （1）
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="53dp"
android:orientation="horizontal"
android:gravity="center_vertical"
android:layout_marginTop="13dp"
android:paddingLeft="16dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="16dp"
android:text="关注"
android:textColor="#000000"
android:textSize="20sp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="16dp"
android:text="推荐"
android:textColor="#F44336"
android:textSize="20sp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="16dp"
android:text="电影"
android:textColor="#000000"
android:textSize="20sp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="16dp"
android:text="电视剧"
android:textColor="#000000"
android:textSize="20sp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="16dp"
android:text="小视频"
android:textColor="#000000"
android:textSize="20sp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="16dp"
android:text="游戏"
android:textColor="#000000"
android:textSize="20sp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="16dp"
android:text="直播"
android:textColor="#000000"
android:textSize="20sp"/>
</LinearLayout>
</HorizontalScrollView>2.3 小布局 之 HorizontalScrollView （2）
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:paddingLeft="15dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<RelativeLayout
android:layout_marginRight="19dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="13dp">
<ImageView
android:id="@+id/zb_header"
android:layout_width="65dp"
android:layout_height="72dp"
android:src="@mipmap/zb_header"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/zb_header"
android:layout_centerHorizontal="true"
android:text="热门直播"
android:textColor="#000000"
android:textSize="13sp" />
</RelativeLayout>
<RelativeLayout
android:layout_marginRight="19dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="13dp">
<ImageView
android:id="@+id/zb_header1"
android:layout_width="65dp"
android:layout_height="72dp"
android:src="@mipmap/zb_header"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/zb_header1"
android:layout_centerHorizontal="true"
android:text="热门直播"
android:textColor="#000000"
android:textSize="13sp" />
</RelativeLayout>
<RelativeLayout
android:layout_marginRight="19dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="13dp">
<ImageView
android:id="@+id/zb_header2"
android:layout_width="65dp"
android:layout_height="72dp"
android:src="@mipmap/zb_header"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/zb_header2"
android:layout_centerHorizontal="true"
android:text="热门直播"
android:textColor="#000000"
android:textSize="13sp" />
</RelativeLayout>
<RelativeLayout
android:layout_marginRight="19dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="13dp">
<ImageView
android:id="@+id/zb_header3"
android:layout_width="65dp"
android:layout_height="72dp"
android:src="@mipmap/zb_header"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/zb_header3"
android:layout_centerHorizontal="true"
android:text="热门直播"
android:textColor="#000000"
android:textSize="13sp" />
</RelativeLayout>
<RelativeLayout
android:layout_marginRight="19dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="13dp">
<ImageView
android:id="@+id/zb_header4"
android:layout_width="65dp"
android:layout_height="72dp"
android:src="@mipmap/zb_header"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/zb_header4"
android:layout_centerHorizontal="true"
android:text="热门直播"
android:textColor="#000000"
android:textSize="13sp" />
</RelativeLayout>
</LinearLayout>
</HorizontalScrollView>2.4 小布局 之 ScrollView
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="267dp"
android:background="@mipmap/video_pic3">
<!-- 在图片中间增加一个播放的按钮 -->
<ImageView
android:layout_width="56dp"
android:layout_height="56dp"
android:layout_centerInParent="true"
android:src="@mipmap/play"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="67dp"
android:paddingLeft="16dp"
android:paddingTop="5dp"
android:paddingBottom="5dp">
<ImageView
android:id="@+id/header"
android:layout_width="44dp"
android:layout_height="44dp"
android:src="@mipmap/header"
android:layout_centerVertical="true"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="17dp"
android:layout_toRightOf="@id/header">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:text="东北那疙瘩大明"
android:textSize="20sp"
android:textColor="#000000"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="优质Vlog领域创作者"
android:textColor="#9e9e9e"
android:textSize="20sp"/>
</RelativeLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:layout_marginRight="33dp"
android:gravity="center_vertical"
android:orientation="horizontal">
<ImageView
android:layout_width="21dp"
android:layout_height="21dp"
android:src="@mipmap/evaluate"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:text="23"
android:textColor="#000000"
android:textSize="16sp"/>
</LinearLayout>
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="267dp"
android:background="@mipmap/video_pic3">
<!-- 在图片中间增加一个播放的按钮 -->
<ImageView
android:layout_width="56dp"
android:layout_height="56dp"
android:layout_centerInParent="true"
android:src="@mipmap/play"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="67dp"
android:paddingLeft="16dp"
android:paddingTop="5dp"
android:paddingBottom="5dp">
<ImageView
android:id="@+id/header1"
android:layout_width="44dp"
android:layout_height="44dp"
android:src="@mipmap/header"
android:layout_centerVertical="true"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="17dp"
android:layout_toRightOf="@id/header1">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:text="东北那疙瘩大明"
android:textSize="20sp"
android:textColor="#000000"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="优质Vlog领域创作者"
android:textColor="#9e9e9e"
android:textSize="20sp"/>
</RelativeLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:layout_marginRight="33dp"
android:gravity="center_vertical"
android:orientation="horizontal">
<ImageView
android:layout_width="21dp"
android:layout_height="21dp"
android:src="@mipmap/evaluate"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:text="23"
android:textColor="#000000"
android:textSize="16sp"/>
</LinearLayout>
</RelativeLayout>
</LinearLayout>
</LinearLayout>
</ScrollView>
扫一扫
394
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
