底部导航栏的实现方式

作者: Jsonzhang | 来源:发表于2017-09-26 14:06 被阅读43次

学习资料：https://juejin.im/post/5901b564570c35005804424b

方法一：TabLayout + Fragment

需要注意的几点：

TabLayout默认是带indicator的 (就是一条下横线)，我们可以在tablayout的属性中设置 app:tabIndicatorHeight="0dp"就可以去掉indicator了。

带indicator的例子.png

如果我们用原生的方法给tablayout添加tab，展示的默认效果是图片和文字上下距离比较大，并且goole的api中并没有提供调整这个距离的方法，所以我们不能用原生的添加tab的方法，我们需要自定义tabview，然后再添加。

tabLayout.addTab(tabLayout.newTab().setIcon(TabLayoutDataGenerator.mTabImgNormal[0]).setText(TabLayoutDataGenerator.titles[0]));
tabLayout.addTab(tabLayout.newTab().setIcon(TabLayoutDataGenerator.mTabImgNormal[1]).setText(TabLayoutDataGenerator.titles[1]));
tabLayout.addTab(tabLayout.newTab().setIcon(TabLayoutDataGenerator.mTabImgNormal[2]).setText(TabLayoutDataGenerator.titles[2]));
tabLayout.addTab(tabLayout.newTab().setIcon(TabLayoutDataGenerator.mTabImgNormal[3]).setText(TabLayoutDataGenerator.titles[3]));

图片和文字距离较大.png

直接上代码效果如下图

最终效果.png

MainActivity布局代码：

<LinearLayout 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"
    android:orientation="vertical"
    tools:context="com.zsl.bb.bottom_niv.MainActivity">

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

    <View
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:alpha="0.6"
        android:background="#ccc" />

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="@dimen/bottom_niv_height"
        app:tabIndicatorHeight="0dp"
        app:tabSelectedTextColor="@color/bottom_text_select_color" />
</LinearLayout>

自定义tabview的布局：

<?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/iv_icon"
        android:layout_width="@dimen/bottom_niv_img_size"
        android:layout_height="@dimen/bottom_niv_img_size"
        android:src="@drawable/home_selected" />

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="首页" />
</LinearLayout>

填充TabLayout的实体类：

/**
 * TabLayout初始化数据
 * Created by zhangshuliang on 2017/9/26.
 */

public class TabLayoutDataGenerator {

    public static final String[] titles = {"首页", "聊天", "我的", "设置"};
    public static final int[] mTabImgNormal = {
            R.drawable.home_normal,
            R.drawable.chat_normal,
            R.drawable.mine_normal,
            R.drawable.set_normal};
    public static final int[] mTabImgSelected = {
            R.drawable.home_selected,
            R.drawable.chat_selected,
            R.drawable.mine_selected,
            R.drawable.set_selected};


    // 所有的fragment放入数组中
    public static Fragment[] getFragments(String tag) {
        Fragment[] fragments = new Fragment[titles.length];
        fragments[0] = HomeFragment.getInstance(tag);
        fragments[1] = ChatFragment.getInstance(tag);
        fragments[2] = MineFragment.getInstance(tag);
        fragments[3] = SetFragment.getInstance(tag);
        return fragments;
    }


    // 自定义TabView并设置数据
    public static View getTabView(Context context, int position) {
        View view = LayoutInflater.from(context).inflate(R.layout.item_tab_view, null);
        ImageView icon = view.findViewById(R.id.iv_icon);
        TextView title = view.findViewById(R.id.tv_title);
        icon.setImageResource(mTabImgNormal[position]);
        title.setText(titles[position]);
        return view;
    }
}

其中一个fragment的代码：

public class HomeFragment extends Fragment {

    public static HomeFragment getInstance(String tag){
        HomeFragment fragment = new HomeFragment();
        Bundle bundle = new Bundle();
        bundle.putString("tag",tag);
        fragment.setArguments(bundle);
        return fragment;
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_home, container, false);
        return view;
    }
}

MainActivity的代码：

public class MainActivity extends AppCompatActivity {

    private TabLayout tabLayout;
    private Fragment[] fragments;


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


