Android UI设计与开发之使用ViewPager实现欢迎引导页面

本系列文章都会以一个程序的实例开发为主线来进行讲解,以求达到一个循序渐进的学习效果,这样更能加深大家对于程序为什么要这样写的用意,理论加上实际的应用才能达到事半功倍的效果,不是吗?

最下方有源码的下载地址,几乎源码的每一行都有注释,写的通俗易懂,非常清晰,如有不懂的可以留言,本博主一定尽心尽力,为大家答题解惑,希望大家多多支持,好的,话不多说,让我们回归到今天的正题。

一、实现的效果图

也许是养成了这样一个习惯,每次看别人的代码前,必须要先看实现的效果图达到了一个什么样的效果,是不是跟自己想要实现的效果类似,有图才有真相嘛,呵呵。

二、编码前的准备工作

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

三、项目结构图

四、具体的编码实现

1、  布局界面比较简单,加入ViewPager组件,以及底部的引导小点,activity_main.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/ll"
 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> 

2、其中小点的图片用一个selector来控制颜色,point.xml:

<?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>

3、 ViewPager适配器代码,ViewPagerAdapter.java:

package com.yangyu; 

import java.util.ArrayList; 

import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View; 

/**
 * @author yangyu
 * 功能描述:ViewPager适配器,用来绑定数据和view
 */
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));
 }
}

4、主程序入口类,MainActivity.java:

package com.yangyu; 

import java.util.ArrayList; 

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.widget.ImageView;
import android.widget.LinearLayout; 

import com.example.myguideview01.R; 

/**
 * @author yangyu
 * 功能描述:主程序入口类
 */
public class MainActivity extends Activity implements OnClickListener,OnPageChangeListener {
 //定义ViewPager对象
 private ViewPager viewPager; 

 //定义ViewPager适配器
 private ViewPagerAdapter vpAdapter; 

 //定义一个ArrayList来存放View
 private ArrayList<View> views; 

 //引导图片资源
 private static final int[] pics = {R.drawable.guide1,R.drawable.guide2,R.drawable.guide3,R.drawable.guide4}; 

 //底部小点的图片
 private ImageView[] points; 

 //记录当前选中位置
 private int currentIndex; 

 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main); 

 initView(); 

 initData();
 } 

 /**
 * 初始化组件
 */
 private void initView(){
 //实例化ArrayList对象
 views = new ArrayList<View>(); 

 //实例化ViewPager
 viewPager = (ViewPager) findViewById(R.id.viewpager); 

 //实例化ViewPager适配器
 vpAdapter = new ViewPagerAdapter(views);
 } 

 /**
 * 初始化数据
 */
 private void initData(){
 //定义一个布局并设置参数
 LinearLayout.LayoutParams mParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT,
          LinearLayout.LayoutParams.FILL_PARENT); 

 //初始化引导图片列表
 for(int i=0; i<pics.length; i++) {
  ImageView iv = new ImageView(this);
  iv.setLayoutParams(mParams);
  iv.setImageResource(pics[i]);
  views.add(iv);
 } 

 //设置数据
 viewPager.setAdapter(vpAdapter);
 //设置监听
 viewPager.setOnPageChangeListener(this); 

 //初始化底部小点
 initPoint();
 } 

 /**
 * 初始化底部小点
 */
 private void initPoint(){
 LinearLayout linearLayout = (LinearLayout) findViewById(R.id.ll);  

 points = new ImageView[pics.length]; 

 //循环取得小点图片
 for (int i = 0; i < pics.length; 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 >= pics.length) {
  return;
  }
  viewPager.setCurrentItem(position);
 } 

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

  currentIndex = positon;
 }
}

这篇主要是让大家能够实现一个简单的例子,让你的程序先动起来,才有信心和勇气挑战更复杂的UI设计和开发,在后面的几篇章节中,博主也会以同样生动和富有激情的讲解,给大家带来更加的复杂的演示和代码,如仿微信、和人人网的引导界面的开发,加入了动画的效果,运行起来也会更炫一点。

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

(0)

