Android UI手機信息頁面設計

2019-12-12 03:24:16

字體：大中小

來源：轉載

供稿：網友

本文實例為大家分享了Android UI 手機信息頁面展示的具體代碼，供大家參考，具體內容如下

1. 運行效果圖

這里寫圖片描述

2. 設計思路（實現原理）

1.將準備好的八個圖標復制到res/drawable文件夾下
2.創建一個垂直的線性布局，并在線性布局中創建4個相對布局
3.在相對布局中添加相應的TextView
4.在values文件下的style.xml文件中存放抽取出來的樣式
5.創建values-zh-rCN、values-en-rUS文件夾，并在文件夾中創建strings.xml文件夾

3.案例實現

（1）創建“手機信息頁面”程序

創建一個名為“手機信息頁面”的程序，該程序用于展示手機設置頁面的信息。程序界面對應布局文件activity_mian.xml如下所示：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@android:color/darker_gray" android:orientation="vertical" tools:context=".MainActivity" > <RelativeLayout style="@style/h_wrap_content"   android:layout_marginTop="10dp">  <TextView   style="@style/tv_style"   android:layout_alignParentLeft="true"   android:layout_marginLeft="10dp"   android:drawableTop="@drawable/clound"   android:text="@string/_cloud" />  <TextView   style="@style/tv_style"   android:layout_alignParentRight="true"   android:layout_marginRight="10dp"   android:drawableTop="@drawable/bluetooth"   android:text="@string/_bluetooth" /> </RelativeLayout> <RelativeLayout style="@style/h_wrap_content"   android:layout_marginTop="10dp">  <TextView   style="@style/tv_style"   android:layout_alignParentLeft="true"   android:layout_marginLeft="10dp"   android:drawableTop="@drawable/gesture"   android:text="@string/_gesture" />  <TextView   style="@style/tv_style"   android:layout_alignParentRight="true"   android:layout_marginRight="10dp"   android:drawableTop="@drawable/gps"   android:text="@string/_gps" /> </RelativeLayout> <RelativeLayout style="@style/h_wrap_content"   android:layout_marginTop="10dp">  <TextView   style="@style/tv_style"   android:layout_alignParentLeft="true"   android:layout_marginLeft="10dp"   android:drawableTop="@drawable/info"   android:text="@string/_system_info" />  <TextView   style="@style/tv_style"   android:layout_alignParentRight="true"   android:layout_marginRight="10dp"   android:drawableTop="@drawable/internet"   android:text="@string/_internet" /> </RelativeLayout> <RelativeLayout style="@style/h_wrap_content"   android:layout_marginTop="10dp">  <TextView   style="@style/tv_style"   android:layout_alignParentLeft="true"   android:layout_marginLeft="10dp"   android:drawableTop="@drawable/language"   android:text="@string/_language" />  <TextView   style="@style/tv_style"   android:layout_alignParentRight="true"   android:layout_marginRight="10dp"   android:drawableTop="@drawable/notifycation"   android:text="@string/_set_notifycation" /> </RelativeLayout> </LinearLayout>

（2）抽取樣式

由于編寫布局文件時，相同控件之間的外邊距和寬高都是固定的。因此會產生大量重復的布局代碼，為了代碼簡潔和重復使用可以將相同代碼抽取為樣式單獨放在一個styles.xml文件中。一般情況下在app的vlaue文件夾下會自帶一個styles.xml文件styles.xml文件如下所示：

<resources> <style name="AppBaseTheme" parent="android:Theme.Light"> </style> <style name="AppTheme" 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></resources>

（3）創建values-zh-rCN、values-en-rUS文件夾

切換到project打開MyApplication->app->src->main->res，創建values-zh-rCN、values-en-rUS文件夾，并在這兩個文件夾下創建相應的strings.xml文件。

values-zh-rCN文件夾下的strings.xml文件如下所示：

<?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="_system_info">系統信息</string> <string name="_internet">網絡</string> <string name="_language">語言設置</string> <string name="_set_notifycation">通知欄設置</string></resources>

values-en-rUS文件夾下的strings.xml文件如下所示：

<?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="_system_info">SystemInfo</string> <string name="_internet">Internet</string> <string name="_language">Language</string> <string name="_set_notifycation">Notifycation</string></resources>

你會看到如下效果：

這里寫圖片描述

（4）編寫與界面交互的代碼

接下來需要在MainActivity中編寫與用戶交互的邏輯代碼，MainActivity對應的代碼如下所示：

public class MainActivity extends AppCompatActivity {  @Override  protected void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    setContentView(R.layout.activity_main);  }}

（5）查看運行結果

這里寫圖片描述