ViewPager+Fragment实现页面点击切换和手势滑动

项目Git地址：https://github.com/lantian0314/ndkDemo

一、项目运行的界面效果

第二、项目的layout布局

    2.1 fragement_main.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/vPager"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_gravity="center"
        android:layout_weight="1.0"
        android:background="@color/white"
        android:flipInterval="30"
        android:persistentDrawingCache="animation" />

    <View
        android:layout_width="fill_parent"
        android:layout_height="0.5dp"
        android:background="@color/blue" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/main_line_height"
        android:layout_gravity="bottom"
        android:background="@color/blue"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/cursor"
            android:layout_width="@dimen/main_matrix_width"
            android:layout_height="@dimen/main_line_height"
            android:scaleType="matrix"
            android:src="@color/matrix_color" />
    </LinearLayout>


    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="fill_parent"
        android:layout_height="@dimen/top_tab_height"
        android:background="@color/blue">

        <TextView
            android:onClick="txtClick"
            android:id="@+id/txt_message"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1.0"
            android:gravity="center"
            android:text="@string/message"
            android:textColor="@color/main_top_tab_color"
            android:textSize="@dimen/main_top_tab_text_size"
            android:textStyle="bold" />

        <TextView
            android:onClick="txtClick"
            android:id="@+id/txt_contact"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1.0"
            android:gravity="center"
            android:text="@string/contact"
            android:textColor="@color/main_top_tab_color"
            android:textSize="@dimen/main_top_tab_text_size"
            android:textStyle="bold" />

        <TextView
            android:onClick="txtClick"
            android:id="@+id/txt_dynamic"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1.0"
            android:gravity="center"
            android:text="@string/dynamic"
            android:textColor="@color/main_top_tab_color"
            android:textSize="@dimen/main_top_tab_text_size"
            android:textStyle="bold" />
    </LinearLayout>

</LinearLayout>

     2.2 fragment_message.xml

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

    <TextView
        android:layout_gravity="center"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="@drawable/dotshape"/>
    <TextView
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="@string/message"
        android:textSize="@dimen/text_size"
        android:textColor="@color/blue"/>
</FrameLayout >  

第三、Value文件夹

    3.1string

<resources>
    <string name="app_name">ndkDemo</string>
    <string name="action_settings">Settings</string>
    <string name="message">消息</string>
    <string name="contact">联系人</string>
    <string name="dynamic">动态</string>
</resources>

     3.2 dimens

<resources>
    <!-- Default screen margins, per the Android Design guidelines. -->
    <dimen name="activity_horizontal_margin">16dp</dimen>
    <dimen name="activity_vertical_margin">16dp</dimen>
    <dimen name="fab_margin">16dp</dimen>

    <dimen name="top_tab_height">50dp</dimen>
    <dimen name="main_top_tab_text_size">14sp</dimen> <!--48px-->
    <dimen name="main_line_height">2.7dp</dimen><!--8px-->
    <dimen name="main_matrix_width">95dp</dimen>
    <dimen name="text_size">32sp</dimen>
</resources>

     3.3  color

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>

    <color name="transparent">#00000000</color>
    <color name="main_top_color">#f7614d</color>
    <color name="main_top_tab_color">#000000</color>
    <color name="main_top_tab_color_2">#ffffff</color>
    <color name="matrix_color">#ffffff</color>
    <color name="white">#ffffff</color>
    <color name="red">#FFFF1826</color>
    <color name="blue">#0000ff</color>
</resources>

 第四 、drawable

    4.1 dotshape.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:useLevel="false">
    <solid android:color="@color/white" />
    <stroke
        android:width="1dp"
        android:color="@color/blue" />
    <size
        android:width="4dp"
        android:height="4dp" />
</shape>

第五、Activity

   5.1 FragmentMainActivity

package orm.ndkdemo.Fragment;

import android.content.pm.ActivityInfo;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.util.DisplayMetrics;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

import java.util.ArrayList;

import butterknife.BindView;
import butterknife.ButterKnife;
import butterknife.OnClick;
import orm.ndkdemo.R;

/**
 * Created by xingyatong on 2018/3/6.
 */
public class FragmentMainActivity extends AppCompatActivity {

    //消息
    @BindView(R.id.txt_message)
    TextView txt_message;
    //联系人
    @BindView(R.id.txt_contact)
    TextView txt_contact;
    //动态
    @BindView(R.id.txt_dynamic)
    TextView txt_dynamic;
    //实现Tab滑动效果
    @BindView(R.id.vPager)
    ViewPager mViewPager;

    //动画图片
    @BindView(R.id.cursor)
    ImageView cursor;

    //动画图片偏移量
    private int offset = 0;
    private int position_one;
    private int position_two;

    //当前页卡编号
    private int currIndex = 0;

    //存放Fragment
    private ArrayList<Fragment> fragmentArrayList;

