Android (争取做到)最全的底部导航栏实现方法

最新推荐文章于 2024-02-18 16:16:21 发布
最新推荐文章于 2024-02-18 16:16:21 发布
阅读量3.9k 收藏 19
点赞数
分类专栏： android

本文(争取做到)Android 最全的底部导航栏实现方法.

现在写了4个主要方法.

还有一些个人感觉不完全切题的方法也会简单介绍一下.


方法一. ViewPager + List<View> + PagerAdapter

先看activity_main.xml
[html]  view plain  copy
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:orientation="vertical" >  
  6.   
  7.     <LinearLayout  
  8.         android:layout_width="match_parent"  
  9.         android:layout_height="45dp"  
  10.         android:background="#0E6DB0"  
  11.         android:gravity="center"  
  12.         android:orientation="vertical" >  
  13.   
  14.         <TextView  
  15.             android:layout_width="wrap_content"  
  16.             android:layout_height="wrap_content"  
  17.             android:layout_gravity="center"  
  18.             android:text="@string/app_name"  
  19.             android:textColor="#ffffff"  
  20.             android:textSize="20sp"  
  21.             android:textStyle="bold" />  
  22.     </LinearLayout>  
  23.   
  24.     <android.support.v4.view.ViewPager  
  25.         android:id="@+id/viewPager"  
  26.         android:layout_width="match_parent"  
  27.         android:layout_height="0dp"  
  28.         android:layout_weight="1" >  
  29.     </android.support.v4.view.ViewPager>  
  30.   
  31.     <LinearLayout  
  32.         android:layout_width="match_parent"  
  33.         android:layout_height="55dp"  
  34.         android:background="#0E6DB0"  
  35.         android:orientation="horizontal" >  
  36.   
  37.         <LinearLayout  
  38.             android:id="@+id/llChat"  
  39.             android:layout_width="0dp"  
  40.             android:layout_height="match_parent"  
  41.             android:layout_weight="1"  
  42.             android:gravity="center"  
  43.             android:orientation="vertical" >  
  44.   
  45.             <ImageView  
  46.                 android:id="@+id/ivChat"  
  47.                 android:layout_width="wrap_content"  
  48.                 android:layout_height="wrap_content"  
  49.                 android:background="#00000000"  
  50.                 android:src="@drawable/tab_chat" />  
  51.   
  52.             <TextView  
  53.                 android:id="@+id/tvChat"  
  54.                 android:layout_width="wrap_content"  
  55.                 android:layout_height="wrap_content"  
  56.                 android:text="微信"  
  57.                 android:textColor="@drawable/tab_textview" />  
  58.         </LinearLayout>  
  59.   
  60.         <LinearLayout  
  61.             android:id="@+id/llFriends"  
  62.             android:layout_width="0dp"  
  63.             android:layout_height="match_parent"  
  64.             android:layout_weight="1"  
  65.             android:gravity="center"  
  66.             android:orientation="vertical" >  
  67.   
  68.             <ImageView  
  69.                 android:id="@+id/ivFriends"  
  70.                 android:layout_width="wrap_content"  
  71.                 android:layout_height="wrap_content"  
  72.                 android:background="#00000000"  
  73.                 android:src="@drawable/tab_friends" />  
  74.   
  75.             <TextView  
  76.                 android:id="@+id/tvFriends"  
  77.                 android:layout_width="wrap_content"  
  78.                 android:layout_height="wrap_content"  
  79.                 android:text="朋友"  
  80.                 android:textColor="@drawable/tab_textview" />  
  81.         </LinearLayout>  
  82.   
  83.         <LinearLayout  
  84.             android:id="@+id/llContacts"  
  85.             android:layout_width="0dp"  
  86.             android:layout_height="match_parent"  
  87.             android:layout_weight="1"  
  88.             android:gravity="center"  
  89.             android:orientation="vertical" >  
  90.   
  91.             <ImageView  
  92.                 android:id="@+id/ivContacts"  
  93.                 android:layout_width="wrap_content"  
  94.                 android:layout_height="wrap_content"  
  95.                 android:background="#00000000"  
  96.                 android:src="@drawable/tab_contacts" />  
  97.   
  98.             <TextView  
  99.                 android:id="@+id/tvContacts"  
  100.                 android:layout_width="wrap_content"  
  101.                 android:layout_height="wrap_content"  
  102.                 android:text="通讯录"  
  103.                 android:textColor="@drawable/tab_textview" />  
  104.         </LinearLayout>  
  105.   
  106.         <LinearLayout  
  107.             android:id="@+id/llSettings"  
  108.             android:layout_width="0dp"  
  109.             android:layout_height="match_parent"  
  110.             android:layout_weight="1"  
  111.             android:gravity="center"  
  112.             android:orientation="vertical" >  
  113.   
  114.             <ImageView  
  115.                 android:id="@+id/ivSettings"  
  116.                 android:layout_width="wrap_content"  
  117.                 android:layout_height="wrap_content"  
  118.                 android:background="#00000000"  
  119.                 android:src="@drawable/tab_setting" />  
  120.   
  121.             <TextView  
  122.                 android:id="@+id/tvSettings"  
  123.                 android:layout_width="wrap_content"  
  124.                 android:layout_height="wrap_content"  
  125.                 android:text="设置"  
  126.                 android:textColor="@drawable/tab_textview" />  
  127.         </LinearLayout>  
  128.     </LinearLayout>  
  129.   
  130. </LinearLayout>  


说明一:还有另一种方式是用RadioGroup的方式,但是那种方式如果以后要包含小红点提醒或者右上角数字角标提醒,就不好灵活的修改了.所以本文忽略那种方法.
说明二:底部导航栏的4个ImageView使用的src, TextView使用的textColor都是seletor


