Android 启动引导页（动态生成底部导航圆点）

Posted 2022-11-27 ywl5320

        工作快半年了，想把工作中的一些有用的东西分享分享，于是想到了写博客，方便别人查看，也方便自己记录点滴。好了，客套话不多说。今天我要分享的是“android 启动引导页”效果的实现，底部的导航圆点根据引导页的数量动态生成，不是在布局文件里写死了的，主要用到了ViewPager这个类。先看看效果：

详细实现步骤如下：

第一：准备图片资源，这里我准备了几张火影忍者的图片（5张）

和小圆点是否选中的两张图片

            

项目目录如下：

第二：先编写布局文件activity_main.xml。里面用到了ViewPager这个滑动组件，铺满整个窗体用于显示引导页的图片，还有一个居于底部的LinearLayout，用于动态添加引导图标（小圆点）。

<RelativeLayout 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"
    tools:context="$relativePackage.$activityClass" >

    <android.support.v4.view.ViewPager
        android:id="@+id/my_viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />
    <LinearLayout 
        android:id="@+id/dot_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:gravity="center"
        android:layout_marginBottom="40dip"
        >
    </LinearLayout>

</RelativeLayout>

第三：编写导航小圆点的selector，分为选中和没选中两种状态。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@drawable/dot_normal" android:state_selected="false"/>
    <item android:drawable="@drawable/dot_selected" android:state_selected="true"/>
</selector>

好了布局和基本selector已经完成，接下来就开始编写适配器和MainActivity。

第四：编写继承PagerAdapter的VpAdapter类的适配器，用于显示引导页图片，代码如下（有注解）：

package com.vpdemo.viewpagerdemo;

import java.util.ArrayList;

import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

public class VpAdapter extends PagerAdapter 
	
	private ArrayList<ImageView> imageViews;
	
	public VpAdapter(ArrayList<ImageView> imageViews) 
		this.imageViews = imageViews;
	

	/**
	 * 获取当前要显示对象的数量
	 */
	@Override
	public int getCount() 
		// TODO Auto-generated method stub
		return imageViews.size();
	

	/**
	 * 判断是否用对象生成界面
	 */
	@Override
	public boolean isViewFromObject(View arg0, Object arg1) 
		// TODO Auto-generated method stub
		return arg0 == arg1;
	

	/**
	 * 从ViewGroup中移除当前对象（图片）
	 */
	@Override
	public void destroyItem(ViewGroup container, int position, Object object) 
		container.removeView(imageViews.get(position));
	
	
	/**
	 * 当前要显示的对象（图片）
	 */
	@Override
	public Object instantiateItem(ViewGroup container, int position) 
		container.addView(imageViews.get(position));
		return imageViews.get(position);
	
	

第五：MainActivity实现了OnPageChangeListener接口，才能对滑动事件作出相应的反应。

package com.vpdemo.viewpagerdemo;

import java.util.ArrayList;

import android.app.Activity;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageView;
import android.widget.Toast;
import android.widget.ImageView.ScaleType;
import android.widget.LinearLayout;
import android.widget.LinearLayout.LayoutParams;
import android.widget.TextView;

public class MainActivity extends Activity implements OnPageChangeListener
	
	private ViewPager vPager;
	private VpAdapter vpAdapter;
	private static int [] imgs = R.drawable.img1,R.drawable.img2,R.drawable.img3,R.drawable.img4,R.drawable.img5;//要显示的图片资源
	private ArrayList<ImageView> imageViews;//用于包含引导页要显示的图片
	private ImageView[] dotViews;//用于包含底部小圆点的图片，只要设置每个imageview的图片资源为刚刚写的dot_selector，选择和没选中就会有不同的效果，实现导航的功能。

    @Override
    protected void onCreate(Bundle savedInstanceState) 
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        vPager = (ViewPager)findViewById(R.id.my_viewpager);
        
        initImages();
        initDots();
        
        vpAdapter = new VpAdapter(imageViews);
        vPager.setAdapter(vpAdapter);
        vPager.setOnPageChangeListener(this);
    

    /**
     * 把引导页要显示的图片添加到集合中，以传递给适配器，用来显示图片。
     */
    
    private void initImages()
    
    	LayoutParams mParams = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);//设置每一张图片都填充窗口
        imageViews = new ArrayList<ImageView>();
        
        for(int i = 0; i < imgs.length; i++)
        
        	ImageView iv = new ImageView(this);
        	iv.setLayoutParams(mParams);//设置布局
        	iv.setImageResource(imgs[i]);//为Imageview添加图片资源
        	iv.setScaleType(ScaleType.FIT_XY);//设置图片拉伸效果
        	imageViews.add(iv);
        	if(i== imgs.length - 1)//为最后一张添加点击事件
        	
        		iv.setOnClickListener(new OnClickListener() 
					
					@Override
					public void onClick(View v) 
						Toast.makeText(MainActivity.this, "跳转。。。", Toast.LENGTH_SHORT).show();
					
				);
        	
        
    
    
    /**
     * 根据引导页的数量，动态生成相应数量的导航小圆点，并添加到LinearLayout中显示。
     */
    private void initDots()
    
    	LinearLayout layout = (LinearLayout)findViewById(R.id.dot_layout);
    	LayoutParams mParams = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
    	mParams.setMargins(10, 0, 10, 0);//设置小圆点左右之间的间隔
    	
    	dotViews = new ImageView[imgs.length];
    	
    	for(int i = 0; i < imageViews.size(); i++)
    	
    		ImageView imageView = new ImageView(this);
    		imageView.setLayoutParams(mParams);
    		imageView.setImageResource(R.drawable.dot_selector);
    		if(i== 0)
    		
    			imageView.setSelected(true);//默认启动时，选中第一个小圆点
    		
    		else 
    			imageView.setSelected(false);
			
    		dotViews[i] = imageView;//得到每个小圆点的引用，用于滑动页面时，（onPageSelected方法中）更改它们的状态。
    		layout.addView(imageView);//添加到布局里面显示
    	
    	
    
    
    
	@Override
	public void onPageScrollStateChanged(int arg0) 
		// TODO Auto-generated method stub
		
	

	@Override
	public void onPageScrolled(int arg0, float arg1, int arg2) 
		// TODO Auto-generated method stub
		
	

	/**
	 * arg0：当前滑动显示页面的索引值，可以根据这个值，来设置相应小圆点的状态。
	 */
	@Override
	public void onPageSelected(int arg0) 
		for(int i = 0; i < dotViews.length; i++)
		
			if(arg0 == i)
			
				dotViews[i].setSelected(true);
			
			else 
				dotViews[i].setSelected(false);
			
		
		
	

至此android 引导页效果就完成了。

最后是点击最后一个页面跳转到其他页面的效果：

OK，有待优化和不足的地方希望大家多多提出，共同进步，哈哈哈！