• android底部导航栏小结


    android自带的有TabHost,但好像无法满足要求,

    本文只记录使用 TabLayout + Fragment  和 android 自带的 BottomNavigationView + Fragment 来实现

    由于测试的时候使用的是一个工程,所以看起来可能有点乱,但是里面的工程目录没有变化,变化的只是代码部分

    需要新建的部分如下:

    新建一个工程,如果是在做项目,不要在原项目中进行操作,以免损坏原项目,

    通用部分,Fragment部分,(xml和对应的java代码),Androidstudio中会自带代码,不需要改动里面的代码

    添加对应的包依赖

    menu是 BottomNavigationView + Fragment需要的,如果工程中不使用自带的新建的话,可以不需要建立这一部分,

    接下来先介绍 TabLayout + Fragment :

    主页面的布局代码,

     1 <?xml version="1.0" encoding="utf-8"?>
     2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     3     xmlns:app="http://schemas.android.com/apk/res-auto"
     4     android:orientation="vertical"
     5     android:layout_width="match_parent"
     6     android:layout_height="match_parent">
     7 
     8     <FrameLayout
     9         android:id="@+id/home_container"
    10         android:layout_width="match_parent"
    11         android:layout_height="0dp"
    12         android:layout_weight="1"
    13         >
    14     </FrameLayout>
    15 
    16     <View android:layout_width="match_parent"
    17         android:layout_height="0.5dp"
    18         android:alpha="0.6"
    19         android:background="@android:color/darker_gray"
    20         />
    21     <android.support.design.widget.TabLayout
    22         android:id="@+id/bottom_tab_layout"   
    23         android:layout_width="match_parent"
    24         app:tabIndicatorHeight="0dp"
    25         app:tabSelectedTextColor="@android:color/black"
    26         app:tabTextColor="@android:color/darker_gray"
    27         android:layout_height="48dp">
    28         <!--app:menu="@menu/tab_menu" 如果需要使用 BottomNavigationView + Fragment 布局的话取消注释,更改id即可-->
    29 
    30     </android.support.design.widget.TabLayout>
    31 
    32 </LinearLayout>
     3 import android.content.Context;
     4 import android.support.v4.app.Fragment;
     5 import android.view.LayoutInflater;
     6 import android.view.View;
     7 import android.widget.ImageView;
     8 import android.widget.TextView;
     9 
    10 import com.example.tabhostcostom.AttentionFragment;
    11 import com.example.tabhostcostom.DiscoveryFragment;
    12 import com.example.tabhostcostom.HomeFragment;
    13 import com.example.tabhostcostom.ProfileFragment;
    14 import com.example.tabhostcostom.R;
    15 
    16 public class DataGenerator {
    17 
    18     public static final int []mTabRes = new int[]{R.mipmap.index_blue_icon, R.mipmap.index_message, R.mipmap.index_publish, R.mipmap.index_ying, R.mipmap.index_me};
    19     //public static final int []mTabResPressed = new int[]{R.drawable.ic_tab_strip_icon_feed_selected,R.drawable.ic_tab_strip_icon_category_selected,R.drawable.ic_tab_strip_icon_pgc_selected,R.drawable.ic_tab_strip_icon_profile_selected};
    20     public static final String []mTabTitle = new String[]{"首页","发现","", "关注","我的"};
    21 
    22     public static Fragment[] getFragments(String from){
    23         Fragment fragments[] = new Fragment[4];
    24         fragments[0] = HomeFragment.newInstance(from, "a");
    25         fragments[1] = DiscoveryFragment.newInstance(from, "b");
    26         fragments[2] = AttentionFragment.newInstance(from, "c");
    27         fragments[3] = ProfileFragment.newInstance(from, "d");
    28         return fragments;
    29     }
    30 
    31     /**
    32      * 获取Tab 显示的内容
    33      * @param context
    34      * @param position
    35      * @return
    36      */
    37     public static View getTabView(Context context, int position){
    38         View view = LayoutInflater.from(context).inflate(R.layout.home_tab_content,null);
    39         ImageView tabIcon =  view.findViewById(R.id.tab_content_image);
    40         tabIcon.setImageResource(DataGenerator.mTabRes[position]);
    41         TextView tabText = view.findViewById(R.id.tab_content_text);
    42         tabText.setText(mTabTitle[position]);
    43         return view;
    44     }
    45 }

    以上是一个工具类将所有的数据全部封装在一块,

    我也没搞明白为什么需要传两个参数,应该是可以改的吧,自己没有尝试,随便传一个字符串即可,

    主函数中也就是主页面的代码

      1 import android.net.Uri;
      2 import android.support.annotation.Nullable;
      3 import android.support.design.widget.BottomNavigationView;
      4 import android.support.annotation.NonNull;
      5 import android.support.design.widget.TabLayout;
      6 import android.support.v4.app.Fragment;
      7 import android.support.v7.app.AppCompatActivity;
      8 import android.os.Bundle;
      9 import android.view.MenuItem;
     10 import android.view.View;
     11 import android.widget.ImageView;
     12 import android.widget.TextView;
     13 import android.widget.Toast;
     14 
     15 import com.example.tabhostcostom.Utils.DataGenerator;
     16 
     17 public class MainActivity extends AppCompatActivity implements HomeFragment.OnFragmentInteractionListener, DiscoveryFragment.OnFragmentInteractionListener ,
     18         AttentionFragment.OnFragmentInteractionListener, ProfileFragment.OnFragmentInteractionListener
     19 {
     20 
     21     private BottomNavigationView mBottomNavigationView;
     22     //private Fragment []mFragments;
     23     private TabLayout mTabLayout;
     24     private Fragment []mFragmensts;
     25 
     26     @Override
     27     protected void onCreate(@Nullable Bundle savedInstanceState) {
     28         super.onCreate(savedInstanceState);
     29         setContentView(R.layout.activity_main);
     30 
     31         mFragmensts = DataGenerator.getFragments("TabLayout Tab");
     32 
     33         initView();
     34     }
     35 
     36     private void initView() {
     37             mTabLayout = findViewById(R.id.bottom_tab_layout);
     38 
     39             mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
     40                 @Override
     41                 public void onTabSelected(TabLayout.Tab tab) {
     42                     onTabItemSelected(tab.getPosition());
     43                     // Tab 选中之后,改变各个Tab的状态,如果点击下面的导航栏,需要改变颜色的话取消注释,同时取消掉工具类中的注释即可
     44                     /*
     45                     for (int i=0;i<mTabLayout.getTabCount();i++){
     46                         View view = mTabLayout.getTabAt(i).getCustomView();
     47                         ImageView icon = (ImageView) view.findViewById(R.id.tab_content_image);
     48                         TextView text = (TextView) view.findViewById(R.id.tab_content_text);
     49 
     50                         if(i == tab.getPosition()){ // 选中状态
     51                             icon.setImageResource(DataGenerator.mTabResPressed[i]);
     52                             text.setTextColor(getResources().getColor(android.R.color.black));
     53                         }else{// 未选中状态
     54                             icon.setImageResource(DataGenerator.mTabRes[i]);
     55                             text.setTextColor(getResources().getColor(android.R.color.darker_gray));
     56                         }
     57                     }*/
     58 
     59 
     60                 }
     61 
     62                 @Override
     63                 public void onTabUnselected(TabLayout.Tab tab) {
     64 
     65                 }
     66 
     67                 @Override
     68                 public void onTabReselected(TabLayout.Tab tab) {
     69 
     70                 }
     71             });
     72 
     73         for(int i=0;i<5;i++){
     74             mTabLayout.addTab(mTabLayout.newTab().setCustomView(DataGenerator.getTabView(this,i)));
     75         }
     76 
     77         }
     78 
     79     private void onTabItemSelected(int position){
     80         Fragment fragment = null;
     81         switch (position){
     82             case 0:
     83                 fragment = mFragmensts[0];
     84                 break;
     85             case 1:
     86                 fragment = mFragmensts[1];
     87                 break;
     88             case 2:
     89                 fragment = mFragmensts[2];
     90                 break;
     91             case 3:
     92                 fragment = mFragmensts[3];
     93                 break;
     94             case 4:
     95                 fragment = mFragmensts[3];
     96                 break;
     97         }
     98         if(fragment!=null) {
     99             getSupportFragmentManager().beginTransaction().replace(R.id.home_container,fragment).commit();
    100         }
    101     }
    102 
    103     @Override
    104     public void onFragmentInteraction(Uri uri) {
    105         Toast.makeText(this, "hello", Toast.LENGTH_SHORT).show();
    106     }
    107 }

    这是 TabLayout + Fragment 全部代码

    下面介绍 BottomNavigationView + Fragment 实现,带有动画效果,点击的那个会自动将其他的挤出去,所以建议使用上面的布局方式,当然,需要动画效果的布局也可以

    需要 menu 菜单

     1 <?xml version="1.0" encoding="utf-8"?>
     2 <menu xmlns:android="http://schemas.android.com/apk/res/android">
     3     <item
     4         android:id="@+id/tab_menu_home"
     5         android:icon="@mipmap/index_blue_icon"
     6         android:title="首页"
     7         />
     8     <item
     9         android:id="@+id/tab_menu_discovery"
    10         android:icon="@mipmap/index_message"
    11         android:title="发现"
    12         />
    13     <item
    14         android:id="@+id/tab_menu_attention1"
    15         android:icon="@mipmap/index_publish"
    16         android:title=""
    17         />
    18     <item
    19         android:id="@+id/tab_menu_profile"
    20         android:icon="@mipmap/index_ying"
    21         android:title="Ying"
    22         />
    23     <item
    24         android:id="@+id/tab_menu_attention"
    25         android:icon="@mipmap/index_me"
    26         android:title="我"
    27         />
    28 
    29 </menu>

    主函数中代码:

    package com.example.tabhostcostom;
    
    import android.net.Uri;
    import android.support.annotation.Nullable;
    import android.support.design.widget.BottomNavigationView;
    import android.support.annotation.NonNull;
    import android.support.design.widget.TabLayout;
    import android.support.v4.app.Fragment;
    import android.support.v7.app.AppCompatActivity;
    import android.os.Bundle;
    import android.view.MenuItem;
    import android.view.View;
    import android.widget.ImageView;
    import android.widget.TextView;
    import android.widget.Toast;
    
    import com.example.tabhostcostom.Utils.DataGenerator;
    
    public class MainActivity extends AppCompatActivity implements HomeFragment.OnFragmentInteractionListener, DiscoveryFragment.OnFragmentInteractionListener ,
            AttentionFragment.OnFragmentInteractionListener, ProfileFragment.OnFragmentInteractionListener
    {
    
        private BottomNavigationView mBottomNavigationView;
        private Fragment []mFragments;
        private TabLayout mTabLayout;
        private Fragment []mFragmensts;
    
        @Override
        protected void onCreate(@Nullable Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            mFragments = DataGenerator.getFragments("TabLayout Tab");
    
            initView();
        }
    
    
        private void initView() {
            mBottomNavigationView = findViewById(R.id.bottom_navigation_view);
            //mBottomNavigationView.getMaxItemCount()
    
            mBottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
                @Override
                public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                    onTabItemSelected(item.getItemId());
                    return true;
                }
            });
    
            // 由于第一次进来没有回调onNavigationItemSelected,因此需要手动调用一下切换状态的方法
            onTabItemSelected(R.id.tab_menu_home);
        }
    
        private void onTabItemSelected(int id){
            Fragment fragment = null;
            switch (id){
                case R.id.tab_menu_home:
                    fragment = mFragments[0];
                    break;
                case R.id.tab_menu_discovery:
                    fragment = mFragments[1];
                    break;
    
                case R.id.tab_menu_attention:
                    fragment = mFragments[2];
                    break;
                case R.id.tab_menu_profile:
                    fragment = mFragments[3];
                    break;
            }
            if(fragment!=null) {
                getSupportFragmentManager().beginTransaction().replace(R.id.home_container,fragment).commit();
            }
        } 
    
        @Override
        public void onFragmentInteraction(Uri uri) {
            Toast.makeText(this, "hello", Toast.LENGTH_SHORT).show();
        }
    }

     大致就这么多,因为是将两个布局杂糅在一块,如果有问题可以在博客后面进行留言,

  • 相关阅读:
    感悟优化——Netty对JDK缓冲区的内存池零拷贝改造
    由浅入深理解Java线程池及线程池的如何使用
    Http学习笔记
    zookeeper集群配置详细教程
    kafka学习笔记——基本概念与安装
    干货——详解Java中的关键字
    Java基础巩固——排序
    你可以这么理解五种I/O模型
    Java中的NIO基础知识
    Java基础巩固——异常
  • 原文地址:https://www.cnblogs.com/ice-image/p/10324184.html
Copyright © 2020-2023  润新知