利用FragmentTanHost实现底部导航栏

最新推荐文章于 2022-04-29 10:48:39 发布

jxq1994

最新推荐文章于 2022-04-29 10:48:39 发布

阅读量932

点赞数 1

分类专栏： android 文章标签：导航

本文链接：https://blog.csdn.net/jxq1994/article/details/67636598

版权

android 专栏收录该内容

54 篇文章 1 订阅

订阅专栏

说明

底部导航栏的实现方法是越来越多了，前面介绍了四种实现底部导航栏的方式，链接在这里。
至于孰优孰劣就要各位看官甄别啦。
今天的这种方式我认为是一种很不错的实现方式，利用FragmentTabHost+Fragment来完成。

下图是完成效果：

这里写图片描述

1.官方介绍

FragmentTabHost继承自我们熟悉的TabHost，Google是这么介绍它的：

Special TabHost that allows the use of Fragment objects for its tab content. When placing this in a view hierarchy, after inflating the hierarchy you must call setup(Context, FragmentManager, int) to complete the initialization of the tab host.

还提供了一个例子，有兴趣的可以去看
Example

从介绍来看，要使用FragmentTabHost就离不开Fragment以及setup()这个方法。

看看工程目录：

这里写图片描述

2.布局文件

activity_main.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"
    android:background="@color/gray"
    tools:context="com.example.administration.homepagerapplication2.MainActivity">

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

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


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

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

        </android.support.v4.app.FragmentTabHost>

</LinearLayout>

由于我们要使用滑动效果，所以我这里加了ViewPager；如果只是一个单纯的底部导航栏，那么下面这部分代码是少不了的：

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


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

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

        </android.support.v4.app.FragmentTabHost>

注意：

FragmentTabHost中间的那个Framelayout虽然什么都没做，也没有用到，但是确实必不可少的。

除此之外，我们还需要一个指示器，用来装载图片和文字：

tab_indicator.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/tab_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"/>

    <TextView
        android:id="@+id/tab_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textColor="@drawable/tab_txt_selector"/>

</LinearLayout>

四个Fragment的布局文件，这里我只贴出一个：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:gravity="center_vertical"
        android:textSize="20sp"
        android:textColor="@color/colorAccent"
        android:text="通讯录"/>

</LinearLayout>

3.资源文件

非常重要的图片选择器：

tab_icon_message_selector.xml:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Non focused states -->
    <item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@mipmap/iworker_message_normal" />
    <item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="@mipmap/iworker_message_press" />
    <!-- Focused states -->
    <item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@mipmap/iworker_message_press" />
    <item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="@mipmap/iworker_message_press" />
    <!-- Pressed -->
    <item android:state_selected="true" android:state_pressed="true" android:drawable="@mipmap/iworker_message_press" />
    <item android:state_pressed="true" android:drawable="@mipmap/iworker_message_press" />

</selector>

这里我也之贴出一个，其余三个一葫芦画瓢；

文字选择器：

tab_txt_selector.xml:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Non focused states -->
    <item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:color="@color/tab_tv_normal" />
    <item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="@color/tab_tv_selected" />
    <!-- Focused states -->
    <item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@color/tab_tv_selected" />
    <item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="@color/tab_tv_selected" />
    <!-- Pressed -->
    <item android:state_selected="true" android:state_pressed="true" android:color="@color/tab_tv_selected" />
    <item android:state_pressed="true" android:drawable="@color/tab_tv_selected" />

</selector>

4.Java文件

MainActivity.java:

public class MainActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener,TabHost.OnTabChangeListener{
    private LayoutInflater mInflater;
    private FragmentTabHost mTabHost;
    private ViewPager mViewPager;
    private List<Tab> mTabs = new ArrayList<>(4);
    private List<Fragment> list = new ArrayList<>();

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