    private void initView() {
        fragments = TabLayoutDataGenerator.getFragments("TabLayout tab");
        tabLayout = (TabLayout) findViewById(R.id.tab_layout);
        // 设置监听(必须要放在添加tab之前)
        setTabListener();
        // 添加tab
        for (int i = 0; i < TabLayoutDataGenerator.titles.length; i++) {
            tabLayout.addTab(tabLayout.newTab().setCustomView(TabLayoutDataGenerator.getTabView(MainActivity.this, i)));
        }
    }


    // tablayout设置监听器
    private void setTabListener() {
        tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                onTabItemSelected(tab.getPosition());
                changeTabUi(tab);
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });
    }


    private void changeTabUi(TabLayout.Tab tab) {
        for (int i = 0; i < tabLayout.getTabCount(); i++) {
            View view = tabLayout.getTabAt(i).getCustomView();
            ImageView icon = view.findViewById(R.id.iv_icon);
            TextView title = view.findViewById(R.id.tv_title);

            if (i == tab.getPosition()) {
                icon.setImageResource(TabLayoutDataGenerator.mTabImgSelected[i]);
                title.setTextColor(getResources().getColor(R.color.bottom_text_select_color));
            } else {
                icon.setImageResource(TabLayoutDataGenerator.mTabImgNormal[i]);
                title.setTextColor(getResources().getColor(R.color.bottom_text_normal_color));
            }
        }
    }


    private void onTabItemSelected(int position) {
        Fragment fragment = null;
        switch (position) {
            case 0:
                fragment = fragments[0];
                break;
            case 1:
                fragment = fragments[1];
                break;
            case 2:
                fragment = fragments[2];
                break;
            case 3:
                fragment = fragments[3];
                break;
        }
        if (fragment != null) {
            getSupportFragmentManager().beginTransaction().replace(R.id.fl_container, fragment).commit();
        }
    }
}

方法二：BottomNavigationView + fragment

MainActivity布局代码（就把tablayout换成了bottomnavigationview）：

<LinearLayout 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"
    android:orientation="vertical"
    tools:context="com.zsl.bb.bottom_niv.Main2Activity">
    
    <FrameLayout
        android:id="@+id/fl_container_two"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"/>
    
    <View
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:background="#ccc"
        android:alpha="0.6"/>
    
    <android.support.design.widget.BottomNavigationView
        app:menu="@menu/bottom_niv_menu"
        android:id="@+id/navigation_view"
        android:layout_width="match_parent"
        android:layout_height="@dimen/bottom_niv_height"/>
</LinearLayout>

BottomNavigationView的tab是通过menu属性引入的，menu的布局文件如下(menu是在res/menu)：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/tab_menu_home"
        android:icon="@drawable/home_normal"
        android:title="首页"/>

    <item
        android:id="@+id/tab_menu_chat"
        android:icon="@drawable/chat_normal"
        android:title="聊天"/>

    <item
        android:id="@+id/tab_menu_mine"
        android:icon="@drawable/mine_normal"
        android:title="我的"/>

    <item
        android:id="@+id/tab_menu_set"
        android:icon="@drawable/set_normal"
        android:title="设置"/>
</menu>

Mainactivity中的代码：

public class Main2Activity extends AppCompatActivity {

    private BottomNavigationView navigationView;
    private Fragment[] fragments;

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

        initView();
    }

    private void initView() {
        navigationView = (BottomNavigationView) findViewById(R.id.navigation_view);
        fragments = TabLayoutDataGenerator.getFragments("Navigationview");

        navigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                onTabItemSelected(item.getItemId());
                return true;
            }
        });
        onTabItemSelected(R.id.tab_menu_home);
    }


    private void onTabItemSelected(int id) {
        Fragment fragment = null;
        switch (id) {
            case R.id.tab_menu_home:
                fragment = fragments[0];
                break;
            case R.id.tab_menu_chat:
                fragment = fragments[1];
                break;
            case R.id.tab_menu_mine:
                fragment = fragments[2];
                break;
            case R.id.tab_menu_set:
                fragment = fragments[3];
                break;
        }
        getSupportFragmentManager().beginTransaction().replace(R.id.fl_container_two,fragment).commit();
    }
}

底部导航栏的实现方式

方法一：TabLayout + Fragment

直接上代码效果如下图

方法二：BottomNavigationView + fragment

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

底部导航栏的实现方式

方法一：TabLayout + Fragment

直接上代码 效果如下图

方法二：BottomNavigationView + fragment

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

直接上代码效果如下图