android 底部导航总结

最新推荐文章于 2019-03-06 17:55:49 发布

stevenzqzq

最新推荐文章于 2019-03-06 17:55:49 发布

阅读量310

点赞数

分类专栏： Android 文章标签： android 设计

本文链接：https://blog.csdn.net/qq_26296197/article/details/78698177

版权

Android 专栏收录该内容

231 篇文章 2 订阅

订阅专栏

1BottomNavigationView实现

实现方式：
1.1 BottomNavigationView是放置在design包中的，所以，使用前需要先引入com.android.support:design:25.1.0包

1.2 xml布局

<?xml version="1.0" encoding="utf-8"?>
<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">

    <include layout="@layout/include_toolbar" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tb_toolbar"
        android:orientation="vertical">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="22dp"
            tools:text="123524352" />

    </LinearLayout>

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bnv_menu"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:itemIconTint="@color/selector_blue"
        app:itemTextColor="@color/selector_blue"
        app:menu="@menu/menu_bottom_navigation" />

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_above="@id/bnv_menu"
        android:background="@color/gray" />

</RelativeLayout>

1.3 java代码

基本实现

publicclassMainActivityextendsAppCompatActivityimplementsBottomNavigationView.OnNavigationItemSelectedListener{privateTextFragment fragment;@OverrideprotectedvoidonCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

FragmentManager fragmentManager = getSupportFragmentManager();

fragment =newTextFragment();

FragmentTransaction transaction = fragmentManager.beginTransaction();

transaction.replace(R.id.fragment_container, fragment);

transaction.commit();

BottomNavigationView bottomNavigationView = (BottomNavigationView) findViewById(R.id.navigation_view);

bottomNavigationView.setOnNavigationItemSelectedListener(this);

}@OverridepublicbooleanonNavigationItemSelected(@NonNull MenuItem item){@StringResinttext;switch(item.getItemId()) {caseR.id.recents:

text = R.string.recents;break;caseR.id.favourites:

text = R.string.favourites;break;caseR.id.nearby:

text = R.string.nearby;break;default:returnfalse;

}

switchFragmentText(text);returntrue;

}privatevoidswitchFragmentText(@StringResinttext){

fragment.setText(text);
}
}
}

详细java代码

package com.song.wallpager;  

import android.support.v4.app.Fragment;  
import android.support.v4.app.FragmentActivity;  
import android.support.v4.app.FragmentTransaction;  
import android.os.Bundle;  
import android.support.annotation.NonNull;  
import android.support.design.widget.BottomNavigationView;  
import android.view.MenuItem;  
import android.widget.TextView;  

public class MainActivity extends FragmentActivity {  



    private Fragment1 fragment1;  
    private Fragment2 fragment2;  
    private Fragment3 fragment3;  
    private Fragment[] fragments;  
    private int lastShowFragment = 0;  

    private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener  
            = new BottomNavigationView.OnNavigationItemSelectedListener() {  

        @Override  
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {  
            switch (item.getItemId()) {  
                case R.id.navigation_home:  
                    if (lastShowFragment != 0) {  
                        switchFrament(lastShowFragment, 0);  
                        lastShowFragment = 0;  
                    }  
                    return true;  
                case R.id.navigation_dashboard:  
                    if (lastShowFragment != 1) {  
                        switchFrament(lastShowFragment, 1);  
                        lastShowFragment = 1;  
                    }  
                    return true;  
                case R.id.navigation_notifications:  
                    if (lastShowFragment != 2) {  
                        switchFrament(lastShowFragment, 2);  
                        lastShowFragment = 2;  
                    }  
                    return true;  
            }  
            return false;  
        }  

    };  

    @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.activity_main);  
        BottomNavigationView navigation = (BottomNavigationView) findViewById(R.id.navigation);  
        navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);  
        initFragments();  
    }  

    /**  
     * 切换Fragment  
     *  
     * @param lastIndex 上个显示Fragment的索引  
     * @param index     需要显示的Fragment的索引  
     */  
    public void switchFrament(int lastIndex, int index) {  
        FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();  
        transaction.hide(fragments[lastIndex]);  
        if (!fragments[index].isAdded()) {  
            transaction.add(R.id.fragment_container, fragments[index]);  
        }  
        transaction.show(fragments[index]).commitAllowingStateLoss();  
    }  

    private void initFragments() {  
        fragment1 = new Fragment1();  
        fragment2 = new Fragment2();  
        fragment3 = new Fragment3();  
        fragments = new Fragment[]{fragment1, fragment2, fragment3};  
        lastShowFragment = 0;  
        getSupportFragmentManager()  
                .beginTransaction()  
                .add(R.id.fragment_container, fragment1)  
                .show(fragment1)  
                .commit();  
    }  

}

