在android的开发中很多时候都会用到图片的切换,我相信大家在安装完apk后,都会遇到弹出用户向导,介绍本版本apk的新功能,如果你用的是平板电脑或手机的话,可以左右滑动以切换视图,如果你用的是android机顶盒的话,可以按遥控器的左右键以切换视图。那么这种用户向导切换图片是怎么做的呢? 当然答案有很多种,应该android中有太多方式可以实现了,比如ViewFilper ,ViewPager。这里我就介绍一种最简单的方式,那就是采用ImageSwitcher 图片切换器!

首先看一下ImageSwitcher的类继承结构:

java.lang.Object
↳ android.view.View
↳ android.view.ViewGroup
↳ android.widget.FrameLayout
↳ android.widget.ViewAnimator
↳ android.widget.ViewSwitcher
↳ android.widget.ImageSwitcher

比较复杂! 和这个类等同继续结构的还有一个叫做TextSwitcher。他们两个是ViewSwitcher的唯一的两个子类,在ViewSwitcher中定义了一个接口叫做ViewFactory,所以在使用ImageSwitcher和TextSwitcher时必须要实现这个接口,其实在这个接口中,就只有一个方法,如下:

public abstract View makeView ()
Function:Creates a new View to be added in a ViewSwitcher.
Returns: a View

好了,到这里介绍ImageSwitcher就差不多了,咋门先来看看最后的实现结果

最下面的4个小点可以理解为位置指示吧,当前在那一页,最明显的小点,就会留在那个位置。这是通过LinearLayout加入TextView来实现的,其实这些小点都是TextView,只是背景颜色不一样而已,这里后面会具体介绍。

我们先来看看布局文件:act_guide.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" > <ImageSwitcher
android:id="@+id/guide_content"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@android:color/white" /> <LinearLayout
android:id="@+id/guide_indicator"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal" android:gravity="center_horizontal"
android:orientation="horizontal" />
</FrameLayout>

由于美观,要实现图片滑动效果,所有这里添加了2个动画,在res下新建anim文件夹,添加如下文件

slide_in_right.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" > <translate
android:duration="500"
android:fromXDelta="50%p"
android:toXDelta="0" /> <alpha
android:duration="700"
android:fromAlpha="0.0"
android:toAlpha="1.0" />
</set>

slide_out_left.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="500"
android:fromXDelta="0"
android:toXDelta="-50%p" /> <alpha
android:duration="700"
android:fromAlpha="1.0"
android:toAlpha="0.0" />
</set>

好,之前提过的个4个小圆点,是怎么画上去的呢?这里就需要在res下新建一个drawable文件夹,在里面添加两个绘图的配置文件:

indicator_n.xml 即没有选中的颜色

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="0dp"
android:shape="ring"
android:thickness="10dp"
android:useLevel="false" >
<size
android:height="40dp"
android:width="40dp" />
<solid android:color="#88666666" />
</shape>

indicator_s.xml 即选中了的颜色

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="0dp"
android:shape="ring"
android:thickness="10dp"
android:useLevel="false" >
<size
android:height="40dp"
android:width="40dp" />
<solid android:color="#ff0b7fe4" />
</shape>

好,接下来,我们来看看主activity是怎样调用的:

Act_guide.java

package dxd.android.imageswitcher;

import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.view.ViewGroup;
import android.widget.FrameLayout;
import android.widget.FrameLayout.LayoutParams;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.ImageView.ScaleType;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.ViewSwitcher.ViewFactory; public class ActGuide extends Activity implements ViewFactory { protected LayoutInflater mInflater;
protected ImageSwitcher switcher;
protected int[] itemIDs;
protected int pos;
protected int last;
protected LinearLayout indicator;
protected ViewGroup mParent;
protected boolean intercept = false; @Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mInflater = LayoutInflater.from(this);
setContentView(R.layout.act_help); addViews() ;
} protected void addViews() {
itemIDs = new int[] { R.drawable.s1, R.drawable.s2, R.drawable.s3,R.drawable.s4};
switcher = (ImageSwitcher)findViewById(R.id.guide_content);
switcher.setFactory(this);
switcher.setImageResource(itemIDs[pos]); indicator = (LinearLayout) findViewById(R.id.guide_indicator);
for (int i = 0; i < itemIDs.length; i++) {
TextView item = new TextView(this);
item.setLayoutParams(new LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT));
if (i == 0) {
item.setBackgroundResource(R.drawable.indicator_s);
} else {
item.setBackgroundResource(R.drawable.indicator_n);
}
indicator.addView(item);
}
// 响应 触摸事件
switcher.setOnTouchListener(new OnTouchListener() {
private float x;
private boolean lock; @Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
x = event.getX();
lock = true;
break;
case MotionEvent.ACTION_MOVE:
if (lock) {
float dltaX = x - event.getX();
if (dltaX > 100) {
showNext();
lock = false;
} else if (dltaX < -100) {
showPre();
lock = false;
}
}
break;
}
return true;
}
});
} @Override
public View makeView() {
ImageView imageView = new ImageView(this);
imageView.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
imageView.setScaleType(ScaleType.FIT_XY);
return imageView;
}
// 响应左右按键
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
switch (keyCode) {
case KeyEvent.KEYCODE_DPAD_LEFT:
showPre();
return true;
case KeyEvent.KEYCODE_DPAD_RIGHT:
showNext();
return true;
}
return super.onKeyDown(keyCode, event);
} protected void showNext() {
last = pos++;
if (pos == itemIDs.length) {
pos = itemIDs.length - 1;
return;
}
switcher.setInAnimation(this, R.anim.slide_in_right);
switcher.setOutAnimation(this, R.anim.slide_out_left);
switcher.setImageResource(itemIDs[pos]);
indicator.getChildAt(last).setBackgroundResource(R.drawable.indicator_n);
indicator.getChildAt(pos).setBackgroundResource(R.drawable.indicator_s);
} protected void showPre() {
last = pos--;
if (pos < 0) {
pos = 0;
return;
}
switcher.setInAnimation(this, android.R.anim.slide_in_left);
switcher.setOutAnimation(this, android.R.anim.slide_out_right);
switcher.setImageResource(itemIDs[pos]);
indicator.getChildAt(last).setBackgroundResource(R.drawable.indicator_n);
indicator.getChildAt(pos).setBackgroundResource(R.drawable.indicator_s);
}
}

