如何实现材料指南中描述的全屏对话框?

时间:2015-07-24 09:27:38

标签: android

材料指南描述了全屏对话框的行为(https://www.google.com/design/spec/components/dialogs.html#dialogs-full-screen-dialogs)。我怎样才能在实践中实现这一目标?我无法找到有意义的教程或样本!感谢。

3 个答案:

答案 0 :(得分:41)

Boss的答案是正确的,但错过了问题链接中显示的请求操作栏。

所以,下面的完整示例。

对话框片段:

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
   color: red;
   font-size: 12pt; 
}
::-moz-placeholder { /* Firefox 19+ */
   color: red;
   font-size: 12pt; 
}
:-ms-input-placeholder { /* IE 10+ */
   color: red;
   font-size: 12pt; 
}
:-moz-placeholder { /* Firefox 18- */
   color: red;
   font-size: 12pt;
}

布局dialog_ak.xml:

public class AKDialogFragment extends DialogFragment {

private static final String TAG = "AKDialogFragment";

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

    View rootView = inflater.inflate(R.layout.dialog_ak, container, false);

    Toolbar toolbar = (Toolbar) rootView.findViewById(R.id.toolbar);
    toolbar.setTitle("Dialog title");

    ((AppCompatActivity) getActivity()).setSupportActionBar(toolbar);

    ActionBar actionBar = ((AppCompatActivity) getActivity()).getSupportActionBar();
    if (actionBar != null) {
        actionBar.setDisplayHomeAsUpEnabled(true);
        actionBar.setHomeButtonEnabled(true);
        actionBar.setHomeAsUpIndicator(android.R.drawable.ic_menu_close_clear_cancel);
    }
    setHasOptionsMenu(true);
    return rootView;
}

@NonNull
@Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
    Dialog dialog = super.onCreateDialog(savedInstanceState);
    dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
    return dialog;
}

@Override
public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
    menu.clear();
    getActivity().getMenuInflater().inflate(R.menu.menu_ak, menu);
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    int id = item.getItemId();

    if (id == R.id.action_save) {
        // handle confirmation button click here
        return true;
    } else if (id == android.R.id.home) {
        // handle close button click here
        dismiss();
        return true;
    }

    return super.onOptionsItemSelected(item);
}
}

菜单menu_ak.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay"/>

</android.support.design.widget.AppBarLayout>

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Your content here"/>

</LinearLayout>

</android.support.design.widget.CoordinatorLayout>

托管活动必须扩展AppCompatActivity。启动对话框与Boss回答相同:

<menu xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools">
  <item
    android:id="@+id/action_save"
    android:orderInCategory="100"
    android:title="Save"
    app:showAsAction="always"/>
</menu>

我希望它有所帮助。

答案 1 :(得分:3)

使用DialogFragment

请参阅此链接以显示对话框全屏或嵌入式片段

http://developer.android.com/guide/topics/ui/dialogs.html#FullscreenDialog

我只是在这里复制代码。

创建一个dialogfragment

    public class CustomDialogFragment extends DialogFragment {
    /** The system calls this to get the DialogFragment's layout, regardless
        of whether it's being displayed as a dialog or an embedded fragment. */
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        // Inflate the layout to use as dialog or embedded fragment
        return inflater.inflate(R.layout.purchase_items, container, false);
    }

    /** The system calls this only when creating the layout in a dialog. */
    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        // The only reason you might override this method when using onCreateView() is
        // to modify any dialog characteristics. For example, the dialog includes a
        // title by default, but your custom layout might not need it. So here you can
        // remove the dialog title, but you must call the superclass to get the Dialog.
        Dialog dialog = super.onCreateDialog(savedInstanceState);
        dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
        return dialog;
    }
}

然后添加此方法以显示对话框

    public void showDialog() {
    FragmentManager fragmentManager = getSupportFragmentManager();
    CustomDialogFragment newFragment = new CustomDialogFragment();

    if (mIsLargeLayout) {
        // The device is using a large layout, so show the fragment as a dialog
        newFragment.show(fragmentManager, "dialog");
    } else {
        // The device is smaller, so show the fragment fullscreen
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        // For a little polish, specify a transition animation
        transaction.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_OPEN);
        // To make it fullscreen, use the 'content' root view as the container
        // for the fragment, which is always the root view for the activity
        transaction.add(android.R.id.content, newFragment)
                   .addToBackStack(null).commit();
    }
}

必须关注的主要问题是这一行

transaction.add(android.R.id.content, newFragment).addToBackStack(null).commit();

当您将rootview指定为 android.R.id.content

时,对话框将变为全屏

答案 2 :(得分:0)

试试这段代码:

Dialog yourDialog=new Dialog(this,android.R.styleTheme_Black_NoTitleBar_Fullscreen)