ViewPager实现漂亮的引导页

废话就不多说了,直接上效果图和代码

fry.Activity01

package fry;

import java.util.ArrayList;
import java.util.Collection;
import java.util.Iterator;
import java.util.List;
import java.util.ListIterator;

import com.example.viewPager.R;

import android.app.Activity;
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.view.ViewGroup.LayoutParams;
import android.widget.ImageView;
import android.widget.LinearLayout;

public class Activity01 extends Activity implements OnPageChangeListener,OnClickListener{
 private ViewPager viewPager;
 private List<View> views;//用来存放放进ViewPager里面的ImageView
 private int[] imageID;//
 private ImagePagerAdapter adapter;//适配器
 private LinearLayout linearLayout;
 private int currentPoint;//当前被选中中页面的下标
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  // TODO Auto-generated method stub
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity01);
  initData();
  initView();

 }
 //初始化view
 void initView(){
  adapter=new ImagePagerAdapter(views);
  viewPager=(ViewPager) findViewById(R.id.viewPager);
  viewPager.setAdapter(adapter);
  linearLayout=(LinearLayout) findViewById(R.id.linearLayout);
  initPoint();
  viewPager.setOnPageChangeListener(this);
 }

 //初始化数据
 void initData(){
  //将图片的id全部放到imageID集合中
  imageID=new int[]{R.drawable.guide1,R.drawable.guide2,R.drawable.guide3,R.drawable.guide4};
  views=new ArrayList<View>();
  //给iamgeView设置LayoutParams参数
  LayoutParams layoutParams=new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
  for(int i:imageID){
   //不确定1
   ImageView imageView=new ImageView(this);
   imageView.setImageResource(i);
   imageView.setLayoutParams(layoutParams);
   views.add(imageView);
  }

 }

 /*
  * 初始化页面下方的点
  */
 private void initPoint(){
  ImageView[] imageView=new ImageView[imageID.length];
  for(int i=0;i<linearLayout.getChildCount();i++){
   imageView[i]=(ImageView) linearLayout.getChildAt(i);
   imageView[i].setImageResource(R.drawable.point_normal);
   imageView[i].setOnClickListener(this);
   imageView[i].setTag(i);
  }
  currentPoint=0;
  imageView[currentPoint].setImageResource(R.drawable.point_select);
 }
 /*
  * 将页面下方的点全部置为未选中状态
  */
 private ImageView[] clearPoint(){
  ImageView[] imageView=new ImageView[imageID.length];
  for(int i=0;i<linearLayout.getChildCount();i++){
   imageView[i]=(ImageView) linearLayout.getChildAt(i);
   imageView[i].setImageResource(R.drawable.point_normal);
  }
  return 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

 }

 /*
  * 页面被选中时候执行的方法
  * (non-Javadoc)
  * @see android.support.v4.view.ViewPager.OnPageChangeListener#onPageSelected(int)
  */
 @Override
 public void onPageSelected(int position) {
  // TODO Auto-generated method stub
  ImageView[] imageView= clearPoint();
  imageView[position].setImageResource(R.drawable.point_select);
 }

 //小圆点点击事件
 @Override
 public void onClick(View v) {
  // TODO Auto-generated method stub
  int i=(Integer) v.getTag();
  viewPager.setCurrentItem(i);
 }

}

fry.ImagePagerAdapter

package fry;

import java.util.ArrayList;
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 ImagePagerAdapter extends PagerAdapter{

 private List<View> views;

 public ImagePagerAdapter(List<View> views) {
  this.views=views;
 }

 @Override
 public int getCount() {
  // TODO Auto-generated method stub
  return this.views.size();
 }
 /**
  * position是在viewPager中显示图片的位置
  * 我对应的图片放到对应的位置就好了
  * instantiateItem和destroyItem是对应的
  * 一个是创建item,一个是销毁item
  */
 @Override
 public Object instantiateItem(ViewGroup container, int position) {
  ((ViewPager)container).addView(views.get(position));
  return views.get(position);
 }

 @Override
 public boolean isViewFromObject(View arg0, Object arg1) {
  // TODO Auto-generated method stub
  return arg0==arg1;
 }

 @Override
 public void destroyItem(ViewGroup container, int position, Object object) {
  ((ViewPager)container).removeView(views.get(position));
 }

}

/viewPager/res/layout/activity01.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical" >

 <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/linearLayout"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:orientation="horizontal"
  android:layout_gravity="bottom|center"
  >
  <ImageView
   android:id="@+id/point1"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:src="@drawable/point_select"
   android:padding="25dip"
   />
  <ImageView
   android:id="@+id/point2"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:src="@drawable/point_normal"
   android:padding="25dip"
   />
  <ImageView
   android:id="@+id/point3"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:src="@drawable/point_normal"
   android:padding="25dip"
   />
  <ImageView
   android:id="@+id/point4"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:src="@drawable/point_normal"
   android:padding="25dip"
   />

 </LinearLayout>

</FrameLayout>

1、多个控件(这里指小圆点)可以用List来一起访问

2、可用动态的控件设置tag来区分控件

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android利用ViewPager实现用户引导界面效果的方法

    本文实例讲述了Android利用ViewPager实现用户引导界面效果.分享给大家供大家参考,具体如下: 我相信有很多朋友在装完软件首次打开时,有很多软件都有一个软件功能介绍, 例如刚装完微信打开它,有很多介绍微信功能的图片,并且在屏幕下方有很多小圆点提示你当前图片的位置. 今天我就来实现这么个功能 所实现的功能: 1.可以左右滑动功能图片. 2.图片的索引 看出当前图片所在的位置. 3.可循环滑动. 4.图片的索引带有动画效果. 本次学习主要是利用ViewPager实现用户引导界面 在这里,我

  • Android控件ViewPager实现带有动画的引导页

    ViewPager实现带有动画的引导页,供大家参考,具体内容如下 好了,又到我们学习基础控件的时候了,其实引导页很简单,就是五张图片而已 一.ViewPager实现传统的引导页 传统的ViewPager实现引导页和ListView是一样道理的,只是把ListView的Item换成图片,把BaseAdapter换成PagerAdapter,我们先来看下传统引导页的效果图 步骤一:编写xml文件 既然用到的是ViewPager,那么xml文件就必须要有ViewPager,细心的你,可能会发现最后一页

  • Android启动引导页使用ViewPager实现

    我们在安装某个APP的时候,基本都会有一个引导页的提示,他们可以打广告,或者介绍新功能的加入和使用说明等. 一般都支持滑动并且下面有几个点,显示共有多少页和当前图片的位置,在IOS上这个实现起来比较简单,但在安卓上如何实现呢. 今天就和大家一起来学习用官方v4支持包下的ViewPager来实现这个效果. 先上图: 下面是我的实现,一个xml布局,一个GuideActivity和一个GuidePageAdapter.  先上XML. <?xml version="1.0" enco

  • Android UI设计与开发之ViewPager介绍和简单实现引导界面

    做Android开发加起来差不多也有一年多的时间了,总是想写点自己在开发中的心得体会与大家一起交流分享.共同进步,刚开始写也不知该如何下手,仔细想了一下,既然是刚开始写,那就从一个软件给人最直观的感受--UI设计开始写起吧,循序渐进,娓娓道来.博主在这里和大家一起学习,希望能多多支持,话不多说,下面就开始讲解UI设计的第一篇. 在讲解如何实现引导界面的效果之前,我想先详细介绍一下ViewPager类的使用和说明,因为这是开发引导界面最重要的类,没有之一. 一.ViewPager实现的效果图 二.

  • Android开发实战之漂亮的ViewPager引导页

    目前很多软件安装时都会出现引导页面,用户体验很好. 下面就来DIY下: 因为视频上传很麻烦,所以截图了. 首先看看效果图: 点击小点可自由切换,滑动也可以自由切换,最后一个导航页添加了点击跳转. 开始实现引导页: 一.采集需要的图片放入drawable文件里 二.初始化每个导航页的视图 import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.suppo

  • ViewPager打造轮播图Banner/引导页Guide

    前言 去年7月时,在Github发布了一个开源的Banner库,虽然Star不多,但还是有少部分人使用. Banner效果: Github链接地址:https://github.com/Allure0/LMBanners 昨天,有使用此库的同学提出需求,想在引导页的时候用这个库并且最后一页有进入按钮如何实现,为满足他的需求,也方便更多开发者是快速实现.进行了简单的扩展支持Guide模式的使用. Guide效果图: OK,效果如图所以,咱们此库满足了既可在Banner上使用也可以快速在第一次安装应

  • ViewPager实现漂亮的引导页

    废话就不多说了,直接上效果图和代码 fry.Activity01 package fry; import java.util.ArrayList; import java.util.Collection; import java.util.Iterator; import java.util.List; import java.util.ListIterator; import com.example.viewPager.R; import android.app.Activity; impor

  • Android开发实现的ViewPager引导页功能(动态加载指示器)详解

    本文实例讲述了Android开发实现的ViewPager引导页功能(动态加载指示器).分享给大家供大家参考,具体如下: 先看效果图咯~ 现在几乎每个App都会有引导页,是不是感觉很炫很厉害,所以就想做出来一个学习一下~让自己的App看起来更加的美观~ 现在来分析一下: 这个引导页可以分为俩部分~ 1.小红点--来提醒这是第几页了~ 2."开始体验"这个Button--可以进入主界面,但是要控制这个Button只能在最后一页出现 布局的话使用相对布局~ 那现在来看看布局吧: activi

  • ViewPager+PagerAdapter实现带指示器的引导页

    一个简单的引导页,由ViewPager和PagerAdapter组成,供大家参考,具体内容如下 package com.xspacing.viewpager; import java.util.ArrayList; import java.util.List; import android.app.Activity; import android.os.Bundle; import android.support.v4.view.ViewPager; import android.support

  • Android使用ViewPager完成app引导页

    本文实例为大家分享了Android使用ViewPager完成app引导页的具体代码,供大家参考,具体内容如下 public class MainActivity extends AppCompatActivity { // int[] resourceId = { // R.layout.first, // R.layout.second, // R.layout.third // }; List<View> mListView; ViewPager viewPager; ViewGroup

  • Android使用ViewPager实现启动引导页效果

    本文实例为大家分享了Android实现启动引导页效果的具体代码,供大家参考,具体内容如下 ViewPagerTwoActivity.java package cn.edu.zufe.app001; import androidx.annotation.NonNull; import androidx.appcompat.app.AppCompatActivity; import androidx.viewpager.widget.PagerAdapter; import androidx.vie

  • Android使用ViewPager实现启动引导页

    我们在安装某个APP的时候,基本都会有一个引导页的提示,他们可以打广告,或者介绍新功能的加入和使用说明等. 一般都支持滑动并且下面有几个点,显示共有多少页和当前图片的位置,在IOS上这个实现起来比较简单,但在安卓上如何实现呢. 今天就和大家一起来学习用官方v4支持包下的ViewPager来实现这个效果./p> 先上图: 下面是我的实现,一个xml布局,一个GuideActivity和一个GuidePageAdapter.  先上XML. <?xml version="1.0"

随机推荐