Android 项目必备（二）--＞启动页引导页

文章目录

启动页
- 1. 启动页网络请求优化
- 2. 启动页面网络请求优化的具体实践
- 3. 启动页面无黑屏
- 4.主题替换
- 5. 启动页面屏蔽返回按键
引导页
- 1、延时启动检测
- 2、圆点的绘制

启动页

一个很慢的启动页很容易让用户觉得受不了，进而“逃离” App 的，所以若想产品有更好的用户体验，做一些启动页的优化是一个不错的选择。这里我们简单介绍一下我在实践中对启动页是如何优化的。

1. 启动页网络请求优化

我们在启动页做了什么？

加载 App 中 h5 页面的 url 地址；
加载请求用户信息；
加载首页地图页面需要展示的图标；
延时三秒钟跳转首页面，这时候无论是否加载到前面的网络请求信息，都会跳转到首页面。

2. 启动页面网络请求优化的具体实践

timer = new Timer();timerTask = new TimerTask() {@Overridepublic void run() {if (isGoToComplete) {L.i("等待2s完成，取消timer任务...");cancelTimer();return;}if (isLoadStartQueryComplete && isLoadUserInfoComplete) {// 已经显示过引导图L.i("StartActivity中网络请求完成，执行跳转逻辑.....");handler.sendEmptyMessage(eventWhat);L.i("StartActivity中网络请求完成，取消timer任务...");cancelTimer();}}};timer.schedule(timerTask, 0, 100);

3. 启动页面无黑屏

使用透明主题:

<item name="android:windowIsTranslucent">true</item>

Activity.onCreate() 之前 App 不做显示，这样用户误以为是手机慢了，这种瞒天过海的方案大家还是不要用了。

<resources><!-- Base application theme. --><style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"><!-- Customize your theme here. --><item name="colorPrimary">@color/colorPrimary</item><item name="colorPrimaryDark">@color/colorPrimaryDark</item><item name="colorAccent">@color/colorAccent</item><item name="android:windowIsTranslucent">true</item></style></resources>

4.主题替换

我们在style中自定义一个样式Lancher，在其中放一张背景图片，或是广告图片之类的。

 <style name="AppTheme.Launcher" parent="AppTheme">
<!--<item name="android:windowBackground">@color/startingwindow_bgcolor</item>--><item name="android:windowBackground">@drawable/bg</item></style>

把这个样式设置给启动的 Activity

         <activityandroid:name=".activity.SplashActivity"android:screenOrientation="portrait"android:theme="@style/AppTheme.Launcher">

然后在 Activity 的 onCreate 方法，把 Activity 设置回原来的主题

@Overrideprotected void onCreate(Bundle savedInstanceState) {//替换为原来的主题，在onCreate之前调用setTheme(R.style.AppTheme);super.onCreate(savedInstanceState);}

5. 启动页面屏蔽返回按键

一般的我们的 App 中都会在启动页面执行一些网络操作，初始化配置等，所以这时候我们是不希望用户通过按下返回按键退出 App ，因而我们需要在启动页中屏蔽返回按键，这里简单的介绍一下具体的实现：

/*** startActivity屏蔽物理返回按钮** @param keyCode* @param event* @return*/@Overridepublic boolean onKeyDown(int keyCode, KeyEvent event) {if (keyCode == KeyEvent.KEYCODE_BACK) {return true;}return super.onKeyDown(keyCode, event);}

引导页

1、延时启动检测

用 sharedpreference 来检测：

     Timer timer = new Timer();timer.schedule(new TimerTask() {@Overridepublic void run() {boolean isFirst = PreferencesUtils.getBoolean(SplashActivity.this,"isFirst",false);if (!isFirst) {readyGo(GuideActivity.class);PreferencesUtils.putBoolean(SplashActivity.this, "isFirst",true);}else{readyGo(MainActivity.class);}}},2000);

2、圆点的绘制

我们完全可以用 shade 属性和 selector 属性帮我们绘制完成。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="oval"><solid android:color="@color/colorAccent"/><size android:height="10dp"android:width="10dp"/>
</shape>

用 selector 就可以改变不同的颜色:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:drawable="@drawable/point_select" android:state_selected="true"/><item android:drawable="@drawable/point_normal" android:state_selected="false"/>
</selector>

引导页界面布局文件:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#2233"tools:context=".GuideActivity"><androidx.viewpager.widget.ViewPagerandroid:id="@+id/viewPager"android:layout_width="match_parent"android:layout_height="match_parent"/><Buttonandroid:id="@+id/guide_start"android:layout_width="200dp"android:layout_height="50dp"android:layout_alignParentBottom="true"android:layout_centerHorizontal="true"android:background="@drawable/btn_background"android:text="开始体验"android:textColor="#ffffff"android:textSize="20sp"android:textStyle="bold"android:layout_marginBottom="20dp"android:visibility="gone"/><LinearLayoutandroid:id="@+id/point_ly"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentBottom="true"android:layout_centerHorizontal="true"android:layout_marginBottom="40dp"android:orientation="horizontal"/></RelativeLayout>

初始化圆点：

private void initPoint() {//获取layoutLinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);//设置每一个view即圆点的对左的偏移量params.setMargins(15,0,0,0);//根据图片多少来确定个数for (int i = 0; i < imgRes.length; i++) {ImageView imageView = new ImageView(this);imageView.setImageResource(R.drawable.dot_select);imageView.setLayoutParams(params); //把上面的控件属性设置到LinearLayout中if (i == 0){ //默认第一张为红色圆点imageView.setSelected(true);}else{imageView.setSelected(false);}//把圆点这个子视图导入我们的LinearLayout里面mLayout.addView(imageView);mImageViews.add(imageView);//跟着viewpager变换颜色}}

在页面滑动完成之后，改变圆点的颜色就可以了。

     //滑动时改变圆点的状态for (int i = 0; i < mImageViews.size(); i++) {if (i == position){mImageViews.get(i).setSelected(true);}else{mImageViews.get(i).setSelected(false);}}//当为最后一个时，显示button，并隐藏圆点if (position == mImageViews.size() -1){mLayout.setVisibility(View.GONE);mButton.setVisibility(View.VISIBLE);ObjectAnimator animator = ObjectAnimator.ofFloat(mButton,"alpha",0f,1f);animator.setDuration(1000);animator.start();}else{mLayout.setVisibility(View.VISIBLE);mButton.setVisibility(View.GONE);}

最后附上完整 Demo