        initTab();//初始化tab
        initPager();
    }

    private void initPager() {
        Fragment messageFragment = new MessageFragment();
        Fragment tableFragment = new TableFragment();
        Fragment contactsFragment = new ContactsFragment();
        Fragment mineFrament = new MineFragment();

        list.add(messageFragment);
        list.add(tableFragment);
        list.add(contactsFragment);
        list.add(mineFrament);

        //绑定Fragment适配器
        mViewPager.setAdapter(new MyFragmentAdapter(getSupportFragmentManager(), list));
    }

    private void initTab() {
        mViewPager = (ViewPager) findViewById(R.id.viewPager);
        mViewPager.addOnPageChangeListener(this);

        Tab tab_home = new Tab(R.string.iworker_tab_home,R.drawable.tab_icon_message_selector,MessageFragment.class);
        Tab tab_table = new Tab(R.string.iworker_tab_table,R.drawable.tab_icon_table_selector, TableFragment.class);
        Tab tab_contacts = new Tab(R.string.iworker_tab_address,R.drawable.tab_icon_contact_selector, ContactsFragment.class);
        Tab tab_mine = new Tab(R.string.iworker_tab_myself,R.drawable.tab_icon_mine_selector, MineFragment.class);

        mTabs.add(tab_home);
        mTabs.add(tab_table);
        mTabs.add(tab_contacts);
        mTabs.add(tab_mine);

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

        mTabHost.setOnTabChangedListener(this);
        /*
         *给每个Tab按钮设置图标、文字和内容
         */ 
        for(Tab tab:mTabs){
            TabHost.TabSpec tabSpec = mTabHost.newTabSpec(getString(tab.getTitle()));
            tabSpec.setIndicator(buildIndicator(tab));
            // 将Tab按钮添加进Tab选项卡中            
            mTabHost.addTab(tabSpec,tab.getFragment(),null);

        }

        mTabHost.getTabWidget().setShowDividers(LinearLayout.SHOW_DIVIDER_NONE);//设置分割线不可见
        mTabHost.setCurrentTab(0);//默认选择第一项Tab
    }

  /**
   * 给每个Tab按钮设置图标和文字
   */
    private View buildIndicator(Tab tab) {
        View view = mInflater.inflate(R.layout.tab_indicator,null);
        ImageView icon = (ImageView) view.findViewById(R.id.icon_tab);
        TextView text = (TextView) view.findViewById(R.id.txt_indicator);

        icon.setBackgroundResource(tab.getIcon());
        text.setText(tab.getTitle());
        return view;
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {

        mTabHost.setCurrentTab(position);//根据位置Postion设置当前的Tab

    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }

    @Override
    public void onTabChanged(String s) {
        int position = mTabHost.getCurrentTab();
        mViewPager.setCurrentItem(position);//把选中的Tab的位置赋给适配器，让它控制页面切换

    }
}

最后，Fragment是必须的：

public class ContactsFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_contacts,null);
    }
}

注意：

mTabHost.setup(this,getSupportFragmentManager(),R.id.viewPager);
在这个方法中，如果不需要viewPager效果，把R.id.viewpager换成R.id.realtabcontent（FrameLayout的id）。

因为需要重复用到图片、文字、以及Fragment类，因此我对此进行了封装，bean文件如下：

Tab.java:

public class Tab {
    private  int title;
    private  int icon;
    private Class fragment;

    public Tab(int title, int icon, Class fragment) {
        this.title = title;
        this.icon = icon;
        this.fragment = fragment;
    }

    public int getTitle() {
        return title;
    }

    public void setTitle(int title) {
        this.title = title;
    }

    public int getIcon() {
        return icon;
    }

    public void setIcon(int icon) {
        this.icon = icon;
    }

    public Class getFragment() {
        return fragment;
    }

    public void setFragment(Class fragment) {
        this.fragment = fragment;
    }
}

ViewPager的适配器：

MyFragmentAdapter.java:

public class MyFragmentAdapter extends FragmentPagerAdapter {
    private List<Fragment> fragmentList;
    public MyFragmentAdapter(FragmentManager fm,List<Fragment> list) {
        super(fm);
        this.fragmentList = list;
    }

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

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

jxq1994

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
利用FragmentTanHost实现底部导航栏

说明底部导航栏的实现方法是越来越多了，前面介绍了四种实现底部导航栏的方式，链接在这里。至于孰优孰劣就要各位看官甄别啦。今天的这种方式我认为是一种很不错的实现方式，利用FragmentTabHost+Fragment来完成。下图是完成效果：1.官方介绍FragmentTabHost继承自我们熟悉的TabHost，Google是这么介绍它的： Special TabHost that all
复制链接

扫一扫