今天我们继续来讲解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>
以上就定义好了我们这个App的小清新的风格
然后是字符串资源，这个随意吧
<?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>
接下来是自定义的一个带Selector的Shape，这样Button使用这个背景后，就比较配合小清新的风格了
<?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>
这个就是我们在前面图中看见的Button了，是不是很好看啊
嗯 还有个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>
下面我们就要开始实现我们的界面了：
首先是首页界面：
![[置顶] Android拼图游戏开发全纪录1](https://image.shishitao.com:8440/aHR0cHM6Ly93d3cuaXRkYWFuLmNvbS9pbWdzLzcvOS85LzMvODgvOGExMjQ2NTQ2YmMzYTYwNzljZmEyZTBkOWU0NmQwMDQuanBl.jpe?w=700&webp=1 "[置顶] Android拼图游戏开发全纪录1")
布局比较简单，相信大家都看得懂
<?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>
这就OK了。
里面的选择难度是一个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>
最后是拼图的布局界面：如下图
![[置顶] Android拼图游戏开发全纪录1](https://image.shishitao.com:8440/aHR0cHM6Ly93d3cuaXRkYWFuLmNvbS9pbWdzLzEvNC83LzkvMjMvY2VkMzk1MjE5NTAzYzBlYTUwZDQ2YzE1MDI3NjM2MTEuanBl.jpe?w=700&webp=1 "[置顶] Android拼图游戏开发全纪录1")
就是这样啦，其实界面也很简单
<?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>
好了，今天的东西都是些准备工作，所以比较简单。