来自:http://blog.csdn.net/ywl5320/article/details/38413101
工作快半年了,想把工作中的一些有用的东西分享分享,于是想到了写博客,方便别人查看,也方便自己记录点滴。好了,客套话不多说。今天我要分享的是“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>
- <?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);
- }
- }
- 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);
- }
- }
- }
- }
最后是点击最后一个页面跳转到其他页面的效果:
OK,有待优化和不足的地方希望大家多多提出,共同进步,哈哈哈!