Android ViewPager图片滑动

来源：互联网发布：c4d下载mac 斯蒂芬周编辑：程序博客网时间：2024/06/05 02:54

首先展示效果图

Android ViewPager图片滑动代码演示步骤

1.实例化ViewPager
2.通过LayoutInflater加载布局，返回View结果
3.把生成的每一个View对象添加到List集合中
4.实例化适配器，传递View集合
5.在适配器中继承自PagerAdapter，实现内部的四个方法
getCount(); 返回视图的数量
isViewFromObject(); 是否通过对象加载视图 View==object
instantiateltem(); 加载当前页面
(通过container.addView();添加视图)
返回个给用户
destroyItem(); 销毁滑出的视图
(通过container.removerView();销毁视图)

6.实例化每个ImageView
7.点击每个ImageView时，切换不同的页面
(viewPager.setCurrentltem(下标))

8.当页面切换后，还要把当前的导航栏变为绿色
设置文本颜色的setImageResource(R.drawable.radio_true);
9.当你每次点击之前的时候，添加一个方法，清除方法，
（清理之前的所有导航栏的状态，置为灰色）
10.实现滑动监听需要addOnPagerChangeListener
11.在onPagerSelected方法中，根据position页面的下标判断分别设置对应的底部导航栏状态

一.新建一个项目名为ViewPagerDemo，并引入ViewPager

ViewPager是google SDk中自带的一个附加包的一个类，可以用来实现屏幕间的切换

1.在主布局文件activity_main.xml中引入android.support.v4.view.ViewPager包，添加一个线性布局在线性布局中添加ImageView用于显示滑动小点

<?xml version="1.0" encoding="utf-8"?><FrameLayout    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"    android:orientation="vertical"    tools:context="com.example.cxy.viewpagerdemo.MainActivity">    <android.support.v4.view.ViewPager        android:id="@+id/viewPager"        android:layout_width="match_parent"        android:layout_height="match_parent">    </android.support.v4.view.ViewPager>    <LinearLayout        android:layout_gravity="bottom"        android:gravity="center"        android:layout_marginBottom="20dp"        android:layout_width="match_parent"        android:layout_height="wrap_content">        <ImageView            android:id="@+id/imageView1"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:src="@drawable/radio_true"            android:layout_gravity="bottom"/>        <ImageView            android:id="@+id/imageView2"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:src="@drawable/radio_false"            android:layout_gravity="bottom"/>        <ImageView            android:id="@+id/imageView3"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:src="@drawable/radio_false"            android:layout_gravity="bottom"/>        <ImageView            android:id="@+id/imageView4"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:src="@drawable/radio_false"            android:layout_gravity="bottom"/>        <ImageView            android:id="@+id/imageView5"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:src="@drawable/radio_false"            android:layout_gravity="bottom"/>        <ImageView            android:id="@+id/imageView6"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:src="@drawable/radio_false"            android:layout_gravity="bottom"/>    </LinearLayout></FrameLayout>

2.ViewPager的加载需要一个适配器pagerAdapter的子类

当继承pagerAdapter生成两个方法，剩下两个方法需要自己补充

package com.example.cxy.viewpagerdemo.adapter;import android.support.v4.view.PagerAdapter;import android.view.View;import android.view.ViewGroup;import java.util.List;/** * date:2017/3/7 * Created:陈箫阳(admin) */public class MyViewPagerAdapter extends PagerAdapter {    private List<View> mList;    public MyViewPagerAdapter(List<View> list) {        mList = list;    }    //返回视图数量    @Override    public int getCount() {        return mList.size();    }    //是否通过对象加载视图    @Override    public boolean isViewFromObject(View view, Object object) {        return view == object;    }    //加载当前页面    @Override    public Object instantiateItem(ViewGroup container, int position) {        container.addView(mList.get(position));        return mList.get(position);    }    //销毁滑出视图    @Override    public void destroyItem(ViewGroup container, int position, Object object) {        container.removeView(mList.get(position));    }}

3.新建一个fragment包并新建类OneFragment，通过LayoutInflater加载布局，返回View结果，并在布局文件中添加Imageview用于显示滑动所显示的图片，共六个用于显示六张图片，这里只写一个

OneFeagment类

package com.example.cxy.viewpagerdemo.fragment;import android.os.Bundle;import android.support.annotation.Nullable;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import com.example.cxy.viewpagerdemo.R;/** * date:2017/3/7 * Created:陈箫阳(admin) */public class OneFragment extends Fragment{    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {        View view = inflater.inflate(R.layout.fragmentone, null);        return view;    }}

fragmentone.xml布局文件

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"              android:orientation="vertical"              android:layout_width="match_parent"              android:layout_height="match_parent">    <ImageView        android:layout_width="match_parent"        android:layout_height="match_parent"        android:background="@drawable/view1"/></LinearLayout>

4.编写主类

package com.example.cxy.viewpagerdemo;import android.support.v4.view.ViewPager;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.view.LayoutInflater;import android.view.View;import android.widget.ImageView;import com.example.cxy.viewpagerdemo.adapter.MyViewPagerAdapter;import java.util.ArrayList;import java.util.List;public class MainActivity extends AppCompatActivity implements View.OnClickListener, ViewPager.OnPageChangeListener {    private ViewPager mViewPager;    private List<View> mList;    private ImageView mImageView1, mImageView2, mImageView3, mImageView4, mImageView5, mImageView6;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        //初始化所有控件        initView();    }    private void initView() {        //实例化ViewPager        mViewPager = (ViewPager) findViewById(R.id.viewPager);        //实例化ImageView        mImageView1 = (ImageView) findViewById(R.id.imageView1);        mImageView2 = (ImageView) findViewById(R.id.imageView2);        mImageView3 = (ImageView) findViewById(R.id.imageView3);        mImageView4 = (ImageView) findViewById(R.id.imageView4);        mImageView5 = (ImageView) findViewById(R.id.imageView5);        mImageView6 = (ImageView) findViewById(R.id.imageView6);        //给ImageView添加监听点击事件        mImageView1.setOnClickListener(this);        mImageView2.setOnClickListener(this);        mImageView3.setOnClickListener(this);        mImageView4.setOnClickListener(this);        mImageView5.setOnClickListener(this);        mImageView6.setOnClickListener(this);        //实例化Lise数组        mList = new ArrayList<>();        View view1 = LayoutInflater.from(this).inflate(R.layout.fragmentone, null);        View view2 = LayoutInflater.from(this).inflate(R.layout.fragmenttwo, null);        View view3 = LayoutInflater.from(this).inflate(R.layout.fragmentthree, null);        View view4 = LayoutInflater.from(this).inflate(R.layout.fragmentfour, null);        View view5 = LayoutInflater.from(this).inflate(R.layout.fragmentfive, null);        View view6 = LayoutInflater.from(this).inflate(R.layout.fragmentsix, null);        //把生成的每一个View对象添加到List集合中        mList.add(view1);        mList.add(view2);        mList.add(view3);        mList.add(view4);        mList.add(view5);        mList.add(view6);        //实例化适配器        MyViewPagerAdapter adapter = new MyViewPagerAdapter(mList);        //给ViewPager添加适配器        mViewPager.setAdapter(adapter);        //给ViewPager添加监听        mViewPager.addOnPageChangeListener(this);    }    @Override    public void onClick(View v) {        //清理所有导航栏的状态        clearState();        switch (v.getId()) {            case R.id.imageView1:                //给ViewPager设置当前布局                mViewPager.setCurrentItem(0);                //给ImageView设置文本颜色                mImageView1.setImageResource(R.drawable.radio_true);                break;            case R.id.imageView2:                mViewPager.setCurrentItem(1);                mImageView2.setImageResource(R.drawable.radio_true);                break;            case R.id.imageView3:                mViewPager.setCurrentItem(2);                mImageView3.setImageResource(R.drawable.radio_true);                break;            case R.id.imageView4:                mViewPager.setCurrentItem(3);                mImageView4.setImageResource(R.drawable.radio_true);                break;            case R.id.imageView5:                mViewPager.setCurrentItem(4);                mImageView5.setImageResource(R.drawable.radio_true);                break;            case R.id.imageView6:                mViewPager.setCurrentItem(5);                mImageView6.setImageResource(R.drawable.radio_true);                break;        }    }    //将底部导航栏小点初始化    private void clearState() {        mImageView1.setImageResource(R.drawable.radio_false);        mImageView2.setImageResource(R.drawable.radio_false);        mImageView3.setImageResource(R.drawable.radio_false);        mImageView4.setImageResource(R.drawable.radio_false);        mImageView5.setImageResource(R.drawable.radio_false);        mImageView6.setImageResource(R.drawable.radio_false);    }    //滑动过程中的动作    @Override    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {    }    //选择某个页面松手后会被调用    @Override    public void onPageSelected(int position) {        //清理所有导航栏的状态        clearState();        //使用Switch拿到下标定义当滑动到相应位置小点显示颜色        switch (position) {            case 0:                mImageView1.setImageResource(R.drawable.radio_true);                break;            case 1:                mImageView2.setImageResource(R.drawable.radio_true);                break;            case 2:                mImageView3.setImageResource(R.drawable.radio_true);                break;            case 3:                mImageView4.setImageResource(R.drawable.radio_true);                break;            case 4:                mImageView5.setImageResource(R.drawable.radio_true);                break;            case 5:                mImageView6.setImageResource(R.drawable.radio_true);                break;        }    }    //手指放上去，松开，拖动都会被调用    @Override    public void onPageScrollStateChanged(int state) {    }}

1 0