国产精品电影_久久视频免费_欧美日韩国产激情_成年人视频免费在线播放_日本久久亚洲电影_久久都是精品_66av99_九色精品美女在线_蜜臀a∨国产成人精品_冲田杏梨av在线_欧美精品在线一区二区三区_麻豆mv在线看

vivo官網APP全機型UI適配方案

移動開發(fā) 移動應用
日益新增的機型,給開發(fā)人員帶來了很多的適配工作。代碼能不能統(tǒng)一、apk能不能統(tǒng)一、物料如何選取、樣式怎么展示等等都是困擾開發(fā)人員的問題,本方案就是介紹不同機型的共線方案,打消開發(fā)人員的疑慮。

作者 | vivo 互聯(lián)網客戶端團隊- Xu Jie 

日益新增的機型,給開發(fā)人員帶來了很多的適配工作。代碼能不能統(tǒng)一、apk能不能統(tǒng)一、物料如何選取、樣式怎么展示等等都是困擾開發(fā)人員的問題,本方案就是介紹不同機型的共線方案,打消開發(fā)人員的疑慮。

一、日益紛繁的機型帶來的挑戰(zhàn)

1.1  背景

科技是進步的,人們對美的要求也是逐漸提升的,所以才有了現(xiàn)在市面上形形色色的機型

(1)比如vivo X60手機采用纖薄曲面屏設計,屬于直板機型。

圖片

(2)比如vivo 折疊屏高端手機,提供更優(yōu)質的視覺體驗,屬于折疊屏機型。

圖片

(3)比如vivo pad,擁有優(yōu)秀的操作手感和高級的質感,屬于平板機型。

圖片

1.2  我們的挑戰(zhàn)

在此之前,我們主要是為直板手機去服務,我們的開發(fā)只要適配這種主流的直板機器,我們的UI主要去設計這種直板手機的效果圖,我們的產品和運營主要為這種直板機型去選擇物料。

圖片

可是隨著這種形形色色機型的出現(xiàn),那么問題就來了:

  • 開發(fā)人員的適配成本高了,是不是針對每一種機型,都要做個單獨的應用進行適配呢?
  • UI設計師要做的效果圖要多了,是不是要針對每種機型都要設計一套效果圖呢?
  • 產品和運營需要選擇的物料更受限制了,會不會這個物料在一個機器上正常。在其他機器上就不正常了呢?

為什么這么說,下面以開發(fā)者的角度來做介紹,把我們面臨的問題,做說明。

二、 開發(fā)者的窘境

2.1 全機型適配成本太高

日漸豐富的機型適配讓我們這些android開發(fā)人員疲于奔命,雖然可以按照要求進行適配,但是大屏幕的機型適配成本依然比較高,因為這些機型不同于傳統(tǒng)的直板手機的寬高比例(9:16)。所以有的應用干脆就直接兩邊留白,內容區(qū)域展示在屏幕正中央,這種效果,當然很差。

案例1:某個視頻APP頁面,未做pad上的適配,打開之后的效果如下,兩邊大量留白,是不可操作的區(qū)域。

圖片

案例2:某新聞資訊類APP,在pad上的適配效果如下,可見的范圍內,信息流展示內容較少,圖片有拉伸、模糊的問題。

圖片

2.2 全機型適配成本高在哪

上面的案例其實只是表面的問題之一,作為開發(fā)人員,需要考慮的因素有很多,首先要想到這些機型有什么特點:

圖片

然后才是需要解決的問題:

圖片

三、尋找全機型適配方案之旅

3.1 方案討論與確定

頁面拉伸、左右留白是現(xiàn)象,這也是用戶的直接體驗。那么這就是我們要改善的地方,所以現(xiàn)在就有方向了,圍繞著 “如何在可見區(qū)域內,展示更多的信息” 。這不是布局的簡單重新排列組合,因為  方案絕對不是只有開發(fā)決定如何實現(xiàn)就可以怎么實現(xiàn)的,一個apk承載著功能到用戶手里涉及了多方角色的介入。產品經理需要整理需求、運營人員需要配置物料、發(fā)布apk,測試需要測試等等,所以最終的方案不是一方定下來的,而是一個協(xié)調統(tǒng)一后的結果。