然后看MainActivity.java
[java]  view plain  copy
  1. package com.yao.tab01;  
  2.   
  3. import java.util.ArrayList;  
  4. import java.util.List;  
  5.   
  6. import android.app.Activity;  
  7. import android.os.Bundle;  
  8. import android.support.v4.view.ViewPager;  
  9. import android.support.v4.view.ViewPager.OnPageChangeListener;  
  10. import android.view.LayoutInflater;  
  11. import android.view.View;  
  12. import android.view.View.OnClickListener;  
  13. import android.view.Window;  
  14. import android.widget.ImageView;  
  15. import android.widget.LinearLayout;  
  16. import android.widget.TextView;  
  17.   
  18. public class MainActivity extends Activity implements OnClickListener {  
  19.   
  20.     private List<View> views = new ArrayList<View>();  
  21.     private ViewPager viewPager;  
  22.     private LinearLayout llChat, llFriends, llContacts, llSettings;  
  23.     private ImageView ivChat, ivFriends, ivContacts, ivSettings, ivCurrent;  
  24.     private TextView tvChat, tvFriends, tvContacts, tvSettings, tvCurrent;  
  25.   
  26.     @Override  
  27.     protected void onCreate(Bundle savedInstanceState) {  
  28.         super.onCreate(savedInstanceState);  
  29.         requestWindowFeature(Window.FEATURE_NO_TITLE);  
  30.         setContentView(R.layout.activity_main);  
  31.   
  32.         initView();  
  33.   
  34.         initData();  
  35.     }  
  36.   
  37.     private void initView() {  
  38.         viewPager = (ViewPager) findViewById(R.id.viewPager);  
  39.   
  40.         llChat = (LinearLayout) findViewById(R.id.llChat);  
  41.         llFriends = (LinearLayout) findViewById(R.id.llFriends);  
  42.         llContacts = (LinearLayout) findViewById(R.id.llContacts);  
  43.         llSettings = (LinearLayout) findViewById(R.id.llSettings);  
  44.   
  45.         llChat.setOnClickListener(this);  
  46.         llFriends.setOnClickListener(this);  
  47.         llContacts.setOnClickListener(this);  
  48.         llSettings.setOnClickListener(this);  
  49.   
  50.         ivChat = (ImageView) findViewById(R.id.ivChat);  
  51.         ivFriends = (ImageView) findViewById(R.id.ivFriends);  
  52.         ivContacts = (ImageView) findViewById(R.id.ivContacts);  
  53.         ivSettings = (ImageView) findViewById(R.id.ivSettings);  
  54.   
  55.         tvChat = (TextView) findViewById(R.id.tvChat);  
  56.         tvFriends = (TextView) findViewById(R.id.tvFriends);  
  57.         tvContacts = (TextView) findViewById(R.id.tvContacts);  
  58.         tvSettings = (TextView) findViewById(R.id.tvSettings);  
  59.   
  60.         ivChat.setSelected(true);  
  61.         tvChat.setSelected(true);  
  62.         ivCurrent = ivChat;  
  63.         tvCurrent = tvChat;  
  64.   
  65.         viewPager.setOnPageChangeListener(new OnPageChangeListener() {  
  66.   
  67.             @Override  
  68.             public void onPageSelected(int position) {  
  69.                 changeTab(position);  
  70.             }  
  71.   
  72.             @Override  
  73.             public void onPageScrolled(int arg0, float arg1, int arg2) {  
  74.   
  75.             }  
  76.   
  77.             @Override  
  78.             public void onPageScrollStateChanged(int arg0) {  
  79.   
  80.             }  
  81.         });  
  82.     }  
  83.   
  84.     private void initData() {  
  85.         LayoutInflater mInflater = LayoutInflater.from(this);  
  86.         View tab01 = mInflater.inflate(R.layout.tab01, null);  
  87.         View tab02 = mInflater.inflate(R.layout.tab02, null);  
  88.         View tab03 = mInflater.inflate(R.layout.tab03, null);  
  89.         View tab04 = mInflater.inflate(R.layout.tab04, null);  
  90.         views.add(tab01);  
  91.         views.add(tab02);  
  92.         views.add(tab03);  
  93.         views.add(tab04);  
  94.   
  95.         MyPagerAdapter adapter = new MyPagerAdapter(views);  
  96.         viewPager.setAdapter(adapter);  
  97.     }  
  98.   
  99.     @Override  
  100.     public void onClick(View v) {  
  101.         changeTab(v.getId());  
  102.     }  
  103.   
  104.     private void changeTab(int id) {  
  105.         ivCurrent.setSelected(false);  
  106.         tvCurrent.setSelected(false);  
  107.         switch (id) {  
  108.         case R.id.llChat:  
  109.             viewPager.setCurrentItem(0);  
  110.         case 0:  
  111.             ivChat.setSelected(true);  
  112.             ivCurrent = ivChat;  
  113.             tvChat.setSelected(true);  
  114.             tvCurrent = tvChat;  
  115.             break;  
  116.         case R.id.llFriends:  
  117.             viewPager.setCurrentItem(1);  
  118.         case 1:  
  119.             ivFriends.setSelected(true);  
  120.             ivCurrent = ivFriends;  
  121.             tvFriends.setSelected(true);  
  122.             tvCurrent = tvFriends;  
  123.             break;  
  124.         case R.id.llContacts:  
  125.             viewPager.setCurrentItem(2);  
  126.         case 2:  
  127.             ivContacts.setSelected(true);  
  128.             ivCurrent = ivContacts;  
  129.             tvContacts.setSelected(true);  
  130.             tvCurrent = tvContacts;  
  131.             break;  
  132.         case R.id.llSettings:  
  133.             viewPager.setCurrentItem(3);  
  134.         case 3:  
  135.             ivSettings.setSelected(true);  
  136.             ivCurrent = ivSettings;  
  137.             tvSettings.setSelected(true);  
  138.             tvCurrent = tvSettings;  
  139.             break;  
  140.         default:  
  141.             break;  
  142.         }  
  143.     }  
  144.   
  145. }  

