一、实现的效果图

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

         

二、编码前的准备工作

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、ViewPager中View填充页面,item_view.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" > <ImageView
android:id="@+id/image"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="centerCrop" /> </LinearLayout>

3、其中小点的图片用一个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>

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

/**
* 功能描述: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));
}
}

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

public class MainActivity extends Activity {

    //定义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,R.drawable.guide5}; //底部小点的图片
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(){
LayoutInflater inflater = getLayoutInflater(); for(int i=0; i<pics.length; i++) {
View v = inflater.inflate(R.layout.item_view, null);
ImageView image = (ImageView)v.findViewById(R.id.image);
image.setImageResource(pics[i]);
views.add(v);
} //设置数据
viewPager.setAdapter(vpAdapter);
//设置监听
viewPager.setOnPageChangeListener(new pageListener()); //初始化底部小点
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(new pointListener());
//设置位置tag,方便取出与当前位置对应
points[i].setTag(i);
} //设置当面默认的位置
currentIndex = 0;
//设置为白色,即选中状态
points[currentIndex].setEnabled(false);
} private class pageListener implements OnPageChangeListener{ /**
* 当滑动状态改变时调用
*/
@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 }
/**
* 当新的页面被选中时调用
*/
@Override
public void onPageSelected(int position) {
// 设置底部小点选中状态
setCurDot(position);
} } private class pointListener implements OnClickListener{
/**
* 通过点击事件来切换当前的页面
*/
@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;
} }

代码链接:http://pan.baidu.com/share/link?shareid=3328974888&uk=3909095065

本文转自:http://www.apkbus.com/android-125505-1-1.html?from=threadlink

【Android 复习】:第02期:引导界面(二)使用ViewPager实现欢迎引导页面的更多相关文章

  1. 【Android UI设计与开发】第03期:引导界面(三)仿微信引导界面以及动画效果

    基于前两篇比较简单的实例做铺垫之后,这一篇我们来实现一个稍微复杂一点的引导界面的效果,当然也只是稍微复杂了一点,对于会的人来说当然还是so easy!正所谓会者不难,难者不会,大概说的就是这个意思了吧 ...

  2. SharedPreference 存储小量数据,一般首次启动显示引导界面就用这个。

    写://添加一个SharedPreference并传入数据SharedPreference sharedPreferences = getSharedPreferences("share_d ...

  3. 【Android UI设计与开发】第02期:引导界面(二)使用ViewPager实现欢迎引导页面

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

  4. 【Android 复习】:第01期:引导界面(一)ViewPager介绍和使用详解

    一.ViewPager实现的效果图 二.ViewPager实现的功能 看到上面的效果图,想必大家已经猜出了这个类是干吗用的了,ViewPager类提供了多界面切换的新效果, 新效果有如下特征: < ...

  5. 【Android UI设计与开发】第05期:引导界面(五)实现应用程序只启动一次引导界面

    [Android UI设计与开发]第05期:引导界面(五)实现应用程序只启动一次引导界面 jingqing 发表于 2013-7-11 14:42:02 浏览(229501) 这篇文章算是对整个引导界 ...

  6. 【Android UI设计与开发】第04期:引导界面(四)仿人人网V5.9.2最新版引导界面

    这一篇我将会以人人网的引导界面为实例来展开详细的讲解,人人网的引导界面比较的新颖,不同于其他应用程序千篇一律的靠滑动来引导用户,而是以一个一个比较生动形象的动画效果展示在用户们的面前,有一种给人眼前一 ...

  7. 【Android UI设计与开发】第01期:引导界面(一)ViewPager介绍和使用详解

    做Android开发加起来差不多也有一年多的时间了,总是想写点自己在开发中的心得体会与大家一起交流分享.共同进步,刚开始写也不知该如何下手,仔细想了一下,既然是刚开始写,那就从一个软件给人最直观的感受 ...

  8. 【Android UI设计与开发】2.引导界面(二)使用ViewPager实现欢迎引导页面

    1.实现的效果 2.编码前的准备工作 ViewPager是Android3.0之后提供的新特性,所以要想让你的应用向下兼容就必须要android-support-v4.jar这个包的支持,这是一个来自 ...

  9. android——利用SharedPreference做引导界面

    很久以前就接触过sharedPreference这个android中的存储介质.但是一直没有实际使用过,今天在看之前做的“民用机型大全”的app时,突然想到可以使用sharedPreference类来 ...

随机推荐

  1. IOS如何刷新视图上的显示内容

    大家都知道,UItableView 有个 reloadData的方法,可以tableview刷新视图.而普通的View上面.我们如何刷新视图的呢? 下图是我做的一个用户登录之后显示用户昵称和个性签名还 ...

  2. JavaScript使用技巧

    使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查值是否有一个有效值,如果存在就返回true值.为了做这样的验证,我们可以使用!!操作符来实现是非常的方便与简单.对于变量可以使用 ...

  3. java连接远程服务器之manyged-ssh2 (windows和linux)

    一.所需要的jar包 需要借助Ganymed SSH的jar包:  ganymed-ssh2-262.jar 下载地址: http://www.ganymed.ethz.ch/ssh2/ API详情: ...

  4. PAT_1046 划拳

    啦啦啦.今天晚上火车回学校了.= =还是挺舍不得家里的. 题目描述: 划拳是古老中国酒文化的一个有趣的组成部分.酒桌上两人划拳的方法为:每人口中喊出一个数字,同时用手比划出一个数字.如果谁比划出的数字 ...

  5. (hdu)5652 India and China Origins 二分+dfs

    题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=5652 Problem Description A long time ago there ...

  6. 彻底理解Gradle的任务

    这是从我个人博客中复制过来的,没有重新进行排版,为了更好的阅读效果大家可以去我网站上阅读,地址:http://coolshell.info/blog/2015/07/gradle-tasks-guid ...

  7. 【BZOJ3884】【降幂大法】上帝与集合的正确用法

    Description 根据一些书上的记载,上帝的一次失败的创世经历是这样的: 第一天, 上帝创造了一个世界的基本元素,称做“元”. 第二天, 上帝创造了一个新的元素,称作“α”.“α”被定义为“元” ...

  8. data:image/png;base64是什么

    大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJ ...

  9. IntelliJ 一键添加双引号

    IntelliJ IDEA(目前最新版本为2016.2.5) 不直接支持一键向选取内容添加双引号,但可以通过配置 Live Template 实现此功能. 以下为配置方法(针对2016.2.5版,其它 ...

  10. 第一次写Makefile文件

    test.c文件内容 #include <stdio.h> int main(int argc, char const *argv[]) { printf("hahahah\n& ...