Android項(xiàng)目中怎么設(shè)計(jì)一個(gè)UI手機(jī)信息頁面

今天就跟大家聊聊有關(guān)Android項(xiàng)目中怎么設(shè)計(jì)一個(gè)UI手機(jī)信息頁面，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

 設(shè)計(jì)思路（實(shí)現(xiàn)原理） 

1.將準(zhǔn)備好的八個(gè)圖標(biāo)復(fù)制到res/drawable文件夾下
2.創(chuàng)建一個(gè)垂直的線性布局，并在線性布局中創(chuàng)建4個(gè)相對布局
3.在相對布局中添加相應(yīng)的TextView
4.在values文件下的style.xml文件中存放抽取出來的樣式
5.創(chuàng)建values-zh-rCN、values-en-rUS文件夾，并在文件夾中創(chuàng)建strings.xml文件夾

案例實(shí)現(xiàn)

（1）創(chuàng)建“手機(jī)信息頁面”程序

創(chuàng)建一個(gè)名為“手機(jī)信息頁面”的程序，該程序用于展示手機(jī)設(shè)置頁面的信息。程序界面對應(yīng)布局文件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  
  android:layout_marginTop="10dp">
  <TextView
   
   android:layout_alignParentLeft="true"
   android:layout_marginLeft="10dp"
   android:drawableTop="@drawable/clound"
   android:text="@string/_cloud" />
  <TextView
   
   android:layout_alignParentRight="true"
   android:layout_marginRight="10dp"
   android:drawableTop="@drawable/bluetooth"
   android:text="@string/_bluetooth" />
 </RelativeLayout>
 <RelativeLayout  
  android:layout_marginTop="10dp">
  <TextView
   
   android:layout_alignParentLeft="true"
   android:layout_marginLeft="10dp"
   android:drawableTop="@drawable/gesture"
   android:text="@string/_gesture" />
  <TextView
   
   android:layout_alignParentRight="true"
   android:layout_marginRight="10dp"
   android:drawableTop="@drawable/gps"
   android:text="@string/_gps" />
 </RelativeLayout>
 <RelativeLayout  
  android:layout_marginTop="10dp">
  <TextView
   
   android:layout_alignParentLeft="true"
   android:layout_marginLeft="10dp"
   android:drawableTop="@drawable/info"
   android:text="@string/_system_info" />
  <TextView
   
   android:layout_alignParentRight="true"
   android:layout_marginRight="10dp"
   android:drawableTop="@drawable/internet"
   android:text="@string/_internet" />
 </RelativeLayout>
 <RelativeLayout  
  android:layout_marginTop="10dp">
  <TextView
   
   android:layout_alignParentLeft="true"
   android:layout_marginLeft="10dp"
   android:drawableTop="@drawable/language"
   android:text="@string/_language" />
  <TextView
   
   android:layout_alignParentRight="true"
   android:layout_marginRight="10dp"
   android:drawableTop="@drawable/notifycation"
   android:text="@string/_set_notifycation" />
 </RelativeLayout>
 </LinearLayout>

（2）抽取樣式

由于編寫布局文件時(shí)，相同控件之間的外邊距和寬高都是固定的。因此會(huì)產(chǎn)生大量重復(fù)的布局代碼，為了代碼簡潔和重復(fù)使用可以將相同代碼抽取為樣式單獨(dú)放在一個(gè)styles.xml文件中。一般情況下 在app的vlaue文件夾下會(huì)自帶一個(gè)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）創(chuàng)建values-zh-rCN、values-en-rUS文件夾

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

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

<?xml version="1.0" encoding="utf-8"?>
<resources>
 <string name="app_name">手機(jī)信息頁面</string>
 <string name="menu_settings">設(shè)置</string>
 <string name="hello_world">你好，世界!</string>
 <string name="_cloud">云通信</string>
 <string name="_bluetooth">藍(lán)牙</string>
 <string name="_gesture">自定義手勢</string>
 <string name="_gps">定位</string>
 <string name="_system_info">系統(tǒng)信息</string>
 <string name="_internet">網(wǎng)絡(luò)</string>
 <string name="_language">語言設(shè)置</string>
 <string name="_set_notifycation">通知欄設(shè)置</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>

你會(huì)看到如下效果：

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

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

public class MainActivity extends AppCompatActivity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
  }
}

看完上述內(nèi)容，你們對Android項(xiàng)目中怎么設(shè)計(jì)一個(gè)UI手機(jī)信息頁面有進(jìn)一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。