Android拼图游戏开发全纪录1

今天我们继续来讲解Android拼图游戏全纪录的第二篇，今天要完成的任务比较简单：界面布局和资源文件

1资源文件：

我们在开发一个项目的时候，首先要定下这个App的基调，是小清新呢还是重口味，所以我们需要定义一些颜色、style等

首先是颜色等：

[html] view plain copy

print?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <resources>  
3.     <color name="app_bg">#000000</color>  
4.       
5.     <color name="title_text">#FFFFFF</color>  
6.       
7.     <color name="record_title_bg">#F56A47</color>  
8.     <color name="record_title_text">#FFFFFF</color>  
9.     <color name="record_title_text_dark">#727272</color>  
10.       
11.     <color name="main_bg">#3EC5FF</color>  
12.     <color name="main_text">#FFFFFF</color>  
13.       
14.     <color name="setting_reg_bg">#A2A2A2</color>  
15.     <color name="setting_text_light">#C3C3C3</color>  
16.     <color name="setting_text_dark">#111111</color>  
17.       
18.     <color name="tv_click">#33444444</color>  
19. </resources>  

以上就定义好了我们这个App的小清新的风格

然后是字符串资源，这个随意吧

[html] view plain copy

print?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <resources>  
3.   
4.     <string name="app_name">XPuzzle</string>  
5.     <string name="action_settings">Settings</string>  
6.     <string name="hello_world">Hello world!</string>  
7.     <string name="puzzle_main_type">选择难度：</string>  
8.     <string name="puzzle_main_steps">步数：</string>  
9.     <string name="puzzle_main_img">原        图</string>  
10.     <string name="puzzle_main_reset">重        置</string>  
11.     <string name="puzzle_main_back">返        回</string>  
12.     <string name="puzzle_main_time">时间：</string>  
13.     <string name="puzzle_main_type_selected">2 X 2</string>  
14.     <string name="puzzle_main_record">查看记录</string>  
15.     <string name="puzzle_main_more">了解更多</string>  
16.   
17. </resources>  

接下来是自定义的一个带Selector的Shape，这样Button使用这个背景后，就比较配合小清新的风格了

[html] view plain copy

print?

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <selector xmlns:android="http://schemas./apk/res/android">  
3.   
4.     <item android:state_pressed="true"><shape android:shape="rectangle">  
5.   
6.             <!-- 填充的颜色 -->  
7.             <solid android:color="#33444444" />  
8.             <!-- 设置按钮的四个角为弧形 -->  
9.             <!-- android:radius 弧形的半径 -->  
10.             <corners android:radius="5dip" />  
11.   
12.             <!-- padding：Button里面的文字与Button边界的间隔 -->  
13.             <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />  
14.         </shape></item>  
15.     <item><shape android:shape="rectangle">  
16.   
17.             <!-- 填充的颜色 -->  
18.             <solid android:color="@color/title_text" />  
19.             <!-- 设置按钮的四个角为弧形 -->  
20.             <!-- android:radius 弧形的半径 -->  
21.             <corners android:radius="5dip" />  
22.   
23.             <!-- padding：Button里面的文字与Button边界的间隔 -->  
24.             <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />  
25.         </shape></item>  
26.   
27. </selector>  

这个就是我们在前面图中看见的Button了，是不是很好看啊

嗯 还有个TextView的selector

[html] view plain copy

print?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <selector xmlns:android="http://schemas./apk/res/android">  
3.   
4.     <item android:drawable="@color/tv_click" android:state_pressed="true"></item>  
5.     <item android:drawable="@android:color/transparent"></item>  
6.   
7. </selector>  

下面我们就要开始实现我们的界面了：

首先是首页界面：

布局比较简单，相信大家都看得懂

[html] view plain copy

