描述
最近在项目中遇到一个底部内容区域的图片部分冒出来的需求,效果图如下。
其实,看到这个效果图就会想到使用android:clipChildren = "false"轻松实现,可以参考文档【Android】神奇的android:clipChildren属性。但是可能由于老项目嵌套布局比较多,我使用时一直达不到效果,后面尝试了另一种方法,也可以轻松实现同样的效果,所以记录下。
实现
由于实现比较简单,就直接上代码了。
- 底部布局文件layout_player.xml
<?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="wrap_content"
android:orientation="vertical"
android:paddingLeft="10dp"
android:paddingRight="10dp">
<View
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:layout_marginTop="8dp"
android:background="@android:color/darker_gray"/>
<ImageView
android:id="@+id/ivCover"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="bottom"
android:scaleType="fitXY"
android:src="@mipmap/ic_launcher"
/>
<LinearLayout
android:id="@+id/llParent"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_gravity="bottom"
android:layout_marginLeft="60dp"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="我是歌词"/>
<Button
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_gravity=""
android:text="播放"/>
</LinearLayout>
</FrameLayout>
- Activity布局文件activity_main
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="@android:color/holo_blue_dark"
android:gravity="center"
android:text="我是内容"
android:textColor="@android:color/white"/>
<include
layout="@layout/layout_player"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="-8dp"/>
</LinearLayout>
可能大家也注意到了,其实主要就是通过android:layout_marginTop="-8dp"设置一个负数,达到效果。
总结
其实实现这个效果也很简单,只是有两点感悟吧。
- 官方API不能达到效果时换一条路,别钻牛角尖。[我当时就是非要用android:clipChildren来实现,但是就是不行,结果搞了两三个小时吧]。
- 巧妙使用android:layout_marginTop设置负数。