这种方法一的方式就是提前用mInflater.inflate4个View丢到PagerAdapter里面,再给ViewPager设置Adapter
然后把点击底部Tab的事件和滑动ViewPager的事件(主要包括图片和文字seletor切换)整合在一起.


方法二. ViewPager + List<Fragment> + FragmentPagerAdapter或FragmentStatePagerAdapter

这种方法就很常见了
activity_main.xml和上文一样.
我们看MainActivity.java
[java]  view plain  copy
  1. package com.yao.tab02;  
  2.   
  3. import java.util.ArrayList;  
  4. import java.util.List;  
  5.   
  6. import android.app.Activity;  
  7. import android.app.Fragment;  
  8. import android.os.Bundle;  
  9. import android.support.v4.view.ViewPager;  
  10. import android.support.v4.view.ViewPager.OnPageChangeListener;  
  11. import android.view.View;  
  12. import android.view.Window;  
  13. import android.view.View.OnClickListener;  
  14. import android.widget.ImageView;  
  15. import android.widget.LinearLayout;  
  16. import android.widget.TextView;  
  17.   
  18. public class MainActivity extends Activity implements OnClickListener {  
  19.   
  20.     private List<Fragment> fragments = new ArrayList<Fragment>();  
  21.     private ViewPager viewPager;  
  22.     private LinearLayout llChat, llFriends, llContacts, llSettings;  
  23.     private ImageView ivChat, ivFriends, ivContacts, ivSettings, ivCurrent;  
  24.     private TextView tvChat, tvFriends, tvContacts, tvSettings, tvCurrent;  
  25.   
  26.     @Override  
  27.     protected void onCreate(Bundle savedInstanceState) {  
  28.         super.onCreate(savedInstanceState);  
  29.         requestWindowFeature(Window.FEATURE_NO_TITLE);  
  30.         setContentView(R.layout.activity_main);  
  31.   
  32.         initView();  
  33.   
  34.         initData();  
  35.     }  
  36.   
  37.     private void initView() {  
  38.         viewPager = (ViewPager) findViewById(R.id.viewPager);  
  39.   
  40.         llChat = (LinearLayout) findViewById(R.id.llChat);  
  41.         llFriends = (LinearLayout) findViewById(R.id.llFriends);  
  42.         llContacts = (LinearLayout) findViewById(R.id.llContacts);  
  43.         llSettings = (LinearLayout) findViewById(R.id.llSettings);  
  44.   
  45.         llChat.setOnClickListener(this);  
  46.         llFriends.setOnClickListener(this);  
  47.         llContacts.setOnClickListener(this);  
  48.         llSettings.setOnClickListener(this);  
  49.   
  50.         ivChat = (ImageView) findViewById(R.id.ivChat);  
  51.         ivFriends = (ImageView) findViewById(R.id.ivFriends);  
  52.         ivContacts = (ImageView) findViewById(R.id.ivContacts);  
  53.         ivSettings = (ImageView) findViewById(R.id.ivSettings);  
  54.           
  55.         tvChat = (TextView) findViewById(R.id.tvChat);  
  56.         tvFriends = (TextView) findViewById(R.id.tvFriends);  
  57.         tvContacts = (TextView) findViewById(R.id.tvContacts);  
  58.         tvSettings = (TextView) findViewById(R.id.tvSettings);  
  59.   
  60.         ivChat.setSelected(true);  
  61.         tvChat.setSelected(true);  
  62.         ivCurrent = ivChat;  
  63.         tvCurrent = tvChat;  
  64.   
  65.         viewPager.setOnPageChangeListener(new OnPageChangeListener() {  
  66.   
  67.             @Override  
  68.             public void onPageSelected(int position) {  
  69.                 changeTab(position);  
  70.             }  
  71.   
  72.             @Override  
  73.             public void onPageScrolled(int arg0, float arg1, int arg2) {  
  74.   
  75.             }  
  76.   
  77.             @Override  
  78.             public void onPageScrollStateChanged(int arg0) {  
  79.   
  80.             }  
  81.         });  
  82.         viewPager.setOffscreenPageLimit(2); //设置向左和向右都缓存limit个页面  
  83.     }  
  84.   
  85.     private void initData() {  
  86.         Fragment chatFragment = new ChatFragment();  
  87.         Fragment friendsFragment = new FriendsFragment();  
  88.         Fragment contactsFragment = new ContactsFragment();  
  89.         Fragment settingsFragment = new SettingsFragment();  
  90.           
  91.         fragments.add(chatFragment);  
  92.         fragments.add(friendsFragment);  
  93.         fragments.add(contactsFragment);  
  94.         fragments.add(settingsFragment);  
  95.   
  96.         MyFragmentPagerAdapter adapter = new MyFragmentPagerAdapter(getFragmentManager(), fragments);  
  97. //      MyFragmentStatePagerAdapter adapter = new MyFragmentStatePagerAdapter(getFragmentManager(), fragments);  
  98.         viewPager.setAdapter(adapter);  
  99.     }  
  100.   
  101.     @Override  
  102.     public void onClick(View v) {  
  103.         changeTab(v.getId());  
  104.     }  
  105.   
  106.     private void changeTab(int id) {  
  107.         ivCurrent.setSelected(false);  
  108.         tvCurrent.setSelected(false);  
  109.         switch (id) {  
  110.         case R.id.llChat:  
  111.             viewPager.setCurrentItem(0);  
  112.         case 0:  
  113.             ivChat.setSelected(true);  
  114.             ivCurrent = ivChat;  
  115.             tvChat.setSelected(true);  
  116.             tvCurrent = tvChat;  
  117.             break;  
  118.         case R.id.llFriends:  
  119.             viewPager.setCurrentItem(1);  
  120.         case 1:  
  121.             ivFriends.setSelected(true);  
  122.             ivCurrent = ivFriends;  
  123.             tvFriends.setSelected(true);  
  124.             tvCurrent = tvFriends;  
  125.             break;  
  126.         case R.id.llContacts:  
  127.             viewPager.setCurrentItem(2);  
  128.         case 2:  
  129.             ivContacts.setSelected(true);  
  130.             ivCurrent = ivContacts;  
  131.             tvContacts.setSelected(true);  
  132.             tvCurrent = tvContacts;  
  133.             break;  
  134.         case R.id.llSettings:  
  135.             viewPager.setCurrentItem(3);  
  136.         case 3:  
  137.             ivSettings.setSelected(true);  
  138.             ivCurrent = ivSettings;  
  139.             tvSettings.setSelected(true);  
  140.             tvCurrent = tvSettings;  
  141.             break;  
  142.         default:  
  143.             break;  
  144.         }  
  145.     }  
  146.   
  147. }  