既然要去討論方案,那么就要有依據,在此省略討論、評審、定稿的過程。

先來看看直板、折疊屏、pad的外部輪廓圖,知道頁面形態(tài)如何。

圖片

3.2 方案落地示意圖

每個應用要展示的內容不一致,但是原理一致,此處就以下面幾個樣式為基礎介紹原理。原則也比較簡單,盡可能展示更多內容,不要出現(xiàn)大面積的空白區(qū)域。

下面沒有介紹分欄模式的適配,因為分欄的模式也可能被用戶關閉,最終成為全屏模式,所以說,可以選擇只適配全屏模式,這樣的適配成本較低。當然,這個也要根據自己模塊的情況來確定,比如微信,更適合左右屏的分欄模式。

3.2.1 直板機型適配方案骨骼圖

直板機型,目前主流的機型,寬高比基本是9:16,可以最大限度地展示比較多的內容,比如下圖中的模塊1、模塊2、 模塊3的圖片。

圖片

3.2.2 折疊屏機型適配方案骨骼圖

折疊屏機型,屏幕可旋轉,但是寬高比基本是1:1,高度和直板機器基本差不多,可以達到2000px的像素,所以在縱向上,也可以最大限度地展示比較多的內容,比如下圖中的模塊1、模塊2、 模塊3的圖片。

圖片

3.2.3 PAD機型適配方案骨骼圖

pad平板,屏幕可旋轉,并且旋轉后的寬高比差異較大,縱向時,寬高比是5 : 8,橫向時,寬高比是8 : 5。

在pad縱向時,其實高度像素是足夠展示很多內容的,比如下圖中的模塊1、模塊2、 模塊3的圖片;

但是在pad橫向時,沒辦法展示更多的內容(倒是有個方案,最后再說),只能下圖中的模塊1、模塊2的圖片。

圖片

3.3 方案落地規(guī)范

3.3.1 一套代碼適配所有機型

確定一個apk能不能適配所有機型,首先要解決的是要符合不同機型的特性,比如直板手機只能縱向顯示,折疊屏和pad支持橫豎屏旋轉。

描述如下:

(1)需求

  • 直板屏:強制固定豎屏;
  • 折疊屏:外屏固定豎屏、內屏(大屏)支持橫豎屏切換;
  • PAD端:支持橫豎屏切換;

我們需要在以上三端通過一套代碼實現(xiàn)上面的需求。

(2)橫豎屏切換

有以下2種方法:

方式1)

通過在AndroidManifest.xml中設置:

android:screenOrientation屬性

a) android:screenOrientation="portrait" 

強制豎屏;

b) android:screenOrientation="landscape" 

強制橫屏;

c) android:screenOrientation="unspecified" 

默認值,可以橫豎屏切換;

方式2)

在代碼中設置:

activity.setRequestedOrientation(****);

a) setRequestedOrientation

(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);    設置豎屏;

b)setRequestedOrientation

(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE); 設置橫屏;

c)setRequestedOrientation

(ActivityInfo.SCREEN_ORIENTATION_UNSPECIFIED); 可以橫豎屏切換;

(3)不同設備支持不同的屏幕橫豎屏方式

1)直板屏:

因為是強制豎屏,所以,可以通過在AndroidManifest.xml中給Activity設置android:screenOrientation="portrait"。

2)折疊屏:

外屏與直板屏是保持一致的,暫且不討論。但是內屏(大屏)要支持橫豎屏切換。如果是一套代碼,顯然是無法通過AndroidManifest文件來實現(xiàn)的。這里其實系統(tǒng)框架已經幫我們實現(xiàn)了對應內屏時橫豎屏的邏輯。總結就是,折疊屏可以與直板屏保持一致,在AndroidManifest.xml中給Activity設置android:screenOrientation="portrait",如果切換到內屏時,系統(tǒng)自動忽略掉screenOrientation屬性值,強行支持橫豎屏切換。

3)PAD端:

當然了,并不是所有的項目對應的系統(tǒng)都會自動幫我們忽略screenOrientation屬性值,這時候就需要我們自己來實現(xiàn)了。

我們通過在Activity的基類中設置setRequestedOrientation

