1、這是運行效果圖
2、分析得可以整體用線性布局,每一行用相對布局來實現。
為了代碼不重復太多,定義了兩個style應用於RelativeLayout和每一個Textview,代碼如下:
<style name="h_wrap_content"> <item name="android:layout_width">match_parent</item> <item name="android:layout_height">wrap_content</item> </style> <style name="tv_style"> <item name="android:layout_width">170dp</item> <item name="android:layout_height">115dp</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、下一步就是模塊布局和圖片導入了 代碼如下:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:background="@android:color/darker_gray" //背景顏色為灰色 tools:context="com.example.admin.a003.MainActivity"> <RelativeLayout style="@style/h_wrap_content" android:layout_marginTop="10dp" //離上邊緣距離10dp > <TextView style="@style/tv_style" android:text="@string/_cloud" android:layout_marginLeft="10dp" //離左邊緣10dp android:layout_alignParentLeft="true" //在屏幕的左側 android:drawableTop="@drawable/clound" //導入圖片於容器的上部 android:id="@+id/txt1"/> <TextView style="@style/tv_style" android:layout_marginRight="10dp" //距離右側邊緣10dp android:layout_alignParentRight="true" //在屏幕右側 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_marginLeft="10dp" android:layout_alignParentLeft="true" android:drawableTop="@drawable/gesture" android:text="@string/_gesture" /> <TextView style="@style/tv_style" android:layout_marginRight="10dp" android:layout_alignParentRight="true" 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_marginLeft="10dp" android:layout_alignParentLeft="true" android:drawableTop="@drawable/info" android:text="@string/_system_info" /> <TextView style="@style/tv_style" android:layout_marginRight="10dp" android:layout_alignParentRight="true" 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_marginLeft="10dp" android:layout_alignParentLeft="true" android:drawableTop="@drawable/language" android:text="@string/_language" /> <TextView style="@style/tv_style" android:layout_marginRight="10dp" android:layout_alignParentRight="true" android:drawableTop="@drawable/notifycation" android:text="@string/_set_notifycation" /> </RelativeLayout> </LinearLayout>
4、接下來就是圖片下方的文字解釋了,需要在res下定義兩個文件夾分別放漢語和英語標簽:代碼如下
<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>
<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>
4、最后編寫界面交互的代碼:
public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } }