Android 高级UI设计笔记22:Android 指示引导页(带圆点)
2016-07-10 12:20
645 查看
1. 引导页:
我们在安装某个软件首次运行时,大部分都会有一个引导页的提示,介绍软件新功能的加入或者使用说明等,支持滑动且下面会有几个圆点,显示共有多少页和当前图片的位置,类似如下效果:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/15/88c0af6b8c5b00ebefaced8ef1b568c8.png)
2. 引导页具体实现功能如下:
可以左右滑动图片。
图片的索引圆点显示,看出当前图片所在的位置和图片的数量。
可任意左右滑动。
图片的索引圆点带有动画效果。
最后一页显示按钮,点击进入应用。
3. 引导页实现逻辑过程:
利用ViewPager实现用户引导界面。
在这里,我们需要用到google提到的一个支持包—Android-support-v4.jar,这个包包含了一些非常有用的类,其中ViewPager类来实现页面之间的切换操作。
(1)首先是布局文件activity_main.xml,这里我用相对布局,全屏放一个viewpager,用一个viewGroup(LinearLayout)在底部来放置圆点View,在viewpager的上面。最后再放一个Button,位置在LinearLayout的上面,设置为visibility="gone",当滑动到最后一页就显示,布局搞定。
(2)接下来为ViewPager准备好Adapter,如下:
备注:isViewFromObject方法是用来判断pager的一个view是否和instantiateItem方法返回的object有关联。
(3)接下来我们来到ViewPagerActivity,如下:
(4)当我们滑动到最后一张页面的时候,"立即体验"的按钮就会显示出来,我们点击这个按钮就可以进入登录界面。
对应的布局文件login.xml,如下:
(5)部署程序到手机上,如下:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/15/cc8cc0c07e45b384a7543aba0df12177.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/15/5731d32310c341e1c1e3080fedd41fd1.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/15/58f70001ffdd1c06300b544398fc85a0.png)
4. 总结:
代码的实现流程分3步:
(1)首先加载ViewPager,新建imageview添加到List<View>中,然后设置adapter并显示。
(2)然后加载LinearLayout(ViewGroup),放置圆点图片,同样新建imageview设置背景后放入到圆点图集合中,这里要使用两张图片,选中和未选中。
(3)最后设置ViewPager的滑动监听事件,在滑动完成的监听OnPageSelected方法中,做两件事,一个判断当前页是哪一页,设置对应的圆点为选中,第二个是如果是最后一页,要显示Button按钮。
同时这里我也推荐4个Android引导页的控件。
我们在安装某个软件首次运行时,大部分都会有一个引导页的提示,介绍软件新功能的加入或者使用说明等,支持滑动且下面会有几个圆点,显示共有多少页和当前图片的位置,类似如下效果:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/15/88c0af6b8c5b00ebefaced8ef1b568c8.png)
2. 引导页具体实现功能如下:
可以左右滑动图片。
图片的索引圆点显示,看出当前图片所在的位置和图片的数量。
可任意左右滑动。
图片的索引圆点带有动画效果。
最后一页显示按钮,点击进入应用。
3. 引导页实现逻辑过程:
利用ViewPager实现用户引导界面。
在这里,我们需要用到google提到的一个支持包—Android-support-v4.jar,这个包包含了一些非常有用的类,其中ViewPager类来实现页面之间的切换操作。
(1)首先是布局文件activity_main.xml,这里我用相对布局,全屏放一个viewpager,用一个viewGroup(LinearLayout)在底部来放置圆点View,在viewpager的上面。最后再放一个Button,位置在LinearLayout的上面,设置为visibility="gone",当滑动到最后一页就显示,布局搞定。
<?xml version="1.0" encoding="utf-8"?> <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" > <android.support.v4.view.ViewPager android:id="@+id/first_viewpager" android:layout_width="match_parent" android:layout_height="match_parent" > </android.support.v4.view.ViewPager> <LinearLayout android:id="@+id/viewpager_tag_viewgroup" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_marginBottom="40dp" android:gravity="center_horizontal" android:orientation="horizontal" > </LinearLayout> <Button android:id="@+id/view_pager_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_above="@id/viewpager_tag_viewgroup" android:layout_centerHorizontal="true" android:text="立即体验" android:visibility="gone" /> </RelativeLayout>
(2)接下来为ViewPager准备好Adapter,如下:
package com.himi.guidedemo; import java.util.List; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; import android.view.View; import android.view.ViewGroup; /** * ViewPager适配器 */ public class GuidePagerAdapter extends PagerAdapter { private List<View> viewList; public GuidePagerAdapter(List<View> viewList) { this.viewList = viewList; } /** * 返回页面的个数 * * @return */ @Override public int getCount() { if (viewList != null) { return viewList.size(); } return 0; } /** * 判断是否由对象生成界面 * * @param view * @param object * @return */ @Override public boolean isViewFromObject(View view, Object object) { return view == object; } /** * 初始化position位置的界面 * * @param container * @param position * @return */ @Override public Object instantiateItem(ViewGroup container, int position) { ((ViewPager) container).addView(viewList.get(position), 0); return viewList.get(position); } /** * 移除页面 * * @param container * @param position * @param object */ @Override public void destroyItem(ViewGroup container, int position, Object object) { ((ViewPager) container).removeView(viewList.get(position)); } }
备注:isViewFromObject方法是用来判断pager的一个view是否和instantiateItem方法返回的object有关联。
(3)接下来我们来到ViewPagerActivity,如下:
package com.himi.guidedemo; import java.util.ArrayList; import java.util.List; import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.support.v4.view.ViewPager; import android.view.View; import android.view.ViewGroup; import android.view.Window; import android.view.WindowManager; import android.widget.Button; import android.widget.ImageView; import android.widget.LinearLayout; public class ViewPagerActivity extends Activity implements ViewPager.OnPageChangeListener { private ViewPager mViewPager; //图片资源的数组 private int[] mImageIdArray; //图片的集合 private List<View> mViewList; //放置圆点 private ViewGroup mViewGroup; //实例化圆点View private ImageView mImageView; private ImageView[] mImageViewArray; //最后一页的按钮 private Button mButton; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE); getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN); setContentView(R.layout.activity_main); mButton = (Button) findViewById(R.id.view_pager_button); mButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { startActivity(new Intent(ViewPagerActivity.this, LoginActivity.class)); finish(); } }); //加载ViewPager initViewpager(); //加载底部圆点 initViewPagerTag(); } /** * 加载底部圆点 */ private void initViewPagerTag() { //这里实例化LinearLayout mViewGroup = (ViewGroup) findViewById(R.id.viewpager_tag_viewgroup); //根据ViewPager的item数量实例化数组 mImageViewArray = new ImageView[mViewList.size()]; //循环新建底部圆点imageview,将生成的imageview保存到数组中 for (int i = 0; i < mViewList.size(); i++) { mImageView = new ImageView(this); mImageView.setLayoutParams(new ViewGroup.LayoutParams(20, 20)); mImageView.setPadding(30, 0, 30, 0); mImageViewArray[i] = mImageView; //第一个页面需要设为选中状态,这里要使用两张不同的图片(选中与未选中) if (i == 0) { mImageView.setBackgroundResource(R.drawable.page_indicator_focused); } else { mImageView.setBackgroundResource(R.drawable.page_indicator); } //将数组中的imageview加入到viewgroup mViewGroup.addView(mImageViewArray[i]); } } /** * 加载ViewPager */ private void initViewpager() { mViewPager = (ViewPager) findViewById(R.id.first_viewpager); //实例化图片资源 mImageIdArray = new int[]{R.drawable.guide01, R.drawable.guide02, R.drawable.guide03, R.drawable.guide04, R.drawable.guide05}; mViewList = new ArrayList<View>(); //获取一个layout参数,设置为match_parent LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT , LinearLayout.LayoutParams.MATCH_PARENT); //循环创建view并进入集合 for (int i = 0; i < mImageIdArray.length; i++) { //new imageview并设置全屏和图片资源 ImageView imageView = new ImageView(this); imageView.setLayoutParams(params); imageView.setBackgroundResource(mImageIdArray[i]); //将imageview加入到View集合中 mViewList.add(imageView); } //View集合数据初始化好,setAdapter就可以了 mViewPager.setAdapter(new GuidePagerAdapter(mViewList)); //添加ViewPager的滑动监听,注意是.add...以前是setOnPageChangeListener方法,已过时 mViewPager.addOnPageChangeListener(this); } @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } //滑动后的监听 @Override public void onPageSelected(int position) { //循环设置当前页的标记图 for (int i = 0; i < mImageViewArray.length; i++) { mImageViewArray[position].setBackgroundResource(R.drawable.page_indicator_focused); if (position != i) { mImageViewArray[i].setBackgroundResource(R.drawable.page_indicator); } } //判断是否最后一页,是则显示button if (position == mImageViewArray.length - 1) { mButton.setVisibility(View.VISIBLE); } else { mButton.setVisibility(View.GONE); } } @Override public void onPageScrollStateChanged(int state) { } }
(4)当我们滑动到最后一张页面的时候,"立即体验"的按钮就会显示出来,我们点击这个按钮就可以进入登录界面。
package com.himi.guidedemo; import android.app.Activity; import android.os.Bundle; public class LoginActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { // TODO Auto-generated method stub super.onCreate(savedInstanceState); setContentView(R.layout.login); } }
对应的布局文件login.xml,如下:
<?xml version="1.0" encoding="utf-8"?> <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" android:gravity="center" tools:context=".guide.ViewPagerActivity" > <TextView android:text="欢迎来到登录页面" android:gravity="center" android:textSize="25sp" android:layout_width="match_parent" android:layout_height="wrap_content"/> </RelativeLayout>
(5)部署程序到手机上,如下:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/15/cc8cc0c07e45b384a7543aba0df12177.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/15/5731d32310c341e1c1e3080fedd41fd1.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/15/58f70001ffdd1c06300b544398fc85a0.png)
4. 总结:
代码的实现流程分3步:
(1)首先加载ViewPager,新建imageview添加到List<View>中,然后设置adapter并显示。
(2)然后加载LinearLayout(ViewGroup),放置圆点图片,同样新建imageview设置背景后放入到圆点图集合中,这里要使用两张图片,选中和未选中。
(3)最后设置ViewPager的滑动监听事件,在滑动完成的监听OnPageSelected方法中,做两件事,一个判断当前页是哪一页,设置对应的圆点为选中,第二个是如果是最后一页,要显示Button按钮。
同时这里我也推荐4个Android引导页的控件。
相关文章推荐
- 用WindowBuilder编写SWT 桌面应用程序
- 用WindowBuilder编写SWT 桌面应用程序
- 用WindowBuilder编写SWT 桌面应用程序
- leetcode96. Unique Binary Search Trees
- 【译】Android中构建快速可靠的UI测试
- UIView指定角为圆角
- 基于webpack和vue.js搭建开发环境
- IOS控件之UITableView使用技巧
- UVA 1612 Guess
- 树莓派IoT 学习4 mosquitto实现mqtt通讯(1)
- WebRTC编译篇之Ninja 编译系统 一
- java blockingqueue 单独用, 结合线程池用
- iOS Autolayout 介绍 2 Interface Builder 技巧
- UE使用
- Codeforces 687C The Values You Can Make(DP)
- Vue.js学习思维导图一览
- IOS控件之UITextField用法及注意点
- UEditor文本编辑器
- requests module --客户端请求服务器端
- 仿QQ阅读UI布局的搭建之感想