APP实用开发——引导界面

2024-04-27 15:11:21

字体：大中小

来源：转载

供稿：网友

这里写图片描述

在App开中首先跟用户进行交互的事Splash页面，也就是引导页面，一般是更新了什么内容，或者有什么样的活动，怎样操作等，现在越来越多的应用引导页面越来越炫彩，所以引导页面在你app用户好感度上也有重大的关系。例如：

这里写图片描述

案例1

进入页面之后，根据页面版本判断时候更新，弹出更新对话框，True就进入下载安装页面功能，false就跳转到主页布局

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/splash" >  <TextView android:id="@+id/splash_tv_version" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="版本:1.0" android:textSize="18sp" android:textColor="#FFFFFF" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_marginBottom="10dp" android:shadowColor="#FF0000" android:shadowDx="1" android:shadowDy="1" android:shadowRadius="2" /></RelativeLayout>public class SplashActivity extends Activity { /**请求路径**/ PRivate static final String CONNECTURL = "http://10.0.2.2:8080/updateinfo.html"; /**保存的路径**/ private static final String SAVEURL = "mnt/sdcard/mobliesafe97_2.apk"; private TextView mVersion; private int mNewsVersion; private String mNewsUrl; private String mNewsMsg; private ProgressDialog progressDialog; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); //requestWindowFeature(Window.FEATURE_NO_TITLE);//去除标题栏，必须放在setContentView之前执行，而且只在当前的activity生效 setContentView(R.layout.activity_splash); initView(); } /** * 初始化控件 */ private void initView() { mVersion = (TextView) findViewById(R.id.splash_tv_version); //获取当前应用程序的版本号码，设置给textview展示 mVersion.setText("版本:"+PackageTool.getVersionName(this)); //延迟两秒钟中请求服务器进行更新版本操作 //update(); //延迟多长时间给handler发送消息 //参数1：handler接受到消息执行的操作 //参数2：延迟的事件 /*new Handler().postDelayed(new Runnable() { @Override public void run() { update(); } }, 2000);*/ //延迟多长时间给handler发送消息 new Handler(){ public void handleMessage(android.os.Message msg) { update(); }; }.sendEmptyMessageDelayed(0, 2000);//what:消息的标示;delayMillis:延迟时间 } /** * 更新版本操作 */ private void update() { //1.链接服务器，获取服务器数据，判断是否有最新版本 //1.1.链接服务器，联网操作，子线程，权限，HttpUrlConnection xutils httpclient volly okhttp //参数：链接超时时间 HttpUtils httpUtils = new HttpUtils(2000); //参数1：请求方式 //参数2：请求路径 //参数3：请求的参数 //参数4：RequestCallBack请求回调 httpUtils.send(HttpMethod.GET, CONNECTURL, null, new RequestCallBack<String>() { //请求成功调用的方法 @Override public void onSuccess(ResponseInfo<String> responseInfo) { //1.2.获取服务器返回的数据，问题：服务器返回那些数据：code:新版本的版本号 apkurl:新版本的下载地址 msg:新版本的描述信息，描述更新的内容的 //问题：需要知道服务器如何封装数据 xml json String json = responseInfo.result;//获取服务器返回的数据 System.out.println(json); //1.2.1.解析获取到json数据 processJSON(json); } //请求失败调用的方法 @Override public void onFailure(HttpException arg0, String arg1) { //请求失败的时候跳转到首页 enterHome(); } }); } /** * 1.2.1.解析获取到json数据 * @param json */ protected void processJSON(String json) { try { JSONObject jsonObject = new JSONObject(json); mNewsVersion = jsonObject.getInt("code"); mNewsUrl = jsonObject.getString("apkurl"); mNewsMsg = jsonObject.getString("msg"); System.out.println("code:"+mNewsVersion+" apkurl:"+mNewsUrl+" msg:"+mNewsMsg); //1.3.判断是否有最新版本 //判断服务器中新版本的版本号和当前应用程序的版本号是否一致，一致：没有最新版本，不一致：有最新版本 if (mNewsVersion == PackageTool.getVersionCode(this)) { //一致：没有最新版本 //跳转到首页 enterHome(); }else{ //不一致：有最新版本 //2.弹出更新版本的对话框 showUpdateDialog(); } } catch (JSONException e) { e.printStackTrace(); } } /** * 跳转首页的操作 */ protected void enterHome() { Intent intent = new Intent(this,HomeActivity.class); startActivity(intent); finish();//移除/结束当前的activity，在跳转成功之后，移除SplashActivity，这样当从HomActivity点击返回键返回的时候，因为不会找到SplashActivity所以会直接退出应用程序 } /** * 2.创建提醒用户更新版本的对话框 */ private void showUpdateDialog() { AlertDialog.Builder builder = new Builder(this); //builder.setCancelable(false);//设置对话框是否可以消失，true:可以；false:不可以,屏蔽返回键 //设置对话框的标题 builder.setTitle("最新版本："+mNewsVersion+".0"); //设置图标 builder.setIcon(R.drawable.ic_launcher); //设置对话框内容 builder.setMessage(mNewsMsg); //监听对话框消失的时候 builder.setOnCancelListener(new OnCancelListener() { @Override public void onCancel(DialogInterface dialog) { //跳转到首页的操作 dialog.dismiss(); enterHome(); } }); //创建按钮 builder.setPositiveButton("立即更新", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { //隐藏对话框，下载最新版本apk dialog.dismiss(); //3.下载最新版本apk downloadAPK(); } }); builder.setNegativeButton("以后再说", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { //隐藏对话框，跳转到首页 dialog.dismiss(); enterHome(); } }); //展示对话框 builder.show(); //builder.create().show();//相同的效果 } /** * 3.下载最新版的apk */ protected void downloadAPK() { //判断SD卡是否挂载 if (Environment.getExternalStorageState().equals(Environment.MEDIA_MOUNTED)) { //3.2.在下载的时候，弹出进度条的对话框 showProgressDialog(); //3.1.从服务器下载，联网操作 HttpUtils httpUtils = new HttpUtils(); //下载操作 //问题：1.设置下载路径；2.SD卡权限；3.判断SD卡是否挂载成功；4.生成一个2.0版本的apk存放到服务器 //参数1：下载的路径 //参数2：保存的路径 //参数3：下载回调 httpUtils.download(mNewsUrl, SAVEURL, new RequestCallBack() { @Override public void onSuccess(ResponseInfo arg0) { //下载成功，隐藏进度条对话框 progressDialog.dismiss(); //4.安装最新版本apk installAPK(); } @Override public void onFailure(HttpException arg0, String arg1) { //下载失败，隐藏进度条，通知跳转到首页 progressDialog.dismiss(); enterHome(); } //更新下载进度 //total : 总进度 //current : 当前的下载进度 //isUploading : 是否支持回调上传 @Override public void onLoading(long total, long current, boolean isUploading) { super.onLoading(total, current, isUploading); //设置进度条显示总进度和下载进度 progressDialog.setMax((int) total);//设置总进度 progressDialog.setProgress((int) current);//设置当前下载的进度 } }); }else{ Toast.makeText(getapplicationContext(), "没有可用的SD卡", 0).show(); } } /** * 3.2.显示下载进度的对话框 */ private void showProgressDialog() { progressDialog = new ProgressDialog(this); progressDialog.setCancelable(false);//设置对话框是否可以消失，true:可以；false:不可以,屏蔽返回键 progressDialog.setProgressStyle(ProgressDialog.STYLE_HORIZONTAL);//设置进度条对话框中进度的样式 progressDialog.show();//显示dialog } /** * 4.安装最新版本apk */ protected void installAPK() { //通过隐式意图打开系统的安装界面 /** * <intent-filter> <action android:name="android.intent.action.VIEW" /> <category android:name="android.intent.category.DEFAULT" /> <data android:scheme="content" />// content:// <data android:scheme="file" /> <data android:mimeType="application/vnd.android.package-archive" /> </intent-filter> */ Intent intent = new Intent(); intent.setAction("android.intent.action.VIEW"); intent.addCategory("android.intent.category.DEFAULT"); //相互覆盖 /*intent.setData(Uri.fromFile(new File(SAVEURL))); intent.setType("application/vnd.android.package-archive");*/ intent.setDataAndType(Uri.fromFile(new File(SAVEURL)), "application/vnd.android.package-archive"); //startActivity(intent); //当当前的activity退出的时候，回调之前activity的onactivityReulst方法 //requestCode : 请求码 startActivityForResult(intent, 0); } @Override protected void onActivityResult(int requestCode, int resultCode, Intent data) { super.onActivityResult(requestCode, resultCode, data); //跳转首页的操作 enterHome(); }}

