Android开发之使用ViewPager实现图片左右滑动切换效果
Android中图片的左右切换随处可见,今天我也试着查阅资料试着做了一下,挺简单的一个小Demo,却也发现了一些问题,话不多说,上代码~:
使用了3个xml文件作为ViewPager的滑动page,布局都是相同的,如下只展示其中之一:
<?xmlversion="1.0"encoding="utf-8"?> <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" android:src="@mipmap/view1"/> </LinearLayout>
只是用了一个ImageView作为显示图片的容器
主页面布局:
<?xmlversion="1.0"encoding="UTF-8"?> <RelativeLayoutandroid:orientation="vertical" android:layout_height="match_parent" android:layout_width="match_parent" xmlns:android="http://schemas.android.com/apk/res/android"> <!--切换卡--> <android.support.v4.view.ViewPager android:layout_height="wrap_content" android:layout_width="match_parent" android:id="@+id/viewPager"></android.support.v4.view.ViewPager> <!--点点--> <LinearLayout android:orientation="horizontal" android:layout_height="wrap_content" android:layout_width="fill_parent" android:id="@+id/viewGroup" android:layout_alignParentBottom="true" android:gravity="center_horizontal" android:layout_marginBottom="40dp"></LinearLayout> </RelativeLayout>
接下来就是主函数的的代码了:
packagecom.yztc.lx.homework; importandroid.app.Activity; importandroid.os.Bundle; importandroid.support.v4.view.PagerAdapter; importandroid.support.v4.view.ViewPager; importandroid.view.LayoutInflater; importandroid.view.ViewGroup.LayoutParams; importandroid.view.View; importandroid.view.ViewGroup; importandroid.widget.ImageView; importjava.util.ArrayList; importjava.util.List; /** *CreatedbyLxon2016/8/6. */ publicclassLayout1ActivityextendsActivity{ privateViewPagerviewPager; privatePagerAdapteradapter; privateList<View>viewPages=newArrayList<>(); //包裹点点的LinearLayout privateViewGroupgroup; privateImageViewimageView; //定义一个ImageVIew数组,来存放生成的小园点 privateImageView[]imageViews; @Override protectedvoidonCreate(BundlesavedInstanceState){ super.onCreate(savedInstanceState); setContentView(R.layout.layout1); initView(); initPageAdapter(); initPointer(); initEvent(); } //为控件绑定事件,绑定适配器 privatevoidinitEvent(){ viewPager.setAdapter(adapter); viewPager.addOnPageChangeListener(newGuidePageChangeListener()); } //初始化ViewPager privatevoidinitPageAdapter(){ /** *对于这几个想要动态载入的page页面,使用LayoutInflater.inflate()来找到其布局文件,并实例化为View对象 */ LayoutInflaterinflater=LayoutInflater.from(this); Viewpage1=inflater.inflate(R.layout.page1,null); Viewpage2=inflater.inflate(R.layout.page2,null); Viewpage3=inflater.inflate(R.layout.page3,null); //添加到集合中 viewPages.add(page1); viewPages.add(page2); viewPages.add(page3); adapter=newPagerAdapter(){ //获取当前界面个数 @Override publicintgetCount(){ returnviewPages.size(); } //判断是否由对象生成页面 @Override publicbooleanisViewFromObject(Viewview,Objectobject){ returnview==object; } @Override publicvoiddestroyItem(ViewGroupcontainer,intposition,Objectobject){ container.removeView(viewPages.get(position)); } //返回一个对象,这个对象表明了PagerAdapter适配器选择哪个对象放在当前的ViewPager中 @Override publicObjectinstantiateItem(ViewGroupcontainer,intposition){ Viewview=viewPages.get(position); container.addView(view); returnview; } }; } //绑定控件 privatevoidinitView(){ viewPager=(ViewPager)findViewById(R.id.viewPager); group=(ViewGroup)findViewById(R.id.viewGroup); } //初始化下面的小圆点的方法 privatevoidinitPointer(){ //有多少个界面就new多长的数组 imageViews=newImageView[viewPages.size()]; for(inti=0;i<imageViews.length;i++){ imageView=newImageView(this); //设置控件的宽高 imageView.setLayoutParams(newLayoutParams(25,25)); //设置控件的padding属性 imageView.setPadding(20,0,20,0); imageViews[i]=imageView; //初始化第一个page页面的图片的原点为选中状态 if(i==0){ //表示当前图片 imageViews[i].setBackgroundResource(R.mipmap.page_indicator_focused); /** *在java代码中动态生成ImageView的时候 *要设置其BackgroundResource属性才有效 *设置ImageResource属性无效 */ }else{ imageViews[i].setBackgroundResource(R.mipmap.page_indicator_unfocused); } group.addView(imageViews[i]); } } //ViewPager的onPageChangeListener监听事件,当ViewPager的page页发生变化的时候调用 publicclassGuidePageChangeListenerimplementsViewPager.OnPageChangeListener{ @Override publicvoidonPageScrolled(intposition,floatpositionOffset,intpositionOffsetPixels){ } //页面滑动完成后执行 @Override publicvoidonPageSelected(intposition){ //判断当前是在那个page,就把对应下标的ImageView原点设置为选中状态的图片 for(inti=0;i<imageViews.length;i++){ imageViews[position].setBackgroundResource(R.mipmap.page_indicator_focused); if(position!=i){ imageViews[i].setBackgroundResource(R.mipmap.page_indicator_unfocused); } } } //监听页面的状态,0--静止1--滑动2--滑动完成 @Override publicvoidonPageScrollStateChanged(intstate){ } } }
这样,一个简单地滑动图片的Demo就完成了,需要注意的地方有:在java代码中生成ImageView的时候,如果想为其设置显示的图片,要使用setBackgroundResource()方法而不是setImageResource()方法
以上所述是小编给大家介绍的Android开发之使用ViewPager实现图片左右滑动切换效果,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的,再此也非常感谢大家对毛票票网站的支持!