(ActivityInfo.SCREEN_ORIENTATION_UNSPECIFIED),發(fā)現(xiàn)確實能夠使當前頁面橫豎屏自由切換了。但是在啟動activity的時候遇到了問題。當我們從橫屏狀態(tài)A界面啟動一個acitivity的B界面時,發(fā)現(xiàn)B界面先是豎屏,然后切換到了橫屏(如圖1所示)。再試了多次依舊如此,肉眼可見的切換過程顯然不能滿足我們的需求。這說明通過java代碼動態(tài)調整橫豎屏的技術方向是行不通的。綜上所述,通過同一份代碼無法滿足PAD端和直板屏的互斥的需求。

圖片

那還有沒有其他方式呢。別忘了,我們Android打包全流程是通過gradle完成的,我們是不是可以通過切面編程的思維,針對不同的設備打出不同的包。

方案確定了,在此進行技術驗證。

gradle編譯其中一個重要環(huán)節(jié)就是對依賴的aar、本地module中的AndroidManifest文件進行merge,最終輸出一份臨時的完整清單文件,存放在*/app/build/intermediates/merged_manifest/**Release/路徑下。

因此,我們可以在AndroidManifest文件merge完成之后對該臨時文件中的android:screenOrientation字段值信息進行動態(tài)修改,修改完成之后再存回去。這樣針對pad端就可以單獨打出一份apk文件。

核心代碼如下:

//pad支持橫豎屏
def processManifestTask = project.tasks.getByName("processDefaultNewSignPadReleaseManifest");
if (processManifestTask != null) {
processManifestTask.doLast { pmt ->
def manifestPath = pmt.getMultiApkManifestOutputDirectory().get().toString() + "/AndroidManifest.xml"
if (new File(manifestPath).exists()) {
String manifest = file(manifestPath).getText()
manifest = manifest.replaceAll("android:screenOrientation=\"portrait\"", "android:screenOrientation=\"unspecified\"");
file(manifestPath).write(manifest)
println(" =============================================================== manifestPath: " + manifestPath)
}
}
}

(4)apk的數(shù)量

到這里為止,java代碼是完全一致,沒有區(qū)分的,關鍵就在于框架有沒有提供出忽略screenOrientation的能力,如果提供了,我們只需要輸出一個apk,就能適配所有機型,

如果沒有這個能力,我們就需要使用gradle打出額外的一個apk,滿足可旋轉的要求。

3.3.2 一套物料配所有機型

1、等比放大物料

通過上面的落地方案的要求,對于模塊2的圖片,展示效果是不一樣的,如下圖:

  • 直板手機上面,模塊2的圖片1在上面,圖片2、3分布于左下角和右下角
  • 折疊屏或者pad上面,模塊2的圖片1在左邊,圖片2、3分布于右側
  • 折疊屏和pad上的模塊2的圖片,相對于直板手機來說,做了樣式的調整,上下的樣式改為了左右。圖片也做了對應的放大,保證橫向上可以填充整個屏幕的寬度。

圖片

  • 為了形象地表示處理后的效果,看下下面的示意圖即可。

圖片

圖片

2、高度不變,裁剪物料

對于模塊3的圖片,可以回顧3.2中的展示樣式,要求是

  • 直板手機上面,模塊3中圖片1的高度此處為300px。
  • 折疊屏或者pad上面,模塊3的圖片1的高度也是300px,但是內容不能減少。
  • 解決方案就是提供一張原始大圖,假如規(guī)格為2400px*300px,在直板手機上左右進行裁剪,如下圖所示。折疊屏和pad上面直接進行展示。而裁剪這一步,放在服務端進行,因為客戶端做裁剪,比較耗時。

圖片

  • 為了形象地表示處理后的效果,看下下面的示意圖即可。

圖片

圖片

3.3.4 無感刷新

無感刷新,主要是體現(xiàn)在折疊屏的內外屏切換,pad的橫豎屏旋轉這些場景,如何保證頁面不會出現(xiàn)切換、旋轉時候的閃現(xiàn)呢?

  • 這就要提前準備好數(shù)據源,保證在頁面變化時,立即notify。
  • 我們的頁面列表最好使用recyclerview,因為recyclerview支持局部刷新。
  • 數(shù)據源驅動UI,千萬不要在UI層面判斷機型做UI的動態(tài)計算,頁面會閃屏,體驗不好。

圖片

3.4 方案落地實戰(zhàn)

上面介紹了不同機型的適配規(guī)范,這個沒有疑問之后,直接通過案例來看下具體如何實施。

圖片

如上圖所示,選購頁可以大致分為 分類導航欄區(qū)域 和 內容區(qū)域,其中內容區(qū)域是由多個樓層組成。

3.4.1 UI如何設計的

圖片

如圖所示,能夠直觀地感受到,從直板手機到折疊屏內屏再到Pad橫屏,當設備的可顯示面積增大時,頁面充分利用空間展示更多的商品信息。

3.4.2 不同設備的區(qū)分方式

通過前面的簡單介紹,對選購頁的整體布局及不同設備上的UI展示有所了解,下面來看下如何在多個設備上實現(xiàn)一套代碼的適配。

首先第一步,要如何區(qū)分不同的設備。

在區(qū)分不同的設備前,先看下能夠從設備中獲得哪些信息?

  • 分辨率
  • 機型
  • 當前屏幕的橫、豎狀態(tài)

先說結論:

  • 直板手機:通過分辨率來區(qū)分
  • 折疊屏:通過機型和內外屏狀態(tài)來區(qū)分
  • Pad:通過機型和當前屏幕的橫、豎狀態(tài)來區(qū)分

所以這里根據這幾個特點,提供一個工具。

不同設備的區(qū)分方式。

/**
* @function 判斷當前手機的屏幕是處于哪個屏幕類型:目前三個屏幕范圍:分別為 <= 528dp、528 ~ 696dp、> 696dp,對應的分別是正常直板手機、折疊屏手機內屏和Pad豎屏、和Pad橫屏
*/
public class ScreenTypeUtil {
public static final int NORMAL_SCREEN_MAX_WIDTH_RESOLUTION = 1584; // 正常直板手機:屏幕最大寬度分辨率;Pad的分辨率(1600*2560), 1584 = 528 * 3, 528dp是UI在精選頁標注的直板手機范圍
public static final int MIDDLE_SCREEN_MAX_WIDTH_RESOLUTION = 2088; // 折疊屏手機:屏幕最大寬度分辨率(1916*1964, 旋轉:1808*2072),2088 = 696 * 3, 2088dp是UI在精選頁標注的折疊屏展開范圍
public static final int LARGE_SCREEN_MAX_WIDTH_RESOLUTION = 2560; // 大屏幕設備:屏幕寬度暫定為 Pad的高度
public static final int NORMAL_SCREEN = 0; // 正常直版手機屏幕
public static final int MIDDLE_SCREEN = 1; // 折疊屏手機內屏展開、Pad豎屏
public static final int LARGE_SCREEN = 2; // Pad橫屏
public static int getScreenType() {
Configuration configuration = BaseApplication.getApplication().getResources().getConfiguration();
return getScreenType(configuration);
}
// 注意這里的newConfig 在Activity、Fragment、View 中的onConfigurationChanged中獲得的newConfig傳入,如果獲得不了該值,可以使用getScreenType()方法
public static int getScreenType(@NonNull Configuration newConfig) {
// Pad 通過機型標志位及當前處于橫豎屏狀態(tài) 來判斷當前屏幕類型
if (SystemInfoUtils.isPadDevice()) {
return newConfig.orientation == Configuration.ORIENTATION_LANDSCAPE ? LARGE_SCREEN : MIDDLE_SCREEN;
}
// Fold折疊屏 通過機型標志及內外屏狀態(tài) 來判斷當前屏幕類型
if (SystemInfoUtils.isFoldableDevice()) {
return SystemInfoUtils.isInnerScreen(newConfig) ? MIDDLE_SCREEN : NORMAL_SCREEN;
}
// 普通手機 通過分辨率判斷
return AppInfoUtils.getScreenWidth() <= NORMAL_SCREEN_MAX_WIDTH_RESOLUTION ? NORMAL_SCREEN : (AppInfoUtils.getScreenWidth() <= MIDDLE_SCREEN_MAX_WIDTH_RESOLUTION ? MIDDLE_SCREEN : LARGE_SCREEN);
}
}

