近有很多朋友都問到我：我月薪3000塊，是選擇分期搞一部iPhoneX呢，還是老老實實的買一部華為/小米/魅族的千元機隨便用一用？

讓我們來深度剖析一下，為什么要選擇iPhoneX？是因為小劉海？是因為全面屏？其實大部分要買iPhoneX的朋友主要是為了iPhone這個名字，用起來有面兒。

多少人選擇iPhone X是為了蘋果這個品牌？

作為一款旗艦手機，iPhone X的設計風格與前幾代iPhone相比有了明顯的變化，但價格偏高是不爭的事實。一部iPhone X的售價可以與中高檔筆記本電腦媲美。對于一些消費者來說，并不是因為不喜歡iPhone X而沒入手，而是iPhone X給人的感覺價格太高了，名副其實的萬元級別手機。

價格是影響消費者選購手機的重要因素。尤其是對于價格很高的手機來說，潛在消費群體會被壓縮在一個相對較小的范圍內?，F如今，對于老百姓來說，花費接近1萬元買一部手機還是比較奢侈的。

那么月薪3000選擇哪一款手機最合適呢？其實選擇國產手機是最合適的，因為經濟實惠，不會給自己太大的負擔和壓力，如果是選擇購買iPhoneX，月供就是每個月的痛苦，所以說不要為了一時的“面子”“爽快”，讓自己陷入重重困境。下面筆者就針對不同人群，不同需求，給大家推薦幾款值得購買的安卓手機，看看它們是不是符合你的需求。

選擇一：買手機走心還是走腎？

推薦機型：vivo X20售價：2998元

vivo X20京東購買地址：https://item.jd.com/5025991.html

2017年下半年，全面屏逐漸成為智能手機的一項流行元素，各大廠商都紛紛推出了全面屏產品，而vivo X20正是其中的代表作之一。vivo官方宣稱這款手機開啟了屏幕2.0時代，在我們的實測中也發現vivo X20確實有不錯的表現。蘋果在今年也發布了全面屏新品iPhone X，只不過是售價過高，只適合極客用戶購買。

vivo X20是一款采用全面屏設計的手機

現如今手機屏幕越做越大，特別是采用了全面屏設計之后，vivo X20更是搭載了一塊6.01英寸18:9的Super AMOLED屏幕，對于用戶來說如果不支持分屏操控的話那就太浪費了。作為安卓陣營第一款可以量產、技術成熟的全面屏手機，vivo X20采用了18:9的超高屏占比2K AMOLED全面屏，加入了Face Wake面部識別技術，采用生物識別的機制，相比較于Face ID來說更加安全。

而且vivo在之前的上海MWC展會上也發布了屏下隱形指紋解鎖技術，可以說為全面屏手機的未來打下基礎。如果說iPhone X開啟了蘋果十年的全面屏時代，vivo X20則開啟了安卓陣營真正意義上的新全面屏時代。當然vivo X20絕不僅僅只有全面屏一項硬實力，驍龍660帶來的多核多線程模式、更加強大的前置柔光雙攝、聽感更好的Hi-Fi新技術，都將是vivo X20的大殺器。

vivo X20的售價只有iPhone 的一半

顯然iPhone高昂的價格并不是適合所有人購買，而價位只有其一半的vivo X20或許就是個不錯的選擇：更接近潮流的全面屏設計、更加輕薄小巧的機身、獨立音頻芯片、比iPhone更好的人像拍攝、人臉識別技術加成、更佳的系統易用性、更快的充電速度，同時穩定持續的性能輸出也足夠使用。

選擇二：更快、還能更懂你的它

推薦機型：榮耀V10售價：2699元

榮耀V10京東購買地址：https://item.jd.com/5853593.html

對于廠商來說，全面屏其實是把競爭又拉回了同一起點，加重了同質化競爭，加重了整個產業負擔。恰逢此時，AI手機的到來讓我們看了希望，聽說最近搭載人工智能手機榮耀V10都火到國外去了，不僅登上了高大上的紐約時代廣場，還受到了國外多家媒體的組團打Call，筆者身邊已經有不少朋友都買了榮耀V10，因為這款手機真的是名副其實地好。

