使用 PagerAdapter 的 SlidingTabLayout 不滑动

Question

我正在实现一些来自 Google 的代码（SlidingTabLayout 和 SlidingTabStrip，在网上很容易找到），我正在尝试将它与 ViewPager 一起使用，以在我的 Fragment 中获取滑动标签。问题是，我在我的主选项卡片段类中使用PagerAdapter 作为扩展，它用于我的适配器以显示选项卡中的内容的视图。我能够获得在我的片段CuteCollectionFragment.java 中工作的选项卡的基本视图，但是当我单击它们时，它们通常需要单击 2 次才能突出显示新选项卡，而且您无法滑动以进入新选项卡。我的怀疑是因为通常用于主要活动的基本代码必须放在Fragment 中（因为我的Navigation Drawer），它与我的Navigation Drawer 冲突，它已经在滑动。但这只是一个猜测。

基本上，我必须使用Fragments，而不是活动。但是它们是如何冲突的，我该如何解决呢？我发现的所有在线示例都希望您使用FragmentPagerAdapter 而不是PagerAdapter 作为我的适配器的扩展名，但我不能这样做，因为它要求您使用支持v.4 的FragmentManager。我不能在我的CuteMainActivity（有我的导航抽屉代码的那个）中使用它，因为我不能点击每个导航抽屉菜单项并转到Fragment，我的 switch 语句出现红色错误在Fragment fragment 部分，它说我的片段必须全部扩展FragmentActivity，但它们不能使用导航抽屉，它们必须扩展Fragment！

无论如何，天哪，这太令人困惑了。主要我只想知道两件事：

1. 为什么我的标签不滑动（以及为什么它们需要点击 2 次）

2. 如何连接我的内部 TabsAdapter 类以显示我的选项卡类（它们都是 Fragments）。我已经准备好标签片段类/xml（例如 PhotoTab.java、VideoTab.java 等），但是如何将它们与标签中的视图挂钩？

这是我的整个项目，如果您想自己跑一下看看。 ICollectCute app

我只会在Fragment 下方包含我试图放入滑块选项卡代码的内容，以及它们从中提取的xml。如果您需要更多文件，请告诉我。您可能需要的唯一其他（但可能不需要）是名为SlidingTabLayout 和SlidingTabStrip 的Google 类，或者可能是我的CuteMainActivity，我将所有导航抽屉代码放在其中。但是寻找添加/错误的主要地方是我的CuteCollectionFragment 类，因为滑动选项卡需要在那里实现。

我得到了来自 this S.O. post 的帮助。

感谢您的帮助！

CuteCollectionFragment.java

package org.azurespot.cutecollection;

import android.app.Fragment;
import android.app.FragmentManager;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import org.azurespot.R;

/**
 * Created by mizu on 1/26/15.
 */
public class CuteCollectionFragment extends Fragment {

    static final String LOG_TAG = "SlidingTabsBasicFragment";
    private SlidingTabLayout mSlidingTabLayout;
    private ViewPager mViewPager;
    FragmentManager fragmentManager;

    View photoView;
    View videoView;
    View audioView;
    View textView;

    private static final int PHOTO_TAB = 0;
    private static final int VIDEO_TAB = 1;
    private static final int AUDIO_TAB = 2;
    private static final int TEXT_TAB = 3;



    public CuteCollectionFragment(){}


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

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

        photoView = inflater.inflate(R.layout.photo_tab,
                container, false);

        videoView = inflater.inflate(R.layout.video_tab,
                container, false);
        audioView = inflater.inflate(R.layout.audio_tab,
                container, false);
        textView = inflater.inflate(R.layout.text_tab,
                container, false);

//      Toolbar toolbar = (Toolbar) rootView.findViewById(R.id.toolbar);

        fragmentManager = getActivity().getFragmentManager();

        mViewPager = (ViewPager) rootView.findViewById(R.id.viewpager);
        mViewPager.setAdapter(new TabsAdapter());
        mSlidingTabLayout = (SlidingTabLayout) rootView.findViewById(R.id.sliding_tabs);
        mSlidingTabLayout.setViewPager(mViewPager);


        return rootView;
    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);

