viewPager实现引导页
ViewPager多页面滑动效果
1.Android的左右滑动在实际编程经常能用到,比如查看多张图片,左右
切换tab页。
2.自android 3.0之后的SDK中提供了android-support-V4包用以实现
版本兼容,让老版本系统下的应用通过加入jar包实现扩展,其中有一
个可以实现左右滑动的类ViewPager
ViewPager多页面滑动效果
1.Android的左右滑动在实际编程经常能用到,比如查看多张图片,左右
切换tab页。
2.自android 3.0之后的SDK中提供了android-support-V4包用以实现
版本兼容,让老版本系统下的应用通过加入jar包实现扩展,其中有一
个可以实现左右滑动的类ViewPager
今天我们就用ViewPager类来实现引导页的实战案例
实现功能:
1.实现ViewPager多页面滑动效果。
2.下方的显示当前焦点页的原点可以同步。
3.点击原点可以跳转到当前原点的焦点页面。
一、在布局中(xml)
<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.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:id="@+id/pointsLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="bottom|center_horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/point_normal"
android:padding="15dp"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/point_normal"
android:padding="15dp"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/point_normal"
android:padding="15dp"/>
</LinearLayout>
</FrameLayout>
二、在java代码中(主类)
package com.example.viewpager;
import java.util.ArrayList;
import java.util.List;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup.LayoutParams;
import android.widget.ImageView;
import android.widget.LinearLayout;
public class MainActivity extends Activity implements OnPageChangeListener,OnClickListener
{
private ViewPager viewPager;
private List<View> views;
private ViewPagerAdapter adapter;
// 引导页界面3张图片的初始化
private int[] guideImages={R.drawable.show01,R.drawable.show02,R.drawable.show03};
private ImageView[] points;
private LinearLayout pointsLayout;
// 当前选择页下标
private int currentPoint;
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
initData();
}
// 初始化view
private void initView()
{
pointsLayout=(LinearLayout) findViewById(R.id.pointsLayout);
viewPager=(ViewPager) findViewById(R.id.viewPager);
views=new ArrayList<View>();
adapter=new ViewPagerAdapter(views);/*向ViewPagerAdapter即绑定数据类中传递参数views*/
}
// 初始化数据
private void initData()
{
LayoutParams layoutParams=new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
for(int i:guideImages)
{
ImageView imageView=new ImageView(this);
imageView.setImageResource(i);
imageView.setLayoutParams(layoutParams);
views.add(imageView);
}
initPoint();
viewPager.setAdapter(adapter);/*向ViewPagerAdapter即绑定数据类中传递参数views,前面已对adapter初始化*/
viewPager.setOnPageChangeListener(this);/*设置viewPager的改变事件*/
}
// 初始化原点
private void initPoint()
{
points=new ImageView[guideImages.length];
for(int i=0;i<pointsLayout.getChildCount();i++)
{
points[i]=(ImageView) pointsLayout.getChildAt(i);/*遍历LinearLayout中的子ImageView*/
points[i].setImageResource(R.drawable.point_normal);/*获取原点的初始状态*/
points[i].setOnClickListener(this);/*设置原点的点击事件*/
points[i].setTag(i);/*设置原点标签,便于后面的onClick方法获取点击的那个原点*/
}
currentPoint=0;
points[currentPoint].setImageResource(R.drawable.point_select);
}
// 这里是实现OnPageChangeListener的三个方法,用到了其中的onPageSelected
@Override
public void onPageScrollStateChanged(int arg0)
{
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2)
{
}
// 当新的页面被选中时调用
@Override
public void onPageSelected(int position)
{
setCurrentPoint(position);
}
private void setCurrentPoint(int position)
{
for(int i=0;i<pointsLayout.getChildCount();i++)
{
points[i]=(ImageView) pointsLayout.getChildAt(i);
points[i].setImageResource(R.drawable.point_normal);
}
points[position].setImageResource(R.drawable.point_select);
}
@Override
// 点击事件的实现方法
public void onClick(View v)
{
// 利用getTag方法来获取当前点击的原点
int i=(int) v.getTag();
// 设置当前显示页
viewPager.setCurrentItem(i);
}
}
三、ViewPagerAdapter类的实现(次类)
package com.example.viewpager;
import java.util.List;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.ViewGroup;
public class ViewPagerAdapter extends PagerAdapter
{ private List<View> views;
public ViewPagerAdapter( List<View> views){
this.views=views;
}
// 获取当前页面数
public int getCount()
{
return this.views.size();
}
// 初始化position位置的界面
public Object instantiateItem(ViewGroup container, int position)
{
((ViewPager)container).addView(views.get(position));
return views.get(position);
}
// 判断是否有对象生成界面
public boolean isViewFromObject(View arg0, Object arg1)
{
return arg0==arg1;
}
@Override
// 销毁页面
public void destroyItem(ViewGroup container, int position, Object object)
{
((ViewPager)container).removeView(views.get(position));
}
}
四、实现效果