总结：

这种方式是google比较新的方式，实现的时候在MainActivity中使用frameLayout布局，标签tab是fragment，通过在activity中对fragment中add和hide实现或者replace(为了避免卡顿，add和hide整体上要好)。

2TabLayout+Viewpager+FragmentPagerAdapter实现

java代码

public class TabLayoutBottomActivity extends BaseActivity {

    private TabLayout mTabTl;
    private ViewPager mContentVp;

    private List<String> tabIndicators;
    private List<Fragment> tabFragments;
    private ContentPagerAdapter contentAdapter;


    public static void startActivity(Context context ){
        Intent intent = new Intent(context, TabLayoutBottomActivity.class);
        context.startActivity(intent);
    }


    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tab_layout_bottom);

        mTabTl = (TabLayout) findViewById(R.id.tl_tab);
        mContentVp = (ViewPager) findViewById(R.id.vp_content);

        initContent();
        initTab();
    }

    private void initTab(){

        mTabTl.setTabMode(TabLayout.MODE_FIXED);
        mTabTl.setSelectedTabIndicatorHeight(0);
        ViewCompat.setElevation(mTabTl, 10);
        mTabTl.setupWithViewPager(mContentVp);

        for (int i = 0; i < tabIndicators.size(); i++) {
            TabLayout.Tab itemTab = mTabTl.getTabAt(i);
            if (itemTab!=null){
                itemTab.setCustomView(R.layout.item_tab_layout_custom);
                TextView itemTv = (TextView) itemTab.getCustomView().findViewById(R.id.tv_menu_item);
                itemTv.setText(tabIndicators.get(i));
            }
        }
        mTabTl.getTabAt(0).getCustomView().setSelected(true);
    }

    private void initContent(){
        tabIndicators = new ArrayList<>();
        for (int i = 0; i < 4; i++) {
            tabIndicators.add("Tab " + i);
        }
        tabFragments = new ArrayList<>();
        for (String s : tabIndicators) {
            tabFragments.add(TabContentFragment.newInstance(s));
        }
        contentAdapter = new ContentPagerAdapter(getSupportFragmentManager());
        mContentVp.setAdapter(contentAdapter);
    }


    class ContentPagerAdapter extends FragmentPagerAdapter {

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

        @Override
        public Fragment getItem(int position) {
            return tabFragments.get(position);
        }

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

        @Override
        public CharSequence getPageTitle(int position) {
            return tabIndicators.get(position);
        }
    }

}

xml代码

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

    <include  layout="@layout/include_toolbar"/>

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

    <android.support.design.widget.TabLayout
        android:id="@+id/tl_tab"
        android:layout_width="match_parent"
        android:layout_height="@dimen/dp_56"
        android:background="@color/white">

    </android.support.design.widget.TabLayout>

</LinearLayout>

总结

这种方式实现起来比较简单，而且可以左右滑动，注意这种方式注意viewpager会预加载fragment。

3 通过FragmentManager+Fragment实现显示隐藏实现

java代码

/** 
 * 项目的主Activity，所有的Fragment都嵌入在这里。 
 *  
 */  
public class MainActivity extends Activity implements OnClickListener {  

    /** 
     * 用于展示消息的Fragment 
     */  
    private MessageFragment messageFragment;  

    /** 
     * 用于展示联系人的Fragment 
     */  
    private ContactsFragment contactsFragment;  

    /** 
     * 用于展示动态的Fragment 
     */  
    private NewsFragment newsFragment;  

    /** 
     * 用于展示设置的Fragment 
     */  
    private SettingFragment settingFragment;  

    /** 
     * 消息界面布局 
     */  
    private View messageLayout;  

    /** 
     * 联系人界面布局 
     */  
    private View contactsLayout;  

    /** 
     * 动态界面布局 
     */  
    private View newsLayout;  

    /** 
     * 设置界面布局 
     */  
    private View settingLayout;  

    /** 
     * 在Tab布局上显示消息图标的控件 
     */  
    private ImageView messageImage;  

