For reprint, please indicate the source: http://blog.csdn.net/lmj623565791/article/details/24740977

Android now implements more and more Tab-type interfaces, today we will summarize the common implementation methods. At present, I have written:

1. Traditional ViewPager Implementation

2. Implementation of Fragment Manager+Fragment

3. Implementation of ViewPager+FragmentPager Adapter

4,TabPageIndicator+ViewPager+FragmentPagerAdapter

1. Traditional ViewPager Implementation

The main thing is ViewPager+ViewAdapter, which is quite common, let's not say much.

Design sketch:

Code:

1. package com.example.mainframework02;  
2.   
3. import java.util.ArrayList;  
4. import java.util.List;  
5.   
6. import android.app.Activity;  
7. import android.os.Bundle;  
8. import android.support.v4.view.PagerAdapter;  
9. import android.support.v4.view.ViewPager;  
10. import android.support.v4.view.ViewPager.OnPageChangeListener;  
11. import android.view.LayoutInflater;  
12. import android.view.View;  
13. import android.view.ViewGroup;  
14. import android.widget.ImageButton;  
15. import android.widget.ImageView;  
16. import android.widget.LinearLayout;  
17.   
18. public class TraditionalViewPagerAcvitity extends Activity  
19. {  
20.   
21.     /** 
22.      * ViewPager 
23.      */  
24.     private ViewPager mViewPager;  
25.     /** 
26.      * ViewPager The adapter of the 
27.      */  
28.     private PagerAdapter mAdapter;  
29.     private List<View> mViews;  
30.     private LayoutInflater mInflater;  
31.       
32.     private int currentIndex;  
33.   
34.     /** 
35.      * Four buttons at the bottom 
36.      */  
37.     private LinearLayout mTabBtnWeixin;  
38.     private LinearLayout mTabBtnFrd;  
39.     private LinearLayout mTabBtnAddress;  
40.     private LinearLayout mTabBtnSettings;  
41.   
42.     @Override  
43.     protected void onCreate(Bundle savedInstanceState)  
44.     {  
45.         super.onCreate(savedInstanceState);  
46.         setContentView(R.layout.activity_main);  
47.         mInflater = LayoutInflater.from(this);  
48.         mViewPager = (ViewPager) findViewById(R.id.id_viewpager);  
49.           
50.         /** 
51.          * Initialize View 
52.          */  
53.         initView();  
54.           
55.         mViewPager.setAdapter(mAdapter);  
56.   
57.         mViewPager.setOnPageChangeListener(new OnPageChangeListener()  
58.         {  
59.   
60.             @Override  
61.             public void onPageSelected(int position)  
62.             {  
63.                 resetTabBtn();  
64.                 switch (position)  
65.                 {  
66.                 case 0:  
67.                     ((ImageButton) mTabBtnWeixin.findViewById(R.id.btn_tab_bottom_weixin))  
68.                             .setImageResource(R.drawable.tab_weixin_pressed);  
69.                     break;  
70.                 case 1:  
71.                     ((ImageButton) mTabBtnFrd.findViewById(R.id.btn_tab_bottom_friend))  
72.                             .setImageResource(R.drawable.tab_find_frd_pressed);  
73.                     break;  
74.                 case 2:  
75.                     ((ImageButton) mTabBtnAddress.findViewById(R.id.btn_tab_bottom_contact))  
76.                             .setImageResource(R.drawable.tab_address_pressed);  
77.                     break;  
78.                 case 3:  
79.                     ((ImageButton) mTabBtnSettings.findViewById(R.id.btn_tab_bottom_setting))  
80.                             .setImageResource(R.drawable.tab_settings_pressed);  
81.                     break;  
82.                 }  
83.   
84.                 currentIndex = position;  
85.             }  
86.   
87.             @Override  
88.             public void onPageScrolled(int arg0, float arg1, int arg2)  
89.             {  
90.   
91.             }  
92.   
93.             @Override  
94.             public void onPageScrollStateChanged(int arg0)  
95.             {  
96.             }  
97.         });  
98.   
99.     }  
100.   
101.     protected void resetTabBtn()  
102.     {  
103.         ((ImageButton) mTabBtnWeixin.findViewById(R.id.btn_tab_bottom_weixin))  
104.                 .setImageResource(R.drawable.tab_weixin_normal);  
105.         ((ImageButton) mTabBtnFrd.findViewById(R.id.btn_tab_bottom_friend))  
106.                 .setImageResource(R.drawable.tab_find_frd_normal);  
107.         ((ImageButton) mTabBtnAddress.findViewById(R.id.btn_tab_bottom_contact))  
108.                 .setImageResource(R.drawable.tab_address_normal);  
109.         ((ImageButton) mTabBtnSettings.findViewById(R.id.btn_tab_bottom_setting))  
110.                 .setImageResource(R.drawable.tab_settings_normal);  
111.     }  
112.   
113.     private void initView()  
114.     {  
115.   
116.         mTabBtnWeixin = (LinearLayout) findViewById(R.id.id_tab_bottom_weixin);  
117.         mTabBtnFrd = (LinearLayout) findViewById(R.id.id_tab_bottom_friend);  
118.         mTabBtnAddress = (LinearLayout) findViewById(R.id.id_tab_bottom_contact);  
119.         mTabBtnSettings = (LinearLayout) findViewById(R.id.id_tab_bottom_setting);  
120.   
121.         mViews = new ArrayList<View>();  
122.         View first = mInflater.inflate(R.layout.main_tab_01, null);  
123.         View second = mInflater.inflate(R.layout.main_tab_02, null);  
124.         View third = mInflater.inflate(R.layout.main_tab_03, null);  
125.         View fourth = mInflater.inflate(R.layout.main_tab_04, null);  
126.         mViews.add(first);  
127.         mViews.add(second);  
128.         mViews.add(third);  
129.         mViews.add(fourth);  
130.   
131.         mAdapter = new PagerAdapter()  
132.         {  
133.             @Override  
134.             public void destroyItem(ViewGroup container, int position, Object object)  
135.             {  
136.                 container.removeView(mViews.get(position));  
137.             }  
138.   
139.             @Override  
140.             public Object instantiateItem(ViewGroup container, int position)  
141.             {  
142.                 View view = mViews.get(position);  
143.                 container.addView(view);  
144.                 return view;  
145.             }  
146.   
147.             @Override  
148.             public boolean isViewFromObject(View arg0, Object arg1)  
149.             {  
150.                 return arg0 == arg1;  
151.             }  
152.   
153.             @Override  
154.             public int getCount()  
155.             {  
156.                 return mViews.size();  
157.             }  
158.         };  
159.     }  
160.   
161. }  

