一个星期使用三种不同的开发模式完成资讯类App——《听风资讯》

Dio

图片加载

Glide

Image

Image

数据解析

Gson

ry

侧拉栏

、

列表

、

V-for

、

状态栏

轮播图

底部标签

导航栏

下拉刷新

异步模型

、

Await、Async

、

没有列出具体选项（即“/”）的格子即表示实现该功能还没有较好的技术手段或者本身就支持了，其余基本上都是当下较为流行的框架，版本号也是各代码仓库（、、Pub等）里最新（2020.6.22）的。

接下来，将会介绍作者在进行App开发时遇到的几个难点。

4.App开发时的感想 4.1 App（原生App）

原生App，即使用Java或者语言进行实现的应用。最早入坑时，接触的基本上都是原生App。由于技术栈的原因，可以让熟悉Java/语言的人很快就学会的很多特性，从而开始应用的研发。

当然，作为高度可定制并且兼容性更佳的开发模式，原生App基本上作为当下应用的主流。但与此同时，也产生了诸如屏幕适配，大图加载，资源装载等许多细节问题。幸而目前原生App已经发展很成熟了，有许多好用的工具可以解决这些问题。

作为工程师，最需要熟悉的App开发模式就是原生App了。记录完这篇博客后，作者将会研究一个更为成熟、好用的原生App脚手架，并通过另一篇博客进行记录（立下flag）。

接下来，谈谈作者在进行原生App开发时遇到的一些主要难点：

4.1.1 的设计 4.1.1.1

是官方提供的一种实现底部标签切换的控件，在 3.0之后就可以通过创建中的 ，如图所示：

最开始做项目时，要实现底部标签需要使用 + 来实现这部分的功能，还需要编写一个来满足图标在点击时显示不同的图样，而使用似乎就能很好地解决这块的问题。

当然，使用时，需要注意几个要点：

在初始化管理着的时，如果你的项目中使用到了，则需要先绑定，否则会报空指针异常，代码如下：

// 初始化ToolBar，注意要在Fragment初始化之前调用，不然会报空指针异常，这里踩过坑！
setSupportActionBar(tb_title);
// 初始化Fragment
initFragment();

id的对应。标签和标签中控件的id要对应，不然会不显示内容。

另外，若使用，布局则推荐使用，即约束布局，这样会比较好控制控件的摆放（这个控件作者本人用的也不是很熟练，在使用时遇到了遮挡的情况，导致内容显示不全，最后作者用了很笨的方法才调整成功，希望有比较了解这块内容的读者能够在评论区不吝赐教，作者将感激不尽）

4.1.1.2

是官方提供的一种实现状态栏切换的控件，作为替换的状态栏，功能要更为强大。

使用时，需要注意几个要点：

应用默认使用的是，要使用，记得在/style.xml中声明应用的样式，即代码如下：

	<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
   	 
    	"colorPrimary">@color/colorRed
    	"colorPrimaryDark">@color/colorRed
    	"colorAccent">@color/colorAccent
	style>

要通过实现沉浸式状态栏，只需要修改/style.xml中的配置颜色，并且让的颜色也对应即可，代码如下：

    <item name="colorPrimary">@color/colorReditem>
    <item name="colorPrimaryDark">@color/colorReditem>

<androidx.appcompat.widget.Toolbar
    android:id="@+id/tb_title"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">
</androidx.appcompat.widget.Toolbar>

的标题默认是显示在左边的，要想显示在正中，常见的做法是在中嵌套一个居中显示的，这里也可以使用一个工具类来调整中标题的摆放，代码如下：

public class ToolBarUtils {
public static void setTitleCenter(Toolbar toolbar) {
    String title = "title";
    final CharSequence originalTitle = toolbar.getTitle();
    toolbar.setTitle(title);
    for (int i = 0; i < toolbar.getChildCount(); i++) {
        View view = toolbar.getChildAt(i);
        if (view instanceof TextView) {
            TextView textView = (TextView) view;
            if (title.equals(textView.getText())) {
                textView.setGravity(Gravity.CENTER);
                Toolbar.LayoutParams params = new Toolbar.LayoutParams(Toolbar.LayoutParams.WRAP_CONTENT, Toolbar.LayoutParams.MATCH_PARENT);
                params.gravity = Gravity.CENTER;
                textView.setLayoutParams(params);
            }
        }
        toolbar.setTitle(originalTitle);
    }
	}
}

默认是没有返回按钮的，若想开启需要先调用().abled(true);，然后实现其点击方法，代码如下：