    /** 
     * 在Tab布局上显示联系人图标的控件 
     */  
    private ImageView contactsImage;  

    /** 
     * 在Tab布局上显示动态图标的控件 
     */  
    private ImageView newsImage;  

    /** 
     * 在Tab布局上显示设置图标的控件 
     */  
    private ImageView settingImage;  

    /** 
     * 在Tab布局上显示消息标题的控件 
     */  
    private TextView messageText;  

    /** 
     * 在Tab布局上显示联系人标题的控件 
     */  
    private TextView contactsText;  

    /** 
     * 在Tab布局上显示动态标题的控件 
     */  
    private TextView newsText;  

    /** 
     * 在Tab布局上显示设置标题的控件 
     */  
    private TextView settingText;  

    /** 
     * 用于对Fragment进行管理 
     */  
    private FragmentManager fragmentManager;  

    @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        requestWindowFeature(Window.FEATURE_NO_TITLE);  
        setContentView(R.layout.activity_main);  
        // 初始化布局元素  
        initViews();  
        fragmentManager = getFragmentManager();  
        // 第一次启动时选中第0个tab  
        setTabSelection(0);  
    }  

    /** 
     * 在这里获取到每个需要用到的控件的实例，并给它们设置好必要的点击事件。 
     */  
    private void initViews() {  
        messageLayout = findViewById(R.id.message_layout);  
        contactsLayout = findViewById(R.id.contacts_layout);  
        newsLayout = findViewById(R.id.news_layout);  
        settingLayout = findViewById(R.id.setting_layout);  
        messageImage = (ImageView) findViewById(R.id.message_image);  
        contactsImage = (ImageView) findViewById(R.id.contacts_image);  
        newsImage = (ImageView) findViewById(R.id.news_image);  
        settingImage = (ImageView) findViewById(R.id.setting_image);  
        messageText = (TextView) findViewById(R.id.message_text);  
        contactsText = (TextView) findViewById(R.id.contacts_text);  
        newsText = (TextView) findViewById(R.id.news_text);  
        settingText = (TextView) findViewById(R.id.setting_text);  
        messageLayout.setOnClickListener(this);  
        contactsLayout.setOnClickListener(this);  
        newsLayout.setOnClickListener(this);  
        settingLayout.setOnClickListener(this);  
    }  

    @Override  
    public void onClick(View v) {  
        switch (v.getId()) {  
        case R.id.message_layout:  
            // 当点击了消息tab时，选中第1个tab  
            setTabSelection(0);  
            break;  
        case R.id.contacts_layout:  
            // 当点击了联系人tab时，选中第2个tab  
            setTabSelection(1);  
            break;  
        case R.id.news_layout:  
            // 当点击了动态tab时，选中第3个tab  
            setTabSelection(2);  
            break;  
        case R.id.setting_layout:  
            // 当点击了设置tab时，选中第4个tab  
            setTabSelection(3);  
            break;  
        default:  
            break;  
        }  
    }  

    /** 
     * 根据传入的index参数来设置选中的tab页。 
     *  
     * @param index 
     *            每个tab页对应的下标。0表示消息，1表示联系人，2表示动态，3表示设置。 
     */  
    private void setTabSelection(int index) {  
        // 每次选中之前先清楚掉上次的选中状态  
        clearSelection();  
        // 开启一个Fragment事务  
        FragmentTransaction transaction = fragmentManager.beginTransaction();  
        // 先隐藏掉所有的Fragment，以防止有多个Fragment显示在界面上的情况  
        hideFragments(transaction);  
        switch (index) {  
        case 0:  
            // 当点击了消息tab时，改变控件的图片和文字颜色  
            messageImage.setImageResource(R.drawable.message_selected);  
            messageText.setTextColor(Color.WHITE);  
            if (messageFragment == null) {  
                // 如果MessageFragment为空，则创建一个并添加到界面上  
                messageFragment = new MessageFragment();  
                transaction.add(R.id.content, messageFragment);  
            } else {  
                // 如果MessageFragment不为空，则直接将它显示出来  
                transaction.show(messageFragment);  
            }  
            break;  
        case 1:  
            // 当点击了联系人tab时，改变控件的图片和文字颜色  
            contactsImage.setImageResource(R.drawable.contacts_selected);  
            contactsText.setTextColor(Color.WHITE);  
            if (contactsFragment == null) {  
                // 如果ContactsFragment为空，则创建一个并添加到界面上  
                contactsFragment = new ContactsFragment();  
                transaction.add(R.id.content, contactsFragment);  
            } else {  
                // 如果ContactsFragment不为空，则直接将它显示出来  
                transaction.show(contactsFragment);  
            }  
            break;  
        case 2:  
            // 当点击了动态tab时，改变控件的图片和文字颜色  
            newsImage.setImageResource(R.drawable.news_selected);  
            newsText.setTextColor(Color.WHITE);  
            if (newsFragment == null) {  
                // 如果NewsFragment为空，则创建一个并添加到界面上  
                newsFragment = new NewsFragment();  
                transaction.add(R.id.content, newsFragment);  
            } else {  
                // 如果NewsFragment不为空，则直接将它显示出来  
                transaction.show(newsFragment);  
            }  
            break;  
        case 3:  
        default:  
            // 当点击了设置tab时，改变控件的图片和文字颜色  
            settingImage.setImageResource(R.drawable.setting_selected);  
            settingText.setTextColor(Color.WHITE);  
            if (settingFragment == null) {  
                // 如果SettingFragment为空，则创建一个并添加到界面上  
                settingFragment = new SettingFragment();  
                transaction.add(R.id.content, settingFragment);  
            } else {  
                // 如果SettingFragment不为空，则直接将它显示出来  
                transaction.show(settingFragment);  
            }  
            break;  
        }  
        transaction.commit();  
    }  

    /** 
     * 清除掉所有的选中状态。 
     */  
    private void clearSelection() {  
        messageImage.setImageResource(R.drawable.message_unselected);  
        messageText.setTextColor(Color.parseColor("#82858b"));  
        contactsImage.setImageResource(R.drawable.contacts_unselected);  
        contactsText.setTextColor(Color.parseColor("#82858b"));  
        newsImage.setImageResource(R.drawable.news_unselected);  
        newsText.setTextColor(Color.parseColor("#82858b"));  
        settingImage.setImageResource(R.drawable.setting_unselected);  
        settingText.setTextColor(Color.parseColor("#82858b"));  
    }  

    /** 
     * 将所有的Fragment都置为隐藏状态。 
     *  
     * @param transaction 
     *            用于对Fragment执行操作的事务 
     */  
    private void hideFragments(FragmentTransaction transaction) {  
        if (messageFragment != null) {  
            transaction.hide(messageFragment);  
        }  
        if (contactsFragment != null) {  
            transaction.hide(contactsFragment);  
        }  
        if (newsFragment != null) {  
            transaction.hide(newsFragment);  
        }  
        if (settingFragment != null) {  
            transaction.hide(settingFragment);  
        }  
    }  
}