package com.example.mainframework02;

import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.LinearLayout;

public class TraditionalViewPagerAcvitity extends Activity
{

    /**
     * ViewPager
     */
    private ViewPager mViewPager;
    /**
     * ViewPager adapter
     */
    private PagerAdapter mAdapter;
    private List<View> mViews;
    private LayoutInflater mInflater;

    private int currentIndex;

    /**
     * Four buttons at the bottom
     */
    private LinearLayout mTabBtnWeixin;
    private LinearLayout mTabBtnFrd;
    private LinearLayout mTabBtnAddress;
    private LinearLayout mTabBtnSettings;

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mInflater = LayoutInflater.from(this);
        mViewPager = (ViewPager) findViewById(R.id.id_viewpager);

        /**
         * Initialize View
         */
        initView();

        mViewPager.setAdapter(mAdapter);

        mViewPager.setOnPageChangeListener(new OnPageChangeListener()
        {

            @Override
            public void onPageSelected(int position)
            {
                resetTabBtn();
                switch (position)
                {
                case 0:
                    ((ImageButton) mTabBtnWeixin.findViewById(R.id.btn_tab_bottom_weixin))
                            .setImageResource(R.drawable.tab_weixin_pressed);
                    break;
                case 1:
                    ((ImageButton) mTabBtnFrd.findViewById(R.id.btn_tab_bottom_friend))
                            .setImageResource(R.drawable.tab_find_frd_pressed);
                    break;
                case 2:
                    ((ImageButton) mTabBtnAddress.findViewById(R.id.btn_tab_bottom_contact))
                            .setImageResource(R.drawable.tab_address_pressed);
                    break;
                case 3:
                    ((ImageButton) mTabBtnSettings.findViewById(R.id.btn_tab_bottom_setting))
                            .setImageResource(R.drawable.tab_settings_pressed);
                    break;
                }

                currentIndex = position;
            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2)
            {

            }

            @Override
            public void onPageScrollStateChanged(int arg0)
            {
            }
        });

    }

    protected void resetTabBtn()
    {
        ((ImageButton) mTabBtnWeixin.findViewById(R.id.btn_tab_bottom_weixin))
                .setImageResource(R.drawable.tab_weixin_normal);
        ((ImageButton) mTabBtnFrd.findViewById(R.id.btn_tab_bottom_friend))
                .setImageResource(R.drawable.tab_find_frd_normal);
        ((ImageButton) mTabBtnAddress.findViewById(R.id.btn_tab_bottom_contact))
                .setImageResource(R.drawable.tab_address_normal);
        ((ImageButton) mTabBtnSettings.findViewById(R.id.btn_tab_bottom_setting))
                .setImageResource(R.drawable.tab_settings_normal);
    }

    private void initView()
    {

        mTabBtnWeixin = (LinearLayout) findViewById(R.id.id_tab_bottom_weixin);
        mTabBtnFrd = (LinearLayout) findViewById(R.id.id_tab_bottom_friend);
        mTabBtnAddress = (LinearLayout) findViewById(R.id.id_tab_bottom_contact);
        mTabBtnSettings = (LinearLayout) findViewById(R.id.id_tab_bottom_setting);

        mViews = new ArrayList<View>();
        View first = mInflater.inflate(R.layout.main_tab_01, null);
        View second = mInflater.inflate(R.layout.main_tab_02, null);
        View third = mInflater.inflate(R.layout.main_tab_03, null);
        View fourth = mInflater.inflate(R.layout.main_tab_04, null);
        mViews.add(first);
        mViews.add(second);
        mViews.add(third);
        mViews.add(fourth);

        mAdapter = new PagerAdapter()
        {
            @Override
            public void destroyItem(ViewGroup container, int position, Object object)
            {
                container.removeView(mViews.get(position));
            }

            @Override
            public Object instantiateItem(ViewGroup container, int position)
            {
                View view = mViews.get(position);
                container.addView(view);
                return view;
            }

            @Override
            public boolean isViewFromObject(View arg0, Object arg1)
            {
                return arg0 == arg1;
            }

            @Override
            public int getCount()
            {
                return mViews.size();
            }
        };
    }

}