3.4.3 實現(xiàn)方案

(1)數(shù)據源驅動UI改變的思想

  • 對于直板手機來說,選購頁只有一種狀態(tài),保持豎屏展示
  • 對于折疊屏來說,折疊屏可以由內屏切換到外屏,也就涉及到了兩種不同狀態(tài)的切換。
  • 對于Pad來說,Pad支持橫豎屏切換,所以也是兩種不同狀態(tài)切換。

當屏幕類型、橫豎屏切換、內外屏切換時,Activity\Fragment\View 會調用onConfigurationChanged方法,因此針對直板手機、折疊屏及Pad可以將數(shù)據源的切換放在此處。

無論是哪種設備,最多是只有兩種不同的狀態(tài),因此,數(shù)據源這里可以準備兩套:一種是Normal、一種是Width,對直板手機而言:因為只有一種豎屏狀態(tài),因此只需要一套數(shù)據源即可;對折疊屏而言:Normal存放的是折疊屏外屏數(shù)據源,Width存放的是折疊屏內屏數(shù)據源;對Pad而言:Normal存放的是Pad豎屏狀態(tài)數(shù)據源,Width存放的是Pad橫屏狀態(tài)數(shù)據源。

(2)內容區(qū)域

右側的內容區(qū)域是一個Fragment,在這個Fragment里面包含了一個RecyclerView。

