SlidingTabLayout 不显示选项卡

Question

我正在尝试使用 developer.android.com 中给出的this 示例在片段内实现SlidingTabLayout。但是在那个例子中我只能显示ViewerPager，标签没有显示在我的用户界面中。

这是我运行项目后得到的视图：

我可以滑动到每一页，但问题是没有标签。

这是我的片段：

public class HomeFragment extends Fragment {
    static final String LOG_TAG = "SlidingTabsFragment";
    static final String PAGE_TITLE = "Page_Title";
    private ViewPager mPager;
    private SlidingTabLayout mTabs;

    public HomeFragment() {
        // Required empty public constructor
    }


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

    @Override
    public void onViewCreated(View view, Bundle savedInstanceState) {
        mPager = (ViewPager) view.findViewById(R.id.pager);
        mPager.setAdapter(new SamplePagerAdapter());
        mTabs = (SlidingTabLayout) view.findViewById(R.id.tabs);
        mTabs.setViewPager(mPager);
    }

    private class SamplePagerAdapter extends PagerAdapter {
        @Override
        public int getCount() {
            return 3;
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return object == view;
        }

        @Override
        public CharSequence getPageTitle(int position) {
            //  return super.getPageTitle(position);
            Log.i(PAGE_TITLE, position+1+"");
            return "Item " + (position + 1);
        }

        @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;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View) object);
            Log.i(LOG_TAG, "destroyItem() [position: " + position + "]");
        }
    }
}

这是fragment_home.xml：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="layout.HomeFragment">

    <!-- TODO: Update blank fragment layout -->
    <layout.home.factory.SlidingTabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:elevation="2dp" />

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1" />

</FrameLayout>

这是我的styles.xml：

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

</style>

<style name="Base.AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/md_indigo_500</item>
    <item name="colorPrimaryDark">@color/md_indigo_700</item>
    <item name="colorAccent">@color/md_pink_500</item>
    <item name="colorControlHighlight">@color/md_indigo_500_25</item>
    <item name="android:windowBackground">@color/md_white_1000</item>
</style>

<style name="ToolbarTheme" parent="AppTheme">
    <item name="android:textColorPrimary">@android:color/white</item>
    <item name="android:textColorSecondary">@android:color/white</item>
</style>

<style name="NavigationViewTheme" parent="AppTheme">
    <item name="textAppearanceListItem">@style/TextAppearance.AppCompat.Body2</item>
</style>

我是 android 的新手，希望有人能给我一个解决方案。提前致谢。

更新：

activity_main.xml：

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/navigation_drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="@bool/fitsSystemWindows">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="@dimen/status_bar_kitkat_height"
            android:background="?colorPrimary" />

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="@dimen/status_bar_lollipop_height"
            android:background="?colorPrimaryDark" />

    </LinearLayout>

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/status_bar_margin_top">

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

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?actionBarSize"
            android:background="?attr/colorPrimary"
            android:elevation="4dp"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:theme="@style/ToolbarTheme"/>

    </FrameLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="@bool/fitsSystemWindows"
        app:headerLayout="@layout/navigation_drawer_header"
        app:menu="@menu/navigation_drawer_menu"
        app:theme="@style/NavigationViewTheme" />

   </android.support.v4.widget.DrawerLayout>

Answer 1

android:marginTop="?actionBarSize"

将此行添加到工具栏上方的框架布局

Answer 2

实际上，您将 ViewPager 高度设置为“match_parent”，这就是它重叠选项卡视图使用 LinearLayout 而不是 FrameLayout 的原因。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="layout.HomeFragment">

<!-- TODO: Update blank fragment layout -->
<layout.home.factory.SlidingTabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:elevation="2dp" />

<android.support.v4.view.ViewPager
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1" />

</LinearLayout>

或者固定SlidingTabLayout的高度，给ViewPager视图同样的marginTop

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="layout.HomeFragment">

<!-- TODO: Update blank fragment layout -->
<layout.home.factory.SlidingTabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:elevation="2dp" />

<android.support.v4.view.ViewPager
    android:layout_marginTop="100dp"
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="1" />

</FrameLayout>