安卓 UI 项目：仿照西瓜视频首页 UI界面

超、凢脫俗 2023-03-01 03:12 17阅读 0赞

## 1. 最终的效果图 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTg3NTc1_size_16_color_FFFFFF_t_70][]

## 2. 总体的大的布局分布 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTg3NTc1_size_16_color_FFFFFF_t_70 1][]

**实际代码的总体布局：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTg3NTc1_size_16_color_FFFFFF_t_70 2][]

### 2.0 RelativeLayout常用的一些属性 ###

由于在本示例中采用了很多的 RelativeLayout 布局，所以先了解些它的基本布局属性

**重点：相对布局 (RelativeLayout) 以 父容器 或者 兄弟组件 参考+margin +padding 来设置组件的显示位置**

> **wrap\_content 和 match\_parent 的区别：**
> 
> wrap 翻译过来是包裹，conten是内容。
> 
> 那么这个就是包裹内容的意思，也就是说你的控件里面的内容有多大，这个控件就有多大。比如说Button中的文字
> 
> 2. match\_parent: 让作用的控件填充满父容器的**空间**

**1. 基本属性**

<table> 
 <thead> 
  <tr> 
   <th>XML 属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>android:gravity</td> 
   <td>设置容器内组件的排序方式</td> 
  </tr> 
  <tr> 
   <td>android:ignoreGravity</td> 
   <td>如果设置改属性为 true，将忽略&nbsp;<code>android:gravity</code></td> 
  </tr> 
 </tbody> 
</table>

android:gravity 本元素所有子元素的重力方向，处于怎样子的位置 ，有：

> top 将对象放在其容器的顶部，不改变其大小.
> 
> bottom 将对象放在其容器的底部，不改变其大小.
> 
> left将对象放在其容器的左侧，不改变其大小.
> 
> right将对象放在其容器的右侧，不改变其大小.
> 
> center\_vertical 将对象纵向居中，不改变其大小.

**android:layout\_gravity 和 android:gravity 的区别：**

> **比如说对于Button控件：**
> 
> android:layout\_gravity 表示button在界面上的位置
> 
> android:gravity表示button上的字在button上的位置。

**2.根据父容器定位属性：**

<table> 
 <thead> 
  <tr> 
   <th>XML 属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>android:layout_alignParentLeft</td> 
   <td>左对齐父容器</td> 
  </tr> 
  <tr> 
   <td>android:layout_alignParentRight</td> 
   <td>右对齐父容器</td> 
  </tr> 
  <tr> 
   <td>android:layout_alignParentTop</td> 
   <td>顶部对齐父容器</td> 
  </tr> 
  <tr> 
   <td>android:layout_alignParentBottom</td> 
   <td>底部对齐父容器</td> 
  </tr> 
  <tr> 
   <td>android:layout_centerHorizontal</td> 
   <td>在父容器中水平居中</td> 
  </tr> 
  <tr> 
   <td>android:layout_centerVertical</td> 
   <td>在父容器中垂直居中</td> 
  </tr> 
  <tr> 
   <td>android:layout_centerInParent</td> 
   <td>在父容器的居中位置</td> 
  </tr> 
 </tbody> 
</table>

各个属性示意图如下

![format_png][]

**3. 根据兄弟组件定位属性**

<table> 
 <thead> 
  <tr> 
   <th>XML 属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>android:layout_toLeftOf</td> 
   <td>紧贴参考组件的左边</td> 
  </tr> 
  <tr> 
   <td>android:layout_toRightOf</td> 
   <td>紧贴参考组件的右边</td> 
  </tr> 
  <tr> 
   <td>android:layout_above</td> 
   <td>紧贴参考组件的上方</td> 
  </tr> 
  <tr> 
   <td>android:layout_below</td> 
   <td>紧贴参考组件的下方</td> 
  </tr> 
  <tr> 
   <td>android:layout_alignTop</td> 
   <td>对齐参考组件的上边界</td> 
  </tr> 
  <tr> 
   <td>android:layout_alignBottom</td> 
   <td>对齐参考组件的下边界</td> 
  </tr> 
  <tr> 
   <td>android:layout_alignLeft</td> 
   <td>对齐参考组件的左边界</td> 
  </tr> 
  <tr> 
   <td>android:layout_alignRight</td> 
   <td>对齐参考组件的右边界</td> 
  </tr> 
 </tbody> 
</table>

兄弟组件定位就是处于同一层次容器的组件

