用户向导页面实现左右滑动的ImageSwitcher
当你第一次打开app时刻,通常有使用向导现在演示APK基本功能和用法,该向导是非常重要的,用户可以知道并调整到速度app如何。
实现此使用向导有非常多种方法,比方用ImageSwitcher。ViewPager。当然要用ViewSwitcher或是ViewGroup去实现也是能够的,仅仅只是有点大材小用了。
用ImageSwitcher和ViewPager的差别就在于ImageSwitcher能轻松地指定页面切换的动画!这里先总结下ImageSwitcher的实现。
首先。定义布局文件activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageSwitcher
android:id="@+id/switcher"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
>
</ImageSwitcher>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/dots"
android:layout_alignParentBottom="true"
android:layout_marginBottom="50dp"
android:gravity="center_horizontal"
></LinearLayout>
</RelativeLayout>
布局文件里有一个id为dots的LinearLayout就是一会儿能够切换显示的小圆点。
让你的Activity实现ViewFactory接口。做为imageSwitcher.setFactory的參数,小圆点的实现是依据可切换图片的张数动态加入到dots中的。详细的代码例如以下:
package com.example.imageswitcher; import android.annotation.SuppressLint;
import android.app.ActionBar.LayoutParams;
import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.ViewSwitcher.ViewFactory; public class MainActivity extends Activity implements ViewFactory { private ImageSwitcher mSwitcher ;
private LinearLayout mLinearLayout ;
private ImageView[] mImageViewDots ;
private int mIndex = 0 ;
private int mImageRes[] = new int[]{
R.drawable.a,
R.drawable.b,
R.drawable.c,
R.drawable.d,
R.drawable.e,
R.drawable.g
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mLinearLayout = (LinearLayout)findViewById(R.id.dots);
mSwitcher = (ImageSwitcher)findViewById(R.id.switcher);
initDots();
mSwitcher.setFactory(this);
mSwitcher.setImageResource(mImageRes[0]);
mImageViewDots[0].setBackgroundResource(R.drawable.dot_focus);
} @SuppressLint("NewApi")
public void initDots(){
mLinearLayout.removeAllViews() ;
mImageViewDots = new ImageView[mImageRes.length] ;
for(int i=0 ;i<mImageRes.length ;i++){
ImageView dot = new ImageView(this);
dot.setBackgroundResource(R.drawable.dot_nomal);
dot.setLayoutParams(new LayoutParams(30,30)) ;
TextView tv = new TextView(this);
tv.setLayoutParams(new LayoutParams(30,30));
mImageViewDots[i] = dot ;
mLinearLayout.addView(dot);
mLinearLayout.addView(tv);
}
} @Override
public View makeView() {
return new ImageView(this);
} @Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if(keyCode == KeyEvent.KEYCODE_DPAD_LEFT){
if(mIndex == 0){
mIndex = mImageRes.length -1 ;
}else{
--mIndex ;
}
mSwitcher.setInAnimation(MainActivity.this, R.anim.left_in) ;
mSwitcher.setOutAnimation(MainActivity.this, R.anim.right_out) ;
mSwitcher.setImageResource(mImageRes[mIndex%mImageRes.length]);
}else if(keyCode == KeyEvent.KEYCODE_DPAD_RIGHT){
if(mIndex == mImageRes.length - 1){
mIndex = 0 ;
}else{
++mIndex ;
}
mSwitcher.setInAnimation(MainActivity.this, R.anim.rigth_in) ;
mSwitcher.setOutAnimation(MainActivity.this, R.anim.left_out) ;
mSwitcher.setImageResource(mImageRes[mIndex%mImageRes.length]);
}
for(int i=0 ;i<mImageViewDots.length ;i++){
if(i == mIndex%mImageRes.length){
mImageViewDots[i].setBackgroundResource(R.drawable.dot_focus);
}else{
mImageViewDots[i].setBackgroundResource(R.drawable.dot_nomal);
}
}
return super.onKeyDown(keyCode, event);
}
}
这里可切换的图片可任意制定。
这里来说一下切换动画,这里总有4个动画,分为两组。第一组是当ImageSwitcher向左切换图片的时候,首先setInAnimation是设置即将出现的那张图片的动画,setOutAnimation是设置即将消息的那张图片的动画,各自是left_in,rigth_out。第二组则是与之相反的。四个动画分别例如以下(放在res/anim文件夹下):
left_in.xml
<? xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:fromXDelta="-100%p"
android:toXDelta="0"
android:duration="1000" />
</set>
rigth_out.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:fromXDelta="0"
android:toXDelta="100%p"
android:duration="1000" />
</set>
rigth_in.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:fromXDelta="100%"
android:toXDelta="0"
android:duration="1000" />
</set>
left_out.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:fromXDelta="0"
android:toXDelta="-100%p"
android:duration="1000" />
</set>
针对小圆点,我是用drawable.xml文件去画的,在程序中能够指定它的大小。这里设置了两种颜色,用于差别当前在第几个页面。
dot_focus.xml
<?xml version="1.0" encoding="utf-8"? >
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
>
<corners android:radius="5dip" />
<solid android:color="#33FF00" />
</shape>
dot_nomal.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
>
<corners android:radius="5dip" />
<solid android:color="#FFFF99" />
</shape>
我是在Android机顶盒上开发的此Demo。全部捕捉的是左键和右键。假设是手机端的话,能够捕捉手势。
上一张大概的图:
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYW5kcm9pZF9kb25n/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
接下来将用ViewPager实现此效果。
版权声明:本文博主原创文章。博客,未经同意不得转载。
用户向导页面实现左右滑动的ImageSwitcher的更多相关文章
- 用户向导页面实现左右滑动的ViewPager
然后在一个博客,以前的博客ImageSwitcher实现用户向导,现在,随着ViewPager实现同样的功能.直接看代码: 布局文件activity_main.xml <RelativeLayo ...
- 用户向导左右滑动页面实现之ViewPager
接着上一篇博客.上一篇博客是用ImageSwitcher实现用户向导功能,如今用ViewPager实现同样的功能. 直接看代码: 布局文件activity_main.xml <RelativeL ...
- NSIS MUI 的内置向导页面
MUI 的内置向导页面和安装程序有关的向导页面MUI_PAGE_WELCOME 该向导页面显示欢迎信息MUI_PAGE_LICENSE text/rtf_file 该向导页面显示软件授权申明MUI_P ...
- android 布局 使用 viewPager 时,如何解决 和 子页面 长按滑动 冲突问题
使用 viewPager 时,如何解决 和 子页面 长按滑动 冲突问题. 我的问题原型: 这个问题,我相信遇到的人会比较少,我是在 一个 viewPager 中,其中 一个 fragment 中实现了 ...
- Headroom.js – 快速响应用户的页面滚动操作
Headroom.js 是一个轻量级,高性能的JS插件(无依赖性!),允许你响应用户的滚动行为.Headroom.js 使您能够在适当的时候把元素融入视图,而其它时候让内容成为焦点.Headroom. ...
- 使用 StoryBoard 的时候加入用户引导页面
如果想让一个APP加上引导页面是一个非常完美的举动 但是,总会遇到一些问题 (不要忘记在APDelegate里面加上用户引导页面的头文件和程序启动时的第一个页面哦) 情况一:纯代码 判断是否是第一次启 ...
- js jq输入框中按回车触发提交事件,用户在页面输入后按回车(Enter键)进行
js jq输入框中按回车触发提交事件,用户在页面输入后按回车(Enter键)进行 代码如下: <!DOCTYPE html> <html lang="en" xm ...
- js记录用户访问页面和停留时间
1.setInterval setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval(code,millisec[,"lang" ...
- Innosetup的状态页面和向导页面解释
1.安装: CurStepChanged所对应的全部状态:3种 1.1. CurStep=ssInstall --是在程序实际安装前(所有配置都准备好了) 1.2. CurSt ...
随机推荐
- Dalvik虚拟机Java堆创建过程分析
文章转载至罗升阳CSDN社区博客,原地址: http://blog.csdn.net/luoshengyang/article/details/6557518 近年来,手机移动平台越来越火爆.打开自己 ...
- HDU 4760 Good FireWall 完好Trie题解
本题乍看像是线段树之类的区间操作,只是由于仅仅是须要查找ip的前缀,故此事实上是使用Trie来做. 挺高难度的Trie应用,做完这道题之后说明Trie功力有一定火候了. 这里的Trie使用到了Dele ...
- C#递归算法详解
递归呢就是自己调用自己,在搜索文件夹下的文件和目录时也能用到,我这里就写一个简单的递归,代码如下: /// <summary> /// 递归算法 /// </summary> ...
- python - 类的特殊成员
class Foo: #构造方法 def __init__(self,name,age): pass self.name = name self.age = age def __str__(self) ...
- 配置错误--分析器错误消息: 无法识别的属性“targetFramework”。请注意属性名称区分大小写。
在部署网站的时候,很容易遇到这个一样错误:分析器错误消息: 无法识别的属性“targetFramework”.请注意属性名称区分大小写. 错误如图: 错误原因: 部署网站时,使用的应用程序池版本不对 ...
- (转)SQL中的ISNULL函数介绍
SQL中有多种多样的函数,下面将为您介绍SQL中的ISNULL函数,包括其语法.注释.返回类型等,供您参考,希望对您学习SQL能够有所帮助. ISNULL 使用指定的替换值替换 NULL. 语法ISN ...
- Winform 无边框随意拖动【转载】
本篇技术内容转载自:http://www.cnblogs.com/ap0606122/archive/2012/10/23/2734964.html using System; using Syste ...
- VS2013以管理员身份使用
Win8系统: 1.将C:\Program Files (x86)\Microsoft Visual Studio 12.0\Common7\IDE\devenv.exe改为以管理员身份运行. 2.将 ...
- C#串口扫描
1.传入serialport 和待显示串口的Commbox private void Search_AddSerialToComboBox(SerialPort MyPort, ComboBox My ...
- MFC多线程编的可能
1. 之所以是“可能”,因为这里有个重点就是临时对象是HWND操作的封装,不是窗口类的封装.因此所有的HWND临时对象都是CWnd的实例,即使上面强行转换为CAbcDialog*也依旧是CWnd*,所 ...