案例2

进入应用引导页面，首先全屏展示一段视频之后，出现引导图ViewPager滑动 activity_splash.xml

activity_guide.xml

SplashActivity 短视频播放

public class SplashActivity extends Activity { private CustomVideoView mVideoView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_splash); mVideoView = (CustomVideoView) findViewById(R.id.splash_vv_videoview); // 播放视频 initData(); } /** * 播放视频 */ private void initData() { // 1.获取播放资源 // android.resource:// : 获取工程中的res->raw中的资源 // android.resource://工程的包名/R.raw.kr36 mVideoView.setVideoURI(Uri.parse("android.resource://" + this.getPackageName() + "/" + R.raw.kr36)); //3.监听视频是否播放完毕，如果播放完毕，重新开始播放 //监听视频是否播放完毕的操作 mVideoView.setOnCompletionListener(new OnCompletionListener() { //当视频播放完毕调用的方法 @Override public void onCompletion(MediaPlayer mp) { //重新播放 mVideoView.start(); } }); // 2.播放视频资源 mVideoView.start(); } /** * 进入主页面按钮的点击事件 */ public void enter(View view){ //判断用户是否是第一个进入应用，如果是：跳转引导界面，如果不是：跳转首页 //问题：如何判断用户是否是第一次进入应用 //获取用户是否是第一次进入的标示 //还没有保存数据，保存数据需要到引导界面的开始体验按钮中去做,true:标示第一次进入，false:不是 boolean isfirstenter = SharedPreferencesTool.getBoolean(this, Constants.ISFIRSTENTER, true); if (isfirstenter) { //第一次进入跳转到引导界面 startActivity(new Intent(this,GuideActivity.class)); }else{ //不是第一次进入跳转到首页 startActivity(new Intent(this,HomeActivity.class)); } finish(); }