activity_tab 代码

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

    <include  layout="@layout/include_toolbar"/>

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

    <android.support.design.widget.TabLayout
        android:id="@+id/tl_tab"
        android:layout_width="match_parent"
        android:layout_height="@dimen/dp_56"
        android:background="@color/white">

    </android.support.design.widget.TabLayout>

</LinearLayout>

fragment中的布局

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

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

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:src="@drawable/contacts_selected" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:padding="10dp"
            android:text="这是联系人界面"
            android:textSize="20sp" />
    </LinearLayout>

</RelativeLayout>

总结
这种方式是非常清晰的方式，没有预加载，类似QQ 微信中的效果，美中不足的是所有fragment中的代码放在activity中，有点臃肿。

4 ViewPager+FragmentPagerAdapter

参考链接
https://www.kancloud.cn/digest/protectyoureyes/122210

java 代码

public class MainActivity extends FragmentActivity
        implements View.OnClickListener {

    private ViewPager viewPager;
    private Button one;
    private Button two;
    private Button three;
    private Button four;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //初始化ViewPager
        InitViewPager();
        //初始化布局
        InitView();

    }

    private void InitViewPager() {
        //获取ViewPager
        //创建一个FragmentPagerAdapter对象，该对象负责为ViewPager提供多个Fragment
        viewPager = (ViewPager) findViewById(R.id.pager);
        FragmentPagerAdapter pagerAdapter = new FragmentPagerAdapter(
                getSupportFragmentManager()) {

            //获取第position位置的Fragment
            @Override
            public Fragment getItem(int position) {
                Fragment fragment = null;
                switch (position) {
                    case 0:
                        fragment = new OneFragment();
                        break;
                    case 1:
                        fragment = new TwoFragment();
                        break;
                    case 2:
                        fragment = new ThreeFragment();
                        break;
                    case 3:
                        fragment = new FourFragment();
                        break;
                }

                return fragment;
            }

            //该方法的返回值i表明该Adapter总共包括多少个Fragment
            @Override
            public int getCount() {
                return 4;
            }

        };
        //为ViewPager组件设置FragmentPagerAdapter
        viewPager.setAdapter(pagerAdapter);

        //为viewpager组件绑定时间监听器
        viewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
            //当ViewPager显示的Fragment发生改变时激发该方法
            @Override
            public void onPageSelected(int position) {
                switch (position) {
                    //如果是点击的第一个button，那么就让第一个button的字体变为蓝色
                    //其他的button的字体的颜色变为黑色
                    case 0:
                        one.setTextColor(Color.BLUE);
                        two.setTextColor(Color.BLACK);
                        three.setTextColor(Color.BLACK);
                        four.setTextColor(Color.BLACK);
                        break;
                    case 1:
                        one.setTextColor(Color.BLACK);
                        two.setTextColor(Color.BLUE);
                        three.setTextColor(Color.BLACK);
                        four.setTextColor(Color.BLACK);
                        break;
                    case 2:
                        one.setTextColor(Color.BLACK);
                        two.setTextColor(Color.BLACK);
                        three.setTextColor(Color.BLUE);
                        four.setTextColor(Color.BLACK);
                        break;
                    case 3:
                        one.setTextColor(Color.BLACK);
                        two.setTextColor(Color.BLACK);
                        three.setTextColor(Color.BLACK);
                        four.setTextColor(Color.BLUE);
                        break;
                }
                super.onPageSelected(position);
            }
        });
    }

    private void InitView() {
        one = (Button) findViewById(R.id.bt_one);
        two = (Button) findViewById(R.id.bt_two);
        three = (Button) findViewById(R.id.bt_three);
        four = (Button) findViewById(R.id.bt_four);

        //设置点击监听
        one.setOnClickListener(this);
        two.setOnClickListener(this);
        three.setOnClickListener(this);
        four.setOnClickListener(this);

        //将button中字体的颜色先按照点击第一个button的效果初始化
        one.setTextColor(Color.BLUE);
        two.setTextColor(Color.BLACK);
        three.setTextColor(Color.BLACK);
        four.setTextColor(Color.BLACK);
    }

    //点击主界面上面的button后，将viewpager中的fragment跳转到对应的item
    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.bt_one:
                viewPager.setCurrentItem(0);
                break;
            case R.id.bt_two:
                viewPager.setCurrentItem(1);
                break;
            case R.id.bt_three:
                viewPager.setCurrentItem(2);
                break;
            case R.id.bt_four:
                viewPager.setCurrentItem(3);
                break;
        }
    }

}