说明一:讲一下FragmentPagerAdapter 和 FragmentStatePagerAdapter 区别

1.FragmentStatePagerAdapter : 适合多个界面,类似于listView原理,离开视线就会被回收  会执行onDestroyView方法 onDestroy方法
2.FragmentPagerAdapter : 适合少量界面, 方便滑动  执行onDestroyView方法 不执行onDestroy方法
3.两者都会预先准备好并缓存上一个和下一个Fragment

说明二: 重要说明:有个神方法viewPager.setOffscreenPageLimit(2); //设置向左和向右都缓存limit个页面.
             我也是很晚才发现有这个方法.下面4个Tab, 只要你设置这个值为3, 那4个Tab永远都会缓存着了.
变态说明:这里告诉大家一个小技巧.ViewPager是V4包里面的.用到的FragmentPagerAdapter和FragmentStatePagerAdapter也是V4包里面的.
                 如果我们不想用android.support.v4.app.Fragment, 那就可以自己复制出来一个FragmentPagerAdapter,然后把里面的Fragment改成android.app.Fragment.
                 连带FragmentManager和FragmentTransaction也要改成android.app包下的



暂时越过方法三的方法四. FragmentTabHost

跳过方法三,先讲方法四.方法四是代码量最少的方法.简单快捷轻便
item_tab.xml   这个是下面部分4个Tab中其中一个Tab的布局, 以此来FragmentTabHost会帮忙批量生产出4个Tab
[html]  view plain  copy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="wrap_content"  
  5.     android:gravity="center"  
  6.     android:orientation="vertical"  
  7.     android:padding="5dp" >  
  8.   
  9.     <ImageView  
  10.         android:id="@+id/iv"  
  11.         android:layout_width="wrap_content"  
  12.         android:layout_height="wrap_content"  
  13.         android:background="#00000000"  
  14.         android:src="@drawable/tab_setting" />  
  15.   
  16.     <TextView  
  17.         android:id="@+id/tv"  
  18.         android:layout_width="wrap_content"  
  19.         android:layout_height="wrap_content"  
  20.         android:textColor="@drawable/tab_textview" />  
  21.   
  22. </LinearLayout>  


activity_main.xml
[java]  view plain  copy
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:orientation="vertical" >  
  6.   
  7.     <LinearLayout  
  8.         android:layout_width="match_parent"  
  9.         android:layout_height="45dp"  
  10.         android:background="#0E6DB0"  
  11.         android:gravity="center"  
  12.         android:orientation="vertical" >  
  13.   
  14.         <TextView  
  15.             android:layout_width="wrap_content"  
  16.             android:layout_height="wrap_content"  
  17.             android:layout_gravity="center"  
  18.             android:text="@string/app_name"  
  19.             android:textColor="#ffffff"  
  20.             android:textSize="20sp"  
  21.             android:textStyle="bold" />  
  22.     </LinearLayout>  
  23.       
  24.     <FrameLayout  
  25.         android:id="@+id/flContainer"  
  26.         android:layout_width="match_parent"  
  27.         android:layout_height="0dp"  
  28.         android:layout_weight="1" >  
  29.     </FrameLayout>  
  30.       
  31.     <com.yao.tab04.FragmentTabHost  
  32.         android:id="@+id/tabhost"  
  33.         android:layout_width="match_parent"  
  34.         android:layout_height="wrap_content"  
  35.         android:background="#0E6DB0" >  
  36.     </com.yao.tab04.FragmentTabHost>  
  37.   
  38. </LinearLayout>  

MainActivity.java
[java]  view plain  copy
  1. package com.yao.tab04;  
  2.   
  3. import android.app.Activity;  
  4. import android.os.Bundle;  
  5. import android.util.Log;  
  6. import android.view.LayoutInflater;  
  7. import android.view.View;  
  8. import android.view.Window;  
  9. import android.widget.ImageView;  
  10. import android.widget.TabHost.OnTabChangeListener;  
  11. import android.widget.TabHost.TabSpec;  
  12. import android.widget.TextView;  
  13.   
  14. public class MainActivity extends Activity implements OnTabChangeListener {  
  15.   
  16.     private FragmentTabHost tabHost;  
  17.     private String[] tabText = { "聊天", "朋友", "通讯录", "设置" };  
  18.     private int[] imageRes = new int[] { R.drawable.tab_chat, R.drawable.tab_friends, R.drawable.tab_contacts, R.drawable.tab_setting };  
  19.     private Class[] fragments = new Class[] { ChatFragment.class, FriendsFragment.class, ContactsFragment.class, SettingsFragment.class };  
  20.       
  21.     @Override  
  22.     protected void onCreate(Bundle savedInstanceState) {  
  23.         super.onCreate(savedInstanceState);  
  24.         requestWindowFeature(Window.FEATURE_NO_TITLE);  
  25.         setContentView(R.layout.activity_main);  
  26.           
  27.         tabHost = (FragmentTabHost) super.findViewById(R.id.tabhost);  
  28.         tabHost.setup(this, super.getFragmentManager(), R.id.flContainer);  
  29.         tabHost.getTabWidget().setDividerDrawable(null);  
  30.         tabHost.setOnTabChangedListener(this);  
  31.         initTab();  
  32.     }  
  33.   
  34.     private void initTab() {  
  35.         for (int i = 0; i < tabText.length; i++) {  
  36.               
  37.             View view = LayoutInflater.from(this).inflate(R.layout.item_tab, null);  
  38.             ((TextView) view.findViewById(R.id.tv)).setText(tabText[i]);  
  39.             ((ImageView) view.findViewById(R.id.iv)).setImageResource(imageRes[i]);  
  40.               
  41.             TabSpec tabSpec = tabHost.newTabSpec(tabText[i]).setIndicator(view);  
  42.             tabHost.addTab(tabSpec, fragments[i], null);  
  43.             tabHost.setTag(i);  
  44.         }  
  45.     }  
  46.   
  47.   
  48.     //自动把getCurrentTabView下的所有子View的selected状态设为true. 牛逼!  
  49.     @Override  
  50.     public void onTabChanged(String tabId) {  
  51.         //首次打开自动会调用一下  首次自动输出tabId : 聊天  
  52.         Log.e("yao", "tabId : " + tabId);   
  53. //      TabWidget tabWidget = tabHost.getTabWidget(); //获取整个底部Tab的布局, 可以通过tabWidget.getChildCount和tabWidget.getChildAt来获取某个子View  
  54. //      int pos = tabHost.getCurrentTab(); //获取当前tab的位置  
  55. //      View view = tabHost.getCurrentTabView(); //获取当前tab的view  
  56.     }  
  57.       
  58. }  