Evaluation: All the code is concentrated in one Activity, which makes the code messy.

2. Implementation of Fragment Manager+Fragment

The main use of Fragment in the main content interface Fragment add,hide and other transaction operations.

Design sketch:

Code:

Main Activity

1. package com.example.mainframework02.fragment;  
2.   
3. import android.annotation.SuppressLint;  
4. import android.app.Activity;  
5. import android.app.FragmentManager;  
6. import android.app.FragmentTransaction;  
7. import android.os.Bundle;  
8. import android.view.View;  
9. import android.view.View.OnClickListener;  
10. import android.widget.ImageButton;  
11. import android.widget.LinearLayout;  
12.   
13. import com.example.mainframework02.R;  
14.   
15. public class FragmentMainActivity extends Activity implements OnClickListener  
16. {  
17.     private MainTab02 mTab02;  
18.     private MainTab01 mTab01;  
19.     private MainTab03 mTab03;  
20.     private MainTab04 mTab04;  
21.   
22.     /** 
23.      * Four buttons at the bottom 
24.      */  
25.     private LinearLayout mTabBtnWeixin;  
26.     private LinearLayout mTabBtnFrd;  
27.     private LinearLayout mTabBtnAddress;  
28.     private LinearLayout mTabBtnSettings;  
29.     /** 
30.      * Used to manage Fragment s 
31.      */  
32.     private FragmentManager fragmentManager;  
33.   
34.     @SuppressLint("NewApi")  
35.     @Override  
36.     protected void onCreate(Bundle savedInstanceState)  
37.     {  
38.         super.onCreate(savedInstanceState);  
39.         setContentView(R.layout.fragment_main);  
40.         initViews();  
41.         fragmentManager = getFragmentManager();  
42.         setTabSelection(0);  
43.     }  
44.   
45.       
46.   
47.     private void initViews()  
48.     {  
49.   
50.         mTabBtnWeixin = (LinearLayout) findViewById(R.id.id_tab_bottom_weixin);  
51.         mTabBtnFrd = (LinearLayout) findViewById(R.id.id_tab_bottom_friend);  
52.         mTabBtnAddress = (LinearLayout) findViewById(R.id.id_tab_bottom_contact);  
53.         mTabBtnSettings = (LinearLayout) findViewById(R.id.id_tab_bottom_setting);  
54.   
55.         mTabBtnWeixin.setOnClickListener(this);  
56.         mTabBtnFrd.setOnClickListener(this);  
57.         mTabBtnAddress.setOnClickListener(this);  
58.         mTabBtnSettings.setOnClickListener(this);  
59.     }  
60.   
61.     @Override  
62.     public void onClick(View v)  
63.     {  
64.         switch (v.getId())  
65.         {  
66.         case R.id.id_tab_bottom_weixin:  
67.             setTabSelection(0);  
68.             break;  
69.         case R.id.id_tab_bottom_friend:  
70.             setTabSelection(1);  
71.             break;  
72.         case R.id.id_tab_bottom_contact:  
73.             setTabSelection(2);  
74.             break;  
75.         case R.id.id_tab_bottom_setting:  
76.             setTabSelection(3);  
77.             break;  
78.   
79.         default:  
80.             break;  
81.         }  
82.     }  
83.   
84.     /** 
85.      * Set the selected tab page according to the index parameter passed in. 
86.      *  
87.      */  
88.     @SuppressLint("NewApi")  
89.     private void setTabSelection(int index)  
90.     {  
91.         //Reset button  
92.         resetBtn();  
93.         //Open a Fragment transaction  
94.         FragmentTransaction transaction = fragmentManager.beginTransaction();  
95.         //Hide all fragments to prevent multiple fragments from being displayed on the interface  
96.         hideFragments(transaction);  
97.         switch (index)  
98.         {  
99.         case 0:  
100.             //Change the image and text color of the control when the message tab is clicked  
101.             ((ImageButton) mTabBtnWeixin.findViewById(R.id.btn_tab_bottom_weixin))  
102.                     .setImageResource(R.drawable.tab_weixin_pressed);  
103.             if (mTab01 == null)  
104.             {  
105.                 //If Message Fragment is empty, create and add it to the interface  
106.                 mTab01 = new MainTab01();  
107.                 transaction.add(R.id.id_content, mTab01);  
108.             } else  
109.             {  
110.                 //If Message Fragment is not empty, display it directly  
111.                 transaction.show(mTab01);  
112.             }  
113.             break;  
114.         case 1:  
115.             //Change the image and text color of the control when the message tab is clicked  
116.             ((ImageButton) mTabBtnFrd.findViewById(R.id.btn_tab_bottom_friend))  
117.                     .setImageResource(R.drawable.tab_find_frd_pressed);  
118.             if (mTab02 == null)  
119.             {  
120.                 //If Message Fragment is empty, create and add it to the interface  
121.                 mTab02 = new MainTab02();  
122.                 transaction.add(R.id.id_content, mTab02);  
123.             } else  
124.             {  
125.                 //If Message Fragment is not empty, display it directly  
126.                 transaction.show(mTab02);  
127.             }  
128.             break;  
129.         case 2:  
130.             //Change the image and text color of the control when you click on the dynamic tab  
131.             ((ImageButton) mTabBtnAddress.findViewById(R.id.btn_tab_bottom_contact))  
132.                     .setImageResource(R.drawable.tab_address_pressed);  
133.             if (mTab03 == null)  
134.             {  
135.                 //If NewsFragment is empty, create and add it to the interface  
136.                 mTab03 = new MainTab03();  
137.                 transaction.add(R.id.id_content, mTab03);  
138.             } else  
139.             {  
140.                 //If NewsFragment is not empty, display it directly  
141.                 transaction.show(mTab03);  
142.             }  
143.             break;  
144.         case 3:  
145.             //Change the image and text color of the control when tab is set  
146.             ((ImageButton) mTabBtnSettings.findViewById(R.id.btn_tab_bottom_setting))  
147.                     .setImageResource(R.drawable.tab_settings_pressed);  
148.             if (mTab04 == null)  
149.             {  
150.                 //If Setting Fragment is empty, create and add it to the interface  
151.                 mTab04 = new MainTab04();  
152.                 transaction.add(R.id.id_content, mTab04);  
153.             } else  
154.             {  
155.                 //If Setting Fragment is not empty, display it directly  
156.                 transaction.show(mTab04);  
157.             }  
158.             break;  
159.         }  
160.         transaction.commit();  
161.     }  
162.   
163.     /** 
164.      * Remove all selected states. 
165.      */  
166.     private void resetBtn()  
167.     {  
168.         ((ImageButton) mTabBtnWeixin.findViewById(R.id.btn_tab_bottom_weixin))  
169.                 .setImageResource(R.drawable.tab_weixin_normal);  
170.         ((ImageButton) mTabBtnFrd.findViewById(R.id.btn_tab_bottom_friend))  
171.                 .setImageResource(R.drawable.tab_find_frd_normal);  
172.         ((ImageButton) mTabBtnAddress.findViewById(R.id.btn_tab_bottom_contact))  
173.                 .setImageResource(R.drawable.tab_address_normal);  
174.         ((ImageButton) mTabBtnSettings.findViewById(R.id.btn_tab_bottom_setting))  
175.                 .setImageResource(R.drawable.tab_settings_normal);  
176.     }  
177.   
178.     /** 
179.      * Put all fragments in a hidden state. 
180.      *  
181.      * @param transaction 
182.      *            Transactions used to perform operations on Fragment s 
183.      */  
184.     @SuppressLint("NewApi")  
185.     private void hideFragments(FragmentTransaction transaction)  
186.     {  
187.         if (mTab01 != null)  
188.         {  
189.             transaction.hide(mTab01);  
190.         }  
191.         if (mTab02 != null)  
192.         {  
193.             transaction.hide(mTab02);  
194.         }  
195.         if (mTab03 != null)  
196.         {  
197.             transaction.hide(mTab03);  
198.         }  
199.         if (mTab04 != null)  
200.         {  
201.             transaction.hide(mTab04);  
202.         }  
203.           
204.     }  
205.   
206. }  

