自定义底部对话框的视图

Question

我想获取以下类似的BottomSheetDialog：系统窗口的边距。我该如何实现？

- KyawLinnThant

Answer 1

您可以按以下方式创建底部对话框片段：

首先，按如下所示创建名为

fragment_bottomsheet

的xml文件。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:layout_margin="20dp"
        android:background="@drawable/round_corner_white3"
        android:orientation="vertical">

        <TextView
            android:id="@+id/tv_select_address"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textColor="@color/white"
            android:background="@drawable/round_corner_gray"
            android:layout_margin="10dp"
            android:layout_alignParentBottom="true"
            android:paddingBottom="10dp"
            android:paddingTop="10dp"
            android:text="Select Address" />

    </RelativeLayout>

</RelativeLayout>

现在创建一个名为

BottomSheetFragment

的底部弹出窗口片段。

import android.app.Dialog;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.design.widget.BottomSheetDialogFragment;
import android.view.View;

public class BottomSheetFragment extends BottomSheetDialogFragment {

    public static BottomSheetFragment newInstance() {
        BottomSheetFragment fragment = new BottomSheetFragment();
        return fragment;
    }

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Override
    public void setupDialog(Dialog dialog, int style) {
        View contentView = View.inflate(getContext(), R.layout.fragment_bottomsheet, null);
        dialog.setContentView(contentView);
        ((View) contentView.getParent()).setBackgroundColor(getResources().getColor(android.R.color.transparent));
    }

}

要调用底部片段，您可以按照以下方式编写：

BottomSheetFragment bottomSheetDialog = BottomSheetFragment.newInstance();
bottomSheetDialog.show(getSupportFragmentManager(), "Bottom Sheet Dialog Fragment");

目前我只使用了一个TextView，并且附上了屏幕截图，因为你主要关心在底部表中获取边距。同样，通过这种方式，您可以根据自己的需求自定义底部表。谢谢！

- android

---

最好覆盖onCreateView(...){return inflater.inflate(R.layout.dlg_layout, null)}而不是使用setupDialog。 - NickUnuchek

没有圆角和边距对我来说。 - Sambhav Khandelwal

@NickUnuchek：出现错误java.lang.NullPointerException: 尝试在空对象引用上调用虚拟方法 'void android.view.View.setBackgroundColor(int)' - C.F.G

@C.F.G 在返回fun之前，与视图一起工作：override onCreateView(...) {val view = inflater.inflate(R.layout.dlg_layout, null); view.setBackgroundColor(int); return view} - NickUnuchek

@NickUnuchek：看我的回答，这是正确的方式。 - C.F.G

这些方法不够用户友好，使用下面的代码在点击边距时取消对话框：parent.setOnClickListener { dismiss() } - SadeQ digitALLife

Answer 2

在你的样式中使用这个。在values文件夹中创建一个名为styles的文件夹并使用以下代码。

<style name="BottomSheetDialogTheme" parent="Theme.Design.Light.BottomSheetDialog">
    <item name="bottomSheetStyle">@style/BottomSheetStyle</item>
</style>

<style name="BottomSheetStyle" parent="Widget.Design.BottomSheet.Modal">
    <item name="android:background">@android:color/transparent</item>
</style>

现在，在你的Fragment类中将它设置为背景。

@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
    View view = inflater.inflate(R.layout.fragment_bottom_sheet, container, false);

    textView = view.findViewById(R.id.textview);

    return view;
}

对于圆角，只需创建一个带有简单形状和圆角的drawable（例如，drawable/bottom_sheet_background.xml）即可。

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/white" />
    <corners android:radius="18dp" />
</shape>

最后别忘了将它分配给您布局的根元素。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:layout_margin="20dp"
        android:background="@drawable/bottom_sheet_background"
        android:orientation="vertical">

        <TextView
            android:id="@+id/easy_tv"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_margin="10dp"
            android:background="@drawable/toast_background"
            android:gravity="center"
            android:paddingTop="10dp"
            android:paddingBottom="10dp"
            android:text="Select Address"
            android:textColor="@color/white" />

    </RelativeLayout>

</RelativeLayout>

- Jaime Olivé

Answer 3

    Use this in your styles. Create a folder in values called styles and use this code.


<style name="BottomSheetDialogTheme" parent="Theme.Design.Light.BottomSheetDialog">
            <item name="bottomSheetStyle">@style/BottomSheetStyle</item>
        </style>
        <style name="BottomSheetStyle" parent="Widget.Design.BottomSheet.Modal">
            <item name="android:background">@android:color/transparent</item>
        </style>

要调用底部片段，请按照以下方式编写：

BottomSheetDialog bottomSheet = new BottomSheetDialog(Activity.this, R.style.BottomSheetDialogTheme); bottomSheet.setContentView(R.layout.your_layout); bottomSheet.show();

- Singh Praveen

Answer 4

更标准的接受答案形式（`setupDialog`替代）：

bottom_sheet.xml

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout 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">
    
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:layout_margin="20dp"
            android:background="@drawable/round_corner_white3"
            android:orientation="vertical">
    
            <TextView
                android:id="@+id/tv_select_address"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:textColor="@color/white"
                android:background="@drawable/round_corner_gray"
                android:layout_margin="10dp"
                android:layout_alignParentBottom="true"
                android:paddingBottom="10dp"
                android:paddingTop="10dp"
                android:text="Select Address" />
    
        </RelativeLayout>
    
    </RelativeLayout>

BottomSheetFragment.java

    import android.app.Dialog;
    import android.os.Bundle;
    import android.support.annotation.Nullable;
    import android.support.design.widget.BottomSheetDialogFragment;
    import android.view.View;
    
    public class BottomSheetFragment extends BottomSheetDialogFragment {
    
        public static BottomSheetFragment newInstance() {
            BottomSheetFragment fragment = new BottomSheetFragment();
            return fragment;
        }
    
        @Override
        public void onCreate(@Nullable Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
        }
    
        @Nullable
        @Override
        public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        
            return inflater.inflate(R.layout.bottom_sheet, container,false);
        }
    
        @Override
        public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
            super.onViewCreated(view, savedInstanceState);
        
            ((View) view.getParent()).setBackgroundColor(getResources().getColor(android.R.color.transparent));
        
            //other views ... 
        }
    
    }

- C.F.G