Android拼图游戏开发全纪录1

今天我们继续来讲解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>

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

首先是首页界面：

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

<?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>

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

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

<?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>

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