在显示TabLayout DialogFragment [英] Show DialogFragment over TabLayout

问题描述

我试图表现出DialogFragment全屏使得动作条仍然可见，但在TabLayout选项卡是隐藏的。

在左边的图像 是我已经成功地实现;图像的右侧是我的目标什么：

有两个问题：

1. 的标签仍显示，用户可以交互;

由于
2. 额外的的FrameLayout 来显示对话框中， ViewPager 内容仍清晰可见（FAB的按钮不是对话的一部分）。这也意味着，用户可以与在该寻呼机，其中包括改变标签的能力的内容进行交互。

主要活动布局（main.xml中）

 ＆LT;？XML版本=1.0编码=UTF-8＆GT？;
＆LT;的LinearLayout
    的xmlns：机器人=htt​​p://schemas.android.com/apk/res/android
    的xmlns：程序=htt​​p://schemas.android.com/apk/res-auto
    机器人：layout_width =match_parent
    机器人：layout_height =match_parent
    机器人：方向=垂直＆GT;    ＆LT; android.support.design.widget.CoordinatorLayout
        机器人：ID =@ + ID / toolbar_layout
        机器人：layout_width =match_parent
        机器人：layout_height =WRAP_CONTENT＆GT;        ＆LT;！ - 使用ThemeOverlay使工具栏和tablayout文本
             白色 - ＆GT;
        ＆LT; android.support.design.widget.AppBarLayout
            机器人：ID =@ + ID / abl_top
            机器人：layout_height =WRAP_CONTENT
            机器人：layout_width =match_parent
            机器人：主题=@风格/ ThemeOverlay.AppCompat.Dark.ActionBar＆GT;            ＆LT; android.support.v7.widget.Toolbar
                机器人：ID =@ + ID /工具栏
                机器人：fitsSystemWindows =真
                机器人：layout_height =WRAP_CONTENT
                机器人：layout_width =match_parent
                应用：popupTheme =@风格/ ThemeOverlay.AppCompat.Light
                应用：layout_scrollFlags =滚动| enterAlways/＆GT;            ＆LT; android.support.design.widget.TabLayout
                机器人：ID =@ + ID / tab_layout
                机器人：layout_width =match_parent
                机器人：layout_height =WRAP_CONTENT
                风格=@风格/ CustomTabStyle/＆GT;        ＆LT; /android.support.design.widget.AppBarLayout>
    ＆LT; /android.support.design.widget.CoordinatorLayout>    ＆LT;的FrameLayout
        机器人：ID =@ + ID /内容
        机器人：layout_width =match_parent
        机器人：layout_height =WRAP_CONTENT＆GT;
    ＆LT; /＆的FrameLayout GT;    ＆LT; android.support.v4.view.ViewPager
        机器人：ID =@ + ID / viewpager
        机器人：layout_width =match_parent
        机器人：layout_height =match_parent
        应用：layout_behavior =@字符串/ appbar_scrolling_view_behavior/＆GT;＆LT; / LinearLayout中＆GT;
 

MainActivity.java

 包com.example.app;进口android.content.Context;