说明一:  重要说明:有些博主还需要写一个未选中的图片ResId数组和一个选中的图片ResId数组.然后根据点击自己在代码上写把图片切换成选中状态.Navie.
              你只要传进去一组seletor图片,把文字颜色也设为seletor.FragmentTabHost叼的地方来了.它会自动把图片这个布局View下的所有子控件切换成selected状态.
              所以我代码这些相关的逻辑没写,还是会变色.

说明二: 业务逻辑写在onTabChanged.  一般用到的几个核心方法 已经写在上面了
说明三: TabHost好像不能设置导航栏在底部. 所以只能用FragmentTabHost.
说明四: 切到别的页面,当前这个页面会执行到onDestroyView方法,不会执行onDestroy方法.



方法三. 用fragmentTransaction的show和hide方法隐藏和显示Fragment

网上这种代码已有,但是大多数写的很乱.
大致思路整理一下就是如下.
[java]  view plain  copy
  1. if (想要的fragment == null) {  
  2.     if (当前显示的fragment != null) {  
  3.         隐藏当前fragment  
  4.     }  
  5.     生产想要的fragment  
  6. } else if (想要的fragment == 当前显示的fragment) {  
  7. } else {  
  8.     隐藏当前fragment  
  9.     显示想要的fragment  
  10. }  
然后在中间插入该变化的资源selector代码

下面看代码.
activity_main.xml
[html]  view plain  copy
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:orientation="vertical" >  
  6.   
  7.     <LinearLayout  
  8.         android:layout_width="match_parent"  
  9.         android:layout_height="45dp"  
  10.         android:background="#0E6DB0"  
  11.         android:gravity="center"  
  12.         android:orientation="vertical" >  
  13.   
  14.         <TextView  
  15.             android:layout_width="wrap_content"  
  16.             android:layout_height="wrap_content"  
  17.             android:layout_gravity="center"  
  18.             android:text="@string/app_name"  
  19.             android:textColor="#ffffff"  
  20.             android:textSize="20sp"  
  21.             android:textStyle="bold" />  
  22.     </LinearLayout>  
  23.   
  24.     <FrameLayout  
  25.         android:id="@+id/flContainer"  
  26.         android:layout_width="match_parent"  
  27.         android:layout_height="0dp"  
  28.         android:layout_weight="1" >  
  29.     </FrameLayout>  
  30.   
  31.     <LinearLayout  
  32.         android:layout_width="match_parent"  
  33.         android:layout_height="55dp"  
  34.         android:background="#0E6DB0"  
  35.         android:orientation="horizontal" >  
  36.   
  37.         <LinearLayout  
  38.             android:id="@+id/llChat"  
  39.             android:layout_width="0dp"  
  40.             android:layout_height="match_parent"  
  41.             android:layout_weight="1"  
  42.             android:gravity="center"  
  43.             android:orientation="vertical" >  
  44.   
  45.             <ImageView  
  46.                 android:id="@+id/ivChat"  
  47.                 android:layout_width="wrap_content"  
  48.                 android:layout_height="wrap_content"  
  49.                 android:background="#00000000"  
  50.                 android:src="@drawable/tab_chat" />  
  51.   
  52.             <TextView  
  53.                 android:id="@+id/tvChat"  
  54.                 android:layout_width="wrap_content"  
  55.                 android:layout_height="wrap_content"  
  56.                 android:text="微信"  
  57.                 android:textColor="@drawable/tab_textview" />  
  58.         </LinearLayout>  
  59.   
  60.         <LinearLayout  
  61.             android:id="@+id/llFriends"  
  62.             android:layout_width="0dp"  
  63.             android:layout_height="match_parent"  
  64.             android:layout_weight="1"  
  65.             android:gravity="center"  
  66.             android:orientation="vertical" >  
  67.   
  68.             <ImageView  
  69.                 android:id="@+id/ivFriends"  
  70.                 android:layout_width="wrap_content"  
  71.                 android:layout_height="wrap_content"  
  72.                 android:background="#00000000"  
  73.                 android:src="@drawable/tab_friends" />  
  74.   
  75.             <TextView  
  76.                 android:id="@+id/tvFriends"  
  77.                 android:layout_width="wrap_content"  
  78.                 android:layout_height="wrap_content"  
  79.                 android:text="朋友"  
  80.                 android:textColor="@drawable/tab_textview" />  
  81.         </LinearLayout>  
  82.   
  83.         <LinearLayout  
  84.             android:id="@+id/llContacts"  
  85.             android:layout_width="0dp"  
  86.             android:layout_height="match_parent"  
  87.             android:layout_weight="1"  
  88.             android:gravity="center"  
  89.             android:orientation="vertical" >  
  90.   
  91.             <ImageView  
  92.                 android:id="@+id/ivContacts"  
  93.                 android:layout_width="wrap_content"  
  94.                 android:layout_height="wrap_content"  
  95.                 android:background="#00000000"  
  96.                 android:src="@drawable/tab_contacts" />  
  97.   
  98.             <TextView  
  99.                 android:id="@+id/tvContacts"  
  100.                 android:layout_width="wrap_content"  
  101.                 android:layout_height="wrap_content"  
  102.                 android:text="通讯录"  
  103.                 android:textColor="@drawable/tab_textview" />  
  104.         </LinearLayout>  
  105.   
  106.         <LinearLayout  
  107.             android:id="@+id/llSettings"  
  108.             android:layout_width="0dp"  
  109.             android:layout_height="match_parent"  
  110.             android:layout_weight="1"  
  111.             android:gravity="center"  
  112.             android:orientation="vertical" >  
  113.   
  114.             <ImageView  
  115.                 android:id="@+id/ivSettings"  
  116.                 android:layout_width="wrap_content"  
  117.                 android:layout_height="wrap_content"  
  118.                 android:background="#00000000"  
  119.                 android:src="@drawable/tab_setting" />  
  120.   
  121.             <TextView  
  122.                 android:id="@+id/tvSettings"  
  123.                 android:layout_width="wrap_content"  
  124.                 android:layout_height="wrap_content"  
  125.                 android:text="设置"  
  126.                 android:textColor="@drawable/tab_textview" />  
  127.         </LinearLayout>  
  128.     </LinearLayout>  
  129.   
  130. </LinearLayout>  

