Android UI系列-----長度單位和內外邊距


這篇隨筆將會記錄一下在控件布局時,設定距離的三種長度單位:px、dp、sp以及內外邊距的屬性

1.三種長度單位

①px:px是我們常見的一種距離單位,它表示的是一個單位像素,我們經常說我們手機或者電腦的分辨率,例如手機的分辨率是800*480,表示的是手機的屏幕寬有480個像素,高郵800個像素。

我們看到,我們的屏幕其實就是由這樣一個一個的小格子(稱之為像素)組成的,分辨率越高,就說明越清晰。

dpi:我們再來看看dpi的概念,dpi(dots per inch)表示的是每英尺的點(像素)數,我們平常說的手機屏幕的大小比如4.5英寸,指的是屏幕對角線的長度是4.5英寸,那么我們的dpi的計算公式就是:

dpi表示的是每英尺的像素,dpi越高,說明屏幕細粒度越高,也就越清晰了

②dp:dp(Device Independent pixels),其和px的換算單位如下:

px=dp*(dpi/160)  在dpi為160的屏幕上,1px=1dp

這個有點不好翻譯,我們通過一個例子來看看我們的px和dp的區別:

我們看到,假設這里有兩塊大小相同的屏幕,一個的分辨率是480*320,另一個是960*640,那么如果我們的一個TextView控件,假設我們設置其寬度為160px,那么在480*320分辨率的屏幕上,其正好占據了屏幕的一半,但是如果我們將其放到960*640分辨率的屏幕上時,其只占了屏幕的1/4,所以這是很不好的,我們設置控件的寬度時不能夠使用 px 作為長度單位。那么我們來看看如果使用 dp 來作為長度單位,會是怎樣:

我們看到,在同樣的兩塊屏幕上,假設第一塊屏幕的dpi算出來是 dpi=160,第二塊屏幕的 dpi=320 ,我們如果設置這個控件的寬度為160dp,如果套用上面的 dp和px 轉化公式就可以得到:

分辨率為480*320的屏幕,這個控件的的 px 為:160px=160dp*(160/160),也就是160px,占了屏幕一半

分辨率為960*640的屏幕,這個空間的 px 為:320px=160dp*(320/160),也就是320px,也是占了屏幕的一半

這樣我們的應用程序就可以在不同的分辨率上展現的效果相同了。

所以,記住一點:當要設置控件寬度或者是高度的大小的時候,要使用的單位是 dp ,而不要使用 px

③sp:sp(scaled pixels),sp這個單位通常我們用來設置字體的大小,並且如果我們設置字體顯示大小用sp做單位的話,如果我們改變了系統的字體大小,其控件的顯示大小也會跟着發生變化。

2.內外邊距

控件和控件之間的距離我們稱之為外邊距,控件中的內容與控件之間的距離我們稱之為內邊距

我們來看看在android屬性中,外邊距和內邊距的屬性分別是什么:

我們通過設置上方表格的屬性就可以設置控件與控件之間的外邊距以及控件與控件中的內容之間的內邊距了(設置邊距的大小同樣使用的是 dp 來作為單位)

例如我們來看看下面這段布局配置:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    
    <TextView 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#ABCDEF"
        android:layout_margin="30dp"
        android:text="Hello World"/>
    
    <TextView 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:textSize="30sp"
        android:background="#FEDCBA"
        android:padding="20dp"
        android:text="Hello World"/>

</LinearLayout>

設置了兩個TextView控件,然后我們設置了其外邊距以及內邊距的大小,如果兩個控件都設置了外邊距,那么它們之間的距離就是兩個邊距之和:


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM