ViewPager之引导界面---实现欢迎引导页面

最新推荐文章于 2021-05-25 20:55:44 发布

叨叨的蚂蚁

最新推荐文章于 2021-05-25 20:55:44 发布

阅读量7.8k

点赞数 2

分类专栏： android开发文章标签： viewpager

本文链接：https://blog.csdn.net/h378588270/article/details/42104821

版权

android开发专栏收录该内容

19 篇文章 0 订阅

订阅专栏

最近在看ViewPager，于是乎弄个引导界面来玩玩.....

引导界面，采用现在比较主流的方式：左右滑动加载；小圆点提示；在最后一个页面，点击button，进入功能界面

第一种： ViewFlipper + GestureDetector

第二种： ActivityGroup + GestureDetector

第三种： ViewPager (Android3.0+)

第四种： ViewFlow (开源项目)

这里弄的是第三种，

一、先看的效果图

二、编码前准备

ViewPager是Android3.0之后提供的新特性，所以要想让你的应用向下兼容就必须要android-support-v4.jar这个包的支持，这是一个来自google提供的一个附加包。

项目结构图:

1、布局界面,加入ViewPager组件，以及底部的引导小点，guide_layout.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />

	<LinearLayout
        android:id="@+id/point"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="24.0dip"
        android:orientation="horizontal"
        >
 
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:clickable="true"
            android:padding="15.0dip"
            android:src="@drawable/point"/>
 
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:clickable="true"
            android:padding="15.0dip"
            android:src="@drawable/point"/>
 
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:clickable="true"
            android:padding="15.0dip"
            android:src="@drawable/point"/>
 
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:clickable="true"
            android:padding="15.0dip"
            android:src="@drawable/point"/>
    </LinearLayout>
</RelativeLayout>

guide_page1.xml 注guide_page2.xml，guide_page3.xml布局一样

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

</LinearLayout>

guide_page4.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/guide4"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" android:background="@drawable/view_guide4">

    <LinearLayout
        android:id="@+id/layout1"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_alignParentBottom="true"
        android:orientation="vertical" android:gravity="center_vertical">

        <Button
            android:id="@+id/ok"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:layout_marginTop="5dp"
            android:gravity="center"
            android:layout_gravity="center_vertical|center_horizontal"
            android:text="马上体验"
            android:background="@drawable/start_btn" />

    </LinearLayout>

</RelativeLayout>

point.xml：控制小点的图片，用一个selector来控制颜色

<?xml version="1.0" encoding="UTF-8"?>
<selector
  xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="true" android:drawable="@drawable/point_normal" />
    <item android:state_enabled="false" android:drawable="@drawable/point_select" />
</selector>

三、主程序入口类， MainActivity.java：

public class MainActivity extends Activity implements OnClickListener,OnPageChangeListener {
	//定义ViewPager对象
	private ViewPager viewPager;
	
	//定义ViewPager适配器
	private ViewPagerAdapter vpAdapter;
	
	//定义一个ArrayList来存放View
	private ArrayList<View> views;

	// 定义各个界面View对象
	private View view1, view2, view3, view4;
	 	
	//底部小点的图片
    private ImageView[] points;
    
    //记录当前选中位置
    private int currentIndex;
    
  
    
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		
	    setContentView(R.layout.guide_layout);
		
		initView();
		initData();	
	}

	/**
	 * 初始化组件
	 */
	private void initView() {
		//实例化各个界面的布局对象 
		LayoutInflater mLi = LayoutInflater.from(this);
		view1 = mLi.inflate(R.layout.guide_page1, null);
		view2 = mLi.inflate(R.layout.guide_page2, null);
		view3 = mLi.inflate(R.layout.guide_page3, null);
		view4 = mLi.inflate(R.layout.guide_page4, null);
	
		// 实例化ViewPager
		viewPager = (ViewPager) findViewById(R.id.viewpager);
		// 实例化ArrayList对象
		views = new ArrayList<View>();
		// 实例化ViewPager适配器
		vpAdapter = new ViewPagerAdapter(views);
		//实例化开始按钮
		//startBt = (Button) view4.findViewById(R.id.startBtn);
	}
	/**
	 * 初始化数据
	 */
	private void initData() {
		// 设置监听
		viewPager.setOnPageChangeListener(this);
		// 设置适配器数据
		viewPager.setAdapter(vpAdapter);

		//将要分页显示的View装入数组中		
		views.add(view1);
		views.add(view2);
		views.add(view3);
		views.add(view4);		
	        
        //初始化底部小点
        initPoint(views.size());
	}
	/**
	 * 初始化底部小点
	 */
	private void initPoint(int views){
		LinearLayout linearLayout = (LinearLayout) findViewById(R.id.point);       
		
        points = new ImageView[views];

        //循环取得小点图片
        for (int i = 0; i < views; i++) {
        	//得到一个LinearLayout下面的每一个子元素
        	points[i] = (ImageView) linearLayout.getChildAt(i);
        	//默认都设为灰色
        	points[i].setEnabled(true);
        	//给每个小点设置监听
        	points[i].setOnClickListener(this);
        	//设置位置tag，方便取出与当前位置对应
        	points[i].setTag(i);
        }
        
        //设置当面默认的位置
        currentIndex = 0;
        //设置为白色，即选中状态
        points[currentIndex].setEnabled(false);
	}
	
	/**
	 * 当滑动状态改变时调用
	 */
	@Override
	public void onPageScrollStateChanged(int arg0) {

	}
	
	/**
	 * 当当前页面被滑动时调用
	 */

	@Override
	public void onPageScrolled(int arg0, float arg1, int arg2) {

	}
	
	/**
	 * 当新的页面被选中时调用
	 */

	@Override
	public void onPageSelected(int position) {
		//设置底部小点选中状态
        setCurDot(position);
	}

	/**
	 * 通过点击事件来切换当前的页面
	 */
	@Override
	public void onClick(View v) {
		 int position = (Integer)v.getTag();
         setCurView(position);
         setCurDot(position);		
	}

	/**
	 * 设置当前页面的位置
	 */
	private void setCurView(int position){
         if (position < 0 || position >= 4) {
             return;
         }
         viewPager.setCurrentItem(position);
     }

     /**
     * 设置当前的小点的位置
     */
    private void setCurDot(int positon){
         if (positon < 0 || positon > 3 || currentIndex == positon) {
             return;
         }
         points[positon].setEnabled(false);
         points[currentIndex].setEnabled(true);

         currentIndex = positon;
     }

ViewPager适配器代码， ViewPagerAdapter.java：

public class ViewPagerAdapter extends PagerAdapter {
	
	//界面列表
    private ArrayList<View> views;
    
    public ViewPagerAdapter (ArrayList<View> views){
        this.views = views;
    }
       
	/**
	 * 获得当前界面数
	 */
	@Override
	public int getCount() {
		 if (views != null) {
             return views.size();
         }      
         return 0;
	}

	/**
	 * 初始化position位置的界面
	 */
    @Override
    public Object instantiateItem(View view, int position) {
       
        ((ViewPager) view).addView(views.get(position), 0);
       
        return views.get(position);
    }
    
    /**
	 * 判断是否由对象生成界面
	 */
	@Override
	public boolean isViewFromObject(View view, Object arg1) {
		return (view == arg1);
	}

	/**
	 * 销毁position位置的界面
	 */
    @Override
    public void destroyItem(View view, int position, Object arg2) {
        ((ViewPager) view).removeView(views.get(position));       
    }

参考：

http://www.apkbus.com/portal.php?mod=view&aid=4206

源码可以自己到我的资源库下载http://download.csdn.net/detail/h378588270/8291497

叨叨的蚂蚁

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
2
评论
ViewPager之引导界面---实现欢迎引导页面

最近在看ViewPager，于是乎弄个引导界面来玩玩.....引导界面，采用现在比较主流的方式：左右滑动加载；小圆点提示；在最后一个页面，点击button，进入功能界面第一种： ViewFlipper + GestureDetector 第二种： ActivityGroup + GestureDetector 第三种： ViewPager (Android3.0+)
复制链接

扫一扫

专栏目录