本人核心封装
FragmentSwitchTool.java
[java]  view plain  copy
  1. /** 
  2.  * FileName:FragmentSwitchTool.java 
  3.  * Copyright YaoDiWei All Rights Reserved. 
  4.  */  
  5. package com.yao.tab03;  
  6.   
  7. import java.util.ArrayList;  
  8. import java.util.List;  
  9.   
  10. import android.app.Fragment;  
  11. import android.app.FragmentManager;  
  12. import android.app.FragmentTransaction;  
  13. import android.os.Bundle;  
  14. import android.view.View;  
  15. import android.view.View.OnClickListener;  
  16.   
  17. /** 
  18.  * @author YaoDiWei 
  19.  * @version 
  20.  */  
  21. public class FragmentSwitchTool implements OnClickListener {  
  22.   
  23.     private FragmentManager fragmentManager;  
  24.     private Fragment currentFragment;  
  25. //  private View currentClickableView;  
  26.     private View[] currentSelectedView;  
  27.     private View[] clickableViews; //传入用于被点击的view,比如是一个LinearLayout  
  28.     private List<View[]> selectedViews; //传入用于被更改资源selected状态的view[], 比如一组View[]{TextView, ImageView}   
  29.     private Class<? extends Fragment>[] fragments;  
  30.     private Bundle[] bundles;  
  31.     private int containerId;  
  32.     private boolean showAnimator;  
  33.   
  34.     public FragmentSwitchTool(FragmentManager fragmentManager, int containerId) {  
  35.         super();  
  36.         this.fragmentManager = fragmentManager;  
  37.         this.containerId = containerId;  
  38.     }  
  39.   
  40.     public void setClickableViews(View... clickableViews) {  
  41.         this.clickableViews = clickableViews;  
  42.         for (View view : clickableViews) {  
  43.             view.setOnClickListener(this);  
  44.         }  
  45.     }  
  46.       
  47.     public void setSelectedViews(List<View[]> selectedViews) {  
  48.         this.selectedViews = selectedViews;  
  49.     }  
  50.       
  51.     public FragmentSwitchTool addSelectedViews(View... views){  
  52.         if (selectedViews == null) {  
  53.             selectedViews = new ArrayList<View[]>();  
  54.         }  
  55.         selectedViews.add(views);  
  56.         return this;  
  57.     }  
  58.   
  59.     public void setFragments(Class<? extends Fragment>... fragments) {  
  60.         this.fragments = fragments;  
  61.     }  
  62.   
  63.     public void setBundles(Bundle... bundles) {  
  64.         this.bundles = bundles;  
  65.     }  
  66.   
  67.     public void changeTag(View v) {  
  68.         FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();  
  69.         Fragment fragment = fragmentManager.findFragmentByTag(String.valueOf(v.getId()));  
  70.         for (int i = 0; i < clickableViews.length; i++) {  
  71.             if (v.getId() == clickableViews[i].getId()) {  
  72.                   
  73.                 //过渡动画  
  74.                 if (showAnimator) {  
  75.                     int exitIndex = selectedViews.indexOf(currentSelectedView);  
  76. //                  Log.e("yao", "enter : " + i + "   exit: " + exitIndex);  
  77.                     if (i > exitIndex){  
  78.                         fragmentTransaction.setCustomAnimations(R.anim.slide_right_in, R.anim.slide_left_out);  
  79.                     } else if (i < exitIndex) {  
  80.                         fragmentTransaction.setCustomAnimations(R.anim.slide_left_in, R.anim.slide_right_out);  
  81.                     }  
  82.                 }  
  83.                 //过渡动画  
  84.                   
  85.                 if (fragment == null) {  
  86.                     if (currentFragment != null) {  
  87.                         fragmentTransaction.hide(currentFragment);  
  88.                         for (View view : currentSelectedView) {  
  89.                             view.setSelected(false);  
  90.                         }  
  91.                     }  
  92.                     try {  
  93.                         fragment = fragments[i].newInstance();  
  94.   
  95.                         if (bundles != null && bundles[i] != null) {  
  96.                             fragment.setArguments(bundles[i]);  
  97.                         }  
  98.   
  99.                     } catch (InstantiationException e) {  
  100.                         e.printStackTrace();  
  101.                     } catch (IllegalAccessException e) {  
  102.                         e.printStackTrace();  
  103.                     }  
  104.                     fragmentTransaction.add(containerId, fragment, String.valueOf(clickableViews[i].getId()));  
  105.                 } else if (fragment == currentFragment) {  
  106.                 } else {  
  107.                     fragmentTransaction.hide(currentFragment);  
  108.                     for (View view : currentSelectedView) {  
  109.                         view.setSelected(false);  
  110.                     }  
  111.                     fragmentTransaction.show(fragment);  
  112.                 }  
  113.                   
  114.                 fragmentTransaction.commit();  
  115.                 currentFragment = fragment;  
  116.                 for (View view : selectedViews.get(i)) {  
  117.                     view.setSelected(true);  
  118.                 }  
  119.                 currentSelectedView = selectedViews.get(i);  
  120.                 break;  
  121.             }  
  122.         }  
  123.     }  
  124.       
  125.     @Override  
  126.     public void onClick(View v)  
  127.     {  
  128.        changeTag(v);  
  129.     }  
  130. }  

