首页 > 代码库 > 用户向导左右滑动页面实现之ImageSwitcher
用户向导左右滑动页面实现之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>
接下来将用ViewPager实现此效果。
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。