OneFragment:（由于4个fragment的布局都一样，在此就只放上第一个了）

public class OneFragment extends Fragment {

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

    }

    @Override
    @Nullable
    public View onCreateView(LayoutInflater inflater,
                             @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.one, container, false);//关联布局文件

        //设置在OneFragment中的点击效果
        Button bt_frg_one = (Button) rootView.findViewById(R.id.bt_frg_one);
        bt_frg_one.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getActivity().getApplicationContext(), "这是第一页按钮的点击效果", Toast.LENGTH_SHORT).show();
            }
        });
        return rootView;
    }

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

xml 布局代码

activity_main

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

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true">

        <Button
            android:id="@+id/bt_one"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="one"
            android:textSize="20sp" />

        <Button
            android:id="@+id/bt_two"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="two"
            android:textSize="20sp" />

        <Button
            android:id="@+id/bt_three"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="three"
            android:textSize="20sp" />

        <Button
            android:id="@+id/bt_four"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="four"
            android:textSize="20sp" />

    </LinearLayout>
</RelativeLayout>

one

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

    <Button
        android:id="@+id/bt_frg_one"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="one"
        android:textSize="30dp" />
</LinearLayout>

总结
这种方式跟2的方式唯一不同的是第二个用到tabLayout这种方式用的是LinerLayout布局，其他的是一样的。

5 TabPageIndicator+ViewPager+ FragmentPagerAdapter实现

总结这种方式跟2和4类似

6 FragmentTabHost+Fragment实现

java 代码

public class MainActivity extends FragmentActivity {    