package com.example.mainframework02.fragment;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageButton;
import android.widget.LinearLayout;

import com.example.mainframework02.R;

public class FragmentMainActivity extends Activity implements OnClickListener
{
    private MainTab02 mTab02;
    private MainTab01 mTab01;
    private MainTab03 mTab03;
    private MainTab04 mTab04;

    /**
     * Four buttons at the bottom
     */
    private LinearLayout mTabBtnWeixin;
    private LinearLayout mTabBtnFrd;
    private LinearLayout mTabBtnAddress;
    private LinearLayout mTabBtnSettings;
    /**
     * Used to manage Fragment s
     */
    private FragmentManager fragmentManager;

    @SuppressLint("NewApi")
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.fragment_main);
        initViews();
        fragmentManager = getFragmentManager();
        setTabSelection(0);
    }



    private void initViews()
    {

        mTabBtnWeixin = (LinearLayout) findViewById(R.id.id_tab_bottom_weixin);
        mTabBtnFrd = (LinearLayout) findViewById(R.id.id_tab_bottom_friend);
        mTabBtnAddress = (LinearLayout) findViewById(R.id.id_tab_bottom_contact);
        mTabBtnSettings = (LinearLayout) findViewById(R.id.id_tab_bottom_setting);

        mTabBtnWeixin.setOnClickListener(this);
        mTabBtnFrd.setOnClickListener(this);
        mTabBtnAddress.setOnClickListener(this);
        mTabBtnSettings.setOnClickListener(this);
    }

    @Override
    public void onClick(View v)
    {
        switch (v.getId())
        {
        case R.id.id_tab_bottom_weixin:
            setTabSelection(0);
            break;
        case R.id.id_tab_bottom_friend:
            setTabSelection(1);
            break;
        case R.id.id_tab_bottom_contact:
            setTabSelection(2);
            break;
        case R.id.id_tab_bottom_setting:
            setTabSelection(3);
            break;

        default:
            break;
        }
    }

    /**
     * Set the selected tab page based on the index parameter passed in.
     * 
     */
    @SuppressLint("NewApi")
    private void setTabSelection(int index)
    {
        //Reset button
        resetBtn();
        // Open a Fragment transaction
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        // Hide all fragments first to prevent multiple fragments from being displayed on the interface
        hideFragments(transaction);
        switch (index)
        {
        case 0:
            // Change the image and text color of the control when the message tab is clicked
            ((ImageButton) mTabBtnWeixin.findViewById(R.id.btn_tab_bottom_weixin))
                    .setImageResource(R.drawable.tab_weixin_pressed);
            if (mTab01 == null)
            {
                // If Message Fragment is empty, create and add it to the interface
                mTab01 = new MainTab01();
                transaction.add(R.id.id_content, mTab01);
            } else
            {
                // If Message Fragment is not empty, display it directly
                transaction.show(mTab01);
            }
            break;
        case 1:
            // Change the image and text color of the control when the message tab is clicked
            ((ImageButton) mTabBtnFrd.findViewById(R.id.btn_tab_bottom_friend))
                    .setImageResource(R.drawable.tab_find_frd_pressed);
            if (mTab02 == null)
            {
                // If Message Fragment is empty, create and add it to the interface
                mTab02 = new MainTab02();
                transaction.add(R.id.id_content, mTab02);
            } else
            {
                // If Message Fragment is not empty, display it directly
                transaction.show(mTab02);
            }
            break;
        case 2:
            // When you click on the dynamic tab, change the image and text color of the control
            ((ImageButton) mTabBtnAddress.findViewById(R.id.btn_tab_bottom_contact))
                    .setImageResource(R.drawable.tab_address_pressed);
            if (mTab03 == null)
            {
                // If NewsFragment is empty, create and add it to the interface
                mTab03 = new MainTab03();
                transaction.add(R.id.id_content, mTab03);
            } else
            {
                // If NewsFragment is not empty, display it directly
                transaction.show(mTab03);
            }
            break;
        case 3:
            // Change the image and text color of the control when tab is set
            ((ImageButton) mTabBtnSettings.findViewById(R.id.btn_tab_bottom_setting))
                    .setImageResource(R.drawable.tab_settings_pressed);
            if (mTab04 == null)
            {
                // If Setting Fragment is empty, create and add it to the interface
                mTab04 = new MainTab04();
                transaction.add(R.id.id_content, mTab04);
            } else
            {
                // If Setting Fragment is not empty, display it directly
                transaction.show(mTab04);
            }
            break;
        }
        transaction.commit();
    }

    /**
     * Clear all selected states.
     */
    private void resetBtn()
    {
        ((ImageButton) mTabBtnWeixin.findViewById(R.id.btn_tab_bottom_weixin))
                .setImageResource(R.drawable.tab_weixin_normal);
        ((ImageButton) mTabBtnFrd.findViewById(R.id.btn_tab_bottom_friend))
                .setImageResource(R.drawable.tab_find_frd_normal);
        ((ImageButton) mTabBtnAddress.findViewById(R.id.btn_tab_bottom_contact))
                .setImageResource(R.drawable.tab_address_normal);
        ((ImageButton) mTabBtnSettings.findViewById(R.id.btn_tab_bottom_setting))
                .setImageResource(R.drawable.tab_settings_normal);
    }

    /**
     * Keep all fragments hidden.
     * 
     * @param transaction
     * Transactions used to perform operations on Fragment s
     */
    @SuppressLint("NewApi")
    private void hideFragments(FragmentTransaction transaction)
    {
        if (mTab01 != null)
        {
            transaction.hide(mTab01);
        }
        if (mTab02 != null)
        {
            transaction.hide(mTab02);
        }
        if (mTab03 != null)
        {
            transaction.hide(mTab03);
        }
        if (mTab04 != null)
        {
            transaction.hide(mTab04);
        }

    }

}

