底部导航栏:利用viewpager实现Android底部标题栏

设置小红点和数字方法:

http://blog.csdn.net/yancychas/article/details/77331177


方法一. 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);                //用setlect可以控制控件的被选中状态,使用selector可以控制被选中的颜色和图片变化
  61.         tvChat.setSelected(true); //selector的用法见http://blog.csdn.net/yancychas/article/details/77322671
  62.         ivCurrent = ivChat;  
  63.         tvCurrent = tvChat;  
  64.   
  65.         viewPager.addOnPageChangeListener(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. }  

自定义适配器 MyPagerAdapter.java
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import java.util.List;


public class MyPagerAdapter extends PagerAdapter{  //继承适配器

private List<View>viewList;  
    private List<String> titleList;  

        //实现构造方法
    public MyPagerAdapter(List<View> viewList,List<String> titleList){
this.viewList=viewList;
        this.titleList=titleList; 
    }

/*
ViewPager正常一次加载三个
多余的摧毁
 */

    @Override
    public int getCount() {
return viewList.size();  //返回当前页卡数量
    }

@Override
    public boolean isViewFromObject(View view, Object object) {   //View是否来自对象
        return view==object;   
    }


@Override
    public Object instantiateItem(ViewGroup container, int position) {  //实例化一个页卡
        container.addView(viewList.get(position));  //position代表当前的位置(所定位的View)
        return viewList.get(position);
    }

@Override
    public void destroyItem(ViewGroup container, int position, Object object) {  //销毁页卡
        container.removeView(viewList.get(position));
    }


/*
    设置Viewpager页卡的标题
    在main_activity.xml文件中的<ViewPager/>里添加<android.support.v4.view.PagerTabStrip/>子标签 才起作用
     */
    @Override
    public CharSequence getPageTitle(int position) {  //返回当前view对应的标题
        return titleList.get(position);
    }

}

这种方法一的方式就是提前用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.addOnClickListener(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(getSupportFragmentManager(), 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. }  

适配器MyFragmentPagerAdapter 
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import java.util.List;

public class MyFragmentPagerAdapter extends FragmentPagerAdapter {
    private List<Fragment> fragmentList;
    public MyFragmentPagerAdapter(FragmentManager fm, List<Fragment> fragments) {
        super(fm);
        this.fragmentList=fragments;
    }
    //得到返回的Fragment
    @Override
    public Fragment getItem(int position) {
        return fragmentList.get(position);
    }
    //计算Fragment的数量
    @Override
    public int getCount() {
        return fragmentList.size();
    }
}
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
getCount()返回的是ViewPager页面的数量,getItem()返回的是要显示的fragent对象。
--------------------------------------------------------------------------------------------------------------------------------------------------------------------
说明一:讲一下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包下的

如需改变选中图片和文字,用setlect可以控制控件的被选中状态,使用selector可以控制被选中的颜色和图片变化。用法见http://blog.csdn.net/yancychas/article/details/77322671


禁止viewpaper的滑动动作

1.新建NoScrollViewPager继承ViewPager,重写onTouchEvent和onInterceptTouchEvent,返回false即禁止滑动
2.在一个参数的setCurrentItem中引用两个参数的setCurrentItem,并设置第二个参数为false能禁止滑动动画

    
    
[java] view plain copy
  1. import android.content.Context;  
  2. import android.support.v4.view.ViewPager;  
  3. import android.util.AttributeSet;  
  4. import android.view.MotionEvent;  
  5.   
  6. public class NoScrollViewPager extends ViewPager {  
  7.     private boolean noScroll = false;  
  8.     public NoScrollViewPager(Context context, AttributeSet attrs) {  
  9.         super(context, attrs);  
  10.     }  
  11.     public NoScrollViewPager(Context context) {  
  12.         super(context);  
  13.     }  
  14.     public void setNoScroll(boolean noScroll) {  
  15.         this.noScroll = noScroll;  
  16.     }  
  17.     @Override  
  18.     public void scrollTo(int x, int y) {  
  19.         super.scrollTo(x, y);  
  20.     }  
  21.     /** 
  22.      * 在onTouchEvent和onInterceptTouchEvent中返回false禁止滑动动作 
  23.      */  
  24.     @Override  
  25.     public boolean onTouchEvent(MotionEvent arg0) {  
  26.         return false;  
  27.     }  
  28.     @Override  
  29.     public boolean onInterceptTouchEvent(MotionEvent arg0) {  
  30.         return false;  
  31.     }  
  32.     /** 
  33.      * 在一个参数的setCurrentItem中引用两个参数的setCurrentItem, 
  34.      * 并设置第二个参数为false能禁止滑动动画 
  35.      * @param item 
  36.      */  
  37.     @Override  
  38.     public void setCurrentItem(int item) {  
  39.         super.setCurrentItem(item,false);  
  40.     }  
  41.     @Override  
  42.     public void setCurrentItem(int item, boolean smoothScroll) {  
  43.         super.setCurrentItem(item, smoothScroll);  
  44.     }  
  45. }  

在layout文件中如下代码即可使用(与viewpaper用法相同)
<com.example.studydemo.view.noscrollviewpager 
android:id="@+id/pager" 
android:layout_height="0dp" 
android:layout_margintop="5dp" 
android:layout_weight="1" 
android:layout_width="fill_parent"/>


原文http://blog.csdn.net/alcoholdi/article/details/51594061#t1
https://yq.aliyun.com/articles/61268
http://www.2cto.com/kf/201411/348867.html

猜你喜欢

转载自blog.csdn.net/scdnzhoulu/article/details/78815855