项目演示效果如下：
一、项目布局如下
二、项目代码
package com.example.weichat5_2_1;import android.os.Bundle;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;{@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {// 加载相应的布局layoutreturn inflater.inflate(R.layout.tab01, container, false);}}package com.example.weichat5_2_1;import android.os.Bundle;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;{@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {// 加载相应的布局layoutreturn inflater.inflate(R.layout.tab03, container, false);}}package com.example.weichat5_2_1;import android.os.Bundle;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;{@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {// 加载相应的布局layoutreturn inflater.inflate(R.layout.tab02, container, false);}}package com.example.weichat5_2_1;import java.util.ArrayList;import java.util.List;import android.graphics.Color;import android.os.Bundle;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentActivity;import android.support.v4.app.FragmentPagerAdapter;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import android.util.DisplayMetrics;import android.util.Log;import android.view.Display;import android.view.ViewGroup.LayoutParams;import android.view.Window;import android.widget.ImageView;import android.widget.LinearLayout;import android.widget.TextView;import com.jauker.widget.BadgeView;{private ViewPager mViewPager;TextView mChatTextView;private TextView mFriendTextView;private TextView mContactTextView;private LinearLayout mChatLinearLayout;private BadgeView mBadgeView;private ImageView mTabline;mCurrentPageIndex;(Bundle savedInstanceState) {super.onCreate(savedInstanceState);requestWindowFeature(Window.FEATURE_NO_TITLE);setContentView(R.layout.activity_main);initTabLine();initView();}() {mTabline = (ImageView) findViewById(R.id.id_iv_tabline); // 导航栏底部的指示条// 获得手机屏幕的宽度Display display = getWindow().getWindowManager().getDefaultDisplay();DisplayMetrics outMetrics = new DisplayMetrics(); // outMetrics携带屏幕的宽度、高度等display.getMetrics(outMetrics);mScreen1_3 = outMetrics.widthPixels / 3;// 获得指示条的布局属性LayoutParams lp = mTabline.getLayoutParams();lp.width = mScreen1_3;mTabline.setLayoutParams(lp);}/*** 初始化方法，实现一系列findViewById** mDatas中数值的添加*/() {mViewPager = (ViewPager) findViewById(R.id.id_viewpager);mChatTextView = (TextView) findViewById(R.id.id_tv_chat);mFriendTextView = (TextView) findViewById(R.id.id_tv_friend);mContactTextView = (TextView) findViewById(R.id.id_tv_contact);mChatLinearLayout = (LinearLayout) findViewById(R.id.id_ll_chat);mDatas = new ArrayList<Fragment>();ChatMainTabFragment tab01 = new ChatMainTabFragment();FriendMainTabFragment tab02 = new FriendMainTabFragment();ContactMainTabFragment tab03 = new ContactMainTabFragment();// 将Fragment加入存放Fragment的listmDatas.add(tab01);mDatas.add(tab02);mDatas.add(tab03);/** 适配器的使用*/mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {() {return mDatas.size();}@Overridepublic Fragment getItem(int position) {return mDatas.get(position);}};// 为ViewPager设置适配器mViewPager.setAdapter(mAdapter);// 为ViewPager设置页面改变事件mViewPager.setOnPageChangeListener(new OnPageChangeListener() {/*** 当页面切换的时候改变顶部的字体颜色*/(int position) {// 当从第二个页面进入第一个页面的时候清除第一个页面的字体等resetTextView();switch (position) {(mBadgeView != null) { // 如果已经有了则清除mChatLinearLayout.removeView(mBadgeView);}mBadgeView = new BadgeView(MainActivity.this);mBadgeView.setBadgeCount(7); // 设置数字mChatLinearLayout.addView(mBadgeView);// 把mBadgeView加入到聊天的框中// 设置字体为绿色mChatTextView.setTextColor(Color.parseColor(“#008000”));break;case 1:// 进入第2个页面mFriendTextView.setTextColor(Color.parseColor(“#008000”));break;case 2:// 进入第3个页面mContactTextView.setTextColor(Color.parseColor(“#008000”));break;}mCurrentPageIndex = position;}/*** 当页面改变的时候，让导航栏底部的绿色指示条随着滑动*/(int position, float positionOffset,int positionOffsetPx) {// 打印日志，判断 position, positionOffset, positionOffsetPx的变化特点Log.e(“TAG”, position + ” , ” + positionOffset + ” , “+ positionOffsetPx);LinearLayout.LayoutParams lp = (android.widget.LinearLayout.LayoutParams) mTabline.getLayoutParams();if (mCurrentPageIndex == 0 && position == 0)// 0->1：第0页到第1页{lp.leftMargin = (int) (positionOffset * mScreen1_3 + mCurrentPageIndex* mScreen1_3);} else if (mCurrentPageIndex == 1 && position == 0)// 1->0：第1页到第0页{lp.leftMargin = (int) (mCurrentPageIndex * mScreen1_3 + (positionOffset – 1)* mScreen1_3);} else if (mCurrentPageIndex == 1 && position == 1) // 1->2：第1页到第2页{lp.leftMargin = (int) (mCurrentPageIndex * mScreen1_3 + positionOffset* mScreen1_3);} else if (mCurrentPageIndex == 2 && position == 1) // 2->1：第2页到第1页{lp.leftMargin = (int) (mCurrentPageIndex * mScreen1_3 + (positionOffset – 1)* mScreen1_3);}mTabline.setLayoutParams(lp);}(int arg0) {}});}/*** 初始化导航栏中的字体颜色为黑色*/() {mChatTextView.setTextColor(Color.BLACK);mFriendTextView.setTextColor(Color.BLACK);mContactTextView.setTextColor(Color.BLACK);}}
三、布局文件
activity_main.xml
====”@layout/top2″ /><android.support.v4.view.ViewPager=>
tab01.xml
===”vertical” ><TextView==”bold” /></LinearLayout>
tab02.xml
===”vertical” ><TextView==”bold” /></LinearLayout>
tab03.xml
===”vertical” ><TextView==”bold” /></LinearLayout>不要哭，你要努力地往前看，你要相信阳光总在风雨后，你最终会看到彩虹的。