print?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout xmlns:android="http://schemas./apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:background="@color/main_bg" >  
6.   
7.     <LinearLayout  
8.         android:id="@+id/ll_puzzle_main_spinner"  
9.         android:layout_width="wrap_content"  
10.         android:layout_height="wrap_content"  
11.         android:layout_centerHorizontal="true"  
12.         android:layout_margin="10dip" >  
13.   
14.         <TextView  
15.             android:layout_width="wrap_content"  
16.             android:layout_height="wrap_content"  
17.             android:layout_gravity="center"  
18.             android:text="@string/puzzle_main_type"  
19.             android:textColor="@color/main_text"  
20.             android:textSize="@dimen/text_title" />  
21.   
22.         <TextView  
23.             android:id="@+id/tv_puzzle_main_type_selected"  
24.             android:layout_width="wrap_content"  
25.             android:layout_height="wrap_content"  
26.             android:layout_gravity="center"  
27.             android:background="@drawable/textview_click"  
28.             android:text="@string/puzzle_main_type_selected"  
29.             android:textColor="@color/main_text"  
30.             android:textSize="@dimen/text_title" />  
31.     </LinearLayout>  
32.   
33.     <LinearLayout  
34.         android:id="@+id/ll_xpuzzle_main_functions"  
35.         android:layout_width="wrap_content"  
36.         android:layout_height="wrap_content"  
37.         android:layout_alignLeft="@+id/gv_xpuzzle_main_pic_list"  
38.         android:layout_alignParentBottom="true"  
39.         android:gravity="center"  
40.         android:layout_alignRight="@+id/gv_xpuzzle_main_pic_list"  
41.         android:layout_margin="@dimen/padding" >  
42.   
43.         <Button  
44.             android:id="@+id/btn_puzzle_main_record"  
45.             style="@style/btn_style"  
46.             android:layout_width="wrap_content"  
47.             android:layout_height="wrap_content"  
48.             android:layout_margin="@dimen/padding"  
49.             android:background="@drawable/white_button"  
50.             android:text="@string/puzzle_main_record" />  
51.   
52.         <Button  
53.             android:id="@+id/btn_puzzle_main_setting"  
54.             style="@style/btn_style"  
55.             android:layout_width="wrap_content"  
56.             android:layout_height="wrap_content"  
57.             android:layout_margin="@dimen/padding"  
58.             android:background="@drawable/white_button"  
59.             android:text="@string/puzzle_main_more" />  
60.     </LinearLayout>  
61.   
62.     <GridView  
63.         android:id="@+id/gv_xpuzzle_main_pic_list"  
64.         android:layout_width="wrap_content"  
65.         android:layout_height="wrap_content"  
66.         android:layout_above="@id/ll_xpuzzle_main_functions"  
67.         android:layout_below="@id/ll_puzzle_main_spinner"  
68.         android:layout_centerHorizontal="true"  
69.         android:layout_margin="@dimen/padding"  
70.         android:gravity="center_horizontal"  
71.         android:horizontalSpacing="@dimen/padding"  
72.         android:numColumns="4"  
73.         android:padding="@dimen/padding"  
74.         android:verticalSpacing="@dimen/padding" >  
75.     </GridView>  
76.   
77. </RelativeLayout>  

这就OK了。

里面的选择难度是一个popupwindow，所以还有个布局文件

这个。。so easy了

[html] view plain copy

print?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas./apk/res/android"  
3.     android:layout_width="wrap_content"  
4.     android:layout_height="wrap_content"  
5.     android:background="@android:color/transparent"  
6.     android:orientation="horizontal" >  
7.   
8.     <TextView  
9.         android:id="@+id/tv_main_type_2"  
10.         android:layout_width="wrap_content"  
11.         android:layout_height="wrap_content"  
12.         android:layout_marginRight="8dp"  
13.         android:text="2x2"  
14.         android:textColor="@color/main_text"  
15.         android:textSize="@dimen/text_title_sub" />  
16.   
17.     <TextView  
18.         android:id="@+id/tv_main_type_3"  
19.         android:layout_width="wrap_content"  
20.         android:layout_height="wrap_content"  
21.         android:layout_marginRight="8dp"  
22.         android:text="3x3"  
23.         android:textColor="@color/main_text"  
24.         android:textSize="@dimen/text_title_sub" />  
25.   
26.     <TextView  
27.         android:id="@+id/tv_main_type_4"  
28.         android:layout_width="wrap_content"  
29.         android:layout_height="wrap_content"  
30.         android:text="4x4"  
31.         android:textColor="@color/main_text"  
32.         android:textSize="@dimen/text_title_sub" />  
33.   
34. </LinearLayout>  

