1. 程式人生 > >Android UI介面設計

Android UI介面設計

     今天要寫的是一個簡單的手機資訊頁面顯示,用Android中的layout來實現,主要運用了相對佈局和線性佈局來完成,然後是手機資訊介面的國際化。

                                 

                                                                         這是需要完成的介面

一、 新建一個Android專案,新建一個empty介面。

二、將編寫所需要的圖片複製到res/drawable資料夾下,以便於在程式介面的呼叫。

三、為了方便程式編寫,我們values檔案下的style.xml

檔案中存放抽取出來的樣式這樣可以減少程式碼的重複以及用量。

四、為了讓程式國際化(語言改變),我們需要建立兩個檔案來分別在不同語言下顯示介面內容。在Android下建立values-zh-rCNvalues-en-rUS資料夾,建立後會發現並沒有,然後去project下找到這兩個資料夾,並在資料夾中建立strings.xml檔案。

五、前邊的都是一些準備工作,下面來編寫介面程式:程式主要是線性佈局鑲嵌相對佈局。建立一個垂直的線性佈局,並在線性佈局中建立4個相對佈局(可以更改一下介面的背景色//background設定一下線性佈局垂直對齊) ,在相對佈局中新增相應的TextView在裡邊新增圖片和標籤設定好大小位置,然後

需要在MainActivity中編寫與使用者互動的邏輯程式碼使介面能夠顯示在模擬器上。

  下面是程式碼部分:

  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-rCNvalues-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);
    }
}
執行後的介面