相关推荐

  • Android ViewPager导航小圆点实现无限循环效果

    之前用View Pager做了一个图片切换的推荐栏(就类似与淘宝.头条客户端顶端的推荐信息栏),利用View Pager很快就能实现,但是一次无意间使用淘宝APP的时候,突然发现它的效果和我做的还不一样,淘宝APP的推荐栏可以左右无限循环切换,而ViewPager自身其实并没有支持这个功能. 其实实现这个无限循环不难,只需要在数据源的首尾各添加一张多余的图片,在onPagerChangeListener()中监听position<1和position>(总数据条目-1)就可以了.另外一点需要注

  • Android中TabLayout+ViewPager实现tab和页面联动效果

    TabLayout+ViewPager实现tab和页面联动效果 xml中: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" an

  • Android ViewPager实现智能无限循环滚动回绕效果

    android系统提供的ViewPager标准方式是左右可以自由滑动,但是滑动到最左边的极限位置是第一个page,滑动到最右边的位置是最后一个page,当滑动到最左或者最右时候,就不能再滑动/滚动了,这是Android系统默认的ViewPager实现方式. 但是有些情况下开发者可能希望ViewPager能够智能的无限循环滚动回绕,比如现在总共有编号1, 2, 3, 4, 5的5个Page. (1)当用户手指从右往左滚动到最右边/最后面的页面5时候,如果此时用户继续拖住ViewPager往左边滑动

  • Android仿微信Viewpager-Fragment惰性加载(lazy-loading)

    前言 今天起床,拿起手机开机第一时间当然是打开微信了,左右滑动Viewpager,发现它使用了一种叫惰性加载,或者说懒加载(lazy-loading)的方式加载Viewpager中的Fragment.效果如图: 什么是lazy-loading呢?顾名思义就是在必要的时候才加载,否则不进行View的绘制和数据的加载.原因是Viewpager一次只会显示一个页卡,那么刚开始的时候,只需加载第一张Fragment页卡,其他的不加载,当用户向右滑动切换再进行加载.因为其他Fragment对于用户来说是不

  • Android 中ViewPager中使用WebView的注意事项

    Android 中ViewPager中使用WebView的注意事项 前言: 今天在做项目时遇到了一个小问题 首先使用ViewPager显示多个页面,然后在每个页面上使用Fragment显示数据,其中有一部分数据是通过WebView加载的Html标签. 具体xml布局如下 <?xml version="1.0" encoding="utf-8"?> <ScrollView xmlns:android="http://schemas.andr

  • Android开发中如何解决Fragment +Viewpager滑动页面重复加载的问题

    前言 之前在做一个Viewpager上面加载多个Fragment时总会实例化已经创建好的Fragmnet对象类似 viewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) { @Override public Fragment getItem(int position) { switch(position){ case 0: fragments=new Fragmnet01(); break; case

  • Android使用ViewPager实现图片滑动预览效果

    本文为大家分享了Android ViewPager实现图片滑动预览效果展示的具体代码,供大家参考,具体内容如下 效果图: 滑动前: 滑动后: 代码非常简单,实现起来很容易 xml代码: <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/ap

  • Android UI设计与开发之使用ViewPager实现欢迎引导页面

    本系列文章都会以一个程序的实例开发为主线来进行讲解,以求达到一个循序渐进的学习效果,这样更能加深大家对于程序为什么要这样写的用意,理论加上实际的应用才能达到事半功倍的效果,不是吗? 最下方有源码的下载地址,几乎源码的每一行都有注释,写的通俗易懂,非常清晰,如有不懂的可以留言,本博主一定尽心尽力,为大家答题解惑,希望大家多多支持,好的,话不多说,让我们回归到今天的正题. 一.实现的效果图 也许是养成了这样一个习惯,每次看别人的代码前,必须要先看实现的效果图达到了一个什么样的效果,是不是跟自己想要实

  • Android UI设计与开发之实现应用程序只启动一次引导界面

    这篇文章算是对整个引导界面开发专题的一个终结了吧,个人觉得大部分的引导界面基本上都是千篇一律的,只要熟练掌握了一个,基本上也就没什么好说的了,要是在今后的开发中遇到了更好玩,更有趣的引导界面,博主也会在这里及时的跟大家分享,今天的内容主要是教大家的应用程序只有在第一次启动的时候显示引导界面,以后在启动程序的时候就不再显示了. 其实要想实现这样的效果,只要使用SharedPreferences类,就会让程序变的非常简单,下面来详细介绍一下这个类的使用方法 一.SharedPreferences的详

  • Android UI设计与开发之仿人人网V5.9.2最新版引导界面

    这一篇我将会以人人网的引导界面为实例来展开详细的讲解,人人网的引导界面比较的新颖,不同于其他应用程序千篇一律的靠滑动来引导用户,而是以一个一个比较生动形象的动画效果展示在用户们的面前,有一种给人眼前一亮的感觉,话不多说,进入正题. 一.实现的效果图 欢迎界面: 引导界面1 引导界面 2 引导界面 3 二 .项目的目录结构 三.具体的编码实现 1.欢迎界面的xml布局,activity_welcome: <?xml version="1.0" encoding="utf-

  • Android UI设计系列之自定义ListView仿QQ空间阻尼下拉刷新和渐变菜单栏效果(8)

    好久没有写有关UI的博客了,刚刚翻了一下之前的博客,最近一篇有关UI的博客:Android UI设计系列之自定义Dialog实现各种风格的对话框效果(7) ,实现各种风格效果的对话框,在那篇博客写完后由于公司封闭开发封网以及其它原因致使博客中断至今,中断这么久很是惭愧,后续我会尽量把该写的都补充出来.近来项目有个需求,要做个和QQ空间类似的菜单栏透明度渐变和下拉刷新带有阻尼回弹的效果.于是花点时间动手试了试,基本上达到了QQ空间的效果,截图如下: 通过观察QQ空间的运行效果,发现当往上滚动时菜单

  • Android UI设计系列之自定义ViewGroup打造通用的关闭键盘小控件ImeObserverLayout(9)

    转载请注明出处:http://blog.csdn.net/llew2011/article/details/51598682 我们平时开发中总会遇见一些奇葩的需求,为了实现这些需求我们往往绞尽脑汁有时候还茶不思饭不香的,有点夸张了(*^__^*)--我印象最深的一个需求是在一段文字中对部分词语进行加粗显示.当时费了不少劲,不过还好,这个问题最终解决了,有兴趣的童靴可以看一下:Android UI设计之<六>使用HTML标签,实现在TextView中对部分文字进行加粗显示. 之前产品那边提了这样

  • Android UI设计系列之自定义Dialog实现各种风格的对话框效果(7)

    虽然Android给我们提供了众多组件,但是使用起来都不是很方便,我们开发的APK都有自己的风格,如果使用了系统自带的组件,总是觉得和应用的主题不着边际并且看起来也不顺心,那我们就需要自定义了,为了方便大家对自定义组件的学习,我接下来准备了几遍有关自定义的Dialog的文章,希望对大家有帮助. 在开发APK中最常见的估计就数弹出对话框了,这种对话框按照按钮数量来分大致是三种:一个按钮,两个按钮,三个按钮.现在要讲的就是按照按钮数量分为以上三类吧(当然了可以有更多的按钮,只要你愿意). 自定义Di

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

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

  • Android UI设计与开发之ViewPager仿微信引导界面以及动画效果

    基于前两篇比较简单的实例做铺垫之后,这一篇我们来实现一个稍微复杂一点的引导界面的效果,当然也只是稍微复杂了一点,对于会的人来说当然还是so easy!正所谓会者不难,难者不会,大概说的就是这个意思了吧.好的,话不多说,回归正题. 这篇要实现的是一个仿微信的动画效果,虽然这种效果的实现在网上到处都有,但是我还是想站在中低端开发者的角度去告诉大家是如何实现的,当然实现的方式有很多,我也只是列出了我认为实现起来比较方便的一种方法,希望大家能够受用. 一.实现的效果图 有图才有真相,上图先: 点击按钮后

  • Android UI设计系列之自定义TextView属性实现带下划线的文本框(4)

    在Android开发过程中,如果Android系统自带的属性不能满足我们日常开发的需求,那么就需要我们给系统控件添加额外的属性了.假如有个需求是实现带下划线的文本显示(下划线),如果不使用自定义属性的话实现起来也不太难(起码我认为的实现方式是有许多种的),今天就讲解一下如何使用自定义属性来实现上述带下划线的文本框吧.还好Android中自定义属性不是很复杂,也可以归纳为三步走吧. 老规矩,还是先贴出工程目录吧: 一.添加属性文件 在values文件夹中新建attrs.xml文件,在文件中新建属性

  • Android UI设计系列之自定义SwitchButton开关实现类似IOS中UISwitch的动画效果(2)

    做IOS开发的都知道,IOS提供了一个具有动态开关效果的UISwitch组件,这个组件很好用效果相对来说也很绚丽,当我们去点击开关的时候有动画效果,但遗憾的是Android上并没有给我们提供类似的组件(听说在Android4.0的版本上提供了具有动态效果的开关组件,不过我还没有去看文档),如果我们想实现类似的效果那该怎么办了呢?看来又得去自定义了. 公司的产品最近一直在做升级,主要做的就是把界面做的更绚丽更美观给用户更好的体验(唉,顾客是上帝......),其中的设置功能中就有开关按钮,原来的开

随机推荐