自定义对话框视图

Question

我正在尝试创建一个类似于下面这样的警报。我已经用ediitext替换了图像中的文本。

<?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:background="@android:color/transparent"
    android:orientation="vertical">


    <LinearLayout
        android:layout_marginTop="20dp"
        android:background="@android:color/white"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <ImageView
            android:layout_marginTop="-20dp"
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:layout_gravity="center"
            android:src="@drawable/ic_bell"/>

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:background="@drawable/border"
            android:gravity="top|left"
            android:inputType="textMultiLine"
            android:lines="8"
            android:maxLines="10"
            android:minLines="6"
            android:scrollbars="vertical"/>
    </LinearLayout>

    <LinearLayout
        android:background="@android:color/white"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:weightSum="2">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@color/colorPrimary"
            android:text="Submit"
            android:textColor="@color/white"/>

        <View
            android:layout_width="4dp"
            android:layout_height="match_parent"
            android:background="@android:color/transparent"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@color/colorPrimary"
            android:text="Cancel"
            android:textColor="@color/white"/>

    </LinearLayout>
</LinearLayout>

我已将根布局设置为透明，并使其子项具有白色背景。我将 ImageView 的 marginTop 设置为 -20，以便它向上突出，但我无法获得相同的效果。为什么呢？

- user3600801

---

创建根布局 FrameLayout - Avishek Das

它不起作用。 - user3600801

所以你想让根布局背景透明，对吧？那么使用对话框活动。在底部页面上打开一个对话框活动。 - Avishek Das

我认为它使用了9-patch图像作为白色背景。 - masoud vali

你尝试过使用对话框片段吗？ - Raut Darpan

Answer 1

给定对话的XML --

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="280dp"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    >

    <FrameLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@android:color/transparent"
        android:orientation="vertical">

        <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:cardCornerRadius="4dp"
            android:layout_marginTop="32dp"
            android:id="@+id/congratulation_card"
            app:cardBackgroundColor="#FAFAFA"
            app:cardElevation="0dp"
            android:layout_gravity="bottom">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            >
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:id="@+id/title"
                android:textSize="18sp"
                android:textColor="@android:color/primary_text_light"
                android:layout_marginTop="48dp"
                android:text="Congratulations"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginTop="24dp"
                android:layout_marginLeft="32dp"
                android:textSize="16sp"
                android:layout_marginRight="32dp"
                android:id="@+id/message"
                android:gravity="center"
                android:text="You've just displayed this awesome pop up view "
                />
            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Let's read"
                android:id="@+id/read_btn"
                android:layout_marginTop="32dp"
                android:layout_marginRight="16dp"
                android:layout_marginLeft="16dp"
                android:layout_marginBottom="16dp"
                android:textColor="@android:color/white"
                android:background="@drawable/primary_button"
                />
        </LinearLayout>
        </android.support.v7.widget.CardView>

            <ImageView
                android:layout_width="64dp"
                android:layout_height="64dp"
                android:padding="1dp"
                android:src="@drawable/tick_green"
                android:background="@drawable/circular_tick"
                android:layout_gravity="center_horizontal|top"
                />

    </FrameLayout>
</LinearLayout>

可绘制的圆形勾号 ---

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <solid
        android:color="#FAFAFA"
       />

    <size
        android:width="120dp"
        android:height="120dp"/>
</shape>

可绘制的主按钮 -

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners
        android:radius="4dp" />
    <gradient
        android:startColor="@color/colorPrimaryLight"
        android:endColor="@color/colorPrimary"  />
    <padding
        android:left="10dp"
        android:top="10dp"
        android:right="10dp"
        android:bottom="10dp" />
</shape>

对我来说起作用了。

- Ajesh

Answer 2

您可以使用FrameLayout将一个视图添加到另一个视图上方，并给它添加边距，这样它看起来就像是同一个布局的一部分。

<?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:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:background="@android:color/transparent"
            android:orientation="vertical">

            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                    <EditText
                        android:ems="10"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:background="@android:color/white"
                        android:inputType="textMultiLine"
                        android:layout_marginTop="20dp"
                        android:lines="8"
                        android:maxLines="10"
                        android:minLines="6"
                        android:scrollbars="vertical" />

                <ImageView
                    android:layout_marginTop="0dp"
                    android:layout_width="wrap_content"
                    android:layout_height="50dp"
                    android:layout_gravity="center|top"
                    android:src="@drawable/ic_launcher" />
            </FrameLayout>


            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:background="@android:color/white"
                android:weightSum="2">

                <Button
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:background="@android:color/black"
                    android:text="Submit"
                    android:textColor="#FFFFFF" />

                <View
                    android:layout_width="4dp"
                    android:layout_height="match_parent"
                    android:background="@android:color/transparent" />

                <Button
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:background="@android:color/black"
                    android:text="Cancel"
                    android:textColor="#FFFFFF" />

            </LinearLayout>
        </LinearLayout>

- Manishika

---

不错的建议，但如果黑色边框仍然可见会更好。 - user3600801

我已经扩展了View类，并对其进行了修改以获得所需的效果。最终它可以正常工作。 - user3600801

Answer 3

你不应该使用LinearLayout，而应该使用RelativeLayout。因为子视图不能超出父视图。

- huangkuncan