android布局縮放比例縮放

❶ Android 平台設計規范有哪些

眾所周知，安卓系統是開源的，國內又有超多的手機廠商，小米、魅族、華為、oppo、三星等，每一個品牌有屬於自己的UI設計規范，但是我們主要分析UI界面尺寸規范。

1、字體

安卓系統中文採用的是思源黑體，英文字體為robot字體。

只使用偶數單位 24 pt，28 pt，36 pt等字體大小

2、mdpi、hdpi、 xhdpi、xxhdpi、xxxhdpi、dp、px到底是什麼意思？

講圖標之前先來分析一下一排英文的意思：

mdpi、hdpi、 xhdpi、xxhdpi、xxxhdpi都是表示的屏幕密度大小，依次數值越大，其解析度越高。常用的是xxhdpi和xxxhdpi。

dp是安卓系統專用的長度單位，設備獨立像素的意思。不同設備有不同的顯示效果,這個和設備硬體有關。多為圖標使用，文字則用sp(放大像素)，主要用於字體顯示best for textsize。

px是像素的意思， 不同設備顯示效果相同。

安卓各屏幕密度關系如下：

垂直邊距

①狀態欄：24dp；②工具欄：56dp；③標題和列表項：48dp；④子標題：48dp；⑤內容區域間距離為8dp

6、切圖

上周我們講到iPhone 6與iPhone 6 Plus約是1.5的關系，而xhdpi的Android手機屏幕與xxdpi的屏幕剛好是1.5倍的關系，所以iPhone 6 Plus和xxhdip也可以共用一套切圖，掌握好尺寸關系，能讓工作變得簡單很多。

7、界面適配

安卓多屏幕支持的基礎是它能夠管理應用程序的布局和點陣圖可繪制對象的渲染以適當的方式對當前屏幕配置的能力。該系統處理的大部分工作由布局縮放以適合屏幕尺寸/密度和縮放點陣圖可繪制在屏幕密度正確呈現您的應用程序在每個屏幕的配置，來優化用戶界面設計，帶來更良好的用戶體驗。

如何做到安卓界面適配呢？大家一定要很清楚的了解解析度、屏幕大小、密度的關系；明白實際密度和系統密度的關系，dp、sp、px的區別；明白dp與px的轉換。這里不做過多闡述，後期寫一篇具體的~

安卓的界面規范就講到這里，要明白設計界面規范的意義是確保設計的統一性與合理性，規范維護的是項目的統一，為了項目利益最大化，高效化。所以作為UI設計師的我們，如果一點設計規范不遵守，全靠自己想當然，那就別發給前端人員啦，他也看不懂。

❷ 移動開發安卓，xml中可以用百分比嗎向我下面代碼中的那樣，可以一直報錯呀

1. 在Android的界面布局中，使用XML布局文件時，不能直接使用百分比來定義控制項的大小。
2. 如果你需要在動畫XML中使用百分比，這是可行的。動畫可以根據屏幕大小變化而縮放。
3. 如果你希望控制項按照屏幕的百分比來分配空間，可以嘗試使用線性布局（LinearLayout）的`weight`屬性。
4. 在線性布局中，通過設置`weightSum`屬性為1，然後為布局中的每個控制項設置`weight`屬性。這個屬性值從0到1，代表控制項占據布局空間的0%到100%。
5. 如果你發現上述方法不能滿足你的需求，還想用百分比來分配控制項，那麼就只能在Java代碼中動態設置控制項的大小了。
6. 動態設置的步驟是：在Activity的初始化過程中，先獲取屏幕的寬度，然後根據你想要的百分比計算出控制項應該具有的寬度。
7. 最後，使用`LayoutParams`來修改控制項的寬度。這種方法更加靈活，可以響應屏幕尺寸的變化。

❸ 【Android 動畫】動畫詳解之補間動畫（一）

之前很早就想寫寫Android 的動畫，最近剛好有時間，大概聊一聊安卓動畫。

個人習慣將動畫分為：補間動畫（透明度、旋轉、位移、縮放）、幀動畫、和屬性動畫，這一篇，我們先說說補間動畫。
補間動畫這個詞出於flash，在兩個關鍵幀（ 可以理解成動畫開始和結束 ）中間需要做「補間動畫」，才能實現圖畫的運動；插入補間動畫後兩個關鍵幀之間的插補幀是由計算機自動運算而得到的。
實際上，Android 的補間動畫也是由我們指定動畫開始、動畫結束2個關鍵點，中間部分的動畫由系統完成

在正式開始之前，我們先說下Android 系統的坐標系，屏幕左上角為坐標原點，假如屏幕為1080*1980，那麼左上角為（0,0），右上角為（1080,0），左下角為（0,1980），右下角為（1080,1980）

所有動畫有以下公共屬性，注釋比較詳細，這里就不在詳述了

