Viewpager和fragment和自定义的底部Tab实现切换效果

自定义的底部导航栏FootBar

package com.example.testschedule;

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

import android.content.Context;
import android.graphics.Color;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.CheckedTextView;
import android.widget.LinearLayout;
import android.widget.TextView;

/**
 * @author:Harvin Date: 2014-11-30 function:实现底部菜单栏
 */
public class FootBar extends LinearLayout {
    public static final String TAG = "FootBar";// Log 标签
    private OnTabSelectedListener selectedListener = null;
    private LinearLayout footBarLayout = null;
    // FootBar 未选中图标
    private int itemDarwableIds[] = new int[] {
            R.drawable.footbar_filemanagement_normal,
            R.drawable.footbar_homepage_normal,
            R.drawable.footbar_personcenter_normal };
    // FootBar 选中图标
    private int select_itemDarwableIds[] = new int[] {
            R.drawable.footbar_filemanagement_select,
            R.drawable.footbar_homepage_select,
            R.drawable.footbar_personalcenter_select };
    // FootBar 名称
    private int footBar_tab_name[] = new int[] { R.string.fileManagement,
            R.string.homePage, R.string.personCenter };
    private List<CheckedTextView> mCheckedTextViews = new ArrayList<CheckedTextView>();
    private List<View> mListViews = new ArrayList<View>();
    /**
     * @param Context
     * @param AttributeSet
     * @param int 
     * */
    public FootBar(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        // TODO Auto-generated constructor stub
        initView(context);
    }
    /**
     * @param Context
     * @param AttributeSet
     * 
     * */
    public FootBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView(context);
    }
    /**
     * @param Context
     * */
    public FootBar(Context context) {
        super(context);
        initView(context);
    }
    private void initView(Context context) {
        TextView tv = new TextView(context);
        LayoutParams params = new LayoutParams(
                ViewGroup.LayoutParams.MATCH_PARENT, 1);
        params.setMargins(0, 0, 0, 5);
        tv.setLayoutParams(params);
        tv.setBackgroundColor(getResources().getColor(R.color.colorE));
        addView(tv);// 添加横线
        settingFootBarLayout(context);
        setFootBarProperties();
        setViewProperties(context);
    }
    private void settingFootBarLayout(Context context) {
        footBarLayout = new LinearLayout(context);
        footBarLayout.setOrientation(LinearLayout.HORIZONTAL);
        LayoutParams params = new LayoutParams(
                ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.WRAP_CONTENT);
        params.gravity = Gravity.BOTTOM;
        footBarLayout.setLayoutParams(params);
    }
    /**
     * 设置FootBar的特性
     * */
    private void setFootBarProperties() {
        this.setOrientation(LinearLayout.VERTICAL);// 设置控件摆放顺序
        this.setBackgroundColor(getResources().getColor(R.color.colorFC));// 设置FootBar背景色
    }
    private void setViewProperties(final Context context) {
        LayoutInflater inflater = LayoutInflater.from(context);
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(0,
                LayoutParams.MATCH_PARENT);
        params.weight = 1;// 设置权重
        for (int i = 0; i < itemDarwableIds.length; i++) {
            final View view = inflater.inflate(R.layout.footbar_tab_item, null);// 动态实例化一个View
            final int index = i;// 索引
            CheckedTextView ctv = (CheckedTextView) view
                    .findViewById(R.id.footbar_tab);
            ctv.setCompoundDrawablesWithIntrinsicBounds(null, getResources()
                    .getDrawable(itemDarwableIds[i]), null, null);
            ctv.setText(footBar_tab_name[i]);
            ctv.setTag(index);
            ctv.setBackgroundColor(getResources().getColor(R.color.colorFC));
            mCheckedTextViews.add(ctv);
            mListViews.add(view);
            footBarLayout.addView(view, params);
            view.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    if (selectedListener != null) {
                        setTabDisplay(context, index);
                        selectedListener.onTabSelected(index);
                    }
                }
            });
        }
        addView(footBarLayout);
    }