MainActivity.java
[java]  view plain  copy
  1. package com.yao.tab03;  
  2.   
  3. import android.app.Activity;  
  4. import android.os.Bundle;  
  5. import android.view.View;  
  6. import android.view.Window;  
  7. import android.widget.ImageView;  
  8. import android.widget.LinearLayout;  
  9. import android.widget.TextView;  
  10.   
  11. public class MainActivity extends Activity{  
  12.   
  13.     private LinearLayout llChat, llFriends, llContacts, llSettings;  
  14.     private ImageView ivChat, ivFriends, ivContacts, ivSettings;  
  15.     private TextView tvChat, tvFriends, tvContacts, tvSettings;  
  16.     private FragmentSwitchTool tool;  
  17.   
  18.     @Override  
  19.     protected void onCreate(Bundle savedInstanceState) {  
  20.         super.onCreate(savedInstanceState);  
  21.         requestWindowFeature(Window.FEATURE_NO_TITLE);  
  22.         setContentView(R.layout.activity_main);  
  23.   
  24.         initView();  
  25.         tool = new FragmentSwitchTool(getFragmentManager(), R.id.flContainer);  
  26.         tool.setClickableViews(llChat, llFriends, llContacts, llSettings);  
  27.         tool.addSelectedViews(new View[]{ivChat, tvChat}).addSelectedViews(new View[]{ivFriends, tvFriends})  
  28.             .addSelectedViews(new View[]{ivContacts, tvContacts}).addSelectedViews(new View[]{ivSettings, tvSettings});  
  29.         tool.setFragments(ChatFragment.class, FriendsFragment.class, ContactsFragment.class, SettingsFragment.class);  
  30.           
  31.         tool.changeTag(llChat);  
  32.     }  
  33.   
  34.     private void initView() {  
  35.         llChat = (LinearLayout) findViewById(R.id.llChat);  
  36.         llFriends = (LinearLayout) findViewById(R.id.llFriends);  
  37.         llContacts = (LinearLayout) findViewById(R.id.llContacts);  
  38.         llSettings = (LinearLayout) findViewById(R.id.llSettings);  
  39.   
  40.         ivChat = (ImageView) findViewById(R.id.ivChat);  
  41.         ivFriends = (ImageView) findViewById(R.id.ivFriends);  
  42.         ivContacts = (ImageView) findViewById(R.id.ivContacts);  
  43.         ivSettings = (ImageView) findViewById(R.id.ivSettings);  
  44.           
  45.         tvChat = (TextView) findViewById(R.id.tvChat);  
  46.         tvFriends = (TextView) findViewById(R.id.tvFriends);  
  47.         tvContacts = (TextView) findViewById(R.id.tvContacts);  
  48.         tvSettings = (TextView) findViewById(R.id.tvSettings);  
  49.     }  
  50.   
  51.   
  52. }  
说明一:  重要说明:FragmentSwitchTool把所有的操作都封装好在里面了.所以以后只需要写一个布局文件(注意要写成seletor的形式). 
              在MainActivity中写几行给FragmentSwitchTool的传参就行.
说明二:  过渡动画有点糙,随便写的,可以删掉.


方法五.

