今天我們繼續來講解Android拼圖遊戲全紀錄的第二篇，今天要完成的任務比較簡單：介面佈局和資原始檔

1資原始檔：

我們在開發一個專案的時候，首先要定下這個App的基調，是小清新呢還是重口味，所以我們需要定義一些顏色、style等

首先是顏色等：

<?xml version="1.0" encoding="utf-8"?><resources>    <color name="app_bg">#000000</color>        <color name="title_text">#FFFFFF</color>        <color
 
 name="record_title_bg">#F56A47</color>    <color name="record_title_text">#FFFFFF</color>    <color name="record_title_text_dark">#727272</color>        <color name="main_bg">#3EC5FF</color>    <color name="main_text">#FFFFFF</color>        <color
 
 name="setting_reg_bg">#A2A2A2</color>    <color name="setting_text_light">#C3C3C3</color>    <color name="setting_text_dark">#111111</color>        <color name="tv_click">#33444444</color></resources>

然後是字串資源，這個隨意吧

<?xml version="1.0"
 
 encoding="utf-8"?><resources>    <string name="app_name">XPuzzle</string>    <string name="action_settings">Settings</string>    <string name="hello_world">Hello world!</string>    <string name="puzzle_main_type">選擇難度：</string>    <string name="puzzle_main_steps">步數：</string>    <string name="puzzle_main_img">原        圖</string>    <string name="puzzle_main_reset">重        置</string>    <string name="puzzle_main_back">返        回</string>    <string name="puzzle_main_time">時間：</string>    <string name="puzzle_main_type_selected">2 X 2</string>    <string name="puzzle_main_record">檢視記錄</string>    <string name="puzzle_main_more">瞭解更多</string></resources>

<?xml version="1.0" encoding="UTF-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_pressed="true"><shape android:shape="rectangle">            <!-- 填充的顏色 -->            <solid android:color="#33444444" />            <!-- 設定按鈕的四個角為弧形 -->            <!-- android:radius 弧形的半徑 -->            <corners android:radius="5dip" />            <!-- padding：Button裡面的文字與Button邊界的間隔 -->            <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />        </shape></item>    <item><shape android:shape="rectangle">            <!-- 填充的顏色 -->            <solid android:color="@color/title_text" />            <!-- 設定按鈕的四個角為弧形 -->            <!-- android:radius 弧形的半徑 -->            <corners android:radius="5dip" />            <!-- padding：Button裡面的文字與Button邊界的間隔 -->            <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />        </shape></item></selector>

嗯 還有個TextView的selector

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:drawable="@color/tv_click" android:state_pressed="true"></item>    <item android:drawable="@android:color/transparent"></item></selector>

首先是首頁介面：

佈局比較簡單，相信大家都看得懂

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="@color/main_bg" >    <LinearLayout        android:id="@+id/ll_puzzle_main_spinner"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_centerHorizontal="true"        android:layout_margin="10dip" >        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="center"            android:text="@string/puzzle_main_type"            android:textColor="@color/main_text"            android:textSize="@dimen/text_title" />        <TextView            android:id="@+id/tv_puzzle_main_type_selected"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="center"            android:background="@drawable/textview_click"            android:text="@string/puzzle_main_type_selected"            android:textColor="@color/main_text"            android:textSize="@dimen/text_title" />    </LinearLayout>    <LinearLayout        android:id="@+id/ll_xpuzzle_main_functions"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignLeft="@+id/gv_xpuzzle_main_pic_list"        android:layout_alignParentBottom="true"        android:gravity="center"        android:layout_alignRight="@+id/gv_xpuzzle_main_pic_list"        android:layout_margin="@dimen/padding" >        <Button            android:id="@+id/btn_puzzle_main_record"            style="@style/btn_style"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_margin="@dimen/padding"            android:background="@drawable/white_button"            android:text="@string/puzzle_main_record" />        <Button            android:id="@+id/btn_puzzle_main_setting"            style="@style/btn_style"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_margin="@dimen/padding"            android:background="@drawable/white_button"            android:text="@string/puzzle_main_more" />    </LinearLayout>    <GridView        android:id="@+id/gv_xpuzzle_main_pic_list"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_above="@id/ll_xpuzzle_main_functions"        android:layout_below="@id/ll_puzzle_main_spinner"        android:layout_centerHorizontal="true"        android:layout_margin="@dimen/padding"        android:gravity="center_horizontal"        android:horizontalSpacing="@dimen/padding"        android:numColumns="4"        android:padding="@dimen/padding"        android:verticalSpacing="@dimen/padding" >    </GridView></RelativeLayout>

裡面的選擇難度是一個popupwindow，所以還有個佈局檔案

這個。。so easy了

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:background="@android:color/transparent"    android:orientation="horizontal" >    <TextView        android:id="@+id/tv_main_type_2"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginRight="8dp"        android:text="2x2"        android:textColor="@color/main_text"        android:textSize="@dimen/text_title_sub" />    <TextView        android:id="@+id/tv_main_type_3"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginRight="8dp"        android:text="3x3"        android:textColor="@color/main_text"        android:textSize="@dimen/text_title_sub" />    <TextView        android:id="@+id/tv_main_type_4"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="4x4"        android:textColor="@color/main_text"        android:textSize="@dimen/text_title_sub" /></LinearLayout>

就是這樣啦，其實介面也很簡單

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/rl_puzzle_main_main_layout"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="@color/main_bg" >    <LinearLayout        android:id="@+id/ll_puzzle_main_spinner"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_margin="@dimen/padding"        android:gravity="center_horizontal" >        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="center"            android:text="@string/puzzle_main_steps"            android:textColor="@color/title_text"            android:textSize="@dimen/text_title" />        <TextView            android:id="@+id/tv_puzzle_main_counts"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="center"            android:gravity="center"            android:paddingRight="50dip"            android:text="1"            android:textColor="@color/title_text"            android:textSize="@dimen/text_title" />        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="center"            android:text="@string/puzzle_main_time"            android:textColor="@color/title_text"            android:textSize="@dimen/text_title" />        <TextView            android:id="@+id/tv_puzzle_main_time"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="center"            android:gravity="center"            android:text="1"            android:textColor="@color/title_text"            android:textSize="@dimen/text_title" />    </LinearLayout>    <LinearLayout        android:id="@+id/ll_puzzle_main_btns"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:layout_centerHorizontal="true"        android:layout_margin="@dimen/padding" >        <Button            android:id="@+id/btn_puzzle_main_img"            style="@style/btn_style"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_margin="@dimen/padding"            android:background="@drawable/white_button"            android:text="@string/puzzle_main_img" />        <Button            android:id="@+id/btn_puzzle_main_restart"            style="@style/btn_style"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_margin="@dimen/padding"            android:background="@drawable/white_button"            android:text="@string/puzzle_main_reset" />        <Button            android:id="@+id/btn_puzzle_main_back"            style="@style/btn_style"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_margin="@dimen/padding"            android:background="@drawable/white_button"            android:text="@string/puzzle_main_back" />    </LinearLayout>    <GridView        android:id="@+id/gv_puzzle_main_detail"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_above="@id/ll_puzzle_main_btns"        android:layout_below="@id/ll_puzzle_main_spinner"        android:layout_centerInParent="true"        android:layout_margin="@dimen/padding" >    </GridView></RelativeLayout>