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

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

更多相关文章

1. Android:Material Design兼容库(Design Support Library)
2. Android(安卓)Studio运行app，按HOME键回到桌面，再次点击app图标启
3. 安卓ListView详解
4. 表格布局(TableLayout)及重要属性
5. android SlidingDrawer（抽屉）
6. Android快速实现二维码扫描--Zbar
7. Android使用xml自定义软键盘效果（附源码）
8. Android中滑屏初探 - scrollTo 以及 scrollBy方法使用说明
9. 【Android】学习笔记(6)――ListView(上)

随机推荐

1. SSL 证书选择指南
2. 一文带你理解java中的同步工具类CountDow
3. 你应该要理解的java并发关键字volatile
4. android通过服务实现消息推送
5. 一个同步工具类CyclicBarrier的详解（干货
6. java中一个重要的原子类AtomicInteger详
7. Docker Swarm 下搭建 MongoDB 分片+副本+
8. 微服务初级设计指南
9. 基于角色的访问控制
10. java并发编程CAS机制原理分析