码迷,mamicode.com
首页 > 移动开发 > 详细

最老程序员开发实训10--Android---应用介绍页面实现2

时间:2015-09-14 12:18:40      阅读:256      评论:0      收藏:0      [点我收藏+]

标签:android开发   viewpager   介绍页面   

下面我们来看一页一页滑动的介绍页面如何实现。

首先在WkyLib工程中定义应用介绍基类WkyAppTourActivity,在本类中,我们用ViewPager来实现介绍页面一页一页滑动的功能。该Activity的布局文件如下所示:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:id="@+id/linearLayout01"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <android.support.v4.view.ViewPager
            android:id="@+id/tourPages"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="20dp"
        android:orientation="vertical" >

        <LinearLayout
            android:id="@+id/stepBar"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:layout_alignParentBottom="true"
            android:gravity="center"
            android:orientation="horizontal" >
        </LinearLayout>
    </RelativeLayout>

</FrameLayout>

我们首先在WkyAppTourActivity类中定义需要用到的属性,我们将介绍页面的ID保存在images中,而对应的ImageView保存在imageViews中,然后用一个ViewGroup来进行管理,而最后一页进入应用也是一介单独的ImageView。

	protected WkyApplication application = null; 
	protected ViewPager tourPages;
	protected List<ImageView> imageViews;
	// 包裹小圆点的LinearLayout
	protected ViewGroup stepBar;
	protected ImageView enterAppImgv;
	protected int[] images = null;
因为每个应用所用的介绍图片都不相同,所以在WkyAppTourActivity类中定义了抽象方法prepareImages方法,该方法是将介绍页面的ID保存到images中:

/**
	 * 实例化的应用程序通过定义本函数,将引导页面存入images里面
	 */
	abstract protected void prepareImages();
这个方法在每个具体应用的AppTourActivity中必须实现。

下面是WkyAppTourActivity类的onCreate函数:

@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_app_intro);
		getViewObjects();
		setupActionListeners();
		prepareImages();
		setupTourImages();
	}
	
	/**
	 * 获取页面所有View,并赋给相应的属性,与IOS中IBOutlets类似
	 */
	private void getViewObjects() {
		imageViews = new ArrayList<ImageView>();
		stepBar = (ViewGroup) findViewById(R.id.stepBar);
		tourPages = (ViewPager) findViewById(R.id.tourPages);		
	}
	
	/**
	 * 设定界面中操作的消息响应函数,与IOS中IBAction类似
	 */
	private void setupActionListeners() {
		tourPages.setOnPageChangeListener(new TourPageChangeListener());
	}
	
	/**
	 * 设置介绍页面,介绍页面下面表示进度的圆点
	 */
	private void setupTourImages() {
		for (int i = 0; i < images.length; i++) {
			ImageView imageView = new ImageView(this);
			LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(
					LinearLayout.LayoutParams.WRAP_CONTENT,
					LinearLayout.LayoutParams.WRAP_CONTENT);
			lp.setMargins(14, 0, 14, 0);
			imageView.setLayoutParams(lp);
			// imageView.setPadding(20, 0, 20, 0);
			imageViews.add(imageView);
			if (i == 0) {
				// 默认选中第一张图片
				imageViews.get(i).setBackgroundResource(R.drawable.page_indicator_focused);
			} else {
				imageViews.get(i).setBackgroundResource(R.drawable.page_indicator);
			}
			stepBar.addView(imageViews.get(i));
		}
		tourPages.setAdapter(new TourPageAdapter());		
	}
onCreate方法的代码并不复杂,首先设置布局,然后获取页面中需要进行操作的View,然后是设置页面事件响应函数,最后是生成与介绍页面相同数量的空ImageView对象,并将其加入ViewGroup中进行管理。

顺便提一句,上述代码全部加在onCreate方法中也是可以的,但是,如果想要让代码可维护性增强,小函数更有优势,而且同一个函数中,语句最是同一层级的,这些编码规范虽然看似没什么用,但是当回头维护代码时,你就会体会到这样写的重要性了。