Each Tab Fragment, a total of four Tab Fragments, the following two stickers, basically the same.

1. package com.example.mainframework02.fragment;  
2.   
3. import android.annotation.SuppressLint;  
4. import android.app.Fragment;  
5. import android.os.Bundle;  
6. import android.view.LayoutInflater;  
7. import android.view.View;  
8. import android.view.ViewGroup;  
9.   
10. @SuppressLint("NewApi")  
11. public class MainTab01 extends Fragment  
12. {  
13.   
14.     @Override  
15.     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)  
16.     {  
17.         return inflater.inflate(com.example.mainframework02.R.layout.main_tab_01, container, false);  
18.   
19.     }  
20.   
21. }  

package com.example.mainframework02.fragment;

import android.annotation.SuppressLint;
import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

@SuppressLint("NewApi")
public class MainTab01 extends Fragment
{

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
    {
        return inflater.inflate(com.example.mainframework02.R.layout.main_tab_01, container, false);

    }

}

1. package com.example.mainframework02.fragment;  
2.   
3. import android.annotation.SuppressLint;  
4. import android.app.Fragment;  
5. import android.os.Bundle;  
6. import android.view.LayoutInflater;  
7. import android.view.View;  
8. import android.view.ViewGroup;  
9.   
10. import com.example.mainframework02.R;  
11.   
12. @SuppressLint("NewApi")  
13. public class MainTab02 extends Fragment  
14. {  
15.   
16.     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)  
17.     {  
18.         return inflater.inflate(R.layout.main_tab_02, container, false);  
19.   
20.     }  
21.   
22. }  