Bottom Navigation是5.0(API level 21）新出的一种符合MD规范的导航栏规范。
注意这里说的是规范，所以当时并没有实现这个BottomNavigation这里有两篇文章可以看看。
原文: https://material.google.com/components/bottom-navigation.html
译文:https://modao.cc/posts/3068
但是谷歌并没有实现这个控件，所以目前民间有3个比较火的开源库，GitHub - aurelhubert/ahbottomnavigation，GitHub - roughike/BottomBar， Ashok-Varma/BottomNavigation。这3个库都很炫酷，动画很丰富。比如我有个小项目就用到了ahbottomnavigation。


然后在Android Support Library 25 后，Android 终于自己增加了一个控件 android.support.design.widget.BottomNavigationView。用法很简单，你甚至不用去看文档。直接在Android studio 里新建一个 BottomNavigation 的模板 Activity 就行。
然而官方这个相比网上那三个开源库，动画就相对朴素了。







总结: 
方法一:创建就会一次性加载完四个页面.适合简单的页面,比如app一开始的导航页.
方法二:给力的方法.适合能左右滑动的页面.可以自己定制缓存策略.配合神方法,也能一开始就加载全部页面.
方法三:最大的好处是, 用的才加载. 一旦加载就不删除. 切换只用hide和show,速度飞快. 当然你也可以自己定制适合自己的缓存策略.
方法四:简单快捷.代码少.但是切换速度理论不够方法三快.
方法五:符合MD设计的,希望自己的APP炫酷一点的.毫无疑问都应该用BottomNavigation规范的控件。
下载地址:
http://download.csdn.net/detail/alcoholdi/9565976


very_on
关注
  • 0
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Android Studio 底部自定义菜单
01-23
Android Studio 底部自定义菜单，菜单上有消息数提醒，很实用
Android BottomNavigationBar 实现底部导航栏的快捷方式
weixin_41956752的博客
07-20 306
Bottom navigation，为顶级视图（top-level views）提供快速导航，可以快速的访问和刷新顶级视图 本文提供很完善 底部导航 Frament 一步到位 首先就是添加依赖 //底部导航栏 compile 'com.ashokvarma.android:bottom-navigation-bar:2.0.4' 布局 &lt;?xml version="1.0" ...
android中实现底部导航栏
qq_56819189的博客
02-18 838
底部导航栏在app应用中是十分常见了，大部分的安卓应用中也都实现了底部导航栏的功能，这里我就以我以前做的一个简单小说阅读软件为例，为大家演示一下底部导航栏的使用，需要的朋友直接复制代码过去改写就行了。
Android---底部弹窗之BottomSheetDialog
qq_44950283的博客
09-16 4192
通过BottomSheetDialog简单实现底部弹窗。比如，经常用到的更换头像操作。
Android关于BottomNavigationView使用指南
gqg_guan的博客
08-30 2288
BottomNavigationView
android Material Design 底部导航栏
iszengmh的博客
02-08 2443
android Material Design 底部导航栏实现效果配置gradle依赖compile 'com.android.support:appcompat-v7:25.1.0' //注意：V4包一定要加，material design是依赖V4包的 //不加，某些类可能报“ClassNotFoundException” compile 'com.android.support:support
Android实现底部导航栏方法（Navigation篇）
weixin_47311938的博客
04-11 5728
底部导航栏一直是大部分App不可缺失的一部分最近注意到Jetpack中的Navigation支持Fragment的切换操作特此浅研究一下到此，Nav自定义导航栏已经实现，基本使用的模块来源日常使用经验。至于底部导航栏，网上大部分人都推荐使用 BottomNavigationView 配合使用好用，但自定义样式比较难，然后就只能翻BottomNavigationView的源码，看它是怎么实现切换页面而不销毁fragment。
Android快速实现底部导航栏
qq_42579571的博客
07-30 343
效果图： 使用步骤： 1.倒依赖： implementation 'com.hjm:BottomTabBar:1.1.1' 2.在需要得xml布局中写一哈该控件 &lt;com.hjm.bottomtabbar.BottomTabBar android:id="@+id/bottom" android:layout_width="matc...
Android用BottomNavigationBar实现底部导航栏
热门推荐
lkjfyy的博客
12-28 1万+
之前底部导航栏的基本上都是自己通过selector来实现的，今天换上了Google推出的BottomNavigationBar，感觉效果还不错，写了一个项目上要用到的功能的demo，先上一张效果图，大家感受一下： 这里主要介绍BottomNavigationBar的使用，首先要在build.gradle中添加依赖： //底部导航栏样式BottomNavigationBar co
Android 基础 底部导航栏实现方式一(FragmentTabHost+FrameLayout)
wolfking0608的博客
10-22 436
技术做久了很多,小玩意,不百度,就感觉不能很快写出来.临时记录下,帮助需要的朋友,快速实现CV(Ctrl+C,Ctrl+V)大法 ,超快速集成 xml 文件: &lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/andro...
android : 底部导航栏的实现（使用ViewPager和BottomNavigationView）
weixin_63987141的博客
03-23 6254
注意：BottomNavigationView需要一个app:menu菜单文件（下面会作讲解）本案例中需要用的控件ViewPager和BottomNavigationView。那么我么如何设置两个控件联动（仅需要两个方法即可）创建完成后会生成Fragment的java文件和对应的XML文件。Fragment文件不需要修改，后期只需要传入两个参数即可。接下来创建空白的Fragment，不用做任何修改。创建5个即可，创建方法相同，以下只示例一个。接下来是Viewpager的适配器。
android 全屏去掉底部虚拟导航栏的方法
01-04
如下所示： @Override public void onWindowFocusChanged(boolean hasFocus) { super.onWindowFocusChanged(hasFocus); if (hasFocus) { getWindow().getDecorView().setSystemUiVisibility( View.SYSTEM_UI_FLAG_...
Android底部导航栏的三种风格实现
08-19
主要介绍了Android底部导航栏的三种风格实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Android实现美团外卖底部导航栏动画
01-04
体验了一下美团外卖的底部导航栏，感觉动画很流畅，分割线被顶起，还有图标的动画，可能用的lottie，觉得分割线被顶起可以自己写动画，所以试着写了一下 。 想自定义view点击实现动画效果，自定义view的区域一定比...
Android实现底部导航栏
07-02
1.使用RelativeLayout+TextView底部导航栏样式。 2.右上角带有消息提示个数。 3.使用Fragment实现导航效果。 相应的博客地址为：https://blog.csdn.net/lpCrazyBoy/article/details/80886487
Android三种实现底部导航栏样式
06-18
Android三种实现底部导航栏样式，BottomTabbar样式，viewpager+fragement实现底部导航栏，RadioGroup实现导航栏其中一个可以直接跳转到其他页面
AX3_Mercadopago-0.3.7-py3-none-any.whl.zip
04-15
AX3_Mercadopago-0.3.7-py3-none-any.whl.zip
Acquisition-4.11-cp310-cp310-manylinux_2_5_x86_64.whl.zip
04-15
Acquisition-4.11-cp310-cp310-manylinux_2_5_x86_64.whl.zip
AX3_model_extras-1.4.0-py3-none-any.whl.zip
最新发布
04-15
AX3_model_extras-1.4.0-py3-none-any.whl.zip
android底部导航栏实现
06-03
实现 Android 底部导航栏可以使用以下步骤： 1. 在布局文件中添加 BottomNavigationView 控件。 2. 在 Java 文件中获取 BottomNavigationView 的实例，并设置导航栏的选项。 3. 创建多个 Fragment 来作为导航栏的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值