每個子樓層

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/root_classify_horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<xxx.widget.HeaderAndFooterRecyclerView
android:id="@+id/shop_product_multi_rv"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>

每個樓層也是一個單獨的RecyclerView,以樓層4為例,樓層4的每一行商品都是一個RecyclerView,每個RecyclerView使用GridLayoutManager來控制布局的展現(xiàn)列數(shù)。

(3)數(shù)據源

以折疊屏為例:針對每個子樓層的數(shù)據,在解析時,就先準備兩套數(shù)據源:一種是Normal、一種是Width。

在請求網絡數(shù)據回來后,在解析數(shù)據完成后,存放兩套數(shù)據源。這兩套數(shù)據源要根據UI設計的規(guī)則來組裝,例如以折疊屏的樓層4為例:

  • 折疊屏-外屏-樓層4:一行展示2個商品信息。
  • 折疊屏-內屏-樓層4:一行展示3個商品信息。

注意:這里的2、3數(shù)字是UI設計之初就定下來的,每行商品都是一個RecyclerView,并且使用GridLayoutManager來控制其列數(shù),因此這個2、3也是傳入到GridLayoutManager的列數(shù)值,這里要保持一致。

子樓層的數(shù)據源解析

//這里的normalProductMultiClassifyUiBeanList集合中存放了2個商品信息
for (ProductMultiClassifyUiBean productMultiClassifyUiBean : normalProductMultiClassifyUiBeanList) {
productMultiClassifyUiBean.setFirstFloor(isFirstFloor);
shopListDataWrapper.addNormalBaseUiBeans(productMultiClassifyUiBean);
}
//這里的normalProductMultiClassifyUiBeanList集合中存放了3個商品信息
for (ProductMultiClassifyUiBean productMultiClassifyUiBean : widthProductMultiClassifyUiBeanList) {
productMultiClassifyUiBean.setFirstFloor(isFirstFloor);
shopListDataWrapper.addWidthBaseUiBeans(productMultiClassifyUiBean);
}

因此,到這里就已經獲取了所需的數(shù)據源部分

(4)屏幕類型切換

還是以折疊屏為例,折疊屏外屏切換到內屏,此時Fragment會走onConfigurationChanged方法。

屏幕類型切換-數(shù)據源切換-更新RecyclerView。