/**
 * 点击Toolbar上的“回退”按钮时触发的逻辑
 * @param item
 * @return
 */
@Override
public boolean onOptionsItemSelected(MenuItem item) {
    if(item.getItemId() == android.R.id.home)
    {
        finish();
        return true;
    }
    return super.onOptionsItemSelected(item);
}

可以在设定时用?attr/来界定其高度，代表之前应用还拥有控件时的高度，控件整体代码如下：

<androidx.appcompat.widget.Toolbar
    android:id="@+id/tb_title"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">
androidx.appcompat.widget.Toolbar>

4.1.1.3

是官方提供的一种实现下拉刷新的控件，作为替换的下拉刷新控件，使用和集成要相对简单一些。

使用时，需要注意几个要点：

在使用时，建议只包裹一个List类型的控件即可，代码如下：

<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
    android:id="@+id/srl_head"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rl_head"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
androidx.swiperefreshlayout.widget.SwipeRefreshLayout>

在实现的监听器()方法后，下拉刷新时会循环展示刷新的动画，需要在数据显示完毕后手动调用(false)来关闭动画

4.1.1.4

是官方提供的一种实现数据列表的控件，作为替换的数据列表控件，样式和使用都要相对好一些。（可能是作者使用比较久了，觉得的布局适配比较难实现）

使用时，需要注意几个要点：

的适配器需要继承.，可以实现默认的优化；的适配器的构造方法所接受的数据 *** 只有发生变动了，的数据刷新方法才会生效，因此若单独写了其适配器类，则需要在获取到数据的时候配置以及其适配器； 4.1.1.5

是官方提供的一种实现导航栏的控件，作为替换的导航栏，样式和使用都要相对好一些。一般使用都是需要搭配的，因此可以使用官方提供的来绑定和，并且在注册适配器时重写方法，以此来获取由所管理着的所对应的碎片（如果想要保证顺序一致则需要在创建 *** 时调整插入的数据）

4.1.2 Gson的解析 4.1.2.1 Gson在遇到类型错误时的处理

Gson是官网提供用来解析Json数据的工具，只需要将Json数据转化成实体类，就可以通过Gson将其转化成对象的形式。

然而，有一种情况——平常解析的Json数据中的某个字段平时是一个对象类型，而在网络不佳的情况下则会传回一个空字符串("")，也就是说Json数据同一个字段同时出现了两种类型的情况。在这样的情形下，Gson会解析失败，并且会直接抛出异常，导致App闪退。

为了解决这个问题，Gson提供了接口来让某个类自定义其反序列化的过程，具体操作可参照此篇博客：

——Gson自定义解析类型错误的字段

这篇博客很好地总结了Gson在解析Json同字段不同类型时的对策，事实上Gson还有许多使用方法，等待我们去学习。

4.1.2.2 Gson和缓存

为了避免Gson在解析失败等问题上抛出异常导致整个应用崩溃，可以在每次使用Gson解析数据之后将数据写入缓存（文件、Sp和数据库均可），这样可以保证在异常情况下（没有网络，Gson解析失效，网络传输慢）依然可以获得之前解析好的数据。作者使用Sp作为读写缓存，实现了一个简单的缓存工具类，代码如下：

public class jsonCache {
    // 设置缓存
    public static void setCache(Context context, String key,String value) {
        SharedPreferencesUtils.putString(context,key,value);
    }
    // 读取缓存
    public static String getCache(Context context, String key,String defvalue) {
        String string = SharedPreferencesUtils.getString(context, key, defvalue);
        return string;
    }
}

4.1.3 的懒加载

使用来管理，会同时导致这些执行，即提前加载好所有的数据，这会让应用接收庞大的数据导致卡顿。为了解决这个问题，需要实现的懒加载，即切换到这个时再获取其数据，保证应用的流畅度。说来惭愧，这项优化其实作者还没有进行落实，还在研究当中，力求寻找更优的方法，感兴趣的读者也可以查询相应资料。

4.1.4 Glide的占位图

Glide是比较常用的图片加载工具，底部封装了三级缓存等大量图片加载优化。Glide还提供了大量的工具方法，其中包括有占位图的设置，即在图片还未加载出来时先放置占位图，这样可以提高用户的体验度，提高了应用的可用性。

4.2 Web App（）

，即使用Html、Css、等前端语言进行实现的应用。中间因为学习了一段时间的Java服务器的开发，自然而然也会接触到这些前端语言的学习。由于技术栈的原因，可以让熟悉前端的人在不熟悉后端语言的基础上，开始应用的研发。

