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

最新推荐文章于 2022-05-19 16:19:58 发布

商清艾

最新推荐文章于 2022-05-19 16:19:58 发布

阅读量820

点赞数

分类专栏： android 文章标签： android viewpager

本文链接：https://blog.csdn.net/a747883500/article/details/47173579

版权

android 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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方法去实现光标滑动的功能