Attach layouts to tabs - Android

问题

I am making use of PagerTabStrip in my android app like the ones used in the new Google play store app. I went through a few tutorials and was succesfull in creating three tabs. They are Information, Electronic Configuration and Facts

Information

Electronic Configuration

Facts

Here is the xml layout

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >

<android.support.v4.view.PagerTabStrip
    android:id="@+id/pager_title_strip"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="top"
    android:textSize="30dp"
    android:background="#000000"
    android:paddingBottom="4dp"
    android:paddingTop="4dp"
    android:textColor="#ffffff" />

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

Here is the Java file

public class Tabs extends FragmentActivity 
{
    SectionsPagerAdapter mSectionsPagerAdapter;
    ViewPager mViewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) 
        {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.act2aluminium);
        mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());
        mViewPager = (ViewPager) findViewById(R.id.pager);
        mViewPager.setAdapter(mSectionsPagerAdapter);
        }

    public class SectionsPagerAdapter extends FragmentPagerAdapter 
    {
        public SectionsPagerAdapter(FragmentManager fm) 
        {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) 
        {
            Fragment fragment = new DummySectionFragment();
            Bundle args = new Bundle();
            args.putInt(DummySectionFragment.ARG_SECTION_NUMBER, position + 1);
            fragment.setArguments(args);
            return fragment;
        }

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

        @Override
        public CharSequence getPageTitle(int position) {
        switch (position) 
        {
            case 0:
                return "Information";
            case 1:
                return "Electronic Configuration";
            case 2:
                return "Facts";
            }
        return null;
        }
    }

    public static class DummySectionFragment extends Fragment {
    public static final String ARG_SECTION_NUMBER = "section_number";
    public DummySectionFragment() {
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        TextView textView = new TextView(getActivity());
        textView.setGravity(Gravity.CENTER);
        textView.setText(Integer.toString(getArguments().getInt(
                ARG_SECTION_NUMBER)));
        return textView;
        }
    }
}

Now, my question is How do I attach layouts or pages to the tabs instead of the tiny 1, 2, 3 textViews?

I've searched a lot but coudn't find a good explanation of how it's done. Please help me out with the code. Thanks in advance!

回答1:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >

<android.support.v4.view.PagerTabStrip
    android:id="@+id/pager_title_strip"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="top"
    android:textSize="30dp"
    android:background="#000000"
    android:paddingBottom="4dp"
    android:paddingTop="4dp"
    android:textColor="#ffffff" />

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

page1.xml

<Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:text="Click here" />

<TextView
    android:id="@+id/text1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_below="@id/button1"
    android:text="I am Page one" />

page2.xml

<Button
    android:id="@+id/button2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"

    android:layout_centerInParent="true"
    android:text="Click here" />

<TextView
    android:id="@+id/text2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_below="@id/button2"
    android:text="I am Page two" />

page3.xml

<Button
    android:id="@+id/button3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"

    android:layout_centerInParent="true"
    android:text="Click here" />

<TextView
    android:id="@+id/text3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_below="@id/button3"
    android:text="I am Page three" />

MainActivity.java

public class MainActivity extends FragmentActivity 
{
    SectionsPagerAdapter mSectionsPagerAdapter;
    ViewPager mViewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) 
        {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());
        mViewPager = (ViewPager) findViewById(R.id.pager);
        mViewPager.setAdapter(mSectionsPagerAdapter);
        }

    public class SectionsPagerAdapter extends FragmentPagerAdapter 
    {
        public SectionsPagerAdapter(FragmentManager fm) 
        {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) 
        {

             switch (position) {
             case 0:
                 // Top Rated fragment activity
                 return new Information();
             case 1:
                 // Games fragment activity
                 return new ElectonicConfiguration();
             case 2:
                 // Movies fragment activity
                 return new Fact();
             }

             return null;
        }

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

        @Override
        public CharSequence getPageTitle(int position) {
        switch (position) 
        {
            case 0:
                return "Information";
            case 1:
                return "Electronic Configuration";
            case 2:
                return "Facts";
            }
        return null;
        }
    }

    //Page 1 Fragment
    public static class Information extends Fragment {


    public Information()
        {
        }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
         View view = inflater.inflate(R.layout.page1, null);
         TextView textView = (TextView)view.findViewById(R.id.text1);
         Button button=(Button)view.findViewById(R.id.button1);

       return view ;
        }
    }

    //Page 2 Fragment
    public static class ElectonicConfiguration extends Fragment {


        public ElectonicConfiguration()
            {
            }

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                                 Bundle savedInstanceState) {
             View view = inflater.inflate(R.layout.page2, null);
             TextView textView = (TextView)view.findViewById(R.id.text2);
             Button button=(Button)view.findViewById(R.id.button2);

           return view ;
            }
        }

    //Page 3 Fragment
    public static class Fact extends Fragment {

        public Fact()
            {
            }

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                                 Bundle savedInstanceState) {
             View view = inflater.inflate(R.layout.page3, null);
             TextView textView = (TextView)view.findViewById(R.id.text3);
             Button button=(Button)view.findViewById(R.id.button3);

           return view ;
            }
        }
}

page1.xml, page2.xml,page3.xml are the layout file for the first,second and third page respectively.And There are 3 different fragments declared in the MainActivity.java for the 3 different pages. getItem() of SectionsPagerAdapter class manages all the 3 fragment pages. Make changes in the xml file as per your wish.I think the code is pretty self explanatory.If you have any doubt don't hesitate to ask.

Hope it helps. Cheers!

来源：https://stackoverflow.com/questions/20490827/attach-layouts-to-tabs-android