public void onConfigurationChanged(@NonNull Configuration newConfig) {
super.onConfigurationChanged(newConfig);
//1、 首先進行內容區(qū)域中的RecyclerViewAdapter、數(shù)據源判空
if (mRecyclerViewAdapter == null || mPageBeanAll == null) {
return;
}
//2、判斷當前的屏幕類型,注意:這個地方是調用3提供的方法:ScreenTypeUtil.getScreenType(newConfig)
// 直板手機、折疊屏外屏
if (ScreenTypeUtil.NORMAL_SCREEN == ScreenTypeUtil.getScreenType(newConfig)) {
mPageBeanAll.setBaseUiBeans(mPageBeanAll.getNormalBaseUiBeans());
} else if (ScreenTypeUtil.MIDDLE_SCREEN == ScreenTypeUtil.getScreenType(newConfig)) {
if (SystemInfoUtils.isPadDevice()) {
// Pad的豎屏
mPageBeanAll.setBaseUiBeans(mPageBeanAll.getNormalBaseUiBeans());
} else {
// 折疊屏的內屏
mPageBeanAll.setBaseUiBeans(mPageBeanAll.getWidthBaseUiBeans());
}
} else {
// Pad的橫屏、大分辨率屏幕
mPageBeanAll.setBaseUiBeans(mPageBeanAll.getWidthBaseUiBeans());
}
//獲取當前屏幕類型的最新數(shù)據源
mRecyclerViewAdapter.setDataSource(mPageBeanAll.getBaseUiBeans());
//數(shù)據源驅動樓層UI改變
mRecyclerViewAdapter.notifyDataSetChanged();
}

通過onConfigurationChanged方法,能夠看到數(shù)據源是如何根據不同屏幕類型進行切換的,當數(shù)據源切換后,會通過notifyDataSetChanged方法來改變UI。

四、至簡之路的鑄就

大道至簡,遵循規(guī)范和原則,就可以想到如何對多機型進行適配,別陷入細節(jié)。

以這個作為指導思想,可以做很多其他的適配。下面做些列舉,但不講解實現(xiàn)方式了。

1、文字顯示區(qū)域放大

如下圖所示,標題的長度,在整個容器顯示寬度變寬的同時,也跟著一起變化,保證內容的長度可以自適應的變化。

圖片

2、彈框樣式的兼容

如下圖所示,藍色區(qū)域是鍵盤的高度,在屏幕進行旋轉的時候,鍵盤的高度也是變化的,此時可能會出現(xiàn)遮擋住原本展示的內容,此處的處理方式是:讓內容區(qū)域可以上下滑動。

圖片

3、攝像頭位置的處理

如下圖所示,在屏幕旋轉之后,攝像頭可以出現(xiàn)在右下角,此時如果不對頁面進行設置,那么就可能出現(xiàn)內容區(qū)域無法占據整個屏幕區(qū)域的問題,體驗比較差,此處的處理方式是:設置頁面沉浸式,攝像頭可以合理地覆蓋一部分內容。

圖片

五、我們擺脫困擾了嗎

5.1 解決原先的問題

通過前面的介紹,我們知道了,vivo官網的團隊針對折疊屏和pad這種大屏,采取了全屏展示的方案,一開始的時候,我們遇到的問題也得到了解決:

(1)開發(fā)人員的適配成本高了,是不是針對每一種機型,都要做個單獨的應用進行適配呢?

Answer:按照全屏模式的設計方案,折疊屏和pad也就是一種大尺寸的機器,開發(fā)人員判斷機型的分辨率和尺寸,選擇一種對應的布局展示就好了,只用一個應用就能搞定。

(2)UI設計師要做的效果圖要多了,是不是要針對每種機型都要設計一套效果圖呢?

Answer:制定一套規(guī)范,大于某個尺寸時,展示其他樣式,所有信息內容都按照這種規(guī)范來,不會出現(xiàn)設計混亂的情況。

(3)產品和運營需要選擇的物料更受限制了,會不會這個物料在一個機器上正常。在其他機器上就不正常了呢?

Answer:以不變應萬變,使用一套物料,適配不同的機型已經可以落地了,不用再擔心在不同的機器上展示不統(tǒng)一的問題。

5.2 我們還可以做什么

5.2.1 我們的優(yōu)點

折疊屏和pad兩款機器,已經在市面上使用較長時間,各家廠商也紛紛采取了不同的適配方案來提升交互體驗,但是往往存在下面幾個問題:

1、針對不同機型,采用了不同的安裝包。

這種方案,其實會增加維護成本,后期的開發(fā)要基于多個安裝包去開發(fā),更加耗時。

2、適配了不同的機型,但是在一些場景下的樣式不理想。

比如有些APP做了分欄的適配,但是沒有做全屏的適配,效果就比較差,這里可能也是考慮到了投入產出比。

3、目前的適配指導文檔對于開發(fā)人員來說指導性較弱。

各種適配指導文檔,還是比較偏向于官方,對于開發(fā)人員來說,還是無法提前識別問題,遇到問題還是要實際去解決。