榮耀V10是一款搭載人工智能的手機

榮耀V10搭載麒麟970芯片加上EMUI8.0系統的軟硬雙AI組合，可以為用戶提供讓手機“更懂你”的革新體驗。和以往的海思處理器不同的是，麒麟970內置了華為與中科院共同研發的內置神經網絡處理單元（NPU），在能效和性能優化上，麒麟970和上一代相比有著較大的提升，這意味著在更少的時間和能耗下，這款手機可以完成更多的AI計算任務。所以在這塊人工智能時代5星推薦處理器加持下，我們能看到很多具有AI性能的功能。比如說人臉識別、語音助手、AI拍照、AI翻譯，AI游戲，有了榮耀V10，智慧生活一秒開啟。

榮耀V10的售價也才不超過3000元

如此看來，榮耀V10配置強悍，AI體驗好、性能快，堪稱完美。不到3000元的榮耀V10和近萬元的iPhone X，你一定知道選誰更值得。

選擇三：買信仰還是性價比？

推薦機型：華為P10 售價：3488元

HUAWEI P10京東購買地址：https://item.jd.com/4483094.html

之前有個朋友問我iPhone 7和華為P10買哪款好？這兩款手機均是發布了有一段時間的機型，并且從發布開始關注度上兩款手機均沒有下降的趨勢，一直處于激烈競爭的狀態。不過蘋果與華為在今年先后發布新旗艦iPhone8和華為Mate10之后，作為老旗艦的華為P10和iPhone7自然逃不了降價的命運，于是競爭再次達到巔峰。

華為P10依然是中高端最值得買的一款旗艦手機

華為P10手機自身的確一點不弱，隨便拿出一個功能出來都是鮮有對手的。搭手機本身搭載的EMUI5.1更是被贊為最好用的安卓體系之一。唯有小米的MIUI系統勉強能與其比尖。手機的外觀上時尚大氣的手感，顏值極高，相當吸引眼球，加上徠卡雙攝產出的人像。靜物照片，更是超卓萬分，在去年8月份華為P10不負眾望更是拿下了銷量榜首冠軍。

華為P10官方售價已經降至3488元，性價比非常高

華為P10如今價格上官方直降400，第三平臺更是直降700元，忽略此前“華為P10事件”的影響，這款手機的性價比是非常之高的，相比iPhone7則更有優勢。iPhone7在價格上雖也有調整但仍是四千多元的高價格，這一次，華為P10更勝一籌。

選擇四：性能頂級、好評不斷

推薦機型：一加5T 售價：2999元

一加5T京東購買地址：https://item.jd.com/5716985.html

在購買手機時，消費者考慮的因素有很多。在我們的特色欄目《數說新機》中也做了一個調查，從調查的數據來看，更多的消費者都看重大內存、大電池、使用體驗、顏值以及快充，還有的消費者看重全面屏設計、手感、雙攝、2K屏幕這些，而面部識別功能相對來說熱度就低一些了。當下安卓手機中內存最大的為8GB，配備8GB內存的手機也不是太多，其中一加手機5T就是一款既有大內存，又有大電池，并且使用體驗也非常出色的產品。

一加5T

從用戶吸引力來看，“不將就”的強悍配置已經成為一加5T的標簽和名片，高通驍龍835移動平臺、全面屏、6GB/8GB大內存以大優勢位居用戶吸引力前三。

除了生猛的參數配置，一加5T海外版預裝基于Android 7.1.1的氧OS 4.7.0系統，其指紋識別解鎖速度僅需0.2s，此外，該機還支持面部識別，不過調查數據顯示，面部識別目前在一加5T的產品吸引力方面還不算強。

一加5T是一加旗下當下的主打產品，這款手機無論是設計還是配置均處于Android頂端之列。但一加5T的售價并沒有上漲，6+64GB版售價2999元，8+128GB版售價3499元，熔巖紅8+128GB同樣是3499元。

一加5T 在京東上好評不斷

