ViewPager+Fragment实现滑动效果，并且能够点击切换

1、首先创建一个Activity类，并且继承FragmentActivity,代码如下：

package com.guo.mothersonhealth.activity;

import android.graphics.Color;

import android.os.Bundle;

import android.support.v4.app.Fragment;

import android.support.v4.app.FragmentActivity;

import android.support.v4.view.ViewPager;

import android.util.DisplayMetrics;

import android.util.Log;

import android.view.View;

import android.widget.ImageView;

import android.widget.LinearLayout;

import android.widget.TextView;

import com.guo.mothersonhealth.R;

import com.guo.mothersonhealth.adapter.XinXiAdapter;

import com.guo.mothersonhealth.fragment.BaByFragment;

import com.guo.mothersonhealth.fragment.FatherFragment;

import com.guo.mothersonhealth.fragment.MotherFragment;

import java.util.ArrayList;

import java.util.List;

public class XinXiActivity extends FragmentActivity {

    private List mFragmentList = new ArrayList();

    private XinXiAdapter mXinxiAdapter;

    private ViewPager m_vp;

    private TextView mTabChatTv, mTabContactsTv, mTabFriendTv;

    private ImageView mTabLineIv;

    private MotherFragment motherFragment;

    private FatherFragment fatherFragment;

    private BaByFragment baByFragment;

    private int currentIndex;

    private int screenWidth;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_xinxi);

        findById();

        init();

        initTabLineWidth();

        //onclick();//点击监听

    }

    private void initTabLineWidth() {

        DisplayMetrics dpMetrics = new DisplayMetrics();

        getWindow().getWindowManager().getDefaultDisplay()

                .getMetrics(dpMetrics);

        screenWidth = dpMetrics.widthPixels;

        LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) mTabLineIv

                .getLayoutParams();

        lp.width = screenWidth / 3;

        mTabLineIv.setLayoutParams(lp);

    }

    private void findById() {

        mTabContactsTv = (TextView) this.findViewById(R.id.id_contacts_tv);

        mTabChatTv = (TextView) this.findViewById(R.id.id_chat_tv);

        mTabFriendTv = (TextView) this.findViewById(R.id.id_friend_tv);

        mTabLineIv = (ImageView) this.findViewById(R.id.id_tab_line_iv);

        m_vp = (ViewPager) this.findViewById(R.id.viewpager_xinxi);

        mTabChatTv.setOnClickListener(new txtListener(0));

        mTabFriendTv.setOnClickListener(new txtListener(1));

        mTabContactsTv.setOnClickListener(new txtListener(2));

    }

    //内部类   重写TextView点击事件

    public class txtListener implements View.OnClickListener{

        private int index=0;

        public txtListener(int i){

            index = i;

        }

        @Override

        public void onClick(View view) {

            m_vp.setCurrentItem(index);

        }

    }

    private void init() {

        motherFragment = new MotherFragment();

        fatherFragment = new FatherFragment();

        baByFragment = new BaByFragment();

        mFragmentList.add(motherFragment);

        mFragmentList.add(fatherFragment);

        mFragmentList.add(baByFragment);

        mXinxiAdapter = new XinXiAdapter(

                this.getSupportFragmentManager(), mFragmentList);

        m_vp.setAdapter(mXinxiAdapter);

        m_vp.setCurrentItem(0);

        m_vp.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

            @Override

            public void onPageScrolled(int position, float offset, int offsetPixels) {

                LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) mTabLineIv.getLayoutParams();

                Log.e("offset:", offset + "");

                if (currentIndex == 0 && position == 0)// 0->1

                {

                    lp.leftMargin = (int) (offset * (screenWidth * 1.0 / 3) + currentIndex

                            * (screenWidth / 3));

                } else if (currentIndex == 1 && position == 0) // 1->0

                {

                    lp.leftMargin = (int) (-(1 - offset)

                            * (screenWidth * 1.0 / 3) + currentIndex

                            * (screenWidth / 3));

                } else if (currentIndex == 1 && position == 1) // 1->2

                {

                    lp.leftMargin = (int) (offset * (screenWidth * 1.0 / 3) + currentIndex

                            * (screenWidth / 3));

                } else if (currentIndex == 2 && position == 1) // 2->1

                {

                    lp.leftMargin = (int) (-(1 - offset)

                            * (screenWidth * 1.0 / 3) + currentIndex

                            * (screenWidth / 3));

                }

                mTabLineIv.setLayoutParams(lp);

            }

            @Override

            public void onPageSelected(int position) {

                resetTextView();

                switch (position) {

                    case 0:

                        mTabChatTv.setTextColor(Color.RED);

                        break;

                    case 1:

                        mTabFriendTv.setTextColor(Color.RED);

                        break;

                    case 2:

                        mTabContactsTv.setTextColor(Color.RED);

                        break;

                }

                currentIndex = position;

            }

            @Override

            public void onPageScrollStateChanged(int state) {

            }

        });

    }

    private void resetTextView() {

        mTabChatTv.setTextColor(Color.BLACK);

        mTabFriendTv.setTextColor(Color.BLACK);

        mTabContactsTv.setTextColor(Color.BLACK);

    }

}

 

2、创建一个适配器adapter,继承 FragmentPagerAdapter，代码如下：

package com.guo.mothersonhealth.adapter;

import android.support.v4.app.Fragment;

import android.support.v4.app.FragmentManager;

import android.support.v4.app.FragmentPagerAdapter;

import java.util.ArrayList;

import java.util.List;

public class XinXiAdapter extends FragmentPagerAdapter{

    List fragmentList = new ArrayList();

    public XinXiAdapter(FragmentManager fm, List fragmentList) {

        super(fm);

        this.fragmentList = fragmentList;

    }

    @Override

    public Fragment getItem(int position) {

        return fragmentList.get(position);

    }

    @Override

    public int getCount() {

        return fragmentList.size();

    }

}

3、创建一个xml布局，用来加载布局：

    android:orientation="vertical" android:layout_width="match_parent"

    android:layout_height="match_parent">

   

        android:layout_width="match_parent"

        android:layout_height="50sp"

        android:background="@color/activity_main_actionbar_background"

        android:paddingBottom="10dp"

        android:paddingTop="10dp">

       

       

            android:layout_width="match_parent"

            android:layout_height="60dp"

            android:layout_centerVertical="true"

            android:layout_marginLeft="20dp"

            android:text="@string/activity_main_yunQian_xinxi"

            android:gravity="center_vertical|center_horizontal"

            android:textColor="@color/white"

            android:textSize="25sp" />

   

   

        android:layout_width="match_parent"

        android:layout_height="wrap_content"/>

   

        android:id="@+id/viewpager_xinxi"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_weight="1">

4、创建一个include标签，作为滑动的导航菜单：

    android:orientation="vertical" android:layout_width="match_parent"

    android:layout_height="match_parent">

   

        android:id="@+id/id_switch_tab_ll"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:orientation="horizontal"

        android:baselineAligned="false"

        >

       

            android:id="@+id/id_tab_chat_ll"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:layout_weight="1"

            android:gravity="center"

            android:orientation="horizontal"

            android:padding="10dip" >

           

                android:id="@+id/id_chat_tv"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:gravity="center"

                android:text="母亲信息"

                android:textColor="#FF0000"

                android:textSize="15dip" />

       

       

            android:id="@+id/id_tab_friend_ll"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:layout_weight="1"

            android:clickable="true"

            android:gravity="center"

            android:orientation="horizontal"

            android:padding="10dip"

            android:saveEnabled="false" >

           

                android:id="@+id/id_friend_tv"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:gravity="center"

                android:text="父亲信息"

                android:textColor="#000000"

                android:textSize="15dip" />

       

       

   

   

        android:id="@+id/id_tab_line_iv"

        android:layout_width="190dp"

        android:layout_height="2dp"

        android:contentDescription="tab"

        android:background="#FF0000"

         >

   

   

        android:layout_width="match_parent"

        android:layout_height="1dp"

        android:background="#E8E8E8" />

5、在创建几个fragment用来展现碎片的内容。