基于此,我們的優(yōu)點如下:

1、我們只有一個安裝包。

我們是一個安裝包適配所有機型,每種機型的APP展示的樣式雖然不同,對于開發(fā)者來說,就是增加了一個樣式,思路比較清晰。

2、全場景適配。

不同機型的縱向、橫豎屏切換,都做到了完美適配,一套物料適配所有機型也是我們的一個特色。

3、有針對性地提供適配方案。

本方案是基于實際開發(fā)遇到的問題,進行的梳理,可以幫忙開發(fā)人員解決實際可能遇到的問題,具備更好的參考性。

5.2.2 我們還有什么要改進

回首方案,我們這里做到的是使用全屏模式去適配不同機型,更多的適用于像京東、淘寶、商城等電商類APP上,實際上,現(xiàn)在有些非APP會采用分欄的形式做適配,這也是一種跟用戶交互的方式,本方案沒有提到分欄,后續(xù)分欄落地后,對這部分會再進行補充。

責任編輯:未麗燕 來源: vivo互聯(lián)網技術
相關推薦

2023-02-15 22:13:19

客戶端Android

2022-05-12 10:36:10

移動方案

2025-05-22 09:18:14

2022-03-18 08:46:08

vivo官網APP首頁改版

2024-04-16 13:56:09

移動端安全區(qū)域iOS

2012-07-02 14:48:12

Emotion UI華為

2019-03-27 15:47:19

劉海屏適配全屏

2017-08-11 19:02:21

Android全屏幕適配

2018-05-04 15:26:10

Android開發(fā)全屏幕

2022-03-16 15:30:25

barAndroid開發(fā)者

2015-07-15 14:38:54

H5移動適配

2015-07-15 12:30:37

移動端H5高清多屏

2012-07-12 15:47:28

Emotion UI花粉俱樂部華為

2010-09-28 09:25:38

蘋果官網遠程訪問Juniper

2010-02-04 15:32:33

光纖以太網交換機

2012-07-12 15:28:37

Emotion UI官Emotion UI

2014-04-11 15:05:00

同方購機

2024-07-15 09:08:51

點贊
收藏

51CTO技術棧公眾號