下面是实现介绍图片一页一页滑动的ViewPager类及其实现:

	// 指引页面数据适配器
	class TourPageAdapter extends PagerAdapter {
		@Override
		public int getCount() {
			return images.length;
		}

		@Override
		public boolean isViewFromObject(View arg0, Object arg1) {
			return arg0 == arg1;
		}

		@Override
		public int getItemPosition(Object object) {
			return super.getItemPosition(object);
		}

		@Override
		public void destroyItem(ViewGroup container, int arg1, Object object) {
			container.removeView((View) object);
		}

		@Override
		public Object instantiateItem(ViewGroup container, int position) {
			View view = createView(position);
			container.addView(view, 0);
			return view;
		}

		@SuppressWarnings("deprecation")
		private View createView(int position) {
			LayoutInflater mLayoutInflater = getLayoutInflater();
			View view = mLayoutInflater.inflate(R.layout.app_tour_view_pager, null);
			ImageView appTourImgv = (ImageView) view.findViewById(R.id.appTourImgv);
			enterAppImgv = (ImageView) view.findViewById(R.id.enterAppImgv);
			
			appTourImgv.setImageResource(images[position]);
			WkyLayoutAdapter.setRectangleView(appTourImgv, 0.6141f);
			if (position == images.length - 1) {
				WkyLayoutAdapter.setRectangleView(enterAppImgv, 0.1179f, 1.2835f);
				WkyLayoutAdapter.setViewMargin(enterAppImgv, 0.2017f);
				enterAppImgv.setVisibility(View.VISIBLE);
				enterAppImgv.setOnClickListener(mOnClickListener);
			}
			return view;
		}
		
		/**
		 * 进入应用ImageView的点击响应函数,由于是第一次运行,进入注册登录页面
		 * 1. 将firstRun置为false,下次应用启动将不再显示介绍页面
		 * 2. 进入注册登录页面
		 */
		private View.OnClickListener mOnClickListener = new OnClickListener() {			
			@Override
			public void onClick(View v) {
				finishAppTour();
			}
		};

		@Override
		public void restoreState(Parcelable arg0, ClassLoader arg1) {

		}

		@Override
		public Parcelable saveState() {
			return null;
		}

		@Override
		public void startUpdate(View arg0) {

		}

		@Override
		public void finishUpdate(View arg0) {

		}
	}
上面代码都比较简单,只是重点说一下onCreateView,页面中有一个介绍图片appTourImgv和一个进入应用的图片按钮enterAppImgv,当要显示某个介绍图片时,从images中找到ID,然后赋给appTourImgv来显示,如果是最后一张图片,将enterAppImgv置为可见,用户点击后调用finishAppTour方法。

/**
	 * 进入注册登录页面
	 */
	abstract protected void goRegisterLoginActivity(); 

	/**
	 * 由于是第一次运行,进入注册登录页面
	 * 1. 将firstRun置为false,下次应用启动将不再显示介绍页面
	 * 2. 进入注册登录页面
	 */
	protected void finishAppTour() {
		application.setFirstRunToFalse();
		goRegisterLoginActivity();
	}
由于每个具体应用的注册登录页面可能不同,因此定义了抽象方法goRegisterLoginActivity方法,具体应用中必须实现这个方法。
下面是处理ViewPager页面滑动的事件响应函数:

	class TourPageChangeListener implements OnPageChangeListener {
		@Override
		public void onPageScrollStateChanged(int arg0) {
		}

		@Override
		public void onPageScrolled(int arg0, float arg1, int arg2) {
		}

		@Override
		public void onPageSelected(int arg0) {
			if (arg0 == imageViews.size()) {
				finishAppTour();
			} else {
				for (int i = 0; i < imageViews.size(); i++) {
					imageViews.get(arg0).setBackgroundResource(
							R.drawable.page_indicator_focused);
					if (arg0 != i) {
						imageViews.get(i).setBackgroundResource(
								R.drawable.page_indicator);
					}
				}
			}
		}

	}
	
这里的处理逻辑比较简单,如果是在最后一页还向后翻页,就直接进入注册登录页面,如果不是的话,更新下页代表进度的小圆点,表示当前已经浏览到第几张。

还有界面调整工具类和常量存储的工具类,这里由于篇幅问题就不再贴上代码了,我们找一个下载地址,提供完整工程的下载,这样大家就可以看到完整的代码了。

下面是具体工程WkgJys,我们定义WkyAppTourActivity类的子类JysAppTourActivity类:

public class JysAppTourActivity extends WkyAppTourActivity {
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		application = (JysApplication)getApplication();
	}
	
	/**
	 * 启动注册登录页面,并关闭本页
	 * 【闫涛 2015.09.11】初始版本
	 */
	@Override
	protected void goRegisterLoginActivity() {
		Intent intent = new Intent(this, MainActivity.class);
		startActivity(intent);
		finish();
	}

	/**
	 * 定义介绍页面,将ID保存到images数组中
	 * 【闫涛 2015.09.11】初始版本
	 */
	@Override
	protected void prepareImages() {
		images = new int [5];
		images[0] = R.drawable.app_tour_01;
		images[1] = R.drawable.app_tour_02;
		images[2] = R.drawable.app_tour_03;
		images[3] = R.drawable.app_tour_04;
		images[4] = R.drawable.app_tour_05;
	}

}
好了,大家运行程序,如果一切顺利的话,就可以看到多数应用具有的介绍页面了。



华丽的分隔线
******************************************************************************************************************************************************************************
希望大家多支持,有大家的支持,我才能走得更远,谢谢!
银行账号:622202 0200 1078 56128 闫涛
我的支付宝:yt7589@hotmail.com

版权声明:本文为博主原创文章,未经博主允许不得转载。

最老程序员开发实训10--Android---应用介绍页面实现2

标签:android开发   viewpager   介绍页面   

原文地址:http://blog.csdn.net/yt7589/article/details/48369667

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