android viewpager

简介

　　ViewPager是Android support v4 包中的一个重要类,这个类可以实现让用户左右切换当前view,实现滑动的效果

　　ViewPager直接继承了ViewGroup类,和LinearLayout一样,都是一个容器,需要在里面添加我们想要显示的内容

　　ViewPager类需要一个PagerAdapter适配器类给他提供数据,与ListView相似.

简单使用:引导页面实现

在xml导入 viewpager

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

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </android.support.v4.view.ViewPager>

    <LinearLayout
        android:id="@+id/dot_layout"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="30dp"
        android:orientation="horizontal"
        android:gravity="center">

    </LinearLayout>

</RelativeLayout>

Java 代码实现 添加适配器  于dot引导点

package com.example.viewpager;

import android.support.annotation.NonNull;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TabWidget;

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

public class MainActivity extends AppCompatActivity {

    private ViewPager viewPager;
    private int[] mlayoutIDs = {
            R.layout.view_first,
            R.layout.view_second,
            R.layout.view_thrid,
    };
    private List<View> views;
    private ViewGroup viewGroup;
    private List<ImageView> imageViews;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        viewPager = findViewById(R.id.view_pager);
        viewGroup = findViewById(R.id.dot_layout);
        imageViews = new ArrayList<>();
        views = new ArrayList<>();
        for (int i = 0; i < mlayoutIDs.length; i++) {
            //添加视图
//            views.add(getLayoutInflater().inflate(mlayoutIDs[i],null));
            //添加图片视图
            ImageView imageView = new ImageView(this);
            imageView.setImageResource(R.mipmap.ic_launcher);
            views.add(imageView);

            ImageView dot = new ImageView(this);
            dot.setImageResource(R.drawable.ic_launcher_background);
            dot.setMaxHeight(100);
            dot.setMaxWidth(100);
            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(80,80);
            layoutParams.leftMargin = 20;
            dot.setLayoutParams(layoutParams);
            viewGroup.addView(dot);
            imageViews.add(dot);

        }
        viewPager.setAdapter(pagerAdapter);
        //设置在屏上的视图有几个  即有几个视图不被销毁
//        viewPager.setOffscreenPageLimit(4);
        //设置第一个展开的视图
        viewPager.setCurrentItem(0);
        //设置dot第一次展示的位置
        setDotView(0);
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int i, float v, int i1) {

            }

            @Override
            public void onPageSelected(int i) {
                setDotView(i);
            }

            @Override
            public void onPageScrollStateChanged(int i) {

            }
        });
    }

    private void setDotView(int i) {
        for (int j = 0; j < imageViews.size() ; j++) {
            imageViews.get(j).setImageResource(i == j? R.drawable.dot:R.drawable.ic_launcher_background);
        }
    }

    PagerAdapter pagerAdapter = new PagerAdapter() {
        //数量
        @Override
        public int getCount() {
            return views.size();
        }
        //返回的对象是不是视图
        @Override
        public boolean isViewFromObject(@NonNull View view, @NonNull Object o) {
            return view == o;
        }
        //添加每次的视图
        @NonNull
        @Override
        public Object instantiateItem(@NonNull ViewGroup container, int position) {
            View view = views.get(position);
            container.addView(view);
            return view;
        }

        @Override
        public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
            View view = views.get(position);
            container.removeView(view);
        }
    };
}

ViewPager + Fragment   实现底部导航栏

xml布局

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Main2Activity"
    android:id="@+id/tab_host">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v4.view.ViewPager
            android:id="@+id/view_pager1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_above="@id/view">

        </android.support.v4.view.ViewPager>

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_above="@id/view"
            android:visibility="gone">

        </FrameLayout>
        <View
            android:id="@+id/view"
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#000000"
            android:layout_above="@android:id/tabs"/>
        <!--要用系统id-->
        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_alignParentBottom="true"
            android:showDividers="middle"
            android:gravity="center">

        </TabWidget>


    </RelativeLayout>

</TabHost>

自定义Fragment

package com.example.viewpager;

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class MyFragment extends Fragment {


    private View view;

    public static MyFragment getFragment(String s){
        MyFragment myFragment = new MyFragment();
        Bundle bundle = new Bundle();
        bundle.putString("key",s);
        myFragment.setArguments(bundle);
        return myFragment;
    }

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

    }

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        view = inflater.inflate(R.layout.fragment,null);
        return view;
    }

    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        if (getArguments()!= null){
            TextView textView = view.findViewById(R.id.fragment_txt);
            textView.setText(getArguments().getString("key"));
        }
    }
}

主代码实现 将底部导航与fragment相互关联

package com.example.viewpager;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.TabHost;
import android.widget.TabWidget;
import android.widget.TextView;

public class Main2Activity extends AppCompatActivity implements TabHost.TabContentFactory {

    int[] strings = {
            R.string.first,
            R.string.second,
            R.string.thrid,
    };
    private Fragment[] fragments;
    private TabHost tabHost;
    private ViewPager viewPager1;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
        tabHost = findViewById(R.id.tab_host);

        //初始化
        tabHost.setup();
        //tab 图标

        //第一步 初始化数据
        int[] titleIDs = {
                R.string.first,
                R.string.second,
                R.string.thrid
        };
        int[] drawableIDs = {
                R.drawable.tab_home,
                R.drawable.tab_message,
                R.drawable.tab_me
        };
        //第二部 数据和视图相结合
        for (int i = 0; i < drawableIDs.length; i++) {
            View view = getLayoutInflater().inflate(R.layout.tab_layout,null);
            TextView textView = view.findViewById(R.id.tab_txt);
            ImageView imageView = view.findViewById(R.id.tab_inco);
            View tab = view.findViewById(R.id.tab_bg);

            imageView.setImageResource(drawableIDs[i]);
            textView.setText(titleIDs[i]);

            //设置tabhos背景颜色
            tab.setBackgroundColor(getResources().getColor(R.color.white));
            tabHost.addTab(tabHost.newTabSpec(getString(titleIDs[i]))
            .setIndicator(view)
            .setContent(this));
        }

        //存放Fragment的数组
        fragments = new Fragment[]{
                MyFragment.getFragment(getResources().getString(R.string.first)),
                MyFragment.getFragment(getResources().getString(R.string.second)),
                MyFragment.getFragment(getResources().getString(R.string.thrid)),
        };


        viewPager1 = findViewById(R.id.view_pager1);

        viewPager1.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int i) {
//                return MyFragment.getFragment(getResources().getString(strings[i]));
                return fragments[i];
            }

            @Override
            public int getCount() {
                return fragments.length;
            }
        });

        viewPager1.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int i, float v, int i1) {

            }

            @Override
            public void onPageSelected(int i) {
                if (tabHost != null){
                    tabHost.setCurrentTab(i);
                }
            }

            @Override
            public void onPageScrollStateChanged(int i) {

            }
        });
        tabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {
            @Override
            public void onTabChanged(String s) {
                //获取当前tabhost的位置
                int position = tabHost.getCurrentTab();
                viewPager1.setCurrentItem(position);
            }
        });
    }

    @Override
    public View createTabContent(String s) {
        View view = new View(this);
        view.setMinimumHeight(0);
        view.setMinimumWidth(0);
        return view;
    }
}

ViewPager 自定义酷炫动画

ViewPager自带了一个setPageTransformer用于设置切换动画~

　　setPageTransformer (boolean reverseDrawingOrder, PageTransformer transformer）需要传入两个参数
第一个参数：如果为true，则表明自定义的pageTransformer需要 page view从后到前的顺序绘制，反之则为false。
第二个参数：传入一个自定义的pageTransformer对象

因此实现炫酷动画的关键点就在于：自定义pageTransformer
Google官方给我们展示了两个动画例子：DepthPageTransformer和ZoomOutPageTransformer，比较炫。我们就以Google官方的例子来学习自定义pageTransformer,以此为基础，我们可以自定义各种各样的动画实现效果。