avtt久久| 亚洲欧洲另类| 欧美日韩久久久| 国产国产人免费人成免费视频| 国产一区二区三区观看| 国产欧美一区二区视频| 久久99国产成人小视频| 久热国产精品视频| 97成人超碰| 亚洲男人天堂九九视频| 在线观看免费黄视频| 亚洲动漫第一页| 电影天堂久久| 最新久久zyz资源站| 毛葺葺老太做受视频| 99视频在线观看一区三区| 大伊香蕉精品视频在线| 大白屁股一区二区视频| 久久综合亚洲精品| 大胆亚洲人体视频| 毛片在线播放视频| 99精品国产热久久91蜜凸| 亚欧无线一线二线三线区别| 国产精品99久| 国产原创中文在线观看| 99久久99久久综合| 精品中文字幕av| 日本一区二区三区在线不卡| 中文字幕在线导航| 亚洲天堂成人在线观看| 黄页网站在线观看| 一道本成人在线| 成人免费网址| 亚洲乱码国产乱码精品精天堂| 香蕉成人影院| 国a精品视频大全| 精品国产欧美日韩| 97免费资源站| 日韩高清不卡在线| 97超碰人人爱| 久久美女艺术照精彩视频福利播放| 999精品网站| 一区二区三区精品在线| 丁香婷婷在线观看| 亚洲精品mp4| 天堂精品在线视频| 性色av香蕉一区二区| 色喇叭免费久久综合网| 欧美日韩亚洲综合一区二区三区激情在线| 美女任你摸久久| 国产在线播放观看| 一区二区三区中文在线| 91福利在线视频| 亚洲视频精品在线| 老汉色老汉首页av亚洲| 久久久久久国产| 亚洲免费观看高清在线观看| 国产又黄又猛又粗| 午夜精品久久久久久久久| 在线观看免费版| 亚洲精品福利在线| 136福利精品导航| 成人妇女淫片aaaa视频| 日日夜夜免费精品视频| 黑人糟蹋人妻hd中文字幕| 亚洲天堂福利av| 99自拍视频在线观看| 日韩在线观看免费网站| 无需播放器亚洲| 黄色一级视频播放| 一区二区三区日韩| 国产免费拔擦拔擦8x在线播放| 欧美影视一区二区| av爱爱亚洲一区| 欧洲亚洲在线| 亚洲裸体xxxx| 欧美中文一区二区| 中文字幕日韩一区二区三区不卡| 成人欧美一区二区三区小说| 三级福利片在线观看| 国产91精品不卡视频| 久久亚洲影院| 性色av一区二区| 亚洲欧美日韩精品久久亚洲区| 伊甸园亚洲一区| 欧美与动交zoz0z| 欧美午夜www高清视频| 伊人久久精品| 日本不卡高清视频一区| 亚洲情趣在线观看| 91综合国产| 秋霞毛片久久久久久久久| 一区二区三区在线播| 久久av影院| 日韩少妇中文字幕| 亚洲成精国产精品女| 在线播放成人| 亚洲国产精品一区二区第一页| 伊人一区二区三区| 亚洲伦理网站| 一本色道久久99精品综合| 午夜精品福利视频网站| 国产精品视频一区二区三区| 日韩av一级大片| 色婷婷国产精品| 国产在线日韩精品| 人妻久久久一区二区三区| 日韩欧美国产小视频| 亚洲91久久| 免费亚色电影在线观看| 欧美成人免费一级人片100| 精品一区免费av| 国产喷白浆一区二区三区| 一级理论片在线观看| 国产一区二区三区直播精品电影| 国产精品88久久久久久| 中文字幕中文字幕99| 欧美日韩中文一区| 成人av资源电影网站| 欧在线一二三四区| 亚洲欧美日韩一区二区在线| 水野朝阳av一区二区三区| 欧美欧美欧美| 国产精品日韩在线一区| 中文在线一区二区| 99国内精品久久久久| 欧美国产综合在线| 精品中文字幕久久久久久| 日韩影院免费视频| 色呦呦网站在线观看| 欧美精品与人动性物交免费看| 色狠狠一区二区三区香蕉| 久久精品青草| 欧美xxx.com| 91精品久久久久久久久久| 亚洲一区二区三区中文字幕| 在线日韩一区| 国产乱真实合集| 国产精品久久久久久久久久99| 亚洲最大成人网4388xx| 99精品美女| 免费网站黄在线观看| 亚洲高清乱码| 亚洲欧美一区二区三区在线| 99re66热这里只有精品3直播 | 久久99精品国产.久久久久久| 国产丝袜在线| 看全色黄大色大片| www.久久久久| 17c精品麻豆一区二区免费| 久久中文亚洲字幕| 久久综合网导航| 免费成人进口网站| 久久99国产精品自在自在app | 国产精品97在线| 欧美综合第一页| 91国偷自产一区二区三区观看| 亚洲综合国产| 中文字幕在线官网| 午夜dv内射一区二区| 国产精品丝袜白浆摸在线| 欧美猛男超大videosgay| 国产在线视频一区二区三区| 年轻的保姆91精品| 污网站在线看| 在线观看日韩羞羞视频| 欧美裸身视频免费观看| 午夜伊人狠狠久久| 美女免费视频一区| 成人台湾亚洲精品一区二区| 极品白浆推特女神在线观看| 在线视频欧美一区| 26uuu国产精品视频| 欧美性猛片aaaaaaa做受| 国产精品18久久久久久久久久久久| 91精品久久久久久综合五月天| 一级毛片在线观| 做爰高潮hd色即是空| 97人洗澡人人免费公开视频碰碰碰| 欧美日韩一区二区在线| 久久99精品久久久久久动态图| 91综合精品国产丝袜长腿久久| 番号在线播放| 精品视频免费在线播放| 成人精品视频99在线观看免费| 亚洲精品久久久久国产| 亚洲欧美一区二区三区极速播放 | 久久亚洲影视婷婷| 欧美在线日韩| www.国产精品| 伦理片一区二区三区| 欧洲精品视频在线| 91久久精品美女| 中文字幕欧美精品日韩中文字幕| 亚洲成人动漫在线观看| 福利一区福利二区| 亚洲高清不卡| 少妇精品久久久一区二区三区| 韩国主播福利视频一区二区三区| 96久久久久久|