碼上快樂

相關內容    簡體    繁體

Android (爭取做到)最全的底部導航欄實現方法 ZZ

本文轉載自   查看原文   2020-07-10 14:36   644    [016]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


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 Android (爭取做到)最全的底部導航欄實現方法 android底部導航欄實現 【Android】 Android studio 底部導航欄的基本實現(一) android底部導航欄小結 android 全屏去掉底部虛擬導航欄的方法 Android_ViewPager+Fragment實現頁面滑動和底部導航欄 TabLayout實現底部導航欄（2） Android 底部導航欄實現一 Fragment-replace vue 實現底部導航欄 mui 底部導航欄的實現
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM