zoukankan      html  css  js  c++  java

  • 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
  • 相关阅读:
    strpos与strstr之间的区别
    jquery 滚动效果插件
    自定义加密解密函数
    access变转换为mysql表工具
    CI学习总结
    表单验证
    解决国外模板h1、h2、h3...不显示中文文章标题的问题
    leetcode Largest Rectangle in Histogram
    leetcode Remove Duplicates from Sorted List
    leetcode[82] Remove Duplicates from Sorted List II
  • 原文地址：https://www.cnblogs.com/yelanggu/p/9516429.html
Copyright © 2011-2022 走看看