描述

最近在項目中遇到一個底部內(nèi)容區(qū)域的圖片部分冒出來的需求疫衩，效果圖如下壮莹。

播放器效果圖

其實翅帜，看到這個效果圖就會想到使用android:clipChildren = "false"輕松實現(xiàn)，可以參考文檔【Android】神奇的android:clipChildren屬性命满。但是可能由于老項目嵌套布局比較多涝滴，我使用時一直達不到效果，后面嘗試了另一種方法胶台，也可以輕松實現(xiàn)同樣的效果歼疮，所以記錄下。

實現(xiàn)

由于實現(xiàn)比較簡單诈唬，就直接上代碼了韩脏。

1. 底部布局文件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>

2. 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="我是內(nèi)容"
        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"設置一個負數(shù)铸磅，達到效果赡矢。

總結(jié)

其實實現(xiàn)這個效果也很簡單杭朱，只是有兩點感悟吧。

1. 官方API不能達到效果時換一條路吹散，別鉆牛角尖弧械。[我當時就是非要用android:clipChildren來實現(xiàn)，但是就是不行空民，結(jié)果搞了兩三個小時吧]刃唐。
2. 巧妙使用android:layout_marginTop設置負數(shù)。