在2017年11月末上市的一加5T在用戶圈中的口碑一直居高不下，值得注意的是：去年的12月份一加5T在京東商城的好評率就一直保持100%，隨著評論基數的增加，到目前為止一加5T的京東好評率仍然保持在100%，評價基數已高達近10萬條，并且隨著產能的爬坡，一加5T星辰黑全版本已經實現了開放購買，銷量與日俱增，心動的小伙伴可以準備行動起來了。

寫在最后：

上述盤點的旗艦手機，在硬件配置、系統體驗、軟件優化以及續航上都有著優良的表現，在iPhone X面前不落下風，拿出手也不丟面子。此外這些手機擁有著與蘋果迥然不同的特色，vivo X20、一加5T、榮耀V10這些都是當下的主流產品，價格也都在3000元以內，適合追求性能的消費者購買；華為P10是當下的旗艦級手，該機的起售價為3488元，適合預算較多的消費者購買。

最后，還是要回到文章最開頭大家最關心的問題，買iPhone X還是安卓手機。我的觀點是，如果你真的對iOS系統熱衷，并且對全面屏或者裝逼沒什么執念的話，現在8或者8Plus是個不錯的選擇。因為隨著X的上市，這兩款產品在京東等第三方渠道的售價已經跌破了發行價。更便宜的價格可以買到功能差不多的iPhone。

如果你現在使用的是7或者7Plus，并且對全面屏幕沒什么執念的話，那么并不推薦你換手機了，有點浪費。

如果你對蘋果沒有那么的熱衷，又沒有太多的預算，那么不用逞強去買蘋果。因為除了蘋果，安卓陣營的旗艦也是非常出色。隨著近幾年安卓陣營的飛速發展，媲美iOS流暢度的安卓機也逐漸出現。同時相對于顏值單一的iPhone來說也有更多選擇，而且它們的售價可能還不及iPhone X的一半。與其死磕蘋果情懷，不如來一款安卓旗艦。

人學習手機 App 開發，一開始總要選擇一條學習路徑。

如果你熟悉 Java 語言，可以學習安卓開發；如果熟悉腳本語言（比如 Python 或 Ruby），可以學習 Swift 語言，進行 iOS 開發；如果像我一樣，比較熟悉 Web 網頁技術，那么 H5 開發是最容易上手的。

這個系列教程的第一篇，已經介紹過了手機 App 的種類^[1]。所謂的 H5 頁面，其實就是混合 App 的前端，外面是一個原生的殼，里面是 Web 網頁。本文緊接上一篇，介紹手機 App 開發的技術棧，尤其是跟 H5 開發相關的技術。

本文由國內最大的在線教育平臺之一“騰訊課堂”^[2]贊助。他們現在啟動了“騰訊課堂101計劃”^[3]，推廣優質課程資源。希望學習和提高手機 App 開發技術的朋友，可以留意一下本文結尾的安卓課程信息。

一、手機 App 的技術棧

手機 App 的技術棧可以分成三類。

（1）原生 App 技術棧（native technology stack）

原生技術棧指的是，只能用于特定手機平臺的開發技術。比如，安卓平臺的 Java 技術棧，iOS 平臺的 Object-C 技術?；?Swift 技術棧。

這種技術棧只能用在一個平臺，不能跨平臺。

（2）混合 App 技術棧（hybrid technology stack）

混合技術棧指的是開發混合 App 的技術，也就是把 Web 網頁放到特定的容器中，然后再打包成各個平臺的原生 App。所以，混合技術棧其實是 Web 技術棧 + 容器技術棧，典型代表是 PhoneGap、Cordova、Ionic 等框架。

如果已經掌握了 Web 技術，這個技術棧就主要學習容器提供的 API Bridge，網頁通過它們去調用底層硬件的 API。

（3）跨平臺 App 技術棧（cross-platform technology stack）

跨平臺技術棧指的是使用一種技術，同時支持多個手機平臺。它與混合技術棧的區別是，不使用 Web 技術，即它的頁面不是 HTML5 頁面，而是使用自己的語法寫的 UI 層，然后編譯成各平臺的原生 App。

