震惊！短短几行代码搞定个人博客APP

2017-09-07

说出来你估计也信，我用不到1小时的时间搭出了一个个人博客的APP。

再骚一点，全程的手打代码居然不超过50行！

emmmm….好吧其实过程无比简单，只是利用了WebView控件。

先给你们看看效果：

主界面

要实现上面的效果，其实非常简单。

1.创建Project

打开功能健全的Android Studio，new一个project。导入模板的时候选择empty activity就可以了。

2.设置Style

首先来到布局文件activity_main.xml，直接把根节点设置为WebView，宽高肯定都是match_parent了，如下：

<?xml version="1.0" encoding="utf-8"?>
<WebView
    android:id="@+id/web_blog"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
</WebView>

这样就在主界面整个窗体上放了一个WebView控件。但是我们回到设计视图，发现窗口还有Action Bar……这就需要用一些手段来去除这个东西了。

打开MainActivity.java，我们要做的就是先把MainActivity声明里面的继承修改一下。默认是AppCompatActivity（默认带标题）修改为Activity。如下：

1	public class MainActivity extends Activity {...}

然后在onCreate()方法里面写上（先后关系不能乱哦）：

1 2	requestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.activity_main);

这样调试一下就看到Action Bar已经消失了，WebView已经铺满了整个页面。但是，状态栏颜色还是不和谐。我的解决方法是在colors.xml里面把colorPrimaryDark修改为我的网页的顶部颜色。

这样一来再去调试发现和谐了一些。那接下来去加载一下WebView

3.加载网页

WebView的加载很简单，只需在onCreate()方法里添加几行代码：

//初始化控件
web_blog = findViewById(R.id.web_blog);
//通过loadUrl()方法来设置需要加载的网页
web_blog.loadUrl("https://wifi9984.github.io");
//这个方法必须要写
web_blog.setWebViewClient(new WebViewClient());
//如果网页中包含JavaScript的话需要允许运行js
WebSettings settings = web_blog.getSettings();
settings.setJavaScriptEnabled(true);

这样再去调试一遍呢？Ooooops！为什么无法加载？？？

道理很简单…我们还需要在Manifest.xml里面添加联网权限许可……

1	<uses-permission android:name="android.permission.INTERNET"/>

需要注意的是，uses-permission需要添加在application节点上面！

4.其他小bug

首先，在滑动网页的时候我们会发现滑倒顶或者到底都会出现阴影动效。我个人感觉有点影响美观。很简单，在xml里面可以去掉。直接在WebView节点下设置fadingEdge和overScrollMode。完成后如下：

<?xml version="1.0" encoding="utf-8"?>
<WebView
    android:id="@+id/web_blog"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fadingEdge="none"
    android:overScrollMode="never">
</WebView>

然后是用户体验的bug，就是默认情况下按返回键是直接退出APP回到系统界面的，我们同样需要修改这个操作。

方法也比较简单，在MainActivity.java里，覆盖onKeyDown的方法。代码如下：

@Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if(keyCode == KeyEvent.KEYCODE_BACK){
            if(web_blog.canGoBack()){
                web_blog.goBack();
                return true;
            } else {
                System.exit(0);
            }
        }
        return super.onKeyDown(keyCode, event);
    }

这样就可以了。但是，但是，但是！如果你的网页有侧边栏的话，在网页主页打开侧边栏的情况下，canGoBack依然为false，这个时候单击后退键还是会退出APP。我用浏览器访问了一些类似的网站，发现都是同样的情况。于是我尝试让APP实现双击后退键才能退出。修改后的代码如下：

//先用一个long变量firstTime记录第一次点击返回键的时间
private long firstTime = 0;
@Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if(keyCode == KeyEvent.KEYCODE_BACK && event.getAction() == KeyEvent.ACTION_DOWN){
            if(web_blog.canGoBack()){
                web_blog.goBack();
                return true;
            } else {
                // 设置2000毫秒作为响应双击的延时
                if (System.currentTimeMillis()-firstTime>2000){
                    //来一个简单的Toast提示用户
                    Toast.makeText(MainActivity.this,"再按一次返回就退出了喔~",
                                   Toast.LENGTH_SHORT).show();
                    firstTime=System.currentTimeMillis();
                }else{
                    finish();
                    System.exit(0);
                }
                return true;
            }
        }
        return super.onKeyDown(keyCode, event);
    }

修改后在Navigation手抖点击返回之后就是这个样子：
修改后的Toast提示

哇，心情舒畅~就这样啦，弄好了~收工咯~（内测哈哈哈下载链接以后估计会直接贴在主页上吧~）