主要的代码就是这样的了。当然,之前说了,这不是唯一能实现的方式,还有很多方式都可以实现这样的效果。但是,如果这个用户向导或其他什么向导,只要是以图片切换为主,那么就选用这个ImageSwitcher吧! 方便快捷地就能够搭建好应用程序的外观。当然如果是需要View中有控件的切换的话,用ViewPager也是很好的选择。这里就不多介绍了,以后专门写出专题。

ImageSwitcher的应用的更多相关文章

  1. ImageLoader配合ImageSwitcher的使用

    先在MyApplication中初始化ImageLoader initImageLoader(getApplicationContext()); /** * 初始化ImageLoader * 如果你经 ...

  2. ImageSwitcher图片切换的简单用例

    ImageSwitcher的原理:ImageSwitcher有两个子View:ImageView,当左右滑动的时候,就在这两个ImageView之间来回切换来显示图片 实现左右滑动切换图片 BaseA ...

  3. Android之ImageSwitcher

    要点: (查看Api总结) 1:ImageSwitcher 继承 ViewSwitcher, (ViewSwitcher 有继承FrameLayout ) 2: 要实现切图必须实现 ViewSwitc ...

  4. ImageSwitcher自定意效果+定时切换图片

    Activity实现 1 import android.app.Activity; import android.os.Bundle; import android.view.MotionEvent; ...

  5. Xamarin开发Android笔记:图片切换ImageSwitcher

    在移动应用开发过程中经常会使用到图片展示场景,例如利用多张图片说明一个产品的特点,此处就会使用到ImageSwithcher,当然也可以使用ViewFliper来实现,但使用ViewFliper的时候 ...

  6. android ImageSwitcher

    <?xml version="1.0" encoding="UTF-8"?> <RelativeLayout xmlns:android=&q ...

  7. android学习笔记14——GridView、ImageSwitcher

    GridView--网格视图.ImageSwitcher--图像切换器 ==> GridView,用于在界面上按行.列的分布形式显示多个组件:GridView和ListView父类相同——Abs ...

  8. Android——ImageSwitcher 图片切换

    public class ImageSwitcherActivity extends Activity implements OnClickListener,        ViewFactory { ...

  9. Android 高级UI设计笔记12:ImageSwitcher图片切换器

    1. ImageSwitcher ImageSwitcher是Android中控制图片展示效果的一个控件,如:幻灯片效果...,颇有感觉啊.做相册一绝 2. 重要方法 setImageURI(Uri  ...

随机推荐

  1. 代码开光,Orz

    有一次在cf上看到了,666,- - // // _oo0oo_ // o8888888o // 88" . "88 // (| -_- |) // 0\ = /0 // ___/ ...

  2. C#序列化XML至对象

    内容来源: http://www.cnblogs.com/fish-li/archive/2013/05/05/3061816.html#_label0 自己做的Demo下载地址:Demo

  3. id to load is required for loading----id被要求加载exception

    表示id主键 没有找到,可能是数据库中的主键设置了not null 而你没有给予主键 还有就是没有传递主键到 数据库中

  4. scala学习笔记(7):函数(1)

    函数是Scala的第一公民! 1  基本定义 scala> def max(x: Int, y: Int): Int = { if (x > y) x else y } 跟着是括号里带有冒 ...

  5. [转]深入理解Flash Player重绘

    这个是tencent flash team的一篇文章,但团队的博客已经关闭了,所以就在这里备份下吧~ 后来有人把这篇文章又发布到9ria上了,引发了一些讨论,其中有两位大神发言了,内容在原文下方. 9 ...

  6. Python使用os.listdir()函数来得目录内容的介绍

    Python编程语言是计算机语言中常用的语言,以下的文章就是介绍在Python编程语言中使用os.listdir()函数来获得目录中的相关内容的介绍,如果你对其相关的实际操作有兴趣的话,你就可以观看以 ...

  7. 关于TCP/UDP缓存

    1.修订单个socket的缓冲区大小:通过setsockopt使用SO_RCVBUF来设置接收缓冲区,该参数在设置的时候不会与rmem_max进行对比校验,但是如果设置的大小超过rmem_max的话, ...

  8. 【转】谈一谈PHP字串清除空格函数不安全

    清除空格的方法是不安全的,部分原因是因为字符中的空格非常多,例如 "addslashes的问题在 于黑客 可以用0xbf27来代替单引号,而addslashes只是将0xbf27修改为0xb ...

  9. C# winform打印总结 z

    http://blog.csdn.net/jing_xin/article/details/41444063 针对BEIYANG收据打印机 BTP-R580测试通过. 操作说明:http://www. ...

  10. C#读写文件总结

    1.使用FileStream读写文件   文件头:   using System; using System.Collections.Generic; using System.Text; using ...