操作栏选项卡内容重叠。

5
我在StackOverflow上发现了很多这样的消息。像其他许多人一样,我在切换选项卡时遇到了选项卡内容重叠的问题。我找到的所有建议都无法解决我的问题。
当我的应用程序启动时,它会正确显示第一个选项卡的内容。当我单击其他选项卡时,旧内容仍停留在屏幕上,并且其他选项卡的内容也添加到屏幕上。第二次切换选项卡时,所有内容都消失了。再次切换选项卡不会有任何反应。
我按照Google的开发人员文档here进行操作。
我的应用程序有这个onCreate方法。该类扩展自支持库android.support.v7.appActionBarActivity
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    ActionBar actionBar = getSupportActionBar();
    actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
    actionBar.setDisplayShowTitleEnabled(false);

    Tab tab = actionBar.newTab().setText("TAB1").setTabListener(new TabListener<Tab1Class>(this, "tab1", Tab1Class.class));
    actionBar.addTab(tab);

    tab = actionBar.newTab().setText("TAB2").setTabListener(new TabListener<Tab2Class>(this, "tab2", Tab2Class.class));
    actionBar.addTab(tab);
}

我的TabListener类是从我链接的页面上复制的:

public class TabListener<T extends Fragment> implements ActionBar.TabListener {
    private Fragment mFragment;
    private final Activity mActivity;
    private final String mTag;
    private final Class<T> mClass;

    public TabListener(Activity activity, String tag, Class<T> clz) {
        mActivity = activity;
        mTag = tag;
        mClass = clz;
    }

    @Override
    public void onTabSelected(Tab tab, FragmentTransaction ft) {
        if(mFragment == null) {
            mFragment = Fragment.instantiate(mActivity, mClass.getName());
            ft.add(android.R.id.content, mFragment, mTag);
        } else {
            ft.attach(mFragment);
        }
    }

    @Override
    public void onTabUnselected(Tab tab, FragmentTransaction ft) {
        if(mFragment != null) {
            ft.detach(mFragment);
        }
    }

    @Override
    public void onTabReselected(Tab tab, FragmentTransaction ft) {} 
}

我在选项卡中使用的两个类都继承自 android.support.v4.app.Fragment。它们在 onCreateView 方法中填充它们的布局。

有什么问题吗?

1个回答

7

有什么问题吗?

快速查看ActionBarActivity代码后发现,在实现ActionBarICS及以上版本(在早期的设备上应该可以工作)时存在一个bug,同时也负责选项卡。

在表示ICS设备实现的ActionBarImplICS类中,传递给onTabUnselected()回调的FragmentTransaction完全没有用处,因为在监听器的回调返回后它没有被提交过(另外两个回调的事务已经提交)。所以选择选项卡时不会分离从布局中提交的片段,并且由于包含两个片段的FrameLayout,它将保持获取重叠内容。

我编写了TabListener接口的另一个实现,只从未受上述错误影响的一个回调onTabSelected()中完成所有任务:

public class TabListenerImpl implements ActionBar.TabListener {

    private List<TabInfo> mTabs = new ArrayList<TabInfo>();
    private Context mContext;

    public TabListenerImpl(Context context) {
        mContext = context;
    }

    @Override
    public void onTabReselected(Tab tab, FragmentTransaction ft) {

    }

    @Override
    public void onTabSelected(Tab tab, FragmentTransaction ft) {
        // iterate over all of the tabs, match the tag we have and see if
        // we also have a fragment instance for it. If we don't, create one
        // and add it to the container, if we have an instance simply attach
        // it. Detach every other tag which doesn't match the tag.
        for (TabInfo t : mTabs) {
            if (tab.getTag() == t.tag) {
                if (t.pageFragment == null) {
                    t.pageFragment = Fragment.instantiate(mContext,
                            t.clazz.getName());
                    ft.add(android.R.id.content, t.pageFragment, t.tag);
                } else {
                    ft.attach(t.pageFragment);
                }
            } else {
                if (t.pageFragment != null && !t.pageFragment.isDetached()) {
                    ft.detach(t.pageFragment);
                }
            }
        }
    }

    @Override
    public void onTabUnselected(Tab tab, FragmentTransaction ft) {
        // faulty method
    }

    /**
     * Call this method BEFORE you call the actionBar.addTab() method!
     * 
     * @param tag
     *            a String representing the tag that was set on the tab to
     *            identify itself
     * @param clazz
     *            the class of the Fragment
     */
    public void addTab(String tag, Class<? extends Fragment> clazz) {
        TabInfo ti = new TabInfo();
        ti.clazz = clazz;
        ti.tag = tag;
        mTabs.add(ti);
    }

    // wrapper class
    private class TabInfo {
        Class<? extends Fragment> clazz;
        Fragment pageFragment;
        String tag;
    }

}

您可以将其用作:

TabListenerImpl listener = new TabListenerImpl(this);
Tab tab = actionBar.newTab().setText("TAB1").setTag("TAB1").setTabListener(listener);
listener.addTab("TAB1", Tab1Class.class);
actionBar.addTab(tab);

tab = actionBar.newTab().setText("TAB2").setTag("TAB2").setTabListener(listener);
listener.addTab("TAB2", Tab2Class.class);
actionBar.addTab(tab);

我建议您将一个容器设置为内容视图(同时也是选项卡内容),而不是使用android.R.id.content容器。请记住,我的实现不会处理配置更改。

太棒了!我遇到了很多问题,因为我想让应用程序在API 10设备上运行。我希望人们会放弃那些旧手机,购买安卓4的新手机。顺便问一下,你知道为什么我的应用程序在使用这些选项卡时没有标题吗?或者为什么即使我有“android:showAsAction =”always“”,我的菜单也会折叠成这些点呢? - MikkoP
@MikkoP 你知道为什么我使用这些选项卡时,我的应用程序没有标题吗? - 这只发生在您使用选项卡时吗?您可以始终使用actionBar.setTitle()方法。或者为什么即使我有android:showAsAction="always",我的菜单也会折叠成这些点呢? - 您的溢出菜单中是否有菜单项(单击3个点图像时弹出的弹出窗口)? - user
只有在使用这些选项卡时才会发生这种情况。actionBar.setTitle()不会改变任何内容,Activity中的setTitle()也是如此。是的,这些菜单项显示在溢出菜单中。我又发布了一个新问题,所以如果有人回答它,其他人可能会更容易找到并得到帮助。https://dev59.com/OXjZa4cB1Zd3GeqPfIYq - MikkoP
这里有一个参考文献,"Issue 58602: Support AppCompat - onTabUnselected does not call tx.commit() on ICS", https://code.google.com/p/android/issues/detail?id=58602 - HackNone

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接