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实现图片左右滑动切换效果,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的,再此也非常感谢大家对毛票票网站的支持!