android 图片凸出

概述

今天有个群友问 android 图片凸出 效果怎么弄，早以前有过类似的需求，整个项目的提示框都是一个背景，背景上方有凸出半张图片，所以用layer-list写了一个背景来实现。

补上clipChildren属于也可以搞定。

思路

随便画了一下比较丑，大概就是这个样子了，从上图中应该不难看出，有三个部分，顶部为透明的，底部是有色值的，那个六角星就是凸出来的图片。

那么就来动手呗，新建一个资源文件，用layer-list属性，里面用三个item，第一个item设置高度为30dp，第二个item设置top为30dp，就刚好是个垂直布局，第三个item包含一个bitmap标签，作用是为了保持图片的原大小。

代码

layer-list背景

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <!--30dp 透明-->
        <shape>
            <size android:height="30dp" />
            <corners android:radius="10dp" />
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>
    <!--下偏移30dp-->
    <item android:top="30dp">
        <shape>
            <corners android:radius="10dp" />
            <solid android:color="@android:color/white" />
        </shape>
    </item>
    <!--用 bitmap 标签来保持原大小-->
    <item>
        <bitmap
            android:gravity="center_horizontal|top"
            android:src="@mipmap/ic_sync" />
    </item>
</layer-list>

layout 设置根节点背景 android:background="@drawable/bg_money_dialog"

<?xml version="1.0" encoding="utf-8"?><!--背景 bg_money_dialog-->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/bg_money_dialog"
    android:orientation="vertical">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:hint="请输入提现金额" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:hint="请输入提现密码" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="确认" />
</LinearLayout>

dialogFragment代码

public class CheckoutMoneyDialog extends DialogFragment {

    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());
        LayoutInflater inflater = getActivity().getLayoutInflater();
        View view = inflater.inflate(R.layout.fragment_checkout_money_dialog, null);
        builder.setView(view);
        Dialog dialog = builder.create();
        return dialog;
    }
}

运行看看效果

效果不佳，可能需要把 EditText 设置一下 layout_marginTop 

layout_marginTop="100dp" 后确实图片没有叠在 EditText 之上，可顶部还是没有透明效果，这个原因是由于dialog背景引起的，需然layout透明，可dialog自身也是有背景的，我们把dialog背景透明一下

        Dialog dialog = builder.create();
        Window window = dialog.getWindow();
        window.setBackgroundDrawableResource(android.R.color.transparent);
        return dialog;

成功搞定！喜欢拿去用，也有其它的方式实现，望同仁奉献！

源码：DemoPicBulge

欢迎关注公众号，每天为您推送“人生感悟、说话技巧、职场规则、职场成长”