這個技術棧就是純粹的容器技術棧，React Native、Xamarin、Flutter 都屬于這一類。學習時，除了學習容器的 API Bridge，還要學習容器提供的 UI 層，即怎么寫頁面。

（4）小結

H5 開發主要用在混合技術棧。但是，跨平臺技術棧的某些容器也會用到（比如 React Native），因為它們的 UI 層借鑒了 Web 模型。

另外，混合技術棧和跨平臺技術棧的基礎，都是原生技術棧，因為最終都要編譯成原生App。所以，不管使用哪一種技術棧，多多少少要了解一些各平臺的原生技術。

下面就依次介紹上面三類技術棧，每個技術棧都會給出一個最簡單的例子：加載網頁。通過各種技術棧加載網頁的不同做法，幫助大家理解它們的特點，對 App 的技術實現有一個總體的認識。

二、WebView 控件

講解具體的技術棧之前，大家需要知道，不管什么技術，最終在 App 里面顯示網頁，一定需要一個網頁引擎，這樣才能解析網頁。

通常情況下，App 內部會使用 WebView 控件作為網頁引擎。這是系統自帶的控件，專門用來顯示網頁。應用程序的界面，只要放上 WebView，就好像內嵌了瀏覽器窗口，可以顯示網頁。

不同的 App 技術棧要顯示網頁，區別僅僅在于怎么處理 WebView 這個原生控件。

?原生技術棧：需要開發者自己把 WebView 控件放到頁面上。?混合技術棧：頁面本身就是網頁，默認在 WebView 中顯示。?跨平臺技術棧：提供一個 WebView 的語法，編譯的時候將其換成原生的 WebView。

注意，不同系統的 WebView 控件名稱不一樣，安卓系統就叫 WebView，iOS 系統有較老的 UIWebView，也有較新的 WKWebView，作用都是一樣的，差異在于功能的強弱。

三、原生技術棧

原生技術棧分成 iOS 和安卓兩個平臺。

簡單說，iOS 的原生技術棧就是使用 Object-C 語言或 Swift 語言，在 Xcode 開發環境中編程。安卓的原生技術棧，則是使用 Java 語言或 Kotlin 語言，開發環境是 Android Studio。

下面就來看看，它們怎么加載網頁。

3.1 Xcode

iOS 開發需要安裝 Xcode。它是一種集成開發環境（IDE），也是蘋果公司指定的 iOS 官方開發工具，所有蘋果手機的 App 都由它打包生成。

它可以在 Mac 電腦上通過應用商店免費安裝。注意，Xcode 只支持 Mac 系統，不支持其他系統。

安裝完成后，打開新建一個項目，類型是單視圖 App，然后系統會詢問一些項目參數和儲存位置，這里就不詳細說明了。

然后，就進入了開發環境。

左側的目錄樹里面，找到ViewController.swifter文件，它負責視圖邏輯。按照官方文檔^[4]，填入下面的代碼。

上面代碼的意思是，啟動 App 加載視圖的時候（loadView()），新建一個 WebView 控件的實例。視圖加載成功后（viewDidLoad()），WebView 再去加載外部網頁（紅框部分）。

然后，就可以查看代碼運行結果。點擊工具欄的運行按鈕，Xcode 就會彈出一個 iPhone 模擬器，里面就是當前代碼的運行結果。

如果一切正常，就可以讓 Xcode 對源碼打包，生成 App 的二進制安裝文件。

3.2 Android Studio

安卓的官方開發工具是 Android Studio，可以去官網^[5]下載。

安裝完成后，打開新建一個項目，類型是“Empty Activity”。

Android Studio 會詢問項目參數，包括項目名稱、開發語言（Java）等，然后就進入了開發環境。因為它是基于 Java IDE 修改的，懂 Java 的朋友應該對這個界面比較熟悉。

按照網上的這篇教程^[6]，接下來需要修改三個文件，其中最主要的是把MainActivity.java文件改成下面這樣。

