Android UI设计中FrameLayout的使用

发表于   |   分类于   |  

Android系统提供了很多的界面Layout布局，LinearLayout主要是用来横向或者纵向显示，RelativeLayout可以控制控件之间的相对位置关系，类似于iOS当中的AutoLayout，这两者在平时的开发中都比较常用，而另一个FrameLayout提供了比这两者更加灵活的布局方式，利用FrameLayout我们可以达到子控件相互重叠的效果（Overlay）。看图：



图中圆环为普通的View，圆环当中的文字为多个TextView，整个布局文件的代码如下（不包含tab与最下面的button）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="2">
        <com.djchen.View.RecordChartView 
        android:id="@+id/chart_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />
        <LinearLayout 
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:orientation="vertical"
            >
            <TextView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/circle_total"
            android:gravity="center_horizontal"
            android:layout_gravity="center"
            android:textSize="18sp"/>
            <TextView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="220842"
            android:gravity="center_horizontal"
            android:layout_gravity="center"
            android:textColor="@color/Green"
            android:layout_marginBottom="5dp"
            android:textStyle="bold"
            android:textSize="20sp"/>
            <TextView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/circle_spent"
            android:gravity="center_horizontal"
            android:layout_gravity="center"
            android:textSize="18sp"/>
            <TextView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="104533"
            android:gravity="center_horizontal"
            android:layout_gravity="center"
            android:textColor="@color/Red"
            android:textStyle="bold"
            android:textSize="20sp"
            android:layout_marginBottom="15dp"/>
            <TextView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="56%"
            android:gravity="center_horizontal"
            android:layout_gravity="center"
            android:textStyle="bold"
            android:textSize="20sp"/>
        </LinearLayout>
    </FrameLayout>


Overlay的效果在很多时候需要用到，特别是与Map相关的应用中，很多信息都会覆盖在地图之上。除了Overlay的效果之外，Navigaton Drawer中也建议主界面使用FrameLayout作为Root Container，这样更有利于今后各种需求的扩展。

如果我们的布局文件代表了相对独立的一部分功能，那么在写好的布局文件之后，我们应该将整个布局文件设计成类（Custom Compound View），从而可以将整个代码逻辑包装起来（比如相应的animation逻辑），避免将逻辑散落在fragment或者activity中，既规整了代码，又便于今后的复用。