进口android.graphics.drawable.Drawable;
进口android.os.Bundle;
进口android.support.design.widget.TabLayout;
进口android.support.v4.app.Fragment;
进口android.support.v4.app.FragmentManager;
进口android.support.v4.app.FragmentPagerAdapter;
进口android.support.v4.view.ViewPager;
进口android.support.v7.app.ActionBar;
进口android.support.v7.app.AppCompatActivity;
进口android.support.v7.widget.Toolbar;
进口android.text.Spannable;
进口android.text.SpannableString;
进口android.text.style.ImageSpan;
进口android.util.Log;进口的java.util.ArrayList;
进口的java.util.List;公共类MainActivity
    扩展AppCompatActivity
{
    私有静态最后弦乐TAG =MainActivity;    @覆盖
    公共无效的onCreate（捆绑savedInstanceState）{
        super.onCreate（savedInstanceState）;
        的setContentView（R.layout.main）;        //设置AppBar
        工具条工具栏=（栏）findViewById（R.id.toolbar）;
        如果（工具栏！= NULL）{
            setSupportActionBar（工具栏）;
        }        //设置ViewPager
        ViewPager viewPager =（ViewPager）findViewById（R.id.viewpager）;
        如果（viewPager！= NULL）{
            setupViewPager（viewPager）;
        }        //设置TabLayout
        TabLayout TL =（TabLayout）findViewById（R.id.tab_layout）;
        tl.setupWithViewPager（viewPager）;
    }    @覆盖
    公共无效onBack pressed（）{
        super.onBack pressed（）;
    }    私人无效setupViewPager（ViewPager viewPager）{
        转接适配器=新的适配器（
            getSupportFragmentManager（），MainActivity.this）;
        adapter.addFragment（
            新片段1（）
            标签1，R.drawable.numeric_1_box_outline）;
        adapter.addFragment（
            新Fragment2（），
            选项卡2，R.drawable.numeric_2_box_outline）;
        viewPager.setAdapter（适配器）;
    }    静态类适配器扩展FragmentPagerAdapter {
        私人最终名单＆LT;片断＆gt; mFragments =新的ArrayList＆LT;＆GT;（）;
        私人最终名单＆LT;整数GT; mFragmentIcons =新的ArrayList＆LT;＆GT;（）;
        私人最终名单＆LT;串GT; mFragmentTitles =新的ArrayList＆LT;＆GT;（）;
        私人上下文的背景下;        公共适配器（FragmentManager FM，上下文的背景下）{
            超（FM）;
            this.context =背景;
        }        公共无效addFragment（片段片段，弦乐标题，诠释iconId）{
            mFragments.add（片段）;
            mFragmentTitles.add（职称）;
            mFragmentIcons.add（iconId）;
        }        @覆盖
        公共片段的getItem（INT位置）{
            返回mFragments.get（位置）;
        }        @覆盖
        公众诠释的getCount（）{
            返回mFragments.size（）;
        }        @覆盖
        公共CharSequence的getPageTitle（INT位置）{
            绘制的图像= context.getResources（）。getDrawable（
                    mFragmentIcons.get（位置），NULL）;
            image.setBounds（0，0，image.getIntrinsicWidth（），
                    image.getIntrinsicHeight（））;
            SpannableString SB =新SpannableString（+ mFragmentTitles.get（位置））;
            ImageSpan imageSpan =新ImageSpan（图像，ImageSpan.ALIGN_BOTTOM）;
            sb.setSpan（imageSpan，0,1，Spannable.SPAN_EXCLUSIVE_EXCLUSIVE）;
            返回SB;
        }
     }}
 

解决方案

如果你想对话是全屏，根视图应该是的FrameLayout（而不是一个的LinearLayout）。如果你想在对话框中包含一个工具栏，您还需要第二个工具栏，因为你的第一个连接到TabLayout。

这样的事情应该工作：

activity_main.xml中

 ＆LT;？XML版本=1.0编码=UTF-8＆GT？;
＆LT;的FrameLayout
    的xmlns：机器人=htt​​p://schemas.android.com/apk/res/android
    的xmlns：程序=htt​​p://schemas.android.com/apk/res-auto
    机器人：layout_width =match_parent
    机器人：layout_height =match_parent
    机器人：方向=垂直
    机器人：ID =@ + ID /容器＆GT;    ＆LT; android.support.design.widget.CoordinatorLayout
        机器人：ID =@ + ID / toolbar_layout
        机器人：layout_width =match_parent
        机器人：layout_height =match_parent＆GT;        ＆LT; android.support.v4.view.ViewPager
            机器人：ID =@ + ID / viewpager
            机器人：layout_width =match_parent
            机器人：layout_height =match_parent
            应用：layout_behavior =@字符串/ appbar_scrolling_view_behavior/＆GT;        ＆LT;！ - 使用ThemeOverlay使工具栏和tablayout文本
             白色 - ＆GT;
        ＆LT; android.support.design.widget.AppBarLayout
            机器人：ID =@ + ID / abl_top
            机器人：layout_height =WRAP_CONTENT
            机器人：layout_width =match_parent
            机器人：主题=@风格/ ThemeOverlay.AppCompat.Dark.ActionBar＆GT;            ＆LT; android.support.v7.widget.Toolbar
                机器人：ID =@ + ID /工具栏
                机器人：fitsSystemWindows =真
                机器人：layout_height =WRAP_CONTENT
                机器人：layout_width =match_parent
                应用：popupTheme =@风格/ ThemeOverlay.AppCompat.Light
                应用：layout_scrollFlags =滚动| enterAlways/＆GT;            ＆LT; android.support.design.widget.TabLayout
                机器人：ID =@ + ID / tab_layout
                机器人：layout_width =match_parent
                机器人：layout_height =WRAP_CONTENT/＆GT;        ＆LT; /android.support.design.widget.AppBarLayout>        ＆LT; android.support.design.widget.FloatingActionButton
            机器人：layout_height =WRAP_CONTENT
            机器人：layout_width =WRAP_CONTENT
            应用：layout_anchor =@ ID / toolbar_layout
            应用：layout_anchorGravity =底部|右|结束
            应用：边框宽度=0dp
            机器人：layout_margin =20dp
            机器人：可点击=真/＆GT;    ＆LT; /android.support.design.widget.CoordinatorLayout>