上面紅框處的代碼，就是在頁面上添加并設置 WebView 實例，指定生成視圖的時候（onCreate()），WebView 實例去加載外部網頁。

運行代碼之前，Android Studio 要求必須連接真機，或安裝安卓模擬器。完成以后后，在工具欄上點擊運行按鈕，就可以運行代碼查看效果了。

如果一切正常，就可以讓 Android Studio 打包，生成 App 的二進制安裝文件。

四、混合技術棧

上面的原生技術棧需要自己新建 WebView 實例，相比之下，混合技術棧就簡單多了。因為頁面就是網頁，所以容器已經設置好了 WebView，開發者直接寫頁面即可。

4.1 框架種類

混合技術棧的各種容器框架之中，歷史最悠久是 PhoneGap^[7]，誕生于2009年。后來在2011年被 Adobe 公司收購，改名為 Adobe PhoneGap。

Adobe 公司將 PhoneGap 的核心代碼，后來都捐給了 Apache 基金會，作為一個全新的開源項目，名為 Apache Cordova^[8]。

PhoneGap 和 Cordova 現在是兩個獨立發展的開源項目，但是彼此有密切的關系，可以簡單理解成 Cordova 是 PhoneGap 的內核，PhoneGap 是 Cordova 的發行版。

后來，其他人也開始基于 Cordova 封裝自己的框架，所以市場上有許多基于 Cordova 的開源框架，比較著名的有 Ionic^[9]、Monaca^[10]、Framework7^[11]等。

所有這些框架的共同點，都是使用 Web 技術（HTML5 + CSS + JavaScript）開發頁面，再由框架分別打包成 iOS 和安卓的 App 安裝包。它們的優點是開發簡單、周期短、成本低，缺點是功能和性能都很有限。

4.2 Ionic 實例

基于 Cordova 的框架，用法都大同小異，下面就以 Ionic 為例，演示如何加載外部網頁。

首先，根據官方文檔^[12]，生成項目的腳手架。

$ npm install -g ionic@latest$ ionic start myApp blank --type=react$ cd myApp

接著打開src/pages/Home.tsx文件，插入<iframe>標簽即可。

上面代碼中，由于頁面本身就是網頁，所以可以直接用<iframe>標簽插入外部網頁。

然后，在本機起一個 Web 服務，看看 Demo 的效果。

$ ionic serve

上面命令會自動打開瀏覽器窗口，訪問本機的8100端口，在瀏覽器中顯示網頁效果。

如果一切正常，在命令行窗口按 Ctrl+c，退出服務。編譯成 App 安裝包的方法可以參考官方文檔^[13]。

五、跨平臺技術棧

上面的混合技術棧使用 HTML 語言編寫頁面，再用 WebView 控件加載頁面，所以只寫一次頁面，就能支持多個平臺?？缙脚_技術棧也能做到多平臺支持，但是原理完全不同。

跨平臺技術棧的框架，都是使用自己的語法編寫頁面，不使用 Web 技術，編譯的時候再將其轉為原生控件，或者使用自己的底層控件，生成原生 App。這樣就完全解決了 Web 頁面性能不佳的問題。下面介紹三個這樣的框架。

?React Native: 使用 JavaScipt 語言編寫頁面?Xamarin：使用 C# 語言編寫頁面?Flutter：使用 Dart 語言編寫頁面

5.1 React Native

（1）原理

2013年， Facebook 公司發布了 React 框架。這個框架是為網頁開發設計的，核心思想是在網頁之上，建立一個 UI 的抽象層，所有數據操作都在這個抽象層完成（即在內存里面完成），然后再渲染成網頁的 DOM 結構，這樣就提升了性能。

很快，工程師們就意識到了，UI 抽象層本質上是一種數據結構，與底層設備無關，不僅可以渲染成網頁，也可以渲染成手機的原生頁面。這樣的話，只要寫一次 React 頁面，就能分別編譯成 iOS 和安卓的原生 App。這就是 React Native 項目的由來。