package com.example.mainframework02.fragment;

import android.annotation.SuppressLint;
import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.example.mainframework02.R;

@SuppressLint("NewApi")
public class MainTab02 extends Fragment
{

    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
    {
        return inflater.inflate(R.layout.main_tab_02, container, false);

    }

}

Evaluation: Each Fragment controls are processed independently into their own classes. Relatively speaking, the main Activity simplifies a lot, but unfortunately there is no left-right sliding effect.

3. ViewPager+Fragment Implementation

It is implemented mainly through ViewPager and FragmentPager Adapter.

Design sketch:

Code:

Main Activity

1. package com.example.mainframework03;  
2.   
3. import java.util.ArrayList;  
4. import java.util.List;  
5.   
6. import android.os.Bundle;  
7. import android.support.v4.app.Fragment;  
8. import android.support.v4.app.FragmentActivity;  
9. import android.support.v4.app.FragmentPagerAdapter;  
10. import android.support.v4.view.ViewPager;  
11. import android.support.v4.view.ViewPager.OnPageChangeListener;  
12. import android.widget.ImageButton;  
13. import android.widget.LinearLayout;  
14.   
15. public class MainActivity extends FragmentActivity  
16. {  
17.   
18.     private ViewPager mViewPager;  
19.     private FragmentPagerAdapter mAdapter;  
20.     private List<Fragment> mFragments = new ArrayList<Fragment>();  
21.       
22.       
23.     /** 
24.      * Four buttons at the bottom 
25.      */  
26.     private LinearLayout mTabBtnWeixin;  
27.     private LinearLayout mTabBtnFrd;  
28.     private LinearLayout mTabBtnAddress;  
29.     private LinearLayout mTabBtnSettings;  
30.   
31.   
32.     @Override  
33.     protected void onCreate(Bundle savedInstanceState)  
34.     {  
35.         super.onCreate(savedInstanceState);  
36.         setContentView(R.layout.activity_main);  
37.         mViewPager = (ViewPager) findViewById(R.id.id_viewpager);  
38.   
39.           
40.         initView();  
41.           
42.           
43.   
44.         mAdapter = new FragmentPagerAdapter(getSupportFragmentManager())  
45.         {  
46.   
47.             @Override  
48.             public int getCount()  
49.             {  
50.                 return mFragments.size();  
51.             }  
52.   
53.             @Override  
54.             public Fragment getItem(int arg0)  
55.             {  
56.                 return mFragments.get(arg0);  
57.             }  
58.         };  
59.           
60.         mViewPager.setAdapter(mAdapter);  
61.           
62.           
63.         mViewPager.setOnPageChangeListener(new OnPageChangeListener()  
64.         {  
65.   
66.             private int currentIndex;  
67.   
68.             @Override  
69.             public void onPageSelected(int position)  
70.             {  
71.                 resetTabBtn();  
72.                 switch (position)  
73.                 {  
74.                 case 0:  
75.                     ((ImageButton) mTabBtnWeixin.findViewById(R.id.btn_tab_bottom_weixin))  
76.                             .setImageResource(R.drawable.tab_weixin_pressed);  
77.                     break;  
78.                 case 1:  
79.                     ((ImageButton) mTabBtnFrd.findViewById(R.id.btn_tab_bottom_friend))  
80.                             .setImageResource(R.drawable.tab_find_frd_pressed);  
81.                     break;  
82.                 case 2:  
83.                     ((ImageButton) mTabBtnAddress.findViewById(R.id.btn_tab_bottom_contact))  
84.                             .setImageResource(R.drawable.tab_address_pressed);  
85.                     break;  
86.                 case 3:  
87.                     ((ImageButton) mTabBtnSettings.findViewById(R.id.btn_tab_bottom_setting))  
88.                             .setImageResource(R.drawable.tab_settings_pressed);  
89.                     break;  
90.                 }  
91.   
92.                 currentIndex = position;  
93.             }  
94.   
95.             @Override  
96.             public void onPageScrolled(int arg0, float arg1, int arg2)  
97.             {  
98.   
99.             }  
100.   
101.             @Override  
102.             public void onPageScrollStateChanged(int arg0)  
103.             {  
104.             }  
105.         });  
106.   
107.     }  
108.       
109.     protected void resetTabBtn()  
110.     {  
111.         ((ImageButton) mTabBtnWeixin.findViewById(R.id.btn_tab_bottom_weixin))  
112.                 .setImageResource(R.drawable.tab_weixin_normal);  
113.         ((ImageButton) mTabBtnFrd.findViewById(R.id.btn_tab_bottom_friend))  
114.                 .setImageResource(R.drawable.tab_find_frd_normal);  
115.         ((ImageButton) mTabBtnAddress.findViewById(R.id.btn_tab_bottom_contact))  
116.                 .setImageResource(R.drawable.tab_address_normal);  
117.         ((ImageButton) mTabBtnSettings.findViewById(R.id.btn_tab_bottom_setting))  
118.                 .setImageResource(R.drawable.tab_settings_normal);  
119.     }  
120.   
121.     private void initView()  
122.     {  
123.   
124.         mTabBtnWeixin = (LinearLayout) findViewById(R.id.id_tab_bottom_weixin);  
125.         mTabBtnFrd = (LinearLayout) findViewById(R.id.id_tab_bottom_friend);  
126.         mTabBtnAddress = (LinearLayout) findViewById(R.id.id_tab_bottom_contact);  
127.         mTabBtnSettings = (LinearLayout) findViewById(R.id.id_tab_bottom_setting);  
128.   
129.         MainTab01 tab01 = new MainTab01();  
130.         MainTab02 tab02 = new MainTab02();  
131.         MainTab03 tab03 = new MainTab03();  
132.         MainTab04 tab04 = new MainTab04();  
133.         mFragments.add(tab01);  
134.         mFragments.add(tab02);  
135.         mFragments.add(tab03);  
136.         mFragments.add(tab04);  
137.     }  
138. }  

