Android中如何让一个控件覆盖在另外一个控件上方

在平时的app开发中,ui设计常常会给出这样的需求:头像半覆盖在个人名片之上,毫无疑问这种是比较美观的。但是应该如何实现呢?

下面展示一下我做的两个项目的效果。

设置方法

当时做的时候也是反复调整了很长时间 始终达不到那种覆盖目标控件的效果。后来查资料发现被覆盖的控件必须在Framelayout或者RelativeLayout布局当中,并且控件中有一个参数值,即为android:elevation,该参数是指控件的立体值是多少,比如说2dp的就会覆盖在1dp的上方。当然除了这个方法外还可以在activity中设置view.bringToFront()方法,但我发现有时候这个方法不是太好使得。

以下是上面两个项目的布局文件代码,大家可以参考一下:

项目一:

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
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<de.hdodenhof.circleimageview.CircleImageView
android:layout_width="90dp"
android:elevation="1dp"
android:src="@drawable/pic"
android:layout_height="90dp"
app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="@+id/frameLayout"
app:layout_constraintHorizontal_bias="0.498" app:layout_constraintVertical_bias="0.954">
</de.hdodenhof.circleimageview.CircleImageView>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" tools:layout_editor_absoluteX="0dp"
app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintVertical_bias="1.0" android:id="@+id/frameLayout">
<com.roughike.bottombar.BottomBar
android:layout_width="match_parent"
app:bb_tabXmlResource="@xml/bottom_bar_tab"
android:layout_height="60dp" tools:layout_editor_absoluteY="650dp" tools:layout_editor_absoluteX="0dp">

</com.roughike.bottombar.BottomBar>
</FrameLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

项目二

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent" xmlns:app="http://schemas.android.com/apk/res-auto">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_gravity="center"
android:layout_height="wrap_content">

<de.hdodenhof.circleimageview.CircleImageView
android:layout_width="70dp"
android:id="@+id/user_icon"
android:src="@mipmap/ic_launcher"
android:layout_centerHorizontal="true"
android:elevation="3dp"
android:layout_height="70dp">
</de.hdodenhof.circleimageview.CircleImageView>
<com.skydoves.elasticviews.ElasticCardView
android:layout_width="340dp"
app:cardCornerRadius="20dp"
android:layout_marginTop="40dp"
android:focusable="false"
android:layout_centerHorizontal="true"
app:cardBackgroundColor="@color/ghostwhite"
android:layout_height="100dp">
<LinearLayout
android:layout_width="wrap_content"
android:orientation="vertical"
android:layout_gravity="center"
android:layout_height="wrap_content">
<TextView
android:text="GE"
android:textSize="25sp"
android:textColor="@color/black"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</TextView>
<LinearLayout
android:layout_width="wrap_content"
android:orientation="horizontal"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:text="18个关注"
android:layout_height="wrap_content">

</TextView>
<TextView
android:layout_width="35dp"
android:gravity="center"
android:text="|"
android:layout_height="wrap_content">

</TextView>
<TextView
android:layout_width="wrap_content"
android:text="12个粉丝"
android:layout_height="wrap_content">

</TextView>
<TextView
android:layout_width="35dp"
android:text="|"
android:gravity="center"
android:layout_height="wrap_content">

</TextView>
<TextView
android:layout_width="wrap_content"
android:text="LV10"
android:layout_height="wrap_content">

</TextView>
</LinearLayout>
</LinearLayout>

</com.skydoves.elasticviews.ElasticCardView>
</RelativeLayout>
<com.skydoves.elasticviews.ElasticCardView
android:layout_width="340dp"
app:cardCornerRadius="20dp"
app:cardBackgroundColor="@color/grey"
android:layout_marginTop="20dp"
android:layout_gravity="center"
android:layout_height="100dp">
<LinearLayout
android:layout_width="wrap_content"
android:orientation="vertical"
android:layout_gravity="center"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:elevation="3dp"
android:layout_gravity="center"
android:src="@drawable/recently_play"
android:layout_height="50dp">
</ImageView>
<TextView
android:layout_width="wrap_content"
android:text="最近播放"
android:textColor="@color/white"
android:layout_gravity="center"
android:layout_height="wrap_content">

</TextView>
</LinearLayout>
</com.skydoves.elasticviews.ElasticCardView>
<com.skydoves.elasticviews.ElasticCardView
android:layout_width="340dp"
app:cardCornerRadius="20dp"
app:cardBackgroundColor="@color/deepskyblue"
android:layout_marginTop="20dp"
android:layout_gravity="center"
android:layout_height="100dp">
<LinearLayout
android:layout_width="wrap_content"
android:orientation="vertical"
android:layout_gravity="center"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:elevation="3dp"
android:layout_gravity="center"
android:src="@drawable/love_music"
android:layout_height="50dp">
</ImageView>
<TextView
android:layout_width="wrap_content"
android:text="心悦"
android:textColor="@color/white"
android:layout_gravity="center"
android:layout_height="wrap_content">

</TextView>
</LinearLayout>
</com.skydoves.elasticviews.ElasticCardView>
<com.skydoves.elasticviews.ElasticCardView
android:layout_width="340dp"
app:cardCornerRadius="20dp"
app:cardBackgroundColor="@color/cyan"
android:layout_marginTop="20dp"
android:layout_gravity="center"
android:layout_height="150dp">
<LinearLayout
android:layout_width="wrap_content"
android:orientation="vertical"
android:layout_gravity="center"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:elevation="3dp"
android:layout_gravity="center"
android:src="@drawable/music_list"
android:layout_height="100dp">
</ImageView>
<TextView
android:layout_width="wrap_content"
android:text="挚爱"
android:textSize="20sp"
android:textColor="@color/white"
android:layout_gravity="center"
android:layout_height="wrap_content">

</TextView>
</LinearLayout>
</com.skydoves.elasticviews.ElasticCardView>
</LinearLayout>