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>
|