的开发相对其他两种App开发模式要更为迅速，因为所有代码基本上都是基于前端代码来实现，并且对应的并非只有一个平台，还支持IOS、Web等平台。但与此同时，对于系统底层驱动的调用略显乏力，尤其是不支持访问本地数据库的特性使其不支持作为主流App的开发方向。另外的大部分功能都需要依据网络，若失去网络的支持，可能只形如空壳，很多开发者会戏称为“手机上的PPT”。

当然，作为能够快速开发并且UI设计较佳的开发模式，适合作为资讯类等App的开发模式。仰仗于前端编程语言，具有控件丰富的组件市场，这也算是相较于其他开发模式较为优势的地方。

在开发时，使用的主要技术栈为，其主体语言为Vue.js，若熟悉此技术栈会很快上手其开发。除了一些ES6语法之外，也支持Scss等样式，生态圈也较为成熟，基本上可以做到大部分组件“拿来即用”，所以大致上没有遇到什么难点，就暂且略过这部分了。

4.3 App（混合App）

混合App，即混合使用几种语言进行实现的应用，最典型的混合App技术栈就是React 和。在学习了一段时间的原生App后，为了让App能够同时支持和IOS端，避免一种App因为平台的不同而需要开发两套项目的成本花销，混合App应运而生。混合App拥有原生App的性能快和兼容性强等特性，还拥有的跨平台运行和界面优美的特点，更像是这两者App取长补短之后的产物。

当然，作为开发方向的崭新产物，混合App的生态圈还尚未完备，一些细节性的东西可能还是没有原生App的实现要好，而兼容性方面或许还是要更胜一筹。由于React 的配置需要使用npm，等前端工具来配置，步骤较为繁琐，所以这里还是采用较新的来完成混合App的开发。

主要采用了Dart语言进行开发，Dart语言有点类似于Java语言，如果对Java比较熟悉的话会很快上手Dart语言。提供了比较方便的布局，可以快速实现一个标准App的大概样式。

接下来，谈谈作者在进行混合App开发时遇到的一些主要难点：

4.3.1 使用()刷新界面

在进行操作时，若界面上没有显示出来对应的数据，多半是没有调用()来进行刷新，这是由于的特性所致。例如在点击底部导航栏时，由于数据没有发生变化，界面同样也不会发生变化，就不会产生界面切换的效果，这时候就需要调用动态调用()，来通知这个状态已经发生了改变，需要重绘界面。

4.3.2 使用ry来解析Json数据

在中，由于没有、、Gson等Json解析工具，解析Json变得异常麻烦。使用原生的虽然也可以解析Json，但是遇到格式复杂的Json数据时，实现庞大的Json实体类是很痛苦的事情。这时候就可以使用ry来进行Json数据的解析，并自动生成实体类。在获取数据时，只需要像使用Json解析工具时一样即可，代码如下：

	// 使用FlutterJsonBeanFactory进行解析
      Map jsonMap = json.decode(response.toString());
      NewsEntity newsEntity = newsEntityFromJson(new NewsEntity(),jsonMap);
      NewsResult result = newsEntity.result;
      _newsDataList = result.xList;

4.3.3 使用完成异步操作

由于获取网络数据并解析之后放入列表中是耗时操作，需要将该操作放入异步模型中执行，防止阻塞主线程。的异步操作主要通过、Async、Await来实现，在获取数据时，调用.()，既可以获取对应方法中的数据，并且可以监听数据获得的实时性，在未获取到数据时播放环形进度条，代码如下：

	FutureBuilder<List<NewsResultList>>(
              future: fetchNews(newsType),
              builder: (context, snapshot){
                if(snapshot.hasError) print(snapshot.error);
                return snapshot.hasData ? NewsListItem(news: snapshot.data,scrollController: _scrollController) : Center(child: CircularProgressIndicator());
              },

4.3.4 使用()完成线程隔离

尽管使用了来完成异步操作，在数据读取的同时还是会导致主界面卡顿，这将会降低应用的使用感，提供了()来实现将操作的线程进行隔离的操作，与之对应的还有。但是要相对重量级一些，这里使用()即可达到目标。

5.总结

经过一周对三种App开发模式的学习并实践，作为开发人员，作者认为原生App开发的基础还是必要的，其中涉及了许多高深的原理需要去理解。如果对前端语言有些基础的话，可以尝试。而对于混合App，由于需要一定的学习成本，建议对原生App的开发相当熟悉之后再去尝试，不然会对其中的许多概念感到模糊。