注意，React Native 雖然也使用 JavaScript 語言，并且寫法看上去像 Web 頁面，但其實所有控件都是自己定義的，編譯時再一一翻譯為對應的原生控件。舉例來說，React Native 的文本渲染控件是<Text>，翻譯成 iOS 控件為UIView，翻譯成安卓控件為TextView。這種做即保證了性能，又做到了跨平臺支持，所以一誕生就引起開發者的關注，成了熱門技術。

還有一個 NativeScript^[14]框架，跟 React Native 很像，也是使用 JavaScript 語言，然后編譯成原生控件。不過，它的開發模型是基于 Angular.js，而不是 React。

（2）實例

下面就是 React Native 加載外部網頁的實例。為了方便使用，官方團隊提供了一個封裝好的工具集，叫做 Expo^[15]。第一步，在手機安裝 Expo 的 App 客戶端（App Store^[16]，Google Play^[17]）。

然后，在命令行安裝腳手架工具expo-cli，新建一個示意項目。

$ npm install -g expo-cli$ expo init rnDemo

新建項目時，會要求你選擇項目模板，可以選minimum模板。然后，還會要求你填寫項目描述displayName，這個可以隨便寫。

然后，安裝 React Native 自己的 WebView 控件。

$ cd rnDemo$ npm install --save react-native-webview

接著，打開主頁面的腳本文件App.js，將其改成下面的代碼。

上面代碼中，React Native 自身的WebView控件，編譯時會分別轉為 iOS 和安卓的原生 WebView 控件。

接下來，預覽頁面效果?？梢韵劝阉幾g成 Web 版，在瀏覽器預覽，這樣比較快，立刻就能看到效果。

$ npm run web

運行上面的命令，命令行會出現一個二維碼。

這時可以打開手機端的 Expo 客戶端，掃描這個二維碼，就會顯示 App 的頁面。注意，計算機和手機必須在同一個局域網。

（3）React Native 的問題

React Native 的想法雖然很美好，但是實際開發中出現了各種各樣的問題。

最主要的一個問題是， UI 抽象層翻譯出來的 iOS 和安卓原生頁面，做不到完全一致，尤其是復雜頁面，樣式或功能存在差異。編譯出來兩個平臺的原生 App 往往是一個正常，另一個會出現各種奇怪的小毛病。React Native 的底層還是沒有做到無縫適配，它至今沒有發布 1.0 版（2019年底是 0.61 版），這多多少少也說明了一些問題。

如果你想用 React Native 做到 iOS 和安卓體驗一致，并且充分發揮原生控件的功能，就需要同時熟悉 React Native、iOS、安卓三個平臺，這對開發者的要求實在太高了。Airbnb 公司在使用 React Native 兩年后，宣布放棄，改用原生技術棧。他們寫了一篇很長的文章^[18]，解釋為什么這么做，React Native 到底有什么問題，大家可以參考那篇文章。

5.2 Xamarin

Xamarin 是微軟公司的跨平臺 App 開發框架，原理跟 React Native 很相似，只不過它的語言是 C#。

它的使用需要 Visual Studio，這里就不舉例了。根據官方文檔^[19]，WebView 的用法如下。

上面代碼中，首先新建了一個 WebView 控件的實例，然后把這個實例放到布局上，跟原生 App 的語法很像。

5.3 Flutter

Flutter^[20]是谷歌公司最新的跨平臺開發框架。它為了解決 React Native 的平臺差異問題，采用了一個完全不同的方案。

它自己實現了一套控件。打包的時候，會把這套控件打包進每一個 App，因此不存在調用原生控件的問題。不管什么平臺，都調用內嵌的自己那套控件，就能做到 iOS 和安卓體驗完全一致。

Flutter 歷史還不長，應用還不廣泛，API 也沒穩定下來。但是很值得關注。

加載外部網頁的實例，可以參考 Flutter 官方團隊的這篇文章^[21]。核心代碼如下：

上面代碼使用的是 Dart 語言。它是 Flutter 的官方語言，接近 JavaScript 語法，但是多了靜態類型支持。

六、總結

通過上面的介紹，希望大家已經了解了各種技術棧的特點。

