Android 底部导航栏

最近看了些导航栏，想更新下自己的知识，简单记录下三个底部导航栏的实现方式

 

FragmentTabHost + Fragment

这个是我自己用得最多的，感觉蛮好用的~

上代码咯

在FragmentTabHost代码中两个ID android:id="@android:id/tabhost" 和 android:id="@android:id/tabcontent"这个是必须这两个固定的

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

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

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

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

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

activity的代码

public class ActivityF extends AppCompatActivity {

    private List<Tabhosts> tabs;
    private FragmentTabHost tabHost;
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.act_first);

        initTab();
    }


    private void initTab() {
        tabHost=(FragmentTabHost)findViewById(android.R.id.tabhost);
        tabs=new ArrayList<>();

        Tabhosts tabHost1 = new Tabhosts("First",Fragment1.class);
        Tabhosts tabHost2 = new Tabhosts("Second",Fragment2.class);

        tabs.add(tabHost1);
        tabs.add(tabHost2);

        tabHost.setup(this,getSupportFragmentManager(),R.id.fragment);

        for (Tabhosts tab:tabs){
            TabHost.TabSpec tabSpec=tabHost.newTabSpec(tab.getName());// TabSpec : 选项卡
            tabSpec.setIndicator(bindView(tab));
            tabHost.addTab(tabSpec,tab.getClazs(),null);
        }
        tabHost.getTabWidget().setShowDividers(LinearLayout.SHOW_DIVIDER_NONE);//分割线
        tabHost.setCurrentTabByTag(tabHost1.getName());//默认第一个
    }

    private View bindView(Tabhosts tab) {  //设置Indicator中的View
        View view=LayoutInflater.from(this).inflate(R.layout.tab,null);
        TextView textView=view.findViewById(R.id.tvtab);
        textView.setText(tab.getName());
        return view;
    }

}

自定义Tabhosts

package com.screen.www.fragmentdemo.tabhost;

public class Tabhosts {

    private String name;

    private Class clazs;

    public Tabhosts(String name, Class clazs) {
        this.name = name;
        this.clazs = clazs;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Class getClazs() {
        return clazs;
    }

    public void setClazs(Class clazs) {
        this.clazs = clazs;
    }
}

---

TabLayout + Fragment

 

加入个依赖

implementation 'com.android.support:design:27.1.1'

这个更加好实现

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

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


    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabPaddingStart="12dp"
        app:tabPaddingEnd="12dp"
        app:tabTextColor="#fff"
        app:tabBackground="@color/colorAccent">
    </android.support.design.widget.TabLayout>

</LinearLayout>

activity

BaseViewPage 在项目中是分开的，懒~~~  大致就这样就可以实现了

public class ActivityS extends AppCompatActivity{

    ViewPager viewPager;
    TabLayout tabLayout;
    List<Fragment> list;
    String array[]={"First","Second"};
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.act_seconds);

        initView();
    }

    private void initView() {

        viewPager=(ViewPager)findViewById(R.id.viewPager);
        tabLayout=(TabLayout)findViewById(R.id.tablayout);


        list=new ArrayList<>();
        Fragment1 fragment1=new Fragment1();
        Fragment2 fragment2=new Fragment2();

        list.add(fragment1);
        list.add(fragment2);

        BaseViewPage vpadpater=new BaseViewPage(getSupportFragmentManager(),list,array);
        viewPager.setAdapter(vpadpater);
        tabLayout.setupWithViewPager(viewPager);


    }

public class BaseViewPage extends FragmentPagerAdapter {

    List<Fragment> mList;
    String [] mNames;



    public BaseViewPage(FragmentManager fm, List list,String [] names) {
        super(fm);
        mList=list;
        mNames=names;

    }

    @Override
    public Fragment getItem(int position) {
        Fragment fragment=null;
        if(position<mList.size()){
            fragment=mList.get(position);
        }else{
            fragment=mList.get(0);
        }
        return fragment;
    }

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

    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        return mNames[position];
    }
}
}

---

BottomNavigationBar + Fragment

 

 

在Android Studio下添加依赖：

 implementation 'com.ashokvarma.android:bottom-navigation-bar:2.0.2'

xml的这个，注意不是BottomNavigationView ，一开始写错了，笑哭

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

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

    <com.ashokvarma.bottomnavigation.BottomNavigationBar
        android:id="@+id/bomnav"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorAccent"
        ></com.ashokvarma.bottomnavigation.BottomNavigationBar>>
</LinearLayout>

activity

package com.screen.www.fragmentdemo.bomnav;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;

import com.ashokvarma.bottomnavigation.BottomNavigationBar;
import com.ashokvarma.bottomnavigation.BottomNavigationItem;
import com.screen.www.fragmentdemo.Fragment1;
import com.screen.www.fragmentdemo.Fragment2;
import com.screen.www.fragmentdemo.R;

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

public class ActivityT extends AppCompatActivity implements BottomNavigationBar.OnTabSelectedListener {


    BottomNavigationBar bnavBar;
    Fragment1 fragment1;
    Fragment2 fragment2;

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

    private void initView() {
        bnavBar = (BottomNavigationBar) findViewById(R.id.bomnav);
        bnavBar.addItem(new BottomNavigationItem(R.mipmap.ic_launcher, "First"))
                .addItem(new BottomNavigationItem(R.mipmap.ic_launcher, "Second"))
                .setFirstSelectedPosition(0)
                .initialise();

        setDefault();
        bnavBar.setTabSelectedListener(this);
    }


    FragmentManager fragmentManager;

    private void setDefault() {
        FragmentManager manager = getSupportFragmentManager();
        FragmentTransaction ft = manager.beginTransaction();
        fragment1 = new Fragment1();
        ft.add(R.id.flayout3, fragment1);
        ft.commit();
    }

    @Override
    public void onTabSelected(int position) {
        fragmentManager = this.getSupportFragmentManager();
        FragmentTransaction ft = fragmentManager.beginTransaction();
        switch (position) {
            case 0:
                if (fragment1 == null) {
                    fragment1 = new Fragment1();
                    ft.add(R.id.flayout3, fragment1).hide(fragment2);
                } else {
                    ft.show(fragment1).hide(fragment2);
                }
                break;
            case 1:
                if (fragment2 == null) {
                    fragment2 = new Fragment2();
                    ft.add(R.id.flayout3, fragment2).hide(fragment1);
                } else {
                    ft.show(fragment2).hide(fragment1);
                }
                break;
        }
        ft.commit();
    }

    @Override
    public void onTabUnselected(int position) {

    }

    @Override
    public void onTabReselected(int position) {

    }
}

---

大致就是三种，至于fragment1和fragment2，随便做个模板就OK了

除此之外记得还有这两种：

BottomNavigationView + Fragment

RadioGroup + Fragment

可能还有些其他，需要以后再补上

 

Demo