//
    }

    class TabsAdapter extends PagerAdapter {

        /**
         * @return the number of pages (tabs) to display
         */
        @Override
        public int getCount() {
            return 5;
        }

        /**
         * @return true if the value returned from
         *         {@link #instantiateItem(ViewGroup, int)} is the same object
         *         as the {@link View} added to the {@link ViewPager}.
         */
        @Override
        public boolean isViewFromObject(View view, Object o) {
            return o == view;
        }

        // BEGIN_INCLUDE (pageradapter_getpagetitle)
        /**
         * Return the title of the item at {@code position}. This is important
         * as what this method returns is what is displayed in the
         * {@link SlidingTabLayout}.
         * <p>
         * Here we construct one using the position value, but for real
         * application the title should refer to the item's contents.
         */
        @Override
        public CharSequence getPageTitle(int position) {
            return "Item " + (position + 1);

        }

        // END_INCLUDE (pageradapter_getpagetitle)

        /**
         * Instantiate the {@link View} which should be displayed at
         * {@code position}. Here we inflate a layout from the apps resources
         * and then change the text view to signify the position.
         */
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            // Inflate a new layout from our resources

            View view = getActivity().getLayoutInflater().inflate(R.layout.pager_item,
                    container, false);
            // Add the newly created View to the ViewPager
            container.addView(view);

            // Retrieve a TextView from the inflated View, and update it's text
            TextView title = (TextView) view.findViewById(R.id.item_title);
            title.setText(String.valueOf(position + 1));

//            Log.i(LOG_TAG, "instantiateItem() [position: " + position + "]");

            // Return the View
            return view;
        }

        /**
         * Destroy the item from the {@link ViewPager}. In our case this is
         * simply removing the {@link View}.
         */
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View) object);
//            Log.i(LOG_TAG, "destroyItem() [position: " + position + "]");
        }

    }

}

fragment_cute_collection.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="#2198bb" >

    <!--<android.support.v7.widget.Toolbar-->
        <!--xmlns:app="http://schemas.android.com/apk/res-auto"-->
        <!--android:id="@+id/toolbar"-->
        <!--android:layout_width="match_parent"-->
        <!--android:layout_height="wrap_content"-->
        <!--android:minHeight="?attr/actionBarSize"-->
        <!--app:theme="@style/ThemeOverlay.AppCompat.ActionBar">-->

    <org.azurespot.cutecollection.SlidingTabLayout
        android:id="@+id/sliding_tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <!--</android.support.v7.widget.Toolbar>-->

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:background="@android:color/white" />


</RelativeLayout>

pager_item.xml

<?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:orientation="vertical"
    android:gravity="center">

    <TextView
        android:id="@+id/item_subtitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Page:"/>

    <TextView
        android:id="@+id/item_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="80sp" />

</LinearLayout>

这是我的适配器类之一。每个选项卡都有自己的类和适配器类。这是一个（虽然还没有连接到 CuteCollectionFragment.java，因为我不知道怎么做）：

PhotoTab.java

import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.GridView;

import org.azurespot.R;

/**
 * Created by mizu on 2/8/15.
 */
public class PhotoTab extends Fragment{

    private GridView gridView;
    private GridViewPhotoAdapter gvPhotoAdapter;

    public PhotoTab(){}

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View v = inflater.inflate(R.layout.photo_tab, container, false);

        // with fragments, make sure you include the rootView when finding id
        gridView = (GridView) v.findViewById(R.id.photo_grid);
        // Create the Custom Adapter Object
        gvPhotoAdapter = new GridViewPhotoAdapter(getActivity());
        // Set the Adapter to GridView
        gridView.setAdapter(gvPhotoAdapter);

        return v;
    }
}

PhotoTab.java 的适配器，GridViewPhotoAdapter.java

package org.azurespot.cutecollection;

import android.app.Activity;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;

import org.azurespot.R;

/**
 * Created by mizu on 2/5/15.
 */
public class GridViewPhotoAdapter extends ArrayAdapter {

    public Context context;
    public ImageView mediaPhoto;


    public GridViewPhotoAdapter(Context context) {
        super(context, 0);
        this.context = context;

    }

    public int getCount() {
        return 24;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {

        View row = convertView;

        if (row == null)
        {
            LayoutInflater inflater = ((Activity) context).getLayoutInflater();
            row = inflater.inflate(R.layout.photo_grid_row, parent, false);

            mediaPhoto = (ImageView) row.findViewById(R.id.photo_view);

            mediaPhoto.setImageResource(R.drawable.ic_collection_add);

        }

        return row;

    }

}

Answer 1

我也遇到过这个问题。我通过使用 https://github.com/google/iosched/tree/0a90bf8e6b90e9226f8c15b34eb7b1e4bf6d632e/android/src/main/java/com/google/samples/apps/iosched/ui/widget 中的 SlidingTabLayou 和 SlidingTabTrip 使其工作。 感谢 Google I/O 更新。