最后是拼图的布局界面：如下图

就是这样啦，其实界面也很简单

[html] view plain copy

print?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout xmlns:android="http://schemas./apk/res/android"  
3.     android:id="@+id/rl_puzzle_main_main_layout"  
4.     android:layout_width="match_parent"  
5.     android:layout_height="match_parent"  
6.     android:background="@color/main_bg" >  
7.   
8.     <LinearLayout  
9.         android:id="@+id/ll_puzzle_main_spinner"  
10.         android:layout_width="match_parent"  
11.         android:layout_height="wrap_content"  
12.         android:layout_margin="@dimen/padding"  
13.         android:gravity="center_horizontal" >  
14.   
15.         <TextView  
16.             android:layout_width="wrap_content"  
17.             android:layout_height="wrap_content"  
18.             android:layout_gravity="center"  
19.             android:text="@string/puzzle_main_steps"  
20.             android:textColor="@color/title_text"  
21.             android:textSize="@dimen/text_title" />  
22.   
23.         <TextView  
24.             android:id="@+id/tv_puzzle_main_counts"  
25.             android:layout_width="wrap_content"  
26.             android:layout_height="wrap_content"  
27.             android:layout_gravity="center"  
28.             android:gravity="center"  
29.             android:paddingRight="50dip"  
30.             android:text="1"  
31.             android:textColor="@color/title_text"  
32.             android:textSize="@dimen/text_title" />  
33.   
34.         <TextView  
35.             android:layout_width="wrap_content"  
36.             android:layout_height="wrap_content"  
37.             android:layout_gravity="center"  
38.             android:text="@string/puzzle_main_time"  
39.             android:textColor="@color/title_text"  
40.             android:textSize="@dimen/text_title" />  
41.   
42.         <TextView  
43.             android:id="@+id/tv_puzzle_main_time"  
44.             android:layout_width="wrap_content"  
45.             android:layout_height="wrap_content"  
46.             android:layout_gravity="center"  
47.             android:gravity="center"  
48.             android:text="1"  
49.             android:textColor="@color/title_text"  
50.             android:textSize="@dimen/text_title" />  
51.     </LinearLayout>  
52.   
53.     <LinearLayout  
54.         android:id="@+id/ll_puzzle_main_btns"  
55.         android:layout_width="wrap_content"  
56.         android:layout_height="wrap_content"  
57.         android:layout_alignParentBottom="true"  
58.         android:layout_centerHorizontal="true"  
59.         android:layout_margin="@dimen/padding" >  
60.   
61.         <Button  
62.             android:id="@+id/btn_puzzle_main_img"  
63.             style="@style/btn_style"  
64.             android:layout_width="wrap_content"  
65.             android:layout_height="wrap_content"  
66.             android:layout_margin="@dimen/padding"  
67.             android:background="@drawable/white_button"  
68.             android:text="@string/puzzle_main_img" />  
69.   
70.         <Button  
71.             android:id="@+id/btn_puzzle_main_restart"  
72.             style="@style/btn_style"  
73.             android:layout_width="wrap_content"  
74.             android:layout_height="wrap_content"  
75.             android:layout_margin="@dimen/padding"  
76.             android:background="@drawable/white_button"  
77.             android:text="@string/puzzle_main_reset" />  
78.   
79.         <Button  
80.             android:id="@+id/btn_puzzle_main_back"  
81.             style="@style/btn_style"  
82.             android:layout_width="wrap_content"  
83.             android:layout_height="wrap_content"  
84.             android:layout_margin="@dimen/padding"  
85.             android:background="@drawable/white_button"  
86.             android:text="@string/puzzle_main_back" />  
87.     </LinearLayout>  
88.   
89.     <GridView  
90.         android:id="@+id/gv_puzzle_main_detail"  
91.         android:layout_width="wrap_content"  
92.         android:layout_height="wrap_content"  
93.         android:layout_above="@id/ll_puzzle_main_btns"  
94.         android:layout_below="@id/ll_puzzle_main_spinner"  
95.         android:layout_centerInParent="true"  
96.         android:layout_margin="@dimen/padding" >  
97.     </GridView>  
98.   
99. </RelativeLayout>  

好了，今天的东西都是些准备工作，所以比较简单。