码迷,mamicode.com
首页 > 其他好文 > 详细

用户向导页面实现左右滑动的ImageSwitcher

时间:2015-10-03 11:57:14      阅读:189      评论:0      收藏:0      [点我收藏+]

标签:

当你第一次打开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。全部捕捉的是左键和右键。假设是手机端的话,能够捕捉手势。

上一张大概的图:

技术分享

接下来将用ViewPager实现此效果。

来源参考

版权声明:本文博主原创文章。博客,未经同意不得转载。

用户向导页面实现左右滑动的ImageSwitcher

标签:

原文地址:http://www.cnblogs.com/hrhguanli/p/4853175.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!