/**
 * 
 * 设置显示Tab
 * @param context 上下文
 * @param index tab的position 
 * */
    public void setTabDisplay(Context context, int index) {
        int size = mCheckedTextViews.size();
        for (int i = 0; i < size; i++) {
            CheckedTextView checkedTextView = mCheckedTextViews.get(i);
            if ((Integer) (checkedTextView.getTag()) == index) {
                checkedTextView.setChecked(true);
                checkedTextView.setTextColor(getResources().getColor(
                        R.color.jadeGreen));
                checkedTextView.setCompoundDrawablesWithIntrinsicBounds(null,
                        getResources().getDrawable(select_itemDarwableIds[i]),
                        null, null);
                mListViews.get(i).setBackgroundColor(Color.rgb(240, 241, 242));
            } else {
                checkedTextView.setChecked(false);
                checkedTextView.setCompoundDrawablesWithIntrinsicBounds(null,
                        getResources().getDrawable(itemDarwableIds[i]), null,
                        null);
                checkedTextView.setTextColor(getResources().getColor(
                        R.color.footbarTextColor_normal));
                mListViews.get(i).setBackgroundColor(Color.rgb(250, 250, 250));
            }
        }
    }
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        // TODO Auto-generated method stub
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int widthSpecMode = MeasureSpec.getMode(widthMeasureSpec);
        int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightSpecMode = MeasureSpec.getMode(heightMeasureSpec);
        int heightSpecSize = MeasureSpec.getSize(heightMeasureSpec);
        if (widthSpecMode != MeasureSpec.EXACTLY) {
            widthSpecSize = 0;
        }
        if (heightSpecMode != MeasureSpec.EXACTLY) {
            heightSpecSize = 0;
        }
        if (widthSpecMode == MeasureSpec.UNSPECIFIED
                || heightSpecMode == MeasureSpec.UNSPECIFIED) {
        }
        int width;
        int height;
        width = Math.max(getMeasuredHeight(), widthSpecSize);
        height = Math.max(this.getBackground().getIntrinsicHeight(),
                heightSpecSize);
        setMeasuredDimension(width, height);
    }
    public interface OnTabSelectedListener {
        public void onTabSelected(int index);
    }
    public void setOnTabSelectedListener(OnTabSelectedListener selectedListener) {
        this.selectedListener = selectedListener;
    }
}

---

XML文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    android:orientation="vertical" >
    <ImageView
        android:id="@+id/footbar_tab_hint"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:contentDescription="@string/app_name" />
    <CheckedTextView
        android:id="@+id/footbar_tab"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textSize="12sp" />
</LinearLayout>

Fragment页面简单，就只放上来一个，其它的照葫芦画瓢就好了

package com.example.test;

import com.example.testschedule.R;



import android.os.Bundle;

import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class Tab_1_Fragment extends Fragment {
    private View rootView;
    @Override
    public void onViewCreated(View view, Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        if (rootView == null) {
            rootView = inflater.inflate(R.layout.fragment_tab1, container,
                    false);
        }
        return rootView;
    }

}

xml文件里面只有一个textView 为了缩短篇幅，就不贴出来了。

实现逻辑 ActivityMain

package com.example.testschedule;

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

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 com.example.test.Tab_1_Fragment;
import com.example.test.Tab_2_Fragment;
import com.example.test.Tab_3_Fragment;
import com.example.testschedule.FootBar.OnTabSelectedListener;

public class MainActivity extends FragmentActivity implements
        OnTabSelectedListener, OnPageChangeListener {

    private FootBar footBar;
    private Tab_1_Fragment ma_tab_1;
    private Tab_2_Fragment ma_tab_2;
    private Tab_3_Fragment ma_tab_3;
    private FragmentPagerAdapter mAdapter;
    private ViewPager pager;

    private List<Fragment> mFragments = new ArrayList<Fragment>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initWidget();
    }
    private void initWidget() {
        footBar = (FootBar) findViewById(R.id.footbar);
        footBar.setOnTabSelectedListener(this);
        pager=(ViewPager)findViewById(R.id.page);
        pager.setOnPageChangeListener(this);
        ma_tab_1=new Tab_1_Fragment();
        ma_tab_2=new Tab_2_Fragment();
        ma_tab_3=new Tab_3_Fragment();
        mFragments.add(ma_tab_1);
        mFragments.add(ma_tab_2);
        mFragments.add(ma_tab_3);
    }
    @Override
    protected void onResume() {
        super.onResume();
        onTabSelected(1);
        footBar.setTabDisplay(this, 1);
        mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public int getCount() {
                return mFragments.size();
            }

            @Override
            public Fragment getItem(int arg0) {
                return mFragments.get(arg0);
            }
        };
        pager.setAdapter(mAdapter);
        pager.setCurrentItem(1);

    }

    @Override
    public void onTabSelected(int index) {
            pager.setCurrentItem(index);

    }

    public void onPageScrollStateChanged(int arg0) {

    }

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

    }
    @Override
    public void onPageSelected(int arg0) {
        onTabSelected(arg0);
        footBar.setTabDisplay(this, arg0);
    }

}

XML文件代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

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

    <com.example.testschedule.FootBar
        android:id="@+id/footbar"
        android:layout_width="match_parent"
        android:layout_height="60dp" >
    </com.example.testschedule.FootBar>

</LinearLayout>

该程序可以实现滑动切换，也可以实现点击Tab切换，程序是从做过的DEMO基础上做的修改，一些变量的名字不规范。这些细节，请不要在意！