您的位置:首页 > 其它

首次进入应用时加载引导界面

2014-09-10 13:21 323 查看
功能需求:首次进入应用时加载引导界面

思路:

1、首次进入,怎么判断?查看SharedPreferences中某个字段

2、基本上每个应用都有个进入实际功能是的动画加载页面,我们可以在该Activity中加入判断,看是否需要跳转到引导Activity

3、引导界面,采用现在比较主流的方式:左右滑动加载;小圆点提示;在最后一个页面,点击button,进入功能界面

实现功能:左右手势滑屏
底部小圆点随当前显示页跳动
浮动按钮显示。当触屏事件发生显示,否则就渐渐消失
先转个文章:/article/1892196.html
第一种:ViewFlipper+GestureDetector
第二种:ActivityGroup+GestureDetector
第三种:ViewPager(Android3.0+)
第四种:ViewFlow(开源项目)

当你需要在一系列不确定数目的view中滑动时,可以考虑使用ViewFlow。如果你的view数目确定,你应该使用Fragments或兼容库里的ViewPager。

综合考虑代码复杂度以及以及加载的引导view个数可确定性,我们就采用第三种方案ViewPager吧。

好了,上代码。

(1)修改应用的动画加载页面SplashActivity.java

(2)添加引导Activity的布局文件activity_guide.xml
<?xmlversion="1.0"encoding="utf-8"?> <FrameLayoutxmlns: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>

(3)添加引导时,左右滑动时的view,这里示例两个:
viewpager_page1.xml
<?xmlversion="1.0"encoding="utf-8"?>
<LinearLayoutxmlns: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
<?xmlversion="1.0"encoding="utf-8"?>
<LinearLayoutxmlns: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
packagecom.example.guidepagetest2;

importjava.util.ArrayList;

importandroid.app.Activity;
importandroid.content.Intent;
importandroid.content.SharedPreferences;
importandroid.os.Bundle;
importandroid.os.Parcelable;
importandroid.support.v4.view.PagerAdapter;
importandroid.support.v4.view.ViewPager;
importandroid.support.v4.view.ViewPager.OnPageChangeListener;
importandroid.view.LayoutInflater;
importandroid.view.View;
importandroid.view.ViewGroup;
importandroid.view.ViewGroup.LayoutParams;
importandroid.widget.Button;
importandroid.widget.ImageView;

publicclassGuideActivityextendsActivity{
privateViewPagerviewPager;

/**装分页显示的view的数组*/
privateArrayList<View>pageViews;
privateImageViewimageView;

/**将小圆点的图片用数组表示*/
privateImageView[]imageViews;

//包裹滑动图片的LinearLayout
privateViewGroupviewPics;

//包裹小圆点的LinearLayout
privateViewGroupviewPoints;

/**Calledwhentheactivityisfirstcreated.*/
@Override
publicvoidonCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);

//将要分页显示的View装入数组中
LayoutInflaterinflater=getLayoutInflater();
pageViews=newArrayList<View>();
pageViews.add(inflater.inflate(R.layout.viewpager_page1,null));
pageViews.add(inflater.inflate(R.layout.viewpager_page2,null));

//创建imageviews数组,大小是要显示的图片的数量
imageViews=newImageView[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(inti=0;i<pageViews.size();i++){
imageView=newImageView(GuideActivity.this);
//设置小圆点imageview的参数
imageView.setLayoutParams(newLayoutParams(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(newGuidePageAdapter());
viewPager.setOnPageChangeListener(newGuidePageChangeListener());
}

privateButton.OnClickListenerButton_OnClickListener=newButton.OnClickListener(){
publicvoidonClick(Viewv){
//设置已经引导
setGuided();

//跳转
IntentmIntent=newIntent();
mIntent.setClass(GuideActivity.this,MainActivity.class);
GuideActivity.this.startActivity(mIntent);
GuideActivity.this.finish();
}
};

privatestaticfinalStringSHAREDPREFERENCES_NAME="my_pref";
privatestaticfinalStringKEY_GUIDE_ACTIVITY="guide_activity";
privatevoidsetGuided(){
SharedPreferencessettings=getSharedPreferences(SHAREDPREFERENCES_NAME,0);
SharedPreferences.Editoreditor=settings.edit();
editor.putString(KEY_GUIDE_ACTIVITY,"false");
editor.commit();
}

classGuidePageAdapterextendsPagerAdapter{

//销毁position位置的界面
@Override
publicvoiddestroyItem(Viewv,intposition,Objectarg2){
//TODOAuto-generatedmethodstub
((ViewPager)v).removeView(pageViews.get(position));

}

@Override
publicvoidfinishUpdate(Viewarg0){
//TODOAuto-generatedmethodstub

}

//获取当前窗体界面数
@Override
publicintgetCount(){
//TODOAuto-generatedmethodstub
returnpageViews.size();
}

//初始化position位置的界面
@Override
publicObjectinstantiateItem(Viewv,intposition){
//TODOAuto-generatedmethodstub
((ViewPager)v).addView(pageViews.get(position));

//测试页卡1内的按钮事件
if(position==1){
Buttonbtn=(Button)v.findViewById(R.id.btn_close_guide);
btn.setOnClickListener(Button_OnClickListener);
}

returnpageViews.get(position);
}

//判断是否由对象生成界面
@Override
publicbooleanisViewFromObject(Viewv,Objectarg1){
//TODOAuto-generatedmethodstub
returnv==arg1;
}

@Override
publicvoidstartUpdate(Viewarg0){
//TODOAuto-generatedmethodstub

}

@Override
publicintgetItemPosition(Objectobject){
//TODOAuto-generatedmethodstub
returnsuper.getItemPosition(object);
}

@Override
publicvoidrestoreState(Parcelablearg0,ClassLoaderarg1){
//TODOAuto-generatedmethodstub

}

@Override
publicParcelablesaveState(){
//TODOAuto-generatedmethodstub
returnnull;
}
}

classGuidePageChangeListenerimplementsOnPageChangeListener{

@Override
publicvoidonPageScrollStateChanged(intarg0){
//TODOAuto-generatedmethodstub

}

@Override
publicvoidonPageScrolled(intarg0,floatarg1,intarg2){
//TODOAuto-generatedmethodstub

}

@Override
publicvoidonPageSelected(intposition){
//TODOAuto-generatedmethodstub
for(inti=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了,再贴上几张图片吧

动画加载页面:





引导页面:







点击“关闭引导界面”或者非首次进入应用后的功能页面:



内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