安卓UI設計如何做到螢幕自適應
阿新 • • 發佈:2019-01-28
樓主寒假學習了一下關於安卓UI設計的東西,因為剛大一,再加上手殘,所以進度很慢, 花了好久才解決了如何在各種不同的螢幕下才能做到控制元件不移位的效果。
因為是學生,所以對寫部落格這種東西實在不在行,所以請 見諒,也希望大家能幫我指導指導。
說道安卓佈局,我平時用到最多的差不多就是線性佈局LinearLayout和相對佈局RelativeLayout ,一般的線性佈局已經能做很多簡單粗暴的介面,比如說計算器。線性佈局有一個很重要也很實用的屬性權重。(通俗地講,權重(layout_weight)就是對線性佈局指定方向(水平或垂直)上剩餘空間分配的一個規則。)
但是想要做一些更好的介面效果,必然要用到相對佈局。但是用相對佈局的話,螢幕大小不同,各種控制元件的位置就會跑偏,所以,這時候就要用到佈局巢狀的方法。
下面是樓主成功實現的第一個螢幕自適應的例子。
效果圖:
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:gravity="center" android:background="@drawable/beijing" > <LinearLayout android:id="@+id/one" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" android:gravity="center" android:layout_centerHorizontal="true" > <ImageView android:id="@+id/imageView1" android:layout_marginTop="120dp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:src="@drawable/ic_launcher" /> </LinearLayout> <LinearLayout android:id="@+id/two" android:paddingTop="30dp" android:orientation="horizontal" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/one"> <TextView android:id="@+id/TextView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="賬號:" android:layout_marginLeft="40dp" android:textAppearance="?android:attr/textAppearanceLarge" /> <EditText android:id="@+id/EdiText1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="0.65" android:hint="請輸入賬號" android:ems="10" /> <requestFocus android:layout_width="match_parent" /> <EditText /> </LinearLayout> <LinearLayout android:id="@+id/three" android:paddingTop="20dp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/two"> <TextView android:id="@+id/TextView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="密碼:" android:layout_marginLeft="40dp" android:textAppearance="?android:attr/textAppearanceLarge" /> <EditText android:id="@+id/EditText1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="0.65" android:hint="請輸入密碼" android:ems="10" /> <requestFocus /> <EditText android:layout_height="match_parent" /> </LinearLayout> <LinearLayout android:id="@+id/four" android:orientation="vertical" android:gravity="center" android:layout_centerHorizontal="true" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/three"> <Button android:id="@+id/Button1" android:background="@drawable/denglu" android:text="登 錄" android:layout_width="wrap_content" android:layout_height="wrap_content"/> </LinearLayout> <LinearLayout android:layout_alignParentBottom="true" android:id="@+id/five" android:layout_width="wrap_content" android:layout_height="wrap_content" > <TextView android:id="@+id/TextView3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:textAppearance="?android:attr/textAppearanceLarge" android:text="無法登入"/> <View android:layout_width="0dp" android:layout_weight="1.0" android:layout_height="0dp"/> /////444 <TextView android:id="@+id/TextView4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="right" android:textAppearance="?android:attr/textAppearanceLarge" android:text="新使用者"/> </LinearLayout> </RelativeLayout>