如何将 Fragment/ViewPager 标签转换为全屏

Question

Basically what I am asking is identical to the functionality in the Twitter app, Plume, on the opening screen. On a small screen (phone), there is three tabs you can swipe back and forth. I have this exact setup. On a tablet it looks bad because there is too much white space. In Plume, they simply loaded all three tabs on the screen -- no swiping, they all show up and take about 1/3rd of the screen each. Better use of space. How do you do this?

Here is my code:

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.fragment_layout);

    mSectionsPagerAdapter = new SectionsPagerAdapter(
            getSupportFragmentManager());

    final ActionBar actionBar = getActionBar();
    actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

    mViewPager = (ViewPager) findViewById(R.id.viewpager);
    mViewPager.setAdapter(mSectionsPagerAdapter);
    mViewPager.setOffscreenPageLimit(3);

    mViewPager
            .setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
                @Override
                public void onPageSelected(int position) {
                    actionBar.setSelectedNavigationItem(position);

                }
            });

    for (int i = 0; i < mSectionsPagerAdapter.getCount(); i++) {
        actionBar.addTab(actionBar.newTab()
                .setText(mSectionsPagerAdapter.getPageTitle(i))
                .setTabListener(this));
    }

    catName = getSharedPreferences("catName", Context.MODE_PRIVATE);
    itemName = getSharedPreferences("itemName", Context.MODE_PRIVATE);

    mViewPager.setCurrentItem(1);

}

public void onTabUnselected(ActionBar.Tab tab,
        FragmentTransaction fragmentTransaction) {

}

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

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

}

public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {
    mViewPager.setCurrentItem(tab.getPosition());
}

public void onTabReselected(ActionBar.Tab tab,
        FragmentTransaction fragmentTransaction) {
}

public class SectionsPagerAdapter extends FragmentPagerAdapter {

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

    @Override
    public Fragment getItem(int position) {
        Fragment f = null;
        switch (position) {
        case 0: {
            f = new MasterFrag();
            Bundle args = new Bundle();

            f.setArguments(args);
            break;
        }
        case 1: {
            f = new FeaturedFrag();
            Bundle args = new Bundle();

            f.setArguments(args);
            break;
        }

        case 2: {
            f = new TopFrag();
            Bundle args = new Bundle();

            f.setArguments(args);
            break;
        }

        default:
            throw new IllegalArgumentException("not this many fragments: "
                    + position);
        }

        return f;

    }

    @Override
    public int getCount() {
        return 3;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        switch (position) {
        case 0:
            return getString(R.string.mastercattab1).toUpperCase(Locale.ENGLISH);
        case 1:
            return getString(R.string.mastercattab2).toUpperCase(Locale.ENGLISH);
        case 2:
            return getString(R.string.mastercattab3).toUpperCase(Locale.ENGLISH);

        }
        return null;
    }
}

Here is my XML Fragment layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TabHost
        android:id="@android:id/tabhost"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="vertical" >


            <TabWidget
                android:id="@android:id/tabs"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="0"
                android:orientation="horizontal" />

            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_weight="0" />

            <android.support.v4.view.ViewPager
                android:id="@+id/viewpager"
                android:layout_width="fill_parent"
                android:layout_height="0dp"
                android:layout_weight="1" />
        </LinearLayout>
    </TabHost>

</LinearLayout>

Answer 1

With your most recent answer and a working xml layout plus this code below, I think it seems simple enough! :)

Edit: So the idea is you have two XML layouts, one for small and medium screens (the xml in your first post) and another for tablets, large and xlarge (the xml in your working answer).

You could in theory switch between the two like this:

public class YourClassName extends FragmentActivity {

    static boolean isTablet = false;
    static ActionBar actionBar = null;

public void onCreate(Bundle savedInstanceState) {
    actionBar = getActionBar();

    if ((getResources().getConfiguration().screenLayout & Configuration.SCREENLAYOUT_SIZE_MASK) >= Configuration.SCREENLAYOUT_SIZE_LARGE) {     
        setContentView(R.layout.single_pane_fragment_layout);
        isTablet = true;
    } else {
        setContentView(R.layout.viewpager_fragment_layout);
    }
...

Then you could try calling this code below in onTabSelected in your fragment activity, but you may want to call it inside the fragment under onCreateView. Note I made the variables static.

Example:

if (YourClassName.actionBar != null && YourClassName.actionBar.isShowing() && YourClassName.isTablet) {
    YourClassName.actionBar.removeAllTabs();
}

Also here is more info about ActionBar.hide() and .removeAllTabs(): http://developer.android.com/reference/android/app/ActionBar.html#hide%28%29

Answer 2

I simply used this code from Google's site as an example:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="horizontal"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:id="@+id/frags">
    <!-- "Fragment A" -->
  <fragment class="com.example.android.TitlesFragment"
            android:id="@+id/list_frag"
            android:layout_width="@dimen/titles_size"
            android:layout_height="match_parent"/>
    <!-- "Fragment B" -->
  <fragment class="com.example.android.DetailsFragment"
            android:id="@+id/details_frag"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
</LinearLayout>

Then I had to add the ViewPager above both Fragments.