Android UI介面設計
阿新 • • 發佈:2019-01-25
今天要寫的是一個簡單的手機資訊頁面顯示,用Android中的layout來實現,主要運用了相對佈局和線性佈局來完成,然後是手機資訊介面的國際化。
這是需要完成的介面
一、 新建一個Android專案,新建一個empty介面。
二、將編寫所需要的圖片複製到res/drawable資料夾下,以便於在程式介面的呼叫。
三、為了方便程式編寫,我們在values檔案下的style.xml 檔案中存放抽取出來的樣式這樣可以減少程式碼的重複以及用量。
四、為了讓程式國際化(語言改變),我們需要建立兩個檔案來分別在不同語言下顯示介面內容。在Android下建立values-zh-rCN、values-en-rUS資料夾,建立後會發現並沒有,然後去project下找到這兩個資料夾,並在資料夾中建立strings.xml檔案。
五、前邊的都是一些準備工作,下面來編寫介面程式:程式主要是線性佈局鑲嵌相對佈局。建立一個垂直的線性佈局,並在線性佈局中建立4個相對佈局(可以更改一下介面的背景色//background設定一下線性佈局垂直對齊) ,在相對佈局中新增相應的TextView在裡邊新增圖片和標籤設定好大小位置,然後
下面是程式碼部分:
1、主介面:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:background="@android:color/darker_gray"//背景顏色 android:layout_height="match_parent"android:orientation="vertical"> <RelativeLayout style="@style/h_wrap_content" android:layout_marginTop="20dp"> <TextView style="@style/tv_style" //型別呼叫 android:layout_alignParentLeft="true"//設定圖片位置 android:layout_marginLeft="20dp"//設定圖片邊距android:drawableTop="@drawable/clound"//圖片呼叫 android:text="@string/_cloud" /> //圖片標籤 <TextView style="@style/tv_style" android:layout_alignParentRight="true" android:layout_marginRight="20dp" android:drawableTop="@drawable/bluetooth" android:text="@string/_bluetooth" /> </RelativeLayout> <RelativeLayout style="@style/h_wrap_content" android:layout_marginTop="20dp"> <TextView style="@style/tv_style" android:layout_alignParentLeft="true" android:layout_marginLeft="20dp" android:drawableTop="@drawable/gesture" android:text="@string/_gesture"/> <TextView style="@style/tv_style" android:layout_alignParentRight="true" android:layout_marginRight="20dp" android:drawableTop="@drawable/gps" android:text="@string/_gps"/> </RelativeLayout> <RelativeLayout style="@style/h_wrap_content" android:layout_marginTop="20dp"> <TextView style="@style/tv_style" android:layout_alignParentLeft="true" android:layout_marginLeft="20dp" android:drawableTop="@drawable/info" android:text="@string/app_name"/> <TextView style="@style/tv_style" android:layout_alignParentRight="true" android:layout_marginRight="20dp" android:drawableTop="@drawable/internet" android:text="@string/_internet"/> </RelativeLayout> <RelativeLayout style="@style/h_wrap_content" android:layout_marginTop="20dp"> <TextView style="@style/tv_style" android:layout_alignParentLeft="true" android:layout_marginLeft="20dp" android:drawableTop="@drawable/language" android:text="@string/_language"/> <TextView style="@style/tv_style" android:layout_alignParentRight="true" android:layout_marginRight="20dp" android:drawableTop="@drawable/notifycation" android:text="@string/system_notifycation"/> </RelativeLayout> </LinearLayout>
2、樣式抽取,程式碼重複部分(編輯佈局大小)
<style name="AppBaseTheme" parent="android:Theme.Light"> </style> <style name="AppThemea" parent="AppBaseTheme"> </style> <!-- 寬 match——parent 高 wrap_content--> <style name="h_wrap_content"> <item name="android:layout_width">match_parent</item> <item name="android:layout_height">wrap_content</item> </style> <!-- 寬高都 match——parent --> <style name="tv_style"> <item name="android:layout_width">145dp</item> <item name="android:layout_height">90dp</item> <item name="android:gravity">center</item> <item name="android:paddingTop">8dp</item> <item name="android:paddingBottom">8dp</item> <item name="android:drawablePadding">5dp</item> <item name="android:background">@android:color/white</item> </style>3、
(3)建立values-zh-rCN、values-en-rUS資料夾(國際化程式)
<?xml version="1.0" encoding="utf-8"?>//英文顯示 <resources> <string name="app_name">PhoneInfo</string> <string name="menu_settings">Settings</string> <string name="hello_world">Hello world!</string> <string name="_cloud">Cloud</string> <string name="_bluetooth">Bluetooth</string> <string name="_gesture">Gesture</string> <string name="_gps">Gps</string> <string name="_internet">Internet</string> <string name="_language">Language</string> <string name="system_notifycation">Notifycation</string> </resources>
<?xml version="1.0" encoding="utf-8"?>//中文顯示 <resources> <string name="app_name">手機資訊頁面</string> <string name="menu_settings">設定</string> <string name="hello_world">你好,世界</string> <string name="_cloud">雲通訊</string> <string name="_bluetooth">藍芽</string> <string name="_gesture">自定義手勢</string> <string name="_gps">定位</string> <string name="_internet">網路</string> <string name="_language">語言設定</string> <string name="system_notifycation">通知欄設定</string> </resources>
4、編寫與介面互動的程式碼
public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.linearlayout); } }執行後的介面