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

来源：互联网发布：python算法精解 pdf 编辑：程序博客网时间：2024/04/30 12:29

来自：http://blog.csdn.net/ywl5320/article/details/38413101

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

详细实现步骤如下：

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

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

项目目录如下：

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

[html] view plain copy
<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，分为选中和没选中两种状态。

[html] view plain copy
<?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类的适配器，用于显示引导页图片，代码如下（有注解）：

[java] view plain copy
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接口，才能对滑动事件作出相应的反应。

[java] view plain copy
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，有待优化和不足的地方希望大家多多提出，共同进步，哈哈哈！

0 0