＆LT; /＆的FrameLayout GT;
 

MainActivity.java

  ...@覆盖
公共无效的onCreate（捆绑savedInstanceState）{
    super.onCreate（savedInstanceState）;
    的setContentView（R.layout.activity_main）;    //设置AppBar
    工具条工具栏=（栏）findViewById（R.id.toolbar）;
    如果（工具栏！= NULL）{
        setSupportActionBar（工具栏）;
    }    //设置ViewPager
    ViewPager viewPager =（ViewPager）findViewById（R.id.viewpager）;
    如果（viewPager！= NULL）{
        setupViewPager（viewPager）;
    }    //设置TabLayout
    TabLayout TL =（TabLayout）findViewById（R.id.tab_layout）;
    tl.setupWithViewPager（viewPager）;
    FragmentTransaction交易= getSupportFragmentManager（）调用BeginTransaction（）。
    transaction.add（R.id.container，新DialogFragment（））;
    transaction.addToBackStack（标记）;
    器transaction.commit（）;
}...
 

fragment_dialog.xml

 ＆LT;？XML版本=1.0编码=UTF-8＆GT？;
＆LT; LinearLayout中的xmlns：机器人=htt​​p://schemas.android.com/apk/res/android
    的xmlns：程序=htt​​p://schemas.android.com/apk/res-auto
    机器人：方向=垂直的android：layout_width =match_parent
    机器人：layout_height =match_parent＆GT;    ＆LT; android.support.v7.widget.Toolbar
        机器人：ID =@ + ID / fragment_toolbar
        机器人：fitsSystemWindows =真
        机器人：layout_height =WRAP_CONTENT
        机器人：layout_width =match_parent
        机器人：背景=？ATTR / colorPrimaryDark
        应用：popupTheme =@风格/ ThemeOverlay.AppCompat.Light/＆GT;
    ＆LT;的FrameLayout
        机器人：layout_width =FILL_PARENT
        机器人：layout_height =FILL_PARENT
        机器人：背景=@机器人：彩色/ background_light＆GT;
        ＆LT;的TextView
            机器人：layout_width =WRAP_CONTENT
            机器人：layout_height =WRAP_CONTENT
            机器人：文字=这是对话框/＆GT;
        ＆LT; /＆的FrameLayout GT;＆LT; / LinearLayout中＆GT;
 

DialogFragment.java

 公共类DialogFragment扩展片段{    @覆盖
    公共查看onCreateView（LayoutInflater充气器，容器的ViewGroup，
                             捆绑savedInstanceState）{
        查看查看= inflater.inflate（R.layout.fragment_dialog，集装箱，FALSE）;
        最终的工具条工具栏=（栏）view.findViewById（R.id.fragment_toolbar）;
        toolbar.setTitle（对话框标题）;
        toolbar.setNavigationIcon（getResources（）getDrawable（R.drawable.ic_arrow_back_white））;
        toolbar.setNavigationOnClickListener（新View.OnClickListener（）{
            @覆盖
            公共无效的onClick（视图v）{
                。getActivity（）getSupportFragmentManager（）popBackStack（）。
            }
        }）;
        返回视图。
    }
}
 

我会建议使用一个活动的对话，而不是附加对话片段的观点，特别是如果你打算把文本输入到对话框。我使用的对话框一个片段时，经历了动画一些奇怪的行为和软键盘。创建新的活动解决了所有这些问题。

I'm trying to show a DialogFragment full-screen such that the ActionBar is still visible but the tabs in a TabLayout are hidden.

The image on the left is what I've managed to achieve; the image on the right is what I'm aiming for:

There are two issues:

1. The tabs are still shown, which the user can interact with;
2. Because of the extra FrameLayout to show the dialog, the ViewPager content is still visible (the FAB button is not part of the dialog). This also means that the user can interact with the content in the pager, which includes the ability to change tabs.

