Android UI手機信息頁面設(shè)計

更新時間：2017年03月12日 10:42:17 作者：qq_37738188

這篇文章主要為大家詳細介紹了Android UI手機信息頁面的設(shè)計代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

1. 運行效果圖

這里寫圖片描述

2. 設(shè)計思路（實現(xiàn)原理）

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

3.案例實現(xiàn)

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

創(chuàng)建一個名為“手機信息頁面”的程序，該程序用于展示手機設(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 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）抽取樣式

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

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

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

<?xml version="1.0" encoding="utf-8"?>
<resources>
 <string name="app_name">手機信息頁面</string>
 <string name="menu_settings">設(shè)置</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">系統(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>

你會看到如下效果：

這里寫圖片描述

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

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

public class MainActivity extends AppCompatActivity {

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

（5）查看運行結(jié)果

這里寫圖片描述