Android ViewPager图片滑动
Android ViewPager图片滑动
首先展示效果图
Android ViewPager图片滑动代码演示步骤
1.实例化ViewPager
2.通过LayoutInflater加载布局，返回View结果
3.把生成的每一个View对象添加到List集合中
4.实例化适配器，传递View集合
5.在适配器中继承自PagerAdapter，实现内部的四个方法
getCount(); 返回视图的数量
isViewFromObject(); 是否通过对象加载视图 View==object
instantiateltem(); 加载当前页面
(通过container.addView();添加视图)
返回个给用户
destroyItem(); 销毁滑出的视图
(通过container.removerView();销毁视图)
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(下标))
7.点击每个ImageView时，切换不同的页面
(viewPager.setCurrentltem(下标))
8.当页面切换后，还要把当前的导航栏变为绿色
设置文本颜色的 setImageResource(R.drawable. radio_true );
9.当你每次点击之前的时候，添加一个方法，清除方法，
（清理之 前的所有导航栏的状态，置为灰色）
10.实现滑动监听需要addOnPagerChangeListener
11.在onPagerSelected方法中，根据position页面的下标判断分别设置对应的底部导航栏状态
设置文本颜色的 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 ListmList; public MyViewPagerAdapter(List 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 ListmList; 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) { } }