自定义形状的DialogFragment

Question

如何创建带有自定义形状的对话框片段？

我有一个需要放置在对话框窗口顶部（具有透明度）的图标。

对话框本身应该是：

对话框布局：

<FrameLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="80dp">
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="40dp"
            android:layout_gravity="bottom|center">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/server_error_title"
                android:layout_marginTop="80dp"
                android:layout_centerHorizontal="true"
                android:textSize="20sp"
                android:textAllCaps="true"
                android:text="@string/server_error_title"
                android:textColor="@color/soft_blue"
                android:fontFamily="sans-serif-medium"/>
            <View
                android:layout_width="60dp"
                android:layout_height="2dp"
                android:id="@+id/server_error_divider"
                android:layout_marginTop="21dp"
                android:layout_centerHorizontal="true"
                android:layout_below="@id/server_error_title"
                android:background="@color/soft_blue" />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/server_error_message"
                android:layout_marginTop="19dp"
                android:layout_centerHorizontal="true"
                android:layout_below="@id/server_error_divider"
                style="@style/TextDialog"
                android:text="@string/server_error_message"/>
            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:id="@+id/server_error_large_divider"
                android:layout_marginTop="51dp"
                android:layout_below="@id/server_error_message"
                android:background="@color/greyish"/>
           <LinearLayout
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:gravity="center_horizontal"
               android:background="@color/white_grey"
               android:layout_below="@id/server_error_large_divider">
               <Button
                   android:layout_width="320dp"
                   android:layout_height="46dp"
                   android:id="@+id/server_error_close_btn"
                   android:layout_marginTop="30dp"
                   android:layout_marginBottom="30dp"
                   style="@style/TextButton2"
                   android:text="@string/server_error_close_btn"
                   android:background="@drawable/big_button_shape" />
           </LinearLayout>
        </RelativeLayout>
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/error_dialog_icon"
            android:src="@drawable/ic_error_circle"
            android:layout_gravity="center|top"/>
    </FrameLayout>

但我得到的是这个：

我需要一个自定义ViewGroup吗？还是有更简单的方法可以实现？

- c0nst

---

在ImageView上使用负边距。 - V-rund Puro-hit

@vrundpurohit 没有起作用 :( http://i.imgur.com/5o22GDL.png - c0nst

给你的FrameLayout添加一些顶部填充。 - V-rund Puro-hit

修改圆角白色填充背景的交叉图标，并尝试使用@W4R10CK提供的答案。 - Krish

@W4R10CK 抱歉，我尝试了你的解决方案，但对我没有用，所以我只给你的答案加了+1。 - c0nst

你难道没用过setContentView(R.layout.test); 像魔法一样好使这个术语吗，布局依然是我的 :) - W4R10CK

Answer 1

根据您的想法，您可以将自定义按钮、布局等视图放置在LinearLayout中。

对话框方法，使Window透明：

Dialog dialog = new Dialog(this);
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
dialog.setContentView(R.layout.test);
dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
dialog.show();  

test.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@android:color/transparent" >

<LinearLayout
    android:id="@+id/linearLayout1"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="57dp"
    android:background="#f00"
    android:orientation="vertical" >
</LinearLayout>

<ImageView
    android:id="@+id/imageView1"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:src="@drawable/ic_launcher" />

</RelativeLayout>  

结果（避免背景）

- W4R10CK

Answer 2

请使用以下示例代码作为您的xml文件：

使用下列样本代码来编写您的xml：

<FrameLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent">
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="45dp"
            android:background="@android:color/white"
            android:layout_gravity="bottom|center">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/server_error_title"
                android:layout_marginTop="80dp"
                android:layout_centerHorizontal="true"
                android:textSize="20sp"
                android:textAllCaps="true"
                android:text="@string/server_error_title"
                android:textColor="@color/soft_blue"
                android:fontFamily="sans-serif-medium"/>
            <View
                android:layout_width="60dp"
                android:layout_height="2dp"
                android:id="@+id/server_error_divider"
                android:layout_marginTop="21dp"
                android:layout_centerHorizontal="true"
                android:layout_below="@id/server_error_title"
                android:background="@color/soft_blue" />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/server_error_message"
                android:layout_marginTop="19dp"
                android:layout_centerHorizontal="true"
                android:layout_below="@id/server_error_divider"
                style="@style/TextDialog"
                android:text="@string/server_error_message"/>
            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:id="@+id/server_error_large_divider"
                android:layout_marginTop="51dp"
                android:layout_below="@id/server_error_message"
                android:background="@color/greyish"/>
           <LinearLayout
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:gravity="center_horizontal"
               android:background="@color/white_grey"
               android:layout_below="@id/server_error_large_divider">
               <Button
                   android:layout_width="320dp"
                   android:layout_height="46dp"
                   android:id="@+id/server_error_close_btn"
                   android:layout_marginTop="30dp"
                   android:layout_marginBottom="30dp"
                   style="@style/TextButton2"
                   android:text="@string/server_error_close_btn"
                   android:background="@drawable/big_button_shape" />
           </LinearLayout>
        </RelativeLayout>

        <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:padding="4dp"
        android:background="@drawable/error_circle">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/error_dialog_icon"
            android:src="@drawable/ic_error_circle"
            android:layout_gravity="center|top"/>

        </FrameLayout>
    </FrameLayout>

以及 error_circle:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="0dp"
    android:shape="oval"
    android:useLevel="false" >
    <solid android:color="@android:color/transparent" />

    <stroke
        android:width="45dp"
        android:color="@android:color/white" />
</shape>

编辑:

在DialogFragment的onCreateView()方法中:

getDialog().requestWindowFeature(Window.FEATURE_NO_TITLE);

getDialog().getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));

- nnn

---

使用requestWindowFeature(Window.FEATURE_NO_TITLE);和setContentView(R.layout.test);非常顺利。谢谢！ - c0nst

Answer 3

试试这样做，它会显示一个透明的对话框

Dialog dialog = new Dialog(mContext, android.R.style.Theme_Panel);
            dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
            dialog.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));
            dialog.setContentView(R.layout.yourlayout);
            dialog.setCanceledOnTouchOutside(true);
            TextView text = (TextView) dialog.findViewById(R.id.----);
            dialog.show();

- mahesh87

Answer 4

创建样式并将其设置为背景，例如：

<style name="MyDialogFragmentStyl" parent="ThemeOverlay.AppCompat.Dialog">
    <item name="android:windowBackground">@drawable/my_dialog_background</item>
</style>

- Grzegorz