（1）原生技術棧的技能和體驗最好，對于復雜的大型 App，如果條件允許，應該采用這種方式開發。

（2）混合技術棧的成本低，靈活性好，對性能要求不高的簡單 App，尤其是純展示性的頁面，可以采用這種方式開發。

（3）跨平臺技術棧適用于，存在外部或內部條件的限制，只有一個團隊開發跨平臺 App 的情況。

（正文完）

安卓開發高級 UI 課程

手機 App 的 UI（用戶界面），往往是 App 成功的關鍵因素：產品的外觀是否漂亮，點擊和滑動是否流暢，意圖是否清晰，都會影響到用戶的留存率。一個好的 UI 不僅體現了產品經理和開發者的素質，還可以有效降低拉新成本。

一般的開發者接到產品的 UI 設計方案之后，可能就會去網上找類似的效果，看看有沒有開源代碼。但是，優秀的開發者會努力思考，如何通過完全自定義來實現這個效果，做到功能和性能的最佳狀態。

這就要求開發者具有實現高級 UI 的開發能力，理解安卓 UI 的底層實現原理，比如自定義 View 的渲染流程（onMeasure->onLayout->onDraw），以及交互設計（touch事件）。

怎樣才能高效地學習安卓高級 UI 開發，早日進階成為高級安卓工程師呢？這里介紹享學課堂的一門課程 《高級安卓 UI ——自定義 ViewGroup 與 UI 性能優化》，它帶大家一行一行代碼去實現一個京東自定義ViewGroup，研究系統的FrameLayout與ViewPager的源碼，最后通過閱讀源碼，分析ViewPager設計過程中的顯示問題和性能問題。下圖是課程介紹（點擊看大圖）。

這個課程是直播課程，在線實時答疑，特別邀請了 Alvin 老師（前三星/小米高級研發經理）主講，只需要0.1元就能參與。聽課之后覺得滿意，還可以學習其他 Android 高級進階的實戰課程。

（完）

References

[1]手機 App 的種類:http://www.ruanyifeng.com/blog/2019/12/hybrid-app-concepts.html

[2]“騰訊課堂”:https://ke.qq.com/

[3]“騰訊課堂101計劃”:https://edu.qq.com/a/20190119/005414.htm

[4]官方文檔:https://developer.apple.com/documentation/webkit/wkwebview

[5]官網:https://developer.android.com/studio

[6]這篇教程:https://codingislove.com/android-web-view/

[7]PhoneGap:https://phonegap.com/

[8]Apache Cordova:https://cordova.apache.org/

[9]Ionic:https://ionicframework.com/

[10]Monaca:https://monaca.io/

[11]Framework7:https://framework7.io/

[12]官方文檔:https://ionicframework.com/docs/react/your-first-app

[13]官方文檔:https://ionicframework.com/docs/react/your-first-app#build-a-native-app

[14]NativeScript:https://www.nativescript.org/

[15]Expo:https://expo.io/

[16]App Store:https://itunes.apple.com/app/apple-store/id982107779

[17]Google Play:https://play.google.com/store/apps/details?id=host.exp.exponent

[18]很長的文章:https://medium.com/airbnb-engineering/sunsetting-react-native-1868ba28e30a

[19]官方文檔:https://docs.microsoft.com/en-us/dotnet/api/xamarin.forms.webview?view=xamarin-forms

[20]Flutter:https://flutter.dev/

[21]這篇文章:https://medium.com/flutter/the-power-of-webviews-in-flutter-a56234b57df2

常在一些原型設計QQ討論群里，有人咨詢如何讓移動端原型剛好能顯示在手機屏幕上，更進一步的效果是在不同分辨率上都能正常顯示，今天我們就來聊聊如何適配不同手機分辨率的問題。

一、移動端簡單原型設計

先來設計一個簡單的移動端的原型，上邊一個標題欄，中間同內容，底端是一個菜單欄。

樣式設置如下：

（1）標題欄：添加一個矩形框，命名title，大小為400*40，藍底白字，文字左對齊，左邊距10。