Main Activity Layout (main.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="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/toolbar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <!-- Use ThemeOverlay to make the toolbar and tablayout text
             white -->
        <android.support.design.widget.AppBarLayout
            android:id="@+id/abl_top"
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:fitsSystemWindows="true"
                android:layout_height="wrap_content"
                android:layout_width="match_parent"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_scrollFlags="scroll|enterAlways"/>

            <android.support.design.widget.TabLayout
                android:id="@+id/tab_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                style="@style/CustomTabStyle"/>

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

    <FrameLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </FrameLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</LinearLayout>

MainActivity.java

package com.example.app;

import android.content.Context;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.text.Spannable;
import android.text.SpannableString;
import android.text.style.ImageSpan;
import android.util.Log;

import java.util.ArrayList;
import java.util.List;

public class MainActivity
    extends AppCompatActivity
{
    private static final String TAG = "MainActivity";

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        // Setup AppBar
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        if (toolbar != null) {
            setSupportActionBar(toolbar);
        }

        // Setup ViewPager
        ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
        if (viewPager != null) {
            setupViewPager(viewPager);
        }

        // Setup TabLayout
        TabLayout tl = (TabLayout) findViewById(R.id.tab_layout);
        tl.setupWithViewPager(viewPager);
    }

    @Override
    public void onBackPressed() {
        super.onBackPressed();
    }

    private void setupViewPager(ViewPager viewPager) {
        Adapter adapter = new Adapter(
            getSupportFragmentManager(), MainActivity.this);
        adapter.addFragment(
            new Fragment1(),
            "Tab 1", R.drawable.numeric_1_box_outline);
        adapter.addFragment(
            new Fragment2(),
            "Tab 2", R.drawable.numeric_2_box_outline);
        viewPager.setAdapter(adapter);
    }

    static class Adapter extends FragmentPagerAdapter {
        private final List<Fragment> mFragments = new ArrayList<>();
        private final List<Integer> mFragmentIcons = new ArrayList<>();
        private final List<String> mFragmentTitles = new ArrayList<>();
        private Context context;

        public Adapter(FragmentManager fm, Context context) {
            super(fm);
            this.context = context;
        }

        public void addFragment(Fragment fragment, String title, int iconId) {
            mFragments.add(fragment);
            mFragmentTitles.add(title);
            mFragmentIcons.add(iconId);
        }

        @Override
        public Fragment getItem(int position) {
            return mFragments.get(position);
        }

        @Override
        public int getCount() {
            return mFragments.size();
        }

        @Override
        public CharSequence getPageTitle(int position) {
            Drawable image = context.getResources().getDrawable(
                    mFragmentIcons.get(position), null);
            image.setBounds(0, 0, image.getIntrinsicWidth(),
                    image.getIntrinsicHeight());
            SpannableString sb = new SpannableString("   " + mFragmentTitles.get(position));
            ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM);
            sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
            return sb;
        }
     }

}

解决方案

If you want the dialog to be full screen, the root view should be a FrameLayout (instead of a LinearLayout). If you want the dialog to contain a Toolbar, you'll also need a second Toolbar since your first one is attached to the TabLayout.

Something like this should work:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:id="@+id/container">

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/toolbar_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />

        <!-- Use ThemeOverlay to make the toolbar and tablayout text
             white -->
        <android.support.design.widget.AppBarLayout
            android:id="@+id/abl_top"
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:fitsSystemWindows="true"
                android:layout_height="wrap_content"
                android:layout_width="match_parent"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_scrollFlags="scroll|enterAlways"/>

            <android.support.design.widget.TabLayout
                android:id="@+id/tab_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"/>

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

        <android.support.design.widget.FloatingActionButton
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            app:layout_anchor="@id/toolbar_layout"
            app:layout_anchorGravity="bottom|right|end"
            app:borderWidth="0dp"
            android:layout_margin="20dp"
            android:clickable="true"/>

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


</FrameLayout>

MainActivity.java

...

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    // Setup AppBar
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    if (toolbar != null) {
        setSupportActionBar(toolbar);
    }

    // Setup ViewPager
    ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
    if (viewPager != null) {
        setupViewPager(viewPager);
    }

    // Setup TabLayout
    TabLayout tl = (TabLayout) findViewById(R.id.tab_layout);
    tl.setupWithViewPager(viewPager);


    FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
    transaction.add(R.id.container, new DialogFragment());
    transaction.addToBackStack("tag");
    transaction.commit();
}

...

fragment_dialog.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:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.Toolbar
        android:id="@+id/fragment_toolbar"
        android:fitsSystemWindows="true"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:background="?attr/colorPrimaryDark"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
    <FrameLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@android:color/background_light">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="This is the dialog"/>
        </FrameLayout>

</LinearLayout>

DialogFragment.java

public class DialogFragment extends Fragment {

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


        final Toolbar toolbar = (Toolbar) view.findViewById(R.id.fragment_toolbar);
        toolbar.setTitle("Dialog Title");
        toolbar.setNavigationIcon(getResources().getDrawable(R.drawable.ic_arrow_back_white));
        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                getActivity().getSupportFragmentManager().popBackStack();
            }
        });
        return view;
    }
}

I would recommend using an Activity for the dialog instead of attaching a dialog fragment to the view, especially if you plan to put input text into the dialog. I experienced some odd behavior with animations and the soft keyboard when using a Fragment for the dialog. Creating a new Activity resolved all of these issues.

这篇关于在显示TabLayout DialogFragment的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！