文章来源:www.cnblogs.com/Amandaliu/a…
参考文章:
【2】www.androidlearner.net/android-use…
这个不同于上一篇文章【Android】每个Activity中加入引导界面 (每个Activity动态加载ImageView的方式)。这个引导界面是在初次进入应用时,加载引导页面(采用Activity的方式),进入应用后,不再需要提供引导。
功能需求:首次进入应用时加载引导界面
思路:
1、首次进入,怎么判断?查看SharedPreferences中某个字段
2、基本上每个应用都有个进入实际功能是的动画加载页面,我们可以在该Activity中加入判断,看是否需要跳转到引导Activity
3、引导界面,采用现在比较主流的方式:左右滑动加载;小圆点提示;在最后一个页面,点击button,进入功能界面
实现功能:左右手势滑屏
底部小圆点随当前显示页跳动
浮动按钮显示。当触屏事件发生显示,否则就渐渐消失
先转个文章:blog.csdn.net/feng88724/a…
第一种: ViewFlipper + GestureDetector
第二种: ActivityGroup + GestureDetector
第三种: ViewPager (Android3.0+)
第四种: ViewFlow (开源项目)
当你需要在一系列不确定数目的view中滑动时,可以考虑使用ViewFlow。如果你的view数目确定,你应该使用Fragments 或兼容库里的ViewPager 。
综合考虑代码复杂度以及以及加载的引导view个数可确定性,我们就采用第三种方案ViewPager吧。
好了,上代码。
(1)修改应用的动画加载页面SplashActivity.java
| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374 | package com.example.guidepagetest2; import android.app.Activity;``import android.content.Context;``import android.content.Intent;``import android.os.Bundle;``import android.os.Handler;``import android.os.Message; /**`` * 功能:使用ViewPager实现初次进入应用时的引导页`` *`` * (1)判断是否是首次加载应用--采取读取SharedPreferences的方法`` * (2)是,则进入引导activity;否,则进入MainActivity`` * (3)5s后执行(2)操作`` *`` * @author sz082093`` *`` */``public class SplashActivity extends Activity { @Override`` protected void onCreate(Bundle savedInstanceState) {`` super.onCreate(savedInstanceState);`` setContentView(R.layout.activity_splash);`` boolean mFirst = isFirstEnter(SplashActivity.this,SplashActivity.this.getClass().getName());`` if(mFirst)`` mHandler.sendEmptyMessageDelayed(SWITCH_GUIDACTIVITY,5000);`` else`` mHandler.sendEmptyMessageDelayed(SWITCH_MAINACTIVITY,5000);`` } `` //****************************************************************`` // 判断应用是否初次加载,读取SharedPreferences中的guide_activity字段`` //****************************************************************`` private static final String SHAREDPREFERENCES_NAME = "my_pref";`` private static final String KEY_GUIDE_ACTIVITY = "guide_activity";`` private boolean isFirstEnter(Context context,String className){`` if(context==null || className==null||"".equalsIgnoreCase(className))return false;`` String mResultStr = context.getSharedPreferences(SHAREDPREFERENCES_NAME, Context.MODE_WORLD_READABLE)`` .getString(KEY_GUIDE_ACTIVITY, "");//取得所有类名 如 com.my.MainActivity`` if(mResultStr.equalsIgnoreCase("false"))`` return false;`` else`` return true;`` }`` //*************************************************`` // Handler:跳转至不同页面`` //*************************************************`` private final static int SWITCH_MAINACTIVITY = 1000;`` private final static int SWITCH_GUIDACTIVITY = 1001;`` public Handler mHandler = new Handler(){`` public void handleMessage(Message msg) {`` switch(msg.what){`` case SWITCH_MAINACTIVITY:`` Intent mIntent = new Intent();`` mIntent.setClass(SplashActivity.this, MainActivity.class);`` SplashActivity.this.startActivity(mIntent);`` SplashActivity.this.finish();`` break;`` case SWITCH_GUIDACTIVITY:`` mIntent = new Intent();`` mIntent.setClass(SplashActivity.this, GuideActivity.class);`` SplashActivity.this.startActivity(mIntent);`` SplashActivity.this.finish();`` break;`` }`` super.handleMessage(msg);`` }`` };``} |
|---|
(2)添加引导Activity的布局文件activity_guide.xml
| 1234567891011121314151617181920212223242526272829303132333435363738394041424344 | <? 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" >`` < LinearLayout`` android:id="@+id/linearLayout1"`` android:layout_width="fill_parent"`` android:layout_height="wrap_content"`` android:orientation="vertical">`` < android.support.v4.view.ViewPager`` android:id="@+id/guidePages"`` android:layout_width="fill_parent"`` android:layout_height="wrap_content"/>`` </ LinearLayout >`` < LinearLayout`` android:id="@+id/linearLayout2"`` android:layout_width="fill_parent"`` android:layout_height="wrap_content"`` android:orientation="vertical">`` < RelativeLayout`` android:layout_width="fill_parent"`` android:layout_height="wrap_content"`` android:orientation="vertical">`` < LinearLayout`` android:id="@+id/viewGroup"`` android:layout_width="fill_parent"`` android:layout_height="wrap_content"`` android:layout_alignParentBottom="true"`` android:layout_marginBottom="40dp"`` android:gravity="center_horizontal"`` android:orientation="horizontal">`` </ LinearLayout >`` </ RelativeLayout >`` </ LinearLayout > </ FrameLayout > |
|---|
| 1 | |
|---|
| 1 | (3)添加引导时,左右滑动时的view,这里示例两个: |
|---|
| 1 | viewpager_page1.xml |
|---|
| 1234567891011121314 | <? xml version="1.0" encoding="utf-8"?>``< LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"`` android:layout_width="match_parent"`` android:layout_height="match_parent"`` android:orientation="vertical">`` < TextView`` android:layout_width="fill_parent"`` android:layout_height="fill_parent"`` android:layout_gravity="center"`` android:text="@string/guide_begin"`` /> </ LinearLayout > |
|---|
viewpager_page2.xml
| 12345678910111213141516171819 | <? xml version="1.0" encoding="utf-8"?>``< LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"`` android:layout_width="match_parent"`` android:layout_height="match_parent"`` android:orientation="vertical"`` android:gravity="center">`` < TextView`` android:layout_width="wrap_content"`` android:layout_height="wrap_content"`` android:text="@string/guide_end"/>`` < Button`` android:id="@+id/btn_close_guide"`` android:layout_width="wrap_content"`` android:layout_height="wrap_content"`` android:text="@string/btn_close_guide"/>`` </ LinearLayout > |
|---|
(4)修改引导Activity:GuideActivity.java
| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207 | package com.example.guidepagetest2; import java.util.ArrayList; import android.app.Activity;``import android.content.Intent;``import android.content.SharedPreferences;``import android.os.Bundle;``import android.os.Parcelable;``import android.support.v4.view.PagerAdapter;``import android.support.v4.view.ViewPager;``import android.support.v4.view.ViewPager.OnPageChangeListener;``import android.view.LayoutInflater;``import android.view.View;``import android.view.ViewGroup;``import android.view.ViewGroup.LayoutParams;``import android.widget.Button;``import android.widget.ImageView; public class GuideActivity ``extends Activity {`` private ViewPager viewPager;`` /**装分页显示的view的数组*/`` private ArrayList<View> pageViews; `` private ImageView imageView;`` /**将小圆点的图片用数组表示*/`` private ImageView[] imageViews;`` //包裹滑动图片的LinearLayout`` private ViewGroup viewPics;`` //包裹小圆点的LinearLayout`` private ViewGroup viewPoints;`` /** Called when the activity is first created. */`` @Override`` public void onCreate(Bundle savedInstanceState) {`` super .onCreate(savedInstanceState);`` //将要分页显示的View装入数组中`` LayoutInflater inflater = getLayoutInflater();`` pageViews = ``new ArrayList<View>();`` pageViews.add(inflater.inflate(R.layout.viewpager_page1, ``null ));`` pageViews.add(inflater.inflate(R.layout.viewpager_page2, ``null ));`` //创建imageviews数组,大小是要显示的图片的数量`` imageViews = ``new ImageView[pageViews.size()];`` //从指定的XML文件加载视图`` viewPics = (ViewGroup) inflater.inflate(R.layout.activity_guide, ``null );`` //实例化小圆点的linearLayout和viewpager`` viewPoints = (ViewGroup) viewPics.findViewById(R.id.viewGroup);`` viewPager = (ViewPager) viewPics.findViewById(R.id.guidePages);`` //添加小圆点的图片`` for ( int i= 0 ;i<pageViews.size();i++){`` imageView = ``new ImageView(GuideActivity. this );`` //设置小圆点imageview的参数`` imageView.setLayoutParams( new LayoutParams( 20 , 20 )); //创建一个宽高均为20 的布局`` imageView.setPadding( 20 , ``0 , ``20 , ``0 );`` //将小圆点layout添加到数组中`` imageViews[i] = imageView;`` //默认选中的是第一张图片,此时第一个小圆点是选中状态,其他不是`` if (i== 0 ){`` imageViews[i].setBackgroundResource(R.drawable.page_indicator_focused);`` } else {`` imageViews[i].setBackgroundResource(R.drawable.page_indicator);`` }`` //将imageviews添加到小圆点视图组`` viewPoints.addView(imageViews[i]);`` }`` //显示滑动图片的视图`` setContentView(viewPics);`` //设置viewpager的适配器和监听事件`` viewPager.setAdapter( new GuidePageAdapter());`` viewPager.setOnPageChangeListener( new GuidePageChangeListener()); `` }`` private Button.OnClickListener Button_OnClickListener = ``new Button.OnClickListener() {`` public void onClick(View v) {`` //设置已经引导`` setGuided();`` //跳转`` Intent mIntent = ``new Intent();`` mIntent.setClass(GuideActivity. this , MainActivity. class );`` GuideActivity. this .startActivity(mIntent);`` GuideActivity. this .finish();`` }`` };`` private static final String SHAREDPREFERENCES_NAME = ``"my_pref" ;`` private static final String KEY_GUIDE_ACTIVITY = ``"guide_activity" ;`` private void setGuided(){`` SharedPreferences settings = getSharedPreferences(SHAREDPREFERENCES_NAME, ``0 );`` SharedPreferences.Editor editor = settings.edit();`` editor.putString(KEY_GUIDE_ACTIVITY, ``"false" );`` editor.commit();`` }`` class GuidePageAdapter ``extends PagerAdapter{ //销毁position位置的界面`` @Override`` public void destroyItem(View v, ``int position, Object arg2) {`` // TODO Auto-generated method stub`` ((ViewPager)v).removeView(pageViews.get(position));`` } @Override`` public void finishUpdate(View arg0) {`` // TODO Auto-generated method stub`` }`` //获取当前窗体界面数`` @Override`` public int getCount() {`` // TODO Auto-generated method stub`` return pageViews.size();`` } //初始化position位置的界面`` @Override`` public Object instantiateItem(View v, ``int position) {`` // TODO Auto-generated method stub`` ((ViewPager) v).addView(pageViews.get(position)); `` // 测试页卡1内的按钮事件 `` if (position == ``1 ) { `` Button btn = (Button) v.findViewById(R.id.btn_close_guide); `` btn.setOnClickListener(Button_OnClickListener); `` } `` return pageViews.get(position); `` } // 判断是否由对象生成界面`` @Override`` public boolean isViewFromObject(View v, Object arg1) {`` // TODO Auto-generated method stub`` return v == arg1;`` } @Override`` public void startUpdate(View arg0) {`` // TODO Auto-generated method stub`` } @Override`` public int getItemPosition(Object object) {`` // TODO Auto-generated method stub`` return super .getItemPosition(object);`` } @Override`` public void restoreState(Parcelable arg0, ClassLoader arg1) {`` // TODO Auto-generated method stub`` } @Override`` public Parcelable saveState() {`` // TODO Auto-generated method stub`` return null ;`` }`` }`` class GuidePageChangeListener ``implements OnPageChangeListener{ @Override`` public void onPageScrollStateChanged( int arg0) {`` // TODO Auto-generated method stub`` } @Override`` public void onPageScrolled( int arg0, ``float arg1, ``int arg2) {`` // TODO Auto-generated method stub`` } @Override`` public void onPageSelected( int position) {`` // TODO Auto-generated method stub`` for ( int i= 0 ;i<imageViews.length;i++){`` imageViews[position].setBackgroundResource(R.drawable.page_indicator_focused);`` //不是当前选中的page,其小圆点设置为未选中的状态`` if (position !=i){`` imageViews[i].setBackgroundResource(R.drawable.page_indicator);`` }`` }`` }`` } `` } |
|---|
(5)大体上OK了,再贴上几张图片吧
动画加载页面:
引导页面:
点击“关闭引导界面”或者非首次进入应用后的功能页面:
Done!
作者: 风倾清凌
出处: www.cnblogs.com/Amandaliu/
\



