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

做Android开发加起来差不多也有一年多的时间了,总是想写点自己在开发中的心得体会与大家一起交流分享、共同进步,刚开始写也不知该如何下手,仔细想了一下,既然是刚开始写,那就从一个软件给人最直观的感受——UI设计开始写起吧,循序渐进,娓娓道来。博主在这里和大家一起学习,希望能多多支持,话不多说,下面就开始讲解UI设计的第一篇。

在讲解如何实现引导界面的效果之前,我想先详细介绍一下ViewPager类的使用和说明,因为这是开发引导界面最重要的类,没有之一。

一、ViewPager实现的效果图

二、ViewPager实现的功能

看到上面的效果图,想必大家已经猜出了这个类是干吗用的了,ViewPager类提供了多界面切换的新效果,
新效果有如下特征:
<1>当前显示一组界面中的其中一个界面;
<2>当用户通过左右滑动界面时,当前的屏幕显示当前界面和下一个界面的一部分;
<3>滑动结束后,界面自动跳转到当前选择的界面中。

三、ViewPager详细说明

这是谷歌官方给我们提供的一个兼容低版本安卓设备的软件包,里面包囊了只有在安卓3.0以上可以使用的api。而viewpager就是其中之一利用它,我们可以做很多事情,从最简单的导航,到页面菜单等等。那如何使用它呢,与LisstView类似,我们也需要一个适配器,他就是PagerAdapter。看一下API的图片:

四、ViewPager的使用

既然我们已经知道了ViewPager类的功能和介绍,那么这个类到底怎么使用呢?这里我们分三个步骤来使用它:
1、在住布局文件里加入。

<android.support.v4.view.ViewPager //注意这个组件是用来显示左右滑动的界面的,如果不加载xml布局文件,他是不会显示内容的。 android:id="@+id/viewpager" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" >

2、加载要显示的页卡。

LayoutInflater lf = getLayoutInflater().from(this); view1 = lf.inflate(R.layout.layout1, null); view2 = lf.inflate(R.layout.layout2, null); view3 = lf.inflate(R.layout.layout3, null); viewList = new ArrayList<View>();// 将要分页显示的View装入数组中 viewList.add(view1); viewList.add(view2); viewList.add(view3);

3、在Activity里实例化ViewPager组件,并设置它的Adapter(就是PagerAdapter,方法与ListView一样的),在这里一般需要重写PagerAdapter。

PagerAdapter pagerAdapter = new PagerAdapter() { @Override public boolean isViewFromObject(View arg0, Object arg1) { return arg0 == arg1; } @Override public int getCount() { return viewList.size(); } @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView(viewList.get(position)); } @Override public int getItemPosition(Object object) { return super.getItemPosition(object); } @Override public CharSequence getPageTitle(int position) { return titleList.get(position); } @Override public Object instantiateItem(ViewGroup container, int position) { container.addView(viewList.get(position)); weibo_button=(Button) findViewById(R.id.button1); weibo_button.setOnClickListener(new OnClickListener() { public void onClick(View v) { intent=new Intent(ViewPagerDemo.this,WeiBoActivity.class); startActivity(intent); } }); return viewList.get(position); } }; viewPager.setAdapter(pagerAdapter);

这是重写PagerAdapter的一个方法,我们还可以这样做:

public class MyViewPagerAdapter extends PagerAdapter{ private List<View> mListViews; public MyViewPagerAdapter(List<View> mListViews) { this.mListViews = mListViews;//构造方法,参数是我们的页卡,这样比较方便。 } @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView(mListViews.get(position));//删除页卡 } @Override public Object instantiateItem(ViewGroup container, int position) { //这个方法用来实例化页卡 container.addView(mListViews.get(position), 0);//添加页卡 return mListViews.get(position); } @Override public int getCount() { return mListViews.size();//返回页卡的数量 } @Override public boolean isViewFromObject(View arg0, Object arg1) { return arg0==arg1;//官方提示这样写 } }

从上面的图片可以看到,ViewPager的适配器是PagerAdapter,它是基类提供适配器来填充页面ViewPager内部,你很可能想要使用一个更具体的实现,如FragmentPagerAdapter或FragmentStatePagerAdapter。在这里需要说明一下,其实ViewPager应该和Fragment一起使用,至少谷歌官方是这么想的,但是在3.0之下,我们没有必要这么做。下面要注意,当你实现一个PagerAdapter,你必须至少覆盖以下方法:

instantiateItem(ViewGroup, int) destroyItem(ViewGroup, int, Object) getCount() isViewFromObject(View, Object)

这一篇讲解完ViewPager之后,相信大家也应该对它有了一个初步的认识,那么在后面的几篇文章我们将继续围绕这个类展开下去,希望能帮助大家对于UI的设计和开发也会有一个更加深入的了解。

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

时间: 2024-10-25 12:54:25

Android UI设计与开发之ViewPager介绍和简单实现引导界面的相关文章

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

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

Android UI设计与开发之PopupWindow仿腾讯新闻底部弹出菜单

前一篇文章中有用到 PopupWindow 来实现弹窗的功能.简单介绍以下吧. 官方文档是这样解释的:这就是一个弹出窗口,可以用来显示一个任意视图.出现的弹出窗口是一个浮动容器的当前活动. 1.首先来个简单的栗子,效果如下: 只有两个布局文件,一个是弹窗布局(只有一张图片),一个是主界面布局(只有一个按钮). 然后在主界面代码中实例 PopupWindow ,指定弹出的界面,在按钮点击事件中显示或隐藏弹窗就可以了,代码如下: package com.yanis.demo; import andr

Android UI设计与开发教程 引导界面(一)ViewPager介绍和使用详解

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

Android UI”设计官方教程

我们曾经给大家一个<MeeGo移动终端设备开发UI设计基础教程>,同时很多朋友都在寻找Android UI开发的教程,我们从Android的官方开发者博客找了一份幻灯片,介绍了一些Android UI设计,我们把这个教程整理出来,希望大家喜欢. 想了解全部Android UI教程内容请点击51CTO独家专题:谷歌官方教程:Android UI设计技巧 作为开发者,为啥我们要关心UI,前面的一堆通通可以忽略掉,直接跳到最后一条.因为好的UI设计可以帮助我们卖出更多拷贝,赚到更多钱. 简介 这个教

看图说话 – Android UI 设计秘笈 :Part I

Android 的官方开发者博客发了一份幻灯片,介绍了一些 Android UI 设计的小贴士,Roger 在这里以http://www.aliyun.com/zixun/aggregation/12897.html">看图说话的形式发出来,有兴趣的读者就继续往下翻吧.整个 PPT 共分5个部分,Part I 翻译的是前两个部分. 作为开发者,为啥我们要关心UI,前面的一堆通通可以忽略掉,直接跳到最后一条.因为好的UI设计可以帮助我们卖出更多拷贝,赚到更多钱^_^ 这个 PPT 包含5个部

Android UI设计的幻灯片:新的UI设计模式

文章描述:谷歌Android UI设计技巧:新的UI设计模式. 本系列文章原是Android的官方开发者博客的一份Android UI设计的幻灯片,51CTO的译者将这份教程5部分进行翻译整理,希望对Android开发者能有帮助.本文为<谷歌Android UI设计技巧>第四部分:新的UI设计模式. 本文为<谷歌Android UI设计技巧>第四部分:新的UI设计模式. [1] [2]  下一页

Android UI设计的幻灯片:图标与指导说明

文章描述:谷歌Android UI设计技巧:图标与指导说明. 本系列文章原是Android的官方开发者博客的一份Android UI设计的幻灯片,51CTO的译者将这份教程5部分进行翻译整理,希望对Android开发者能有帮助.本文为<谷歌Android UI设计技巧>第五部分也就是最后一部分:图标与指导说明. 本文为<谷歌Android UI设计技巧>第五部分也就是最后一部分:图标与指导说明.

谷歌Android UI设计技巧:新的UI设计模式

本系列文章原是Android的官方开发者博客的一份Android UI设计的幻灯片,51CTO的译者将这份教程5部分进行翻译整理,希望对Android开发者能有帮助.本文为<谷歌Android UI设计技巧>第四部分:新的UI设计模式. 本文为<谷歌Android UI设计技巧>第四部分:新的UI设计模式.

谷歌Android UI设计技巧:框架特性

本系列文章原是Android的官方开发者博客的一份Android UI设计的幻灯片,51CTO的译者将这份教程5部分进行翻译整理,希望对Android开发者能有帮助.本文为<谷歌Android UI设计技巧>第三部分:框架特性. 本文为<谷歌Android UI设计技巧>第三部分:框架特性. 注:相对布局和线性布局是Android里面常用的两种布局,线性布局比较简单,而相对布局可以做出比较复杂的布局管理,所以仅仅了解线性布局,很多时候是不够的.不过以作者之前Qt的经验来看,Andr