      private FragmentTabHost mTabHost;    
      private LayoutInflater mInflater;    
      private ArrayList<Tab> mTabs= new ArrayList<Tab>(5);   

 @Override   
      protected void onCreate(Bundle savedInstanceState) {              
          super.onCreate(savedInstanceState);        
          setContentView(R.layout.activity_main);       
          initTab();   
 }    

      private void initTab() {        
          //实例化5个Tab类的对象        
          Tab Tab_home = new Tab(R.drawable.selector_home,R.string.home,HomeFragment.class);        
          Tab Tab_hot = new Tab(R.drawable.selector_hot,R.string.hot, HotFragment.class);        
          Tab Tab_discover = new Tab(R.drawable.selector_discover,R.string.discover, DiscoverFragment.class);        
          Tab Tab_cart = new Tab(R.drawable.selector_cart,R.string.cart, CartFragment.class);          
          Tab Tab_user = new Tab(R.drawable.selector_user,R.string.user, UserFragment.class);      

           //将这5个对象加到一个List中        
          mTabs.add(Tab_home);        
          mTabs.add(Tab_hot);        
          mTabs.add(Tab_discover);        
          mTabs.add(Tab_cart);        
          mTabs.add(Tab_user);        

          mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);        
          mTabHost.setup(this, getSupportFragmentManager(), R.id.realcontent);        
          mInflater = LayoutInflater.from(this);        

          //通过循环实例化一个个TabSpec        
          //并调用其中setIndicator方法        
          //然后将TabSpec加到TabHost中        
          for (Tab tab  :mTabs) {            
              TabHost.TabSpec tabSpec = mTabHost.newTabSpec(String.valueOf(tab.getText()));                  
              tabSpec.setIndicator(buildView(tab));            
              mTabHost.addTab(tabSpec,tab.getFragment(), null);        
            }        

           //通过这行代码可以去除掉底部菜单5个图表之间的分割线
           mTabHost.getTabWidget().setShowDividers(LinearLayout.SHOW_DIVIDER_NONE);    }    

          //设置Indicator中的View    
          private View buildView(Tab tab) {        
          View view = mInflater.inflate(R.layout.tab_indicator,null);        
          ImageView Tab_img = (ImageView) view.findViewById(R.id.tab_img);        
          TextView Tab_txt = (TextView) view.findViewById(R.id.tab_txt);        

          Tab_img.setBackgroundResource(tab.getImage());        
          Tab_txt.setText(tab.getText());        
          return view;    
        }
      }

public class Tab {   
      private int Image;    
      private int Text;    
      private Class Fragment;    

      public Tab(int image, int text, Class fragment) {        
              Image = image;       
              Text = text;       
              Fragment = fragment;    }    

      public int getImage() {        return Image;    }    
      public void setImage(int image) {        Image = image;    }          
      public int getText() {        return Text;    }    
      public void setText(int text) {        Text = text;    }    
      public Class getFragment() {        return Fragment;    }    
      public void setFragment(Class fragment) {        Fragment = fragment;    }
}

xml代码

<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=".MainActivity">    

   <FrameLayout        
              android:id="@+id/realcontent"        
              android:layout_width="match_parent"        
              android:layout_height="0dp"        
              android:layout_weight="1">    
    </FrameLayout>    

    <android.support.v4.app.FragmentTabHost        
              android:id="@android:id/tabhost"          
              android:layout_width="match_parent"        
              android:layout_height="wrap_content"        
              android:background="#ffffff" >      

         <FrameLayout         
               android:id="@android:id/tabcontent"            
               android:layout_width="0dp"            
               android:layout_height="0dp"            
               android:layout_weight="0" >
         </FrameLayout>    
     </android.support.v4.app.FragmentTabHost></LinearLayout>

7 ViewPager+Fragment+FragmentTabHost实现底部菜单

具体实现：

每个fragment布局

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="fragment1" 
        android:textSize="20dp"/>

</LinearLayout>

Activity布局

<?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" >

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

    <android.support.v4.app.FragmentTabHost
        android:id="@android:id/tabhost"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/black" >
    </android.support.v4.app.FragmentTabHost>

</LinearLayout>

底部菜单布局

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

    <ImageView
        android:id="@+id/tab_imageview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/tab_textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@android:color/white" />

</LinearLayout>

activity_main 中的java代码