ScaleAnimation有3種構造方法

我們先看第一種，其起始比例為0，縮放比例為1.4，即放大到1.4倍

效果如下：

第二種，pivotx,pivotY分別代表起始位置的x、y方向的坐標，我們設置為（100,100）

效果如下：

第三種，pivotXType和pivotYType有2種模式，RELATIVE_TO_SELF（相對於自身）和RELATIVE_TO_PARENT（相對於父布局），如果設置這個，pivotx,pivotY的值就應該是0-1的浮點數，這里分別對應xml中的%（自身）和%p（父布局）

TranslateAnimation有2種構造方法，和ScaleAnimation類似

效果如下：

效果如下：

RELATIVE_TO_PARENT

效果如下：

RotateAnimation有3種構造方法

順時針720度

效果如下：

逆時針720度

效果如下：

效果如下：

再來RELATIVE_TO_PARENT

效果如下：

這是什麼鬼？？？怎麼跑到屏幕外面去了？
原來設置為RELATIVE_TO_PARENT時，旋轉中心x方向應該為該空間離左邊的邊距+父布局寬度/2，y方向同理，而此時，我們布局中紅色的Textview為居中狀態，所以旋轉中心為屏幕右下角。讓我們來看個例子
修改布局如下：

效果如下：

這時，我們看到旋轉中心x方向為離左邊100dp處

AlphaAnimation只有1種構造方法

其中fromAlpha為動畫開始的透明度；toAlpha為動畫結束的透明度

效果如下：

效果如下：

AnimationSet是一個動畫的集合，可以按照添加的順序播放動畫，讓我們來看個例子，通過組合動畫，實現旋轉漸入動畫

效果如下：

到這里，補間動畫就介紹完了

參考資料： 自定義控制項三部曲之動畫篇

❹ 最流行的四種移動端布局方式，看這一篇文章就夠了

眾所周知，pc端呢目前處於一種三家分晉，即三種內核（webkit，blink，gecko），當然算上馬上要更換內核的IE那就是四個。而我們的移動端呢，那就是萬余基於webkit了，所以各位進行移動端web開發時，只考慮webkit的適配就可以了，怎麼樣，開不開心 ？

我們先來看看什麼是視口，視口就是瀏覽器顯示頁面內容的屏幕區域。 視口可以分為布局視口、視覺視口和理想視口，他又可以分成一下四種

一般移動設備的瀏覽器都默認設置了一個布局視口，用於解決早期的PC端頁面在手機上顯示的問題。

iOS, Android基本都將這個視口解析度設置為 980px，所以PC上的網頁大多都能在手機上呈現，只不過元素看上去很小，一般默認可以通過手動縮放網頁。

字面意思，它是用戶正在看到的網站的區域。注意：是網站的區域。

我們可以通過縮放去操作視覺視口，但不會影響布局視口，布局視口仍保持原來的寬度。

為了使網站在移動端有最理想的瀏覽和閱讀寬度而設定

理想視口，對設備來講，是最理想的視口尺寸

需要手動添寫meta視口標簽通知瀏覽器操作

meta視口標簽的主要目的：布局視口的寬度應該與理想視口的寬度一致，簡單理解就是設備有多寬，我們布局的視口就多寬

最標準的viewport設置

視口寬度和設備保持一致

視口的默認縮放比例1.0

不允許用戶自行縮放

最大允許的縮放比例1.0

最小允許的縮放比例1.0

ps：注意二倍圖或者三倍圖問題

流式布局，就是百分比布局，也稱非固定像素布局。

通過盒子的寬度設置成百分比來根據屏幕的寬度來進行伸縮，不受固定像素的限制，內容向兩側填充。

流式布局方式是移動web開發使用的比較常見的布局方式。

父盒子開啟display：flex後，默認為不換行，所以使用flex-wrap：wrap；使其換行

使用justify-content: space-around; 使其子盒子主軸間距平均分配

使用align-content: space-around; 使其子盒子側軸間距平均分配

方案1

①假設設計稿是750px

②假設我們把整個屏幕劃分為15等份（劃分標准不一可以是20份也可以是10等份）

③每一份作為html字體大小，這里就是50px

④那麼在320px設備的時候，字體大小為320/15就是  21.33px

⑤用我們頁面元素的大小除以不同的 html字體大小會發現他們比例還是相同的

⑥比如我們以750為標准設計稿

⑦一個100 100像素的頁面元素在  750屏幕下，  就是 100/ 50  轉換為rem  是  2rem 2rem  比例是1比1

⑧320屏幕下，  html字體大小為21.33  則 2rem=  42.66px  此時寬和高都是 42.66  但是寬和高的比例還是 1比1

⑨但是已經能實現不同屏幕下  頁面元素盒子等比例縮放的效果

總結：

