Android ViewPager多页面滑动切换以及动画效果

viewpage实现多页面滑动是通过pageAdapter或FragmentPagerAdapter来实现页面的滑动切换

有的需要类似图片的三角形的滑动动画三角形是更具页面滑动而滑动的并且指定在相应的选项卡下

功能的实现首先从android 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="wrap_content"    android:id="@+id/lin_title_father"    android:background="@color/titlecolor"    android:orientation="vertical">    <LinearLayout        android:layout_width="match_parent"        android:layout_height="55dp"        android:orientation="horizontal"        >        <ImageView            android:id="@+id/img_main_bookshelf"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1.0"            android:src="@mipmap/tab_bookshelf"            android:scaleType="center"            />        <ImageView            android:id="@+id/img_main_home"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1.0"            android:src="@mipmap/tab_home"            android:scaleType="center"            />        <ImageView            android:id="@+id/img_main_search"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1.0"            android:src="@mipmap/tab_search"            android:scaleType="center"            />    </LinearLayout>        <ImageView            android:id="@+id/iv_Main_Sign"            android:layout_width="wrap_content"            android:layout_height="4dp"            android:src="@mipmap/ivmainsign"            android:scaleType="centerInside"            /></LinearLayout>

头部的布局

界面布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/main_rootview"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="@color/backggroudcolor"    android:orientation="vertical"    tools:context=".MainActivity">    <include        layout="@layout/titel_bar"        />    <android.support.v4.view.ViewPager        android:id="@+id/vp_main_content"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:background="@color/searchbackgroudchcolor"        /></LinearLayout>

activity代码

import android.os.Bundle;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentActivity;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentPagerAdapter;import android.support.v4.view.ViewPager;import android.util.DisplayMetrics;import android.view.View;import android.widget.ImageView;import android.widget.LinearLayout;import android.widget.Toast;import com.shenfan.ui.activity.book.TabBookFragment;import com.shenfan.ui.activity.home.TabHomeFragment;import com.shenfan.ui.activity.search.TabSearchFargment;import java.util.ArrayList;import java.util.List;import androidsf.androidsf.R;public class MainActivity extends FragmentActivity implements View.OnClickListener {    ImageView ivMainSign;    ViewPager vpMainContent;    private List<ImageView> views = new ArrayList<ImageView>();    private FragmentManager fragmentManager;    private int currentFragmentIndex;    private int item_width;//按钮宽度    private TabBookFragment tabBookFragment;    private TabHomeFragment tabHomeFragment;    private TabSearchFargment tabSearchFargment;    private ImageView imgmainbookshelf, imgmainsearch, imgmainhome;    ArrayList<Fragment> fragmentList;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        ivMainSign = (ImageView) findViewById(R.id.iv_Main_Sign);        vpMainContent = (ViewPager) findViewById(R.id.vp_main_content);        imgmainbookshelf = (ImageView) findViewById(R.id.img_main_bookshelf);        imgmainhome = (ImageView) findViewById(R.id.img_main_home);        imgmainsearch = (ImageView) findViewById(R.id.img_main_search);        imgmainbookshelf.setOnClickListener(this);        imgmainsearch.setOnClickListener(this);        imgmainhome.setOnClickListener(this);//        vpMainContent.setOffscreenPageLimit(0);        initView();        initViewPager();    }    @Override    protected void onResume() {        super.onResume();    }    private void initView() {        //计算屏幕宽度        DisplayMetrics dm = new DisplayMetrics();        getWindowManager().getDefaultDisplay().getMetrics(dm);        item_width = dm.widthPixels / 3;        ivMainSign.setMaxWidth(item_width);        ivMainSign.setLayoutParams(new LinearLayout.LayoutParams(item_width,8));//设置光标的位置        ivMainSign.setOnClickListener(this);    }    /**     * 初始化viewPager     */    private void initViewPager() {        fragmentList = new ArrayList<>();        fragmentManager = getSupportFragmentManager();        if (null == tabBookFragment)            tabBookFragment = new TabBookFragment();        if (null == tabHomeFragment)            tabHomeFragment = new TabHomeFragment();        if (null == tabSearchFargment) {            tabSearchFargment = new TabSearchFargment();        }        fragmentList.add(tabBookFragment);        fragmentList.add(tabHomeFragment);        fragmentList.add(tabSearchFargment);        MyFragmentPagerAdapter fragmentPagerAdapter = new MyFragmentPagerAdapter(                fragmentManager, fragmentList);        vpMainContent.setAdapter(fragmentPagerAdapter);        vpMainContent.setOnPageChangeListener(new MyOnPageChangeListener());//        vpMainContent.setCurrentItem(0);    }    private class MyFragmentPagerAdapter extends FragmentPagerAdapter {        private ArrayList<Fragment> mFragments;        public MyFragmentPagerAdapter(FragmentManager fm, ArrayList<Fragment> mFragments) {            super(fm);            this.mFragments = mFragments;        }        @Override        public Fragment getItem(int arg0) {            return mFragments.get(arg0);        }        @Override        public int getCount() {            return mFragments.size();        }    }    @Override    public void onClick(View v) {        switch (v.getId()) {            case R.id.img_main_bookshelf:                currentFragmentIndex = 0;                vpMainContent.setCurrentItem(currentFragmentIndex);                break;            case R.id.img_main_home:                currentFragmentIndex = 1;                vpMainContent.setCurrentItem(currentFragmentIndex);                break;            case R.id.img_main_search:                currentFragmentIndex = 2;                vpMainContent.setCurrentItem(currentFragmentIndex);                break;            default:                break;        }    }    public class MyOnPageChangeListener implements ViewPager.OnPageChangeListener {        @Override        public void onPageSelected(int position) {        }        //positionx选项卡 //positionOffset比例        @Override        public void onPageScrolled(int position, float positionOffset,                                   int positionOffsetPixels) {            //获取父布局布局管理器            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(ivMainSign.getLayoutParams());            /**             *   设置margin的值思路主要是position的值为当前fragment的下标 positionOffset为比例数当第一个页面滑动到第二个的时候positionOffset= 0             *   如果只采用item_width * position显得有些僵硬如果加上item_width * positionOffset就有动画的效果了             */            layoutParams.setMargins((int) (item_width * positionOffset) + item_width * position, 0, 0, 0);            ivMainSign.setLayoutParams(layoutParams);        }        @Override        public void onPageScrollStateChanged(int state) {        }    }    private long mPressedTime = 0;    @Override    public void onBackPressed() {        long mNowTime = System.currentTimeMillis();//获取第一次按键时间        if ((mNowTime - mPressedTime) > 4000) {//比较两次按键时间差            Toast.makeText(this, "再按一次退出程序", Toast.LENGTH_SHORT).show();            mPressedTime = mNowTime;        } else {//退出程序            this.finish();            System.exit(0);        }    }}

主要思路是通过 OnPageChangeListener的onPageScrolled方法去实现光标滑动的功能