package com.example.mainframework03;

import java.util.ArrayList;
import java.util.List;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.widget.ImageButton;
import android.widget.LinearLayout;

public class MainActivity extends FragmentActivity
{

    private ViewPager mViewPager;
    private FragmentPagerAdapter mAdapter;
    private List<Fragment> mFragments = new ArrayList<Fragment>();


    /**
     * Four buttons at the bottom
     */
    private LinearLayout mTabBtnWeixin;
    private LinearLayout mTabBtnFrd;
    private LinearLayout mTabBtnAddress;
    private LinearLayout mTabBtnSettings;


    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mViewPager = (ViewPager) findViewById(R.id.id_viewpager);


        initView();



        mAdapter = new FragmentPagerAdapter(getSupportFragmentManager())
        {

            @Override
            public int getCount()
            {
                return mFragments.size();
            }

            @Override
            public Fragment getItem(int arg0)
            {
                return mFragments.get(arg0);
            }
        };

        mViewPager.setAdapter(mAdapter);


        mViewPager.setOnPageChangeListener(new OnPageChangeListener()
        {

            private int currentIndex;

            @Override
            public void onPageSelected(int position)
            {
                resetTabBtn();
                switch (position)
                {
                case 0:
                    ((ImageButton) mTabBtnWeixin.findViewById(R.id.btn_tab_bottom_weixin))
                            .setImageResource(R.drawable.tab_weixin_pressed);
                    break;
                case 1:
                    ((ImageButton) mTabBtnFrd.findViewById(R.id.btn_tab_bottom_friend))
                            .setImageResource(R.drawable.tab_find_frd_pressed);
                    break;
                case 2:
                    ((ImageButton) mTabBtnAddress.findViewById(R.id.btn_tab_bottom_contact))
                            .setImageResource(R.drawable.tab_address_pressed);
                    break;
                case 3:
                    ((ImageButton) mTabBtnSettings.findViewById(R.id.btn_tab_bottom_setting))
                            .setImageResource(R.drawable.tab_settings_pressed);
                    break;
                }

                currentIndex = position;
            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2)
            {

            }

            @Override
            public void onPageScrollStateChanged(int arg0)
            {
            }
        });

    }

    protected void resetTabBtn()
    {
        ((ImageButton) mTabBtnWeixin.findViewById(R.id.btn_tab_bottom_weixin))
                .setImageResource(R.drawable.tab_weixin_normal);
        ((ImageButton) mTabBtnFrd.findViewById(R.id.btn_tab_bottom_friend))
                .setImageResource(R.drawable.tab_find_frd_normal);
        ((ImageButton) mTabBtnAddress.findViewById(R.id.btn_tab_bottom_contact))
                .setImageResource(R.drawable.tab_address_normal);
        ((ImageButton) mTabBtnSettings.findViewById(R.id.btn_tab_bottom_setting))
                .setImageResource(R.drawable.tab_settings_normal);
    }

    private void initView()
    {

        mTabBtnWeixin = (LinearLayout) findViewById(R.id.id_tab_bottom_weixin);
        mTabBtnFrd = (LinearLayout) findViewById(R.id.id_tab_bottom_friend);
        mTabBtnAddress = (LinearLayout) findViewById(R.id.id_tab_bottom_contact);
        mTabBtnSettings = (LinearLayout) findViewById(R.id.id_tab_bottom_setting);

        MainTab01 tab01 = new MainTab01();
        MainTab02 tab02 = new MainTab02();
        MainTab03 tab03 = new MainTab03();
        MainTab04 tab04 = new MainTab04();
        mFragments.add(tab01);
        mFragments.add(tab02);
        mFragments.add(tab03);
        mFragments.add(tab04);
    }
}