①最後的公式：頁面元素的rem值 =  頁面元素值（px） /  （屏幕寬度  /  劃分的份數）

②屏幕寬度/劃分的份數就是 htmlfont-size 的大小

③或者：頁面元素的rem值 =  頁面元素值（px） /  html font-size 字體大小

方案2

1.less+rem+媒體查詢

2.lflexible.js+rem

響應式需要一個父級做為布局容器，來配合子級元素來實現變化效果。

原理就是在不同屏幕下，通過媒體查詢來改變這個布局容器的大小，再改變裡面子元素的排列方式和大小，從而實現不同屏幕下，看到不同的頁面布局和樣式變化。

父容器版心的尺寸劃分

超小屏幕（手機，小於 768px）：設置寬度為 100%

小屏幕（平板，大於等於 768px）：設置寬度為 750px

中等屏幕（桌面顯示器，大於等於 992px）：寬度設置為 970px

大屏幕（大桌面顯示器，大於等於 1200px）：寬度設置為 1170px

但是我們也可以根據實際情況自己定義劃分

直接拿Bootstrap 預先定義好的樣式來使用

修改Bootstrap 原來的樣式，注意權重問題

學好Bootstrap 的關鍵在於知道它定義了哪些樣式，以及這些樣式能實現什麼樣的效果

❺ 如何調整手機頁面寬度如何調整手機頁面寬度大小

華為手機如何調節屏幕比例？華為手機如何修改屏幕寬度？

版本:EMUI10.1.1

1.打開華為手機，用兩個手指在桌面上縮放。

2.點擊接下來打開的界面右下角的「桌面設置」按鈕。

3.在後續界面中點擊界面頂部的「桌面布局」設置項。

4.在自動彈出的下拉菜單中，選擇按鈕5次5。

溫馨提示

不如換一些全局題材。用戶可以下載他們需要的主題。華為手機一般自帶主題軟體，可以直接下載使用。

手機屏幕的大小有哪些分類？

手機的屏幕尺寸有以下幾個規格，手機的品牌和型號不一樣，手機的屏幕尺寸也是不一樣的。

iPhoneX，5.8英寸，375x812像素;

iPhone8+(8+,7+,6S+,6+)，5.5英寸，414x736像素;

iPhone8(8,7,6S,6)，4.7英寸，375x667像素;

iPhoneSE（SE,5S,5C），4英寸，320x568像素;

AndroidOne，4.5英寸，320x569像素;

GooglePixel，5英寸，411x731像素;

GooglePixelXL，5.5英寸，411x731像素;

MotoX，4.7英寸，360x640像素;

MotoX二代，5.2英寸，360x640像素;

Nexus5，5英寸，360x640像素;

Nexus5X，5.2英寸，411x731像素;

Nexus6，6英寸，411x731像素;

Nexus6P，5.7英寸，411x731像素;

SamsungGalaxyS8，5.8英寸，360x740像素;

SamsungGalaxyS8+，6.2英寸，360x740像素;

SamsungGalaxyNote4，5.7英寸，480x853像素;

SamsungGalaxyNote5，5.7英寸，480x853像素;

SamsungGalaxyS5，5.1英寸，360x640像素;

SamsungGalaxyS7(S7,S6,S6Edge)，5.1英寸，360x640像素;

SamsungGalaxyS7Edge，5.5英寸，360x640像素;

SmartisanT2，4.95英寸，360x640像素;

SmartisanM1，5.15英寸，360x640像素;

SmartisanM1L，5.7英寸，480x853像素;

堅果Pro，5.5英寸，360x640像素;

OnePlus5，5.5英寸，360x640像素;

OnePlus3T，5.5英寸，360x640像素;

OppoR9s(R9s,R11)，5.5英寸，360x640像素;

OppoR9sPlus(R9sPlus,R11Plus)，6英寸，360x640像素;

OppoA57，5.2英寸，360x640像素;

OppoA59s，5.5英寸，360x640像素;

OppoA37，5英寸，360x640像素;

小米MIX2，5.99英寸，360x720像素;

小米MIX，6.4英寸，360x680像素;

小米Note3，5.5英寸，360x640像素;

小米Note2，5.7英寸，360x640像素;

小米6，5.15英寸，360x640像素;

小米5s，5.15英寸，360x640像素;

小米5sPlus，5.7英寸，360x640像素;

小米Max，6.44英寸，360x640像素;

紅米Note4(4,Note4X)，5.5英寸，360x640像素;

紅米4(4,4X)，5英寸，360x640像素;

VivoX9(X9,X9s)，5.5英寸，360x640像素;

VivoX9Plus(X9Plus,X9sPlus)，5.88英寸，360x640像素;

HUAWEIP10，5.1英寸，360x640像素;

HUAWEIP10Plus，5.5英寸，360x640像素。