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
posted @ 2018-08-22 11:07  野狼谷  阅读(10450)  评论(1)  编辑  收藏  举报