There are four Tab Fragments, one below, and the four are basically the same.

1. package com.example.mainframework03;  
2.   
3. import android.os.Bundle;  
4. import android.support.v4.app.Fragment;  
5. import android.view.LayoutInflater;  
6. import android.view.View;  
7. import android.view.ViewGroup;  
8.   
9. public class MainTab01 extends Fragment  
10. {  
11.   
12.     @Override  
13.     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)  
14.     {  
15.         return  inflater.inflate(R.layout.main_tab_01, container, false);  
16.       
17.     }  
18.   
19. }  

package com.example.mainframework03;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class MainTab01 extends Fragment
{

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
    {
        return  inflater.inflate(R.layout.main_tab_01, container, false);

    }

}

Evaluation: The implementation effect is exactly the same as the first effect. Each Fragment handles its own internal logic independently. The code is much cleaner and supports left-right sliding. It feels like a combination of the first and second versions.

4,TabPageIndicator+ViewPager+FragmentPagerAdapter

The implementation method is the same as 3, but using TabPage Indicator as the tab indicator, the effect is good. As I wrote before, I will not post the code any more.

Design sketch:

Reference resources: Android uses Fragment, ViewPager Indicator to make the main framework of csdn app

Okay, so much is summed up. There must be many other ways to achieve it. You can leave a message and have time to continue to improve this summary.

Source code for the first and second types

Source code for the third way