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

设置小红点和数字方法：

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

方法一. ViewPager + List<View> + PagerAdapter

先看activity_main.xml[html] viewplain copy<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" ><LinearLayoutandroid:layout_width="match_parent"android:layout_height="45dp"android:background="#0E6DB0"android:gravity="center"android:orientation="vertical" ><TextViewandroid: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.ViewPagerandroid:id="@+id/viewPager"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1" ></android.support.v4.view.ViewPager><LinearLayoutandroid:layout_width="match_parent"android:layout_height="55dp"android:background="#0E6DB0"android:orientation="horizontal" ><LinearLayoutandroid:id="@+id/llChat"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"android:orientation="vertical" ><ImageViewandroid:id="@+id/ivChat"android:layout_width="wrap_content"android:layout_height="wrap_content"android:background="#00000000"android:src="@drawable/tab_chat" /><TextViewandroid:id="@+id/tvChat"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="微信"android:textColor="@drawable/tab_textview" /></LinearLayout><LinearLayoutandroid:id="@+id/llFriends"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"android:orientation="vertical" ><ImageViewandroid:id="@+id/ivFriends"android:layout_width="wrap_content"android:layout_height="wrap_content"android:background="#00000000"android:src="@drawable/tab_friends" /><TextViewandroid:id="@+id/tvFriends"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="朋友"android:textColor="@drawable/tab_textview" /></LinearLayout><LinearLayoutandroid:id="@+id/llContacts"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"android:orientation="vertical" ><ImageViewandroid:id="@+id/ivContacts"android:layout_width="wrap_content"android:layout_height="wrap_content"android:background="#00000000"android:src="@drawable/tab_contacts" /><TextViewandroid:id="@+id/tvContacts"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="通讯录"android:textColor="@drawable/tab_textview" /></LinearLayout><LinearLayoutandroid:id="@+id/llSettings"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"android:orientation="vertical" ><ImageViewandroid:id="@+id/ivSettings"android:layout_width="wrap_content"android:layout_height="wrap_content"android:background="#00000000"android:src="@drawable/tab_setting" /><TextViewandroid: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[java] viewplain copypackage 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<View> views = new ArrayList<View>();private ViewPager viewPager;private LinearLayout llChat, llFriends, llContacts, llSettings;private ImageView ivChat, ivFriends, ivContacts, ivSettings, ivCurrent;private TextView tvChat, tvFriends, tvContacts, tvSettings, tvCurrent;@Overrideprotected 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/77322671ivCurrent = ivChat;tvCurrent = tvChat;viewPager.addOnPageChangeListener(new OnPageChangeListener() {@Overridepublic void onPageSelected(int position) {changeTab(position);}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}@Overridepublic 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);}@Overridepublic 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 List<View>viewList;private List<String> titleList;//实现构造方法public MyPagerAdapter(List<View> viewList,List<String> titleList){this.viewList=viewList;this.titleList=titleList;}/*ViewPager正常一次加载三个多余的摧毁*/@Overridepublic int getCount() {return viewList.size();  //返回当前页卡数量}@Overridepublic boolean isViewFromObject(View view, Object object) {   //View是否来自对象return view==object;}@Overridepublic Object instantiateItem(ViewGroup container, int position) {  //实例化一个页卡container.addView(viewList.get(position));  //position代表当前的位置（所定位的View）return viewList.get(position);}@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {  //销毁页卡container.removeView(viewList.get(position));}/*设置Viewpager页卡的标题在main_activity.xml文件中的<ViewPager/>里添加<android.support.v4.view.PagerTabStrip/>子标签 才起作用*/@Overridepublic 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] viewplain copypackage 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<Fragment> fragments = new ArrayList<Fragment>();private ViewPager viewPager;private LinearLayout llChat, llFriends, llContacts, llSettings;private ImageView ivChat, ivFriends, ivContacts, ivSettings, ivCurrent;private TextView tvChat, tvFriends, tvContacts, tvSettings, tvCurrent;@Overrideprotected 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() {@Overridepublic void onPageSelected(int position) {changeTab(position);}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}@Overridepublic 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);}@Overridepublic 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

importandroid.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@Overridepublic Fragment getItem(int position) {return fragmentList.get(position);}//计算Fragment的数量@Overridepublic 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;}@Overridepublic void scrollTo(int x, int y) {super.scrollTo(x, y);}/*** 在onTouchEvent和onInterceptTouchEvent中返回false禁止滑动动作*/@Overridepublic boolean onTouchEvent(MotionEvent arg0) {return false;}@Overridepublic boolean onInterceptTouchEvent(MotionEvent arg0) {return false;}/*** 在一个参数的setCurrentItem中引用两个参数的setCurrentItem，* 并设置第二个参数为false能禁止滑动动画* @param item*/@Overridepublic void setCurrentItem(int item) {super.setCurrentItem(item,false);}@Overridepublic void setCurrentItem(int item, boolean smoothScroll) {super.setCurrentItem(item, smoothScroll);}}

在layout文件中如下代码即可使用（与viewpaper用法相同）<com.example.studydemo.view.noscrollviewpagerandroid: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