单个页面上的选项卡

Question

我目前正在使用 ViewPager 和 PagerTabStrip 在设备顶部显示 4 个选项卡。我想要做的就是将 4 个选项卡固定到位并居中，但我不知道如何做到这一点，因为旧方法（使用操作栏选项卡）已被弃用。

基本上我有这样的东西：

但我希望我的所有 4 个选项卡都在同一页面上（全部可见）。

这是我将寻呼机适配器设置为 ViewPager:

的代码

@Override
protected void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    pager = (ViewPager) findViewById(R.id.pager);
    pager.setAdapter(new MainPagerAdapter(getSupportFragmentManager()));

}

这是相关的 XML:

<android.support.v4.view.ViewPager
    android:id="@+id/pager"
    tools:context=".MainActivity"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v4.view.PagerTabStrip
        android:id="@+id/pager_tab_strip"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="top"
        android:background="@color/theme_color"
        android:textColor="#fff"
        android:paddingTop="18dp"
        android:paddingBottom="18dp"/>

</android.support.v4.view.ViewPager>

那么如何使用 PagerTabStrip 修复选项卡？如果我不能，我还能用什么来做？

注意：也有人问过类似的问题before but I can't find any solid answers that work. Similar question here。

Answer 1

如果您需要更多信息post，请在下方评论。

首先要将库添加到项目中gradle或安装库。

Gradle 添加编译 'com.jpardogo.materialtabstrip:library:1.0.9' 或在 https://github.com/jpardogo/PagerSlidingTabStrip

下载项目

apply plugin: 'com.android.application'

android {
    compileSdkVersion 22
    buildToolsVersion "22.0.1"

    defaultConfig {
        applicationId "com.eugene.pagertesting"
        minSdkVersion 14
        targetSdkVersion 22
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:22.1.1'
    compile 'com.jpardogo.materialtabstrip:library:1.0.9'
}

XML

<RelativeLayout
    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"
    tools:context=".MainActivity">


    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/primary"
        android:minHeight="56dp"
        app:theme="@style/ThemeOverlay.AppCompat.Dark"/>


    <com.astuetz.PagerSlidingTabStrip
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_below="@+id/toolbar"
        android:background="@color/primary"
        android:textColorPrimary="@color/white"
        app:pstsDividerColor="@color/primary"
        app:pstsIndicatorColor="@color/white"
        app:pstsIndicatorHeight="2dp"
        app:pstsShouldExpand="true"
        app:pstsUnderlineHeight="0dp"/>

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

</RelativeLayout>

PagerAdapter

public class PagerAdapter extends FragmentPagerAdapter {

    public PagerAdapter(FragmentManager fm) {
        super(fm);
    }

    private Fragment f = null;

    @Override
    public Fragment getItem(int position) { // Returns Fragment based on position
        switch (position) {
            case 0:
                f = new FragmentPageOne();
                break;
            case 1:
                f = new FragmentPageTwo();
                break;
        }
        return f;
    }

    @Override
    public int getCount() { // Return the number of pages
        return 2;
    }

    @Override
    public CharSequence getPageTitle(int position) { // Set the tab text
        if (position == 0) {
            return "Fragment One";
        }
        if (position == 1) {
            return "Fragment Two";
        }
        return getPageTitle(position);
    }
}

MainActivity

public class MainActivity extends AppCompatActivity {
    ViewPager viewPager;
    PagerAdapter pagerAdapter;
    PagerSlidingTabStrip pagerSlidingTabStrip;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        viewPager = (ViewPager) findViewById(R.id.pager);
        pagerAdapter = new PagerAdapter(getSupportFragmentManager());
        pagerSlidingTabStrip = (PagerSlidingTabStrip) findViewById(R.id.tabs);
        viewPager.setAdapter(pagerAdapter);
        pagerSlidingTabStrip.setViewPager(viewPager);
    }
}

如果您想知道我如何设置应用程序的样式，我会 post 也请告诉我。

更新如果您想将阴影放在选项卡下方，我也可以 post。

单个页面上的选项卡

Tabs on a single page

xml

android

android-viewpager

android-tabs