GuideActivity 图片引导页面

public class GuideActivity extends Activity { private ViewPager mViewPager; //资源图片 private int[] mImageIds = new int[]{R.drawable.guide_1,R.drawable.guide_2,R.drawable.guide_3}; private List<ImageView> imageViews; private Button mStart; private LinearLayout mLLDot; private ImageView mRedDot; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE);//代码去除标题栏 setContentView(R.layout.activity_guide); //通过第三方框架实现了沉浸式状态栏操作，必须在setContentView之后执行 StatusBarUtil.setColor(this, Color.YELLOW); initView(); } /** * 初始化控件 */ private void initView() { mViewPager = (ViewPager) findViewById(R.id.guide_vp_viewpager); mStart = (Button) findViewById(R.id.guide_btn_start); mLLDot = (LinearLayout) findViewById(R.id.guide_ll_dot); mRedDot = (ImageView) findViewById(R.id.guide_iv_reddot); imageViews = new ArrayList<ImageView>(); imageViews.clear(); //通过viewpager展示的三张图片 //先将图片，放到imageView中，然后再将ImageView放到viewpager中展示 //1.根据图片的张数，创建相应个数的imageView,并存放，方便viewpager展示 for (int i = 0; i < mImageIds.length; i++) { //创建相应的imageView createImageView(i); //根据图片的张数，创建点的个数 createDot(); } //2.通过viewpager展示imageView mViewPager.setAdapter(new Myadapter()); //4.实现viewpager的界面切换动画 //mViewPager.setPageTransformer(true, new ZoomOutPageTransformer()); //设置viewpager切换动画的， //参数1：如果是第一个到最后一个：true,如果是最后一个到第一个：false //参数2：自定义的动画效果 //mViewPager.setPageTransformer(true, new DepthPageTransformer()); mViewPager.setPageTransformer(true, new RotatePageTransformer()); //3.实现viewpager的界面切换监听，监听当切换到第三个界面的时候，显示按钮，否则隐藏按钮 //跟setOnPageChangeListener效果是一样 mViewPager.addOnPageChangeListener(new OnPageChangeListener() { //当界面切换完成调用的方法 //position : 切换到的界面的索引 @Override public void onPageSelected(int position) { //判断如果已经切换到第三个界面了，显示按钮，否则隐藏按钮 if (position == imageViews.size()-1) { mStart.setVisibility(View.VISIBLE); }else{ mStart.setVisibility(View.GONE); } } //viewpager切换界面的时候调用的方法 //position : 条目的索引 //positionOffset : 界面移动的百分比 //positionOffsetPixels : 界面移动的像素 @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { //当viewpager切换界面的时候，实现移动红色的点 //translationX : 控件平移的距离,从右往左滑动从0开始慢慢变大，如果切换完成，百分比瞬间归0,重新从0开始，进行下一次的百分比计算 System.out.println(positionOffset+""); //红色点的移动距离 = 移动的百分比*20 // 0 * 20 = 0 1*20=20 //mRedDot.setTranslationX(positionOffset * 20 + position * 20); mRedDot.setTranslationX((positionOffset+ position) * 20); } //当切换状态改变的时候调用的方法 @Override public void onPageScrollStateChanged(int state) { // TODO Auto-generated method stub } }); } /** * 创建图片对应的imageView * i:表示创建第几个图片对应的imageView */ private void createImageView(int i) { ImageView imageView = new ImageView(this); imageView.setBackgroundResource(mImageIds[i]); imageViews.add(imageView); } /** * 根据图片的张数创建点 */ private void createDot() { View view = new View(this); view.setBackgroundResource(R.drawable.shape_guide_dot); LinearLayout.LayoutParams params = new LayoutParams(10, 10); params.rightMargin=10; view.setLayoutParams(params);//将属性设置给view对象，使用属性生效 //添加linearlayout中展示 mLLDot.addView(view); } /**ViewPager的adapter**/ private class Myadapter extends PagerAdapter{ //设置条目个数 @Override public int getCount() { return imageViews.size(); } //view:viewpager的页面对象 //object：instantiateItem返回对象 //判断是否可以加载显示界面 @Override public boolean isViewFromObject(View view, Object object) { return view == object; } //添加显示viewpager的界面 @Override public Object instantiateItem(ViewGroup container, int position) { //根据条目的索引，获取条目对应的imageview ImageView imageView = imageViews.get(position); //将imageView添加到viewpager中显示 container.addView(imageView); //添加什么View对象，返回什么view对象 return imageView; } //删除条目 //object : instantiateItem的返回值 @Override public void destroyItem(ViewGroup container, int position, Object object) { //super.destroyItem(container, position, object);抛异常的 container.removeView((View) object); } } /** * 开始体验按钮的点击事件 */ public void start(View view){ //保存是否是第一次进入的标示 SharedPreferencesTool.saveBoolean(this, Constants.ISFIRSTENTER, false); //跳转的首页 startActivity(new Intent(this,HomeActivity.class)); //移除引导界面，避免在首页点击返回键，再回退到引导界面 finish(); }}

案例3

这里写图片描述

1. 要使用ViewPager，必须要创建 PagerAdapter。这里创建一个 ViewPagerAdapter来继承PagerAdapter

public class ViewPagerAdapter extends PagerAdapter{ private List<View> views; // 我们引导页的list private Context context; // 上下文 public ViewPagerAdapter(List<View> views, Context context) { this.views = views; this.context = context; } // 移除一个view @Override public void destroyItem(ViewGroup container, int position, Object object) { //super.destroyItem(container, position, object); container.removeView(views.get(position)); } // 加载一个view @Override public Object instantiateItem(ViewGroup container, int position) { container.addView(views.get(position)); return views.get(position); } @Override public int getCount() { // 必写的方法返回当前views的数量 return this.views.size(); } @Override public boolean isViewFromObject(View view, Object object) { //必写的方法判断当前的view是否是我们需要的对象 return (view == object); }}

2. 创建我们引导页的视图

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent">  <android.support.v4.view.ViewPager android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#00000000" android:persistentDrawingCache="animation" android:id="@+id/viewpage" > </android.support.v4.view.ViewPager></RelativeLayout>

3. 创建引导页的图片视图 one.xml和two.xml

4. 在我们的activity中使用

public class Guide extends Activity{ private ViewPager vp; private ViewPagerAdapter vpAdapter; private List<View> views; protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.guide);//加载guide.xml 视图 this.initView(); System.out.println("onCreate"); } // 初始化view public void initView() { /* * Inflater英文意思是膨胀，在Android中应该是扩展的意思吧。 LayoutInflater的作用类似于 findViewById(), 不同点是LayoutInflater是用来找layout文件夹下的xml布局文件，并且实例化！而 findViewById()是找具体某一个xml下的具体 widget控件(如:Button,TextView等)。 * * */ LayoutInflater inflater = LayoutInflater.from(this); views = new ArrayList<View>(); views.add(inflater.inflate(R.layout.one, null)); // 加载视图1 views.add(inflater.inflate(R.layout.two, null)); // 加载视图2 vpAdapter = new ViewPagerAdapter(views, this); // 创建我们的 adapter vp = (ViewPager) findViewById(R.id.viewpage); vp.setAdapter(vpAdapter); // viewpage绑定 adapter }}

5. 运行就有引导页的两张图片，可以来回切换。 6. 添加导航点 ① 在原来的guide.xml中添加

② 在原来的代码的基础上添加新的代码

public class Guide extends Activity implements ViewPager.OnPageChangeListener{ // 实现监听接口 private ViewPager vp; private ViewPagerAdapter vpAdapter; private List<View> views; // 导航点 private ImageView[] dots; private int[] ids = {R.id.iv1, R.id.iv2}; protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.guide);//加载guide.xml 视图 this.initView(); this.initDots(); System.out.println("onCreate"); } // 初始化view public void initView() { /* * Inflater英文意思是膨胀，在Android中应该是扩展的意思吧。 LayoutInflater的作用类似于 findViewById(), 不同点是LayoutInflater是用来找layout文件夹下的xml布局文件，并且实例化！而 findViewById()是找具体某一个xml下的具体 widget控件(如:Button,TextView等)。 * * */ LayoutInflater inflater = LayoutInflater.from(this); views = new ArrayList<View>(); views.add(inflater.inflate(R.layout.one, null)); // 加载视图1 views.add(inflater.inflate(R.layout.two, null)); // 加载视图2 vpAdapter = new ViewPagerAdapter(views, this); // 创建我们的 adapter vp = (ViewPager) findViewById(R.id.viewpage); vp.setAdapter(vpAdapter); // viewpage绑定 adapter vp.setOnPageChangeListener(this); // ViewPager 监听自己 } private void initDots() { // 初始化我们的导航点 this.dots = new ImageView[this.views.size()]; for (int i=0; i<this.views.size(); i++) { dots[i] = (ImageView) this.findViewById(this.ids[i]); } } // 监听页面滑动的方法 @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { for (int i=0; i<this.ids.length; i++) { if (position == i) { this.dots[i].setImageResource(R.drawable.login_selectd); // 变成选中的 } else { this.dots[i].setImageResource(R.drawable.login_point); //变成不选中的 } } } //选中 @Override public void onPageSelected(int position) { } // 滑动状态改变 @Override public void onPageScrollStateChanged(int state) { }}

这里写图片描述 7. 添加进入按钮

① 在two.xml中添加一个按钮

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/imageView2" android:background="@drawable/guide2" android:layout_alignParentTop="true" android:layout_alignParentEnd="true" />  <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:orientation="horizontal" android:gravity="center" > <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="进入" android:id="@+id/btn_start" /> </LinearLayout></RelativeLayout>

② 监听按钮进去MainActivity

// 进入按钮 this.bt = (Button) views.get(1).findViewById(R.id.btn_start); this.bt.setOnClickListener(new View.OnClickListener() { // 监听 @Override public void onClick(View v) { Intent i = new Intent(Guide.this, MainActivity.class); // 进去MainActivity startActivity(i); finish(); //销毁当前的Activity } });

上一篇：css中的reset样式（含clearfix）

下一篇：vue中v-for的使用，离不开的数组