（2）搜索框：添加一個矩形框模擬輸入框，大小為360*40，灰色邊框，灰色文字，文字左對齊，文字內容為“請輸入搜索內容”。

（3）幾個圖標：在輸入框下方添加5個占位符來表示，注意將左右兩個占位符分別和上方的矩形框對齊。

（4）菜單欄：在稍微下方的位置添加個矩形框，命名為menu，表示菜單欄，大小和標題欄一致，背景為淺灰色。

準備工作做好了，我們希望的效果是在手機上顯示時，標題欄寬度正好和手機瀏覽器寬度一樣，輸入框和幾個占位符在水平方向上處于屏幕中間位置，菜單欄在屏幕的底端。

二、移動端原型預覽

好了，現在我們不做任何處理的情況下，預覽一下效果。

為了在預覽時不要出現左側的工具欄影響查看，我們在按下F8鍵將原型導出html時注意選擇“不加載工具欄”：

然后將導出的原型通過手機數據線傳到手機上SD卡的某個位置（為方便，我們以Android手機為例），在手機上訪問頁面index.html，訪問的效果如下：

我們發現除了手機屏幕比較小外，顯示的效果和在電腦瀏覽器上的效果一樣，并沒有適配在手機上，也就是說，原型根本就沒有識別到當前是在手機瀏覽器上顯示。

三、修改發布參數

我們需要修改一下發布時的參數，讓導出的頁面能自動識別出是在手機上訪問。

按下F8鍵，選擇“移動設備”，只需要勾選“包含視口標簽”，單擊“生成”按鈕：

重新導出原型頁面，將導出的頁面重新上傳到手機SD卡上，再通過手機瀏覽器來訪問，效果如下：

這時我們發現效果圖已經基本差不多在手機上正常顯示了。

但是，還是有點問題！

1. 標題欄和菜單欄寬度并沒有和屏幕寬度一致，右邊有空出一部分
2. 內容部分也沒有在屏幕上水平居中顯示
3. 菜單欄沒有在屏幕的底端

怎么辦呢？

辦法是有的，這就是我們下一步要解決的問題。

四、手機屏幕分辨率適配思路

現在的問題有上面提到的三點，那么就針對這三點來處理。

（1）標題欄和菜單欄寬度并沒有和屏幕寬度一致的問題

思路：我們并不知道每個手機的屏幕大小是多少，但是Axure里有函數可以獲得瀏覽器窗口的寬度，因此只要在原型頁面加載完成時，設置一下標題欄和菜單欄的寬度和窗口寬度大小一樣不就行了嗎？

選擇當前頁面，雙擊“頁面載入時”添加事件處理：

這樣在頁面加載完成時，就會設置標題欄和菜單欄和屏幕寬度一致了，注意同時勾選title和menu，寬度都設置為“[[Window.width]]”。

（2）內容部分也沒有在屏幕上水平居中顯示

思路：我們將內容部分當作一個整體，在頁面加載完成后，將內容移動到屏幕水平中面位置。

選擇除標題欄和菜單欄外的內容部分，右鍵轉換為動態面板，命名為main：

編輯前面的頁面加載事件，移動動態面板main的絕對位置到屏幕水平中央位置，y位置不變，計算公式=（窗口寬度-動態面板寬度）/2，最終的表達式為“[[(Window.width-LVAR1.width)/2]]”，注意這里使用到局部變量表示動態面板：

（3）菜單欄沒有在屏幕的底端

我們能取到窗口的高度，因此我們計算出菜單欄在屏幕上的位置。 具體位置=屏幕的高度-菜單欄的高度，最終表達式為“[[Window.height-LVAR1.height]]”，將菜單欄移動到這個位置即可，注意這里同樣使用到了局部變量表示菜單欄：

五、最終預覽效果

將原型重新導出，上傳到手機上，使用手機瀏覽器查看，最終的效果如下：

可以看到原型已經適配了手機屏幕的大小，達到我們所需要的效果，即使你在換了不同的手機后，也同樣會正常顯示。

本文由 @Axure 原型設計工場 原創發布于人人都是產品經理。未經許可，禁止轉載。