//注意是继承 FragmentActivity
public class MainActivity extends FragmentActivity
{

    // FragmentTabHost
    private FragmentTabHost mTabHost;
    // layoutInflater
    private LayoutInflater layoutInflater;
    // imageViewArray数组，用于显示底部菜单
    private int imageViewArray[] = { R.drawable.mywork, R.drawable.mypatient,
            R.drawable.infusion, R.drawable.personal };
    // textViewArray数组
    private String textViewArray[] = { "工作", "回家", "互动", "我的" };
    // Fragment数组
    private List<Fragment> list = new ArrayList<Fragment>();
    // ViewPager
    private ViewPager vp;

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_tab_layout);

        initView();
    }

    /**
     * 控件初始化
     */
    private void initView()
    {
        vp = (ViewPager) findViewById(R.id.pager);

        layoutInflater = LayoutInflater.from(this);
        mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
        mTabHost.setup(this, getSupportFragmentManager(), R.id.pager);

        Fragment1 fragment1 = new Fragment1();
        Fragment2 fragment2 = new Fragment2();
        Fragment3 fragment3 = new Fragment3();
        Fragment4 fragment4 = new Fragment4();
        list.add(fragment1);
        list.add(fragment2);
        list.add(fragment3);
        list.add(fragment4);

        int count = textViewArray.length;

        // 添加菜单内容
        for (int i = 0; i < count; i++)
        {
            // 一个菜单就是一个TabSpec，然后添加到FragmentTabHost中
            TabSpec tabSpec = mTabHost.newTabSpec(textViewArray[i])
                    .setIndicator(getTabItemView(i));
            mTabHost.addTab(tabSpec, list.get(i).getClass(), null);
            // 默认让第一个选中
            mTabHost.getTabWidget().getChildAt(0)
                    .setBackgroundResource(R.drawable.selector_tab_background);
        }

        // ViewPager添加Adapter，这里用FragmentPagerAdapter
        vp.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager())
        {

            @Override
            public int getCount()
            {

                return list.size();
            }

            @Override
            public android.support.v4.app.Fragment getItem(int arg0)
            {
                return list.get(arg0);
            }
        });

    }

    private View getTabItemView(int i)
    {
        View view = layoutInflater.inflate(R.layout.tab_content, null);
        ImageView mImageView = (ImageView) view
                .findViewById(R.id.tab_imageview);
        TextView mTextView = (TextView) view.findViewById(R.id.tab_textview);
        mImageView.setBackgroundResource(imageViewArray[i]);
        mTextView.setText(textViewArray[i]);
        return view;
    }

}

当viewpager滑动的时候关联viewpager与底部菜单

vp.setOnPageChangeListener(new OnPageChangeListener()
        {

            @Override
            public void onPageScrollStateChanged(int arg0)
            {

            }

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

            }

            @Override
            public void onPageSelected(int arg0)
            {
                // 选中菜单
                mTabHost.setCurrentTab(arg0);
                // 设置对应菜单高亮
                mTabHost.getTabWidget()
                        .getChildAt(arg0)
                        .setBackgroundResource(
                                R.drawable.selector_tab_background);
            }
        });

FragmentTabHost实现setOnTabChangedListener，目的是当点击了下面的菜单时，上面的ViewPager应该滑动到对应的Fragment

mTabHost.setOnTabChangedListener(new OnTabChangeListener()
        {

            @Override
            public void onTabChanged(String tabId)
            {
                // 获取点击的菜单的位置
                int position = mTabHost.getCurrentTab();
                // ViewPager滑动到对应的位置
                vp.setCurrentItem(position);
            }
        });

总结
基本原理都是viewPager+FragmentPagerAdapter.如果要求内容不需要滑动，如微信、支付宝那种，只有底部点击切换Fragment的功能，那么只需要将Activity布局中的ViewPager换成一个FrameLayout占位，然后在程序替换Fragment即可~~

对以上几种实现方式的建议：
在项目中用的话
简便实用性： 3和6
如果需要左右滑动则 2 4 5
第一个是比较新的特性我自己用的少，根据个人情况来选择。

参考链接
https://juejin.im/entry/583414ce61ff4b006b8cf338 （第一条）
http://blog.csdn.net/qq_35366908/article/details/72457909（第一条）
http://www.jianshu.com/p/f7351d4ee903 （第五条）
http://www.jianshu.com/p/491386d6435c （FragmentTabHost）