![format_png 1][]

图中的组件1,2就是兄弟组件了,

> 如对于组件2 ：android:layout\_right = "@id/组件1"

而组件3与组件1或组件2并不是兄弟组件,所以组件3 不能通过 组件1或 2来进行定位

**4. 设置外边距(偏移)属性**

<table> 
 <thead> 
  <tr> 
   <th>XML 属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>android:layout_maring</td> 
   <td>设置组件上下左右的偏移量</td> 
  </tr> 
  <tr> 
   <td>android:layout_marginLeft</td> 
   <td>设置组件左边的偏移量</td> 
  </tr> 
  <tr> 
   <td>android:layout_marginRight</td> 
   <td>设置组件右边的偏移量</td> 
  </tr> 
  <tr> 
   <td>android:layout_marginTop</td> 
   <td>设置组件上边的偏移量</td> 
  </tr> 
  <tr> 
   <td>android:layout_marginBottom</td> 
   <td>设置组件下边的偏移量</td> 
  </tr> 
 </tbody> 
</table>

上面这些属性用于设置组件对本来位置的偏移量

![format_png 2][]

虚线框是**组件2** 本来的位置，如果设置了组件上边和左边的边距，则位置会发生一定的偏移，向右下偏移

**5. 设置内边距(填充)属性**

<table> 
 <thead> 
  <tr> 
   <th>XML 属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>android:padding</td> 
   <td>设置组件上下左右的填充</td> 
  </tr> 
  <tr> 
   <td>android:paddingLeft</td> 
   <td>设置组件左边的填充</td> 
  </tr> 
  <tr> 
   <td>android:paddingRight</td> 
   <td>设置组件右边的填充</td> 
  </tr> 
  <tr> 
   <td>android:paddingTop</td> 
   <td>设置组件上边的填充</td> 
  </tr> 
  <tr> 
   <td>android:paddingBottom</td> 
   <td>设置组件下边的填充</td> 
  </tr> 
 </tbody> 
</table>

上面这些属性用于设置组件的内边距，内边距主要用于设置组件边框和子组件之间的间隙

![format_png 3][]

**6. 居中设置**

> android:layout\_centerHorizontal 如果为true,将该控件的置于水平居中;  
> android:layout\_centerVertical 如果为true,将该控件的置于垂直居中;  
> android:layout\_centerInParent 如果为true,将该控件的置于父控件的中央;

### 2.1 小布局 之 RelativeLayout ###

在 其中也嵌套着 2 个 RelativeLayout 布局

![20200721231158342.png][]

### 2.2 小布局 之 HorizontalScrollView （1） ###

![20200721231643487.png][]

### 2.3 小布局 之 HorizontalScrollView （2） ###

![20200721231737837.png][]

### 2.4 小布局 之 ScrollView ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTg3NTc1_size_16_color_FFFFFF_t_70 3][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTg3NTc1_size_16_color_FFFFFF_t_70]: /images/20230209/052cc066dbfc48f68b51af97eaaee223.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTg3NTc1_size_16_color_FFFFFF_t_70 1]: /images/20230209/ab67e0018aff46c593c5f396d00612fc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTg3NTc1_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200721230904899.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTg3NTc1,size_16,color_FFFFFF,t_70
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly93d3cudHdsZS5jbi9zdGF0aWMvaS9hbmRyb2lkL2FuZHJvaWRfcmVsYXRpdmVsYXlvdXRfMi5wbmc?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly93d3cudHdsZS5jbi9zdGF0aWMvaS9hbmRyb2lkL2FuZHJvaWRfcmVsYXRpdmVsYXlvdXRfMy5wbmc?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly93d3cudHdsZS5jbi9zdGF0aWMvaS9hbmRyb2lkL2FuZHJvaWRfcmVsYXRpdmVsYXlvdXRfNC5wbmc?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly93d3cudHdsZS5jbi9zdGF0aWMvaS9hbmRyb2lkL2FuZHJvaWRfcmVsYXRpdmVsYXlvdXRfNS5wbmc?x-oss-process=image/format,png
[20200721231158342.png]: https://img-blog.csdnimg.cn/20200721231158342.png
[20200721231643487.png]: https://img-blog.csdnimg.cn/20200721231643487.png
[20200721231737837.png]: https://img-blog.csdnimg.cn/20200721231737837.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTg3NTc1_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200721231852542.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTg3NTc1,size_16,color_FFFFFF,t_70