    //管理Fragment
    private FragmentManager fragmentManager;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.fragment_main);
        ButterKnife.bind(this);

        //初始化ImageView
        InitImageView();
        //初始化Fragment
        InitFragment();
        //初始化ViewPager
        InitViewPager();
    }

    /**
     * 初始化页卡内容区
     */
    private void InitViewPager() {
        mViewPager.setAdapter(new MFragmentPagerAdapter(fragmentManager, fragmentArrayList));

        //让ViewPager缓存2个页面
        mViewPager.setOffscreenPageLimit(2);

        //设置默认打开第一页
        mViewPager.setCurrentItem(0);

        //将顶部文字恢复默认值
        resetTextViewTextColor();
        txt_message.setTextColor(getResources().getColor(R.color.main_top_tab_color_2));

        //设置viewpager页面滑动监听事件
        mViewPager.setOnPageChangeListener(new MyOnPageChangeListener());
    }

    /**
     * 初始化动画
     */
    private void InitImageView() {
        DisplayMetrics dm = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(dm);
        // 获取分辨率宽度
        int screenW = dm.widthPixels;
        int imageWidth = (screenW / 3);
        //设置动画图片宽度
        setImageWidth(cursor, imageWidth);

        offset = 0;
        //动画图片偏移量赋值
        position_one = (int) (screenW / 3.0);
        position_two = position_one * 2;
    }

    /**
     * 设置动画图片宽度
     *
     * @param mWidth
     */
    private void setImageWidth(ImageView imageView, int mWidth) {
        ViewGroup.LayoutParams params = imageView.getLayoutParams();
        params.width = mWidth;
        imageView.setLayoutParams(params);
    }

    /**
     * 初始化Fragment，并添加到ArrayList中
     */
    private void InitFragment() {
        fragmentArrayList = new ArrayList<Fragment>();
        fragmentArrayList.add(new MessageFragment());
        fragmentArrayList.add(new ConstantFragment());
        fragmentArrayList.add(new DynamicFragment());
        fragmentManager = getSupportFragmentManager();
    }

    /**
     * 页卡切换监听
     */
    public class MyOnPageChangeListener implements ViewPager.OnPageChangeListener {

        @Override
        public void onPageSelected(int position) {
            Animation animation = null;
            Toast.makeText(getApplicationContext(), "" + position + " " + currIndex, Toast.LENGTH_SHORT).show();
            switch (position) {
                //当前为页卡1
                case 0:
                    //从页卡2跳转转到页卡1
                    if (currIndex == 1) {
                        animation = new TranslateAnimation(position_one, 0, 0, 0);
                    } else if (currIndex == 2) {//从页卡3跳转转到页卡1
                        animation = new TranslateAnimation(position_two, 0, 0, 0);
                    }
                    resetTextViewTextColor();
                    txt_message.setTextColor(getResources().getColor(R.color.main_top_tab_color_2));
                    break;

                //当前为页卡2
                case 1:
                    //从页卡1跳转转到页卡2
                    if (currIndex == 0) {
                        animation = new TranslateAnimation(offset, position_one, 0, 0);
                    } else if (currIndex == 2) { //从页卡3跳转转到页卡2
                        animation = new TranslateAnimation(position_two, position_one, 0, 0);
                    }
                    resetTextViewTextColor();
                    txt_contact.setTextColor(getResources().getColor(R.color.main_top_tab_color_2));
                    break;

                //当前为页卡3
                case 2:
                    //从页卡1跳转转到页卡2
                    if (currIndex == 0) {
                        animation = new TranslateAnimation(offset, position_two, 0, 0);
                    } else if (currIndex == 1) {//从页卡2跳转转到页卡3
                        animation = new TranslateAnimation(position_one, position_two, 0, 0);
                    }
                    resetTextViewTextColor();
                    txt_dynamic.setTextColor(getResources().getColor(R.color.main_top_tab_color_2));
                    break;
            }
            currIndex = position;
            animation.setFillAfter(true);// true:图片停在动画结束位置
            animation.setDuration(300);
            cursor.startAnimation(animation);
        }

        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    }

    ;


    /**
     * 将顶部文字恢复默认值
     */
    private void resetTextViewTextColor() {
        txt_message.setTextColor(getResources().getColor(R.color.main_top_tab_color));
        txt_contact.setTextColor(getResources().getColor(R.color.main_top_tab_color));
        txt_dynamic.setTextColor(getResources().getColor(R.color.main_top_tab_color));
    }

    @Override
    protected void onResume() {
        /**
         * 设置为竖屏
         */
        if (getRequestedOrientation() != ActivityInfo.SCREEN_ORIENTATION_PORTRAIT) {
            setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
        }
        super.onResume();
    }

    @OnClick({R.id.txt_message, R.id.txt_contact, R.id.txt_dynamic})
    public void txtClick(TextView txtView) {
        switch (txtView.getId()) {
            case R.id.txt_message:
                mViewPager.setCurrentItem(0);
                break;
            case R.id.txt_contact:
                mViewPager.setCurrentItem(1);
                break;
            case R.id.txt_dynamic:
                mViewPager.setCurrentItem(2);
                break;
        }
    }
}

   5.2 MessageFragment

package orm.ndkdemo.Fragment;

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

import orm.ndkdemo.R;

/**
 * Created by xingyatong on 2018/3/6.
 */
public class MessageFragment extends Fragment {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_message, container, false);
    }
}

  5.3 MFragmentPagerAdapter

package orm.ndkdemo.Fragment;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.view.ViewGroup;

import java.util.ArrayList;

/**
 * Created by xingyatong on 2018/3/6.
 */
public class MFragmentPagerAdapter extends FragmentPagerAdapter{
    //存放Fragment的数组
    private ArrayList<Fragment> fragmentsList;

    public MFragmentPagerAdapter(FragmentManager fm, ArrayList<Fragment> fragmentsList) {
        super(fm);
        this.fragmentsList = fragmentsList;
    }

    @Override
    public Fragment getItem(int position) {
        return fragmentsList.get(position);
    }

    @Override
    public int getCount() {
        return fragmentsList.size();
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        super.destroyItem(container, position, object);
    }
}