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

设置小红点和数字方法：

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

方法一. ViewPager + List + PagerAdapter

先看activity_main.xml

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:orientation="vertical" >

     <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="45dp"
         android:background="#0E6DB0"
         android:gravity="center"
         android:orientation="vertical" >

         <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_gravity="center"
             android:text="@string/app_name"
             android:textColor="#ffffff"
             android:textSize="20sp"
             android:textStyle="bold" />
     LinearLayout>

     <android.support.v4.view.ViewPager
         android:id="@+id/viewPager"
         android:layout_width="match_parent"
         android:layout_height="0dp"
         android:layout_weight="1" >
     android.support.v4.view.ViewPager>

     <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="55dp"
         android:background="#0E6DB0"
         android:orientation="horizontal" >

         <LinearLayout
             android:id="@+id/llChat"
             android:layout_width="0dp"
             android:layout_height="match_parent"
             android:layout_weight="1"
             android:gravity="center"
             android:orientation="vertical" >

             <ImageView
                 android:id="@+id/ivChat"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:background="#00000000"
                 android:src="@drawable/tab_chat" />

             <TextView
                 android:id="@+id/tvChat"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:text="微信"
                 android:textColor="@drawable/tab_textview" />
         LinearLayout>

         <LinearLayout
             android:id="@+id/llFriends"
             android:layout_width="0dp"
             android:layout_height="match_parent"
             android:layout_weight="1"
             android:gravity="center"
             android:orientation="vertical" >

             <ImageView
                 android:id="@+id/ivFriends"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:background="#00000000"
                 android:src="@drawable/tab_friends" />

             <TextView
                 android:id="@+id/tvFriends"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:text="朋友"
                 android:textColor="@drawable/tab_textview" />
         LinearLayout>

         <LinearLayout
             android:id="@+id/llContacts"
             android:layout_width="0dp"
             android:layout_height="match_parent"
             android:layout_weight="1"
             android:gravity="center"
             android:orientation="vertical" >

             <ImageView
                 android:id="@+id/ivContacts"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:background="#00000000"
                 android:src="@drawable/tab_contacts" />

             <TextView
                 android:id="@+id/tvContacts"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:text="通讯录"
                 android:textColor="@drawable/tab_textview" />
         LinearLayout>

         <LinearLayout
             android:id="@+id/llSettings"
             android:layout_width="0dp"
             android:layout_height="match_parent"
             android:layout_weight="1"
             android:gravity="center"
             android:orientation="vertical" >

             <ImageView
                 android:id="@+id/ivSettings"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:background="#00000000"
                 android:src="@drawable/tab_setting" />

             <TextView
                 android:id="@+id/tvSettings"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:text="设置"
                 android:textColor="@drawable/tab_textview" />
         LinearLayout>
     LinearLayout>

 LinearLayout>

说明一:还有另一种方式是用RadioGroup的方式,但是那种方式如果以后要包含小红点提醒或者右上角数字角标提醒,就不好灵活的修改了.所以本文忽略那种方法.

说明二:底部导航栏的4个ImageView使用的src, TextView使用的textColor都是seletor

然后看MainActivity.java

 package com.yao.tab01;

 import java.util.ArrayList;
 import java.util.List;

 import android.app.Activity;
 import android.os.Bundle;
 import android.support.v4.view.ViewPager;
 import android.support.v4.view.ViewPager.OnPageChangeListener;
 import android.view.LayoutInflater;
 import android.view.View;
 import android.view.View.OnClickListener;
 import android.view.Window;
 import android.widget.ImageView;
 import android.widget.LinearLayout;
 import android.widget.TextView;

 public class MainActivity extends Activity implements OnClickListener {

     private List views = new ArrayList();
     private ViewPager viewPager;
     private LinearLayout llChat, llFriends, llContacts, llSettings;
     private ImageView ivChat, ivFriends, ivContacts, ivSettings, ivCurrent;
     private TextView tvChat, tvFriends, tvContacts, tvSettings, tvCurrent;

     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         requestWindowFeature(Window.FEATURE_NO_TITLE);
         setContentView(R.layout.activity_main);

         initView();

         initData();
     }

     private void initView() {
         viewPager = (ViewPager) findViewById(R.id.viewPager);

         llChat = (LinearLayout) findViewById(R.id.llChat);
         llFriends = (LinearLayout) findViewById(R.id.llFriends);
         llContacts = (LinearLayout) findViewById(R.id.llContacts);
         llSettings = (LinearLayout) findViewById(R.id.llSettings);

         llChat.setOnClickListener(this);
         llFriends.setOnClickListener(this);
         llContacts.setOnClickListener(this);
         llSettings.setOnClickListener(this);

         ivChat = (ImageView) findViewById(R.id.ivChat);
         ivFriends = (ImageView) findViewById(R.id.ivFriends);
         ivContacts = (ImageView) findViewById(R.id.ivContacts);
         ivSettings = (ImageView) findViewById(R.id.ivSettings);

         tvChat = (TextView) findViewById(R.id.tvChat);
         tvFriends = (TextView) findViewById(R.id.tvFriends);
         tvContacts = (TextView) findViewById(R.id.tvContacts);
         tvSettings = (TextView) findViewById(R.id.tvSettings);

         ivChat.setSelected(true);                //用setlect可以控制控件的被选中状态，使用selector可以控制被选中的颜色和图片变化
         tvChat.setSelected(true); //selector的用法见http://blog.csdn.net/yancychas/article/details/77322671
         ivCurrent = ivChat;
         tvCurrent = tvChat;

         viewPager.addOnPageChangeListener(new OnPageChangeListener() {

             @Override
             public void onPageSelected(int position) {
                 changeTab(position);
             }

             @Override
             public void onPageScrolled(int arg0, float arg1, int arg2) {

             }

             @Override
             public void onPageScrollStateChanged(int arg0) {

             }
         });
     }

     private void initData() {
         LayoutInflater mInflater = LayoutInflater.from(this);
         View tab01 = mInflater.inflate(R.layout.tab01, null);
         View tab02 = mInflater.inflate(R.layout.tab02, null);
         View tab03 = mInflater.inflate(R.layout.tab03, null);
         View tab04 = mInflater.inflate(R.layout.tab04, null);
         views.add(tab01);
         views.add(tab02);
         views.add(tab03);
         views.add(tab04);

         MyPagerAdapter adapter = new MyPagerAdapter(views);
         viewPager.setAdapter(adapter);
     }

     @Override
     public void onClick(View v) {
         changeTab(v.getId());
     }

     private void changeTab(int id) {
         ivCurrent.setSelected(false);
         tvCurrent.setSelected(false);
         switch (id) {
         case R.id.llChat:
             viewPager.setCurrentItem(0);
         case 0:
             ivChat.setSelected(true);
             ivCurrent = ivChat;
             tvChat.setSelected(true);
             tvCurrent = tvChat;
             break;
         case R.id.llFriends:
             viewPager.setCurrentItem(1);
         case 1:
             ivFriends.setSelected(true);
             ivCurrent = ivFriends;
             tvFriends.setSelected(true);
             tvCurrent = tvFriends;
             break;
         case R.id.llContacts:
             viewPager.setCurrentItem(2);
         case 2:
             ivContacts.setSelected(true);
             ivCurrent = ivContacts;
             tvContacts.setSelected(true);
             tvCurrent = tvContacts;
             break;
         case R.id.llSettings:
             viewPager.setCurrentItem(3);
         case 3:
             ivSettings.setSelected(true);
             ivCurrent = ivSettings;
             tvSettings.setSelected(true);
             tvCurrent = tvSettings;
             break;
         default:
             break;
         }
     }

 }

自定义适配器 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 ListviewList;  
    private List titleList;  

        //实现构造方法
    public MyPagerAdapter(List viewList,List 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文件中的里添加子标签 才起作用
     */
    @Override
    public CharSequence getPageTitle(int position) {  //返回当前view对应的标题
        return titleList.get(position);
    }

}

这种方法一的方式就是提前用mInflater.inflate4个View丢到PagerAdapter里面,再给ViewPager设置Adapter

然后把点击底部Tab的事件和滑动ViewPager的事件(主要包括图片和文字seletor切换)整合在一起.

方法二. ViewPager + List + FragmentPagerAdapter或FragmentStatePagerAdapter

这种方法就很常见了

activity_main.xml和上文一样.

我们看MainActivity.java

 package com.yao.tab02;

 import java.util.ArrayList;
 import java.util.List;

 import android.app.Activity;
 import android.app.Fragment;
 import android.os.Bundle;
 import android.support.v4.view.ViewPager;
 import android.support.v4.view.ViewPager.OnPageChangeListener;
 import android.view.View;
 import android.view.Window;
 import android.view.View.OnClickListener;
 import android.widget.ImageView;
 import android.widget.LinearLayout;
 import android.widget.TextView;

 public class MainActivity extends Activity implements OnClickListener {

     private List fragments = new ArrayList();
     private ViewPager viewPager;
     private LinearLayout llChat, llFriends, llContacts, llSettings;
     private ImageView ivChat, ivFriends, ivContacts, ivSettings, ivCurrent;
     private TextView tvChat, tvFriends, tvContacts, tvSettings, tvCurrent;

     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         requestWindowFeature(Window.FEATURE_NO_TITLE);
         setContentView(R.layout.activity_main);

         initView();

         initData();
     }

     private void initView() {
         viewPager = (ViewPager) findViewById(R.id.viewPager);

         llChat = (LinearLayout) findViewById(R.id.llChat);
         llFriends = (LinearLayout) findViewById(R.id.llFriends);
         llContacts = (LinearLayout) findViewById(R.id.llContacts);
         llSettings = (LinearLayout) findViewById(R.id.llSettings);

         llChat.addOnClickListener(this);
         llFriends.setOnClickListener(this);
         llContacts.setOnClickListener(this);
         llSettings.setOnClickListener(this);

         ivChat = (ImageView) findViewById(R.id.ivChat);
         ivFriends = (ImageView) findViewById(R.id.ivFriends);
         ivContacts = (ImageView) findViewById(R.id.ivContacts);
         ivSettings = (ImageView) findViewById(R.id.ivSettings);

         tvChat = (TextView) findViewById(R.id.tvChat);
         tvFriends = (TextView) findViewById(R.id.tvFriends);
         tvContacts = (TextView) findViewById(R.id.tvContacts);
         tvSettings = (TextView) findViewById(R.id.tvSettings);

         ivChat.setSelected(true);
         tvChat.setSelected(true);
         ivCurrent = ivChat;
         tvCurrent = tvChat;

         viewPager.setOnPageChangeListener(new OnPageChangeListener() {

             @Override
             public void onPageSelected(int position) {
                 changeTab(position);
             }

             @Override
             public void onPageScrolled(int arg0, float arg1, int arg2) {

             }

             @Override
             public void onPageScrollStateChanged(int arg0) {

             }
         });
         viewPager.setOffscreenPageLimit(2); //设置向左和向右都缓存limit个页面
     }

     private void initData() {
         Fragment chatFragment = new ChatFragment();
         Fragment friendsFragment = new FriendsFragment();
         Fragment contactsFragment = new ContactsFragment();
         Fragment settingsFragment = new SettingsFragment();

         fragments.add(chatFragment);
         fragments.add(friendsFragment);
         fragments.add(contactsFragment);
         fragments.add(settingsFragment);

         MyFragmentPagerAdapter adapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), fragments);
 //      MyFragmentStatePagerAdapter adapter = new MyFragmentStatePagerAdapter(getFragmentManager(), fragments);
         viewPager.setAdapter(adapter);
     }

     @Override
     public void onClick(View v) {
         changeTab(v.getId());
     }

     private void changeTab(int id) {
         ivCurrent.setSelected(false);
         tvCurrent.setSelected(false);
         switch (id) {
         case R.id.llChat:
             viewPager.setCurrentItem(0);
         case 0:
             ivChat.setSelected(true);
             ivCurrent = ivChat;
             tvChat.setSelected(true);
             tvCurrent = tvChat;
             break;
         case R.id.llFriends:
             viewPager.setCurrentItem(1);
         case 1:
             ivFriends.setSelected(true);
             ivCurrent = ivFriends;
             tvFriends.setSelected(true);
             tvCurrent = tvFriends;
             break;
         case R.id.llContacts:
             viewPager.setCurrentItem(2);
         case 2:
             ivContacts.setSelected(true);
             ivCurrent = ivContacts;
             tvContacts.setSelected(true);
             tvCurrent = tvContacts;
             break;
         case R.id.llSettings:
             viewPager.setCurrentItem(3);
         case 3:
             ivSettings.setSelected(true);
             ivCurrent = ivSettings;
             tvSettings.setSelected(true);
             tvCurrent = tvSettings;
             break;
         default:
             break;
         }
     }

 }

适配器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能禁止滑动动画

import android.content.Context;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.MotionEvent;

public class NoScrollViewPager extends ViewPager {
    private boolean noScroll = false;
    public NoScrollViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
    public NoScrollViewPager(Context context) {
        super(context);
    }
    public void setNoScroll(boolean noScroll) {
        this.noScroll = noScroll;
    }
    @Override
    public void scrollTo(int x, int y) {
        super.scrollTo(x, y);
    }
    /**
     * 在onTouchEvent和onInterceptTouchEvent中返回false禁止滑动动作
     */
    @Override
    public boolean onTouchEvent(MotionEvent arg0) {
        return false;
    }
    @Override
    public boolean onInterceptTouchEvent(MotionEvent arg0) {
        return false;
    }
    /**
     * 在一个参数的setCurrentItem中引用两个参数的setCurrentItem，
     * 并设置第二个参数为false能禁止滑动动画
     * @param item
     */
    @Override
    public void setCurrentItem(int item) {
        super.setCurrentItem(item,false);
    }
    @Override
    public void setCurrentItem(int item, boolean smoothScroll) {
        super.setCurrentItem(item, smoothScroll);
    }
}

在layout文件中如下代码即可使用（与viewpaper用法相同）

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