我也来开发2048之主界面设计

简介:

我的开发惯例。先把界面设计出来,看过我前面博客的朋友应该知道了。


接上次。今天的主要目的是设计界面,主界面事实上比較简单了,我们先上图:


层次并不复杂。难点在于中间游戏面板的设计,这个我们留着下次具体讲咯

主布局是一个LinearLayout。这个非常easy看出来,主要是Button样式的改造,我使用了一个自己定义shape加selector来实现。这几个Button主要就是shape颜色的不同

以下显示一个Shape来演示样例:

<?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="10dip" />

            <!-- padding:Button里面的文字与Button边界的间隔 -->
            <padding android:bottom="1dp" android:left="1dp" android:right="1dp" android:top="1dp" />
        </shape></item>
    <item><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">

            <!-- 填充的颜色 -->
            <solid android:color="#3EC5FF" />
            <!-- 设置按钮的四个角为弧形 -->
            <!-- android:radius 弧形的半径 -->
            <corners android:radius="10dip" />

            <!-- padding:Button里面的文字与Button边界的间隔 -->
            <padding android:bottom="1dp" android:left="1dp" android:right="1dp" android:top="1dp" />
        </shape></item>

</selector>

以下就是主布局的所有代码:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:padding="3dp" >

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

            <TextView
                android:id="@+id/title"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_margin="3dp"
                android:background="@drawable/orange_button"
                android:text="2048"
                android:textSize="50sp" />
        </LinearLayout>

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:orientation="vertical" >

            <TextView
                android:id="@+id/score_title"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:layout_margin="5dp"
                android:background="@drawable/gray_button"
                android:gravity="center"
                android:text="Scroe"
                android:textSize="25sp" />

            <TextView
                android:id="@+id/scroe"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/score_title"
                android:layout_centerHorizontal="true"
                android:layout_margin="5dp"
                android:background="@drawable/light_orange_button"
                android:gravity="center"
                android:text="10000"
                android:textSize="15sp" />
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:orientation="vertical" >

            <TextView
                android:id="@+id/record_title"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:layout_margin="5dp"
                android:background="@drawable/gray_button"
                android:gravity="center"
                android:text="Record"
                android:textSize="25sp" />

            <TextView
                android:id="@+id/record"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/record_title"
                android:layout_centerHorizontal="true"
                android:layout_margin="5dp"
                android:background="@drawable/light_orange_button"
                android:gravity="center"
                android:text="20000"
                android:textSize="15sp" />
        </RelativeLayout>
    </LinearLayout>

    <com.xys.game2048.view.GameView
        android:id="@+id/gameView"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >
    </com.xys.game2048.view.GameView>

    <LinearLayout
        style="?android:attr/buttonBarStyle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:padding="3dp" >

        <Button
            android:id="@+id/btn_revert"
            style="?android:attr/buttonBarButtonStyle"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_margin="3dp"
            android:layout_weight="1"
            android:background="@drawable/blue_button"
            android:text="Revert" />

        <Button
            android:id="@+id/btn_restart"
            style="?android:attr/buttonBarButtonStyle"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_margin="3dp"
            android:layout_weight="1"
            android:background="@drawable/blue_button"
            android:text="Restart" />

        <Button
            android:id="@+id/btn_option"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_margin="3dp"
            android:layout_weight="1"
            android:background="@drawable/blue_button"
            android:text="Options" />
    </LinearLayout>

</LinearLayout>

相信大家不用多少介绍也能看懂了,我就不多介绍了。


游戏中要实现的功能主要有以下几点:

1、主标题上显示应该达到的目标,假设你没达到过2048则显示2048,假设超过了。则显示下一个目标。如4096

2、Score记录当前游戏分数,Record记录历史最高记录

3、Revert用于撤销上次的移动。玩过2048的肯定深有感触,一不小心移错一步,就掉坑里爬不出来了。可是如今市面上的2048基本上都没这个功能。所以这次准备加上这个功能

4、Options。这个是国际惯例了


以上,今天的基本就是这样。

PS 须要源代码的朋友能够留言,完好后会公布所有源代码







本文转自mfrbuaa博客园博客,原文链接:http://www.cnblogs.com/mfrbuaa/p/5082781.html,如需转载请自行联系原作者


相关文章
|
Java 应用服务中间件 Nacos
阿里巴巴NACOS(3)- 部署Nacos的生产集群环境
上一篇文章介绍了如何在Spring Cloud中使用Nacos,让我感觉是无缝支持Spring Cloud,可惜的是阿里云的MSE暂时只支持Nacos的服务注册和发现,配置中心还是需要用阿里云的ACM来完成,本文将介绍如何部署Nacos的生产集群环境。
14279 0
阿里巴巴NACOS(3)- 部署Nacos的生产集群环境
|
11月前
|
存储 监控 安全
【亲测有用】数据中台数据安全管理能力演示
杭州奥零数据科技有限公司成立于2023年,专注于数据中台业务,维护开源项目AllData并提供商业版解决方案。AllData提供数据集成、存储、开发、治理及BI展示等一站式服务,支持AI大模型应用,助力企业高效利用数据价值。
【亲测有用】数据中台数据安全管理能力演示
|
网络协议 Java Linux
PyAV学习笔记(一):PyAV简介、安装、基础操作、python获取RTSP(海康)的各种时间戳(rtp、dts、pts)
本文介绍了PyAV库,它是FFmpeg的Python绑定,提供了底层库的全部功能和控制。文章详细讲解了PyAV的安装过程,包括在Windows、Linux和ARM平台上的安装步骤,以及安装中可能遇到的错误和解决方法。此外,还解释了时间戳的概念,包括RTP、NTP、PTS和DTS,并提供了Python代码示例,展示如何获取RTSP流中的各种时间戳。最后,文章还提供了一些附录,包括Python通过NTP同步获取时间的方法和使用PyAV访问网络视频流的技巧。
3857 4
PyAV学习笔记(一):PyAV简介、安装、基础操作、python获取RTSP(海康)的各种时间戳(rtp、dts、pts)
|
机器学习/深度学习 人工智能 算法
【服装识别系统】图像识别+Python+人工智能+深度学习+算法模型+TensorFlow
服装识别系统,本系统作为图像识别方面的一个典型应用,使用Python作为主要编程语言,并通过TensorFlow搭建ResNet50卷积神经算法网络模型,通过对18种不同的服装('黑色连衣裙', '黑色衬衫', '黑色鞋子', '黑色短裤', '蓝色连衣裙', '蓝色衬衫', '蓝色鞋子', '蓝色短裤', '棕色鞋子', '棕色短裤', '绿色衬衫', '绿色鞋子', '绿色短裤', '红色连衣裙', '红色鞋子', '白色连衣裙', '白色鞋子', '白色短裤')数据集进行训练,最后得到一个识别精度较高的H5格式模型文件,然后基于Django搭建Web网页端可视化操作界面,实现用户在界面中
799 1
【服装识别系统】图像识别+Python+人工智能+深度学习+算法模型+TensorFlow
|
存储 运维 监控
|
Java 测试技术 程序员
基于SpringBoot+Vue交流和分享平台的设计与实现(源码+部署说明+演示视频+源码介绍)(2)
基于SpringBoot+Vue交流和分享平台的设计与实现(源码+部署说明+演示视频+源码介绍)
383 1
|
存储 运维 监控
云端部署mes/万界星空科技云mes系统
万界星空科技MES制造执行系统,应用云上托管,提供云上自动部署和运维能力,解决手工部署效率低、错误率高、升级困难、业务中断、监控定位难等应用运维问题,适用于政企IT系统及互联网类应用。
404 1
|
安全 Java 数据库连接
Rpamis-security-基于Mybatis-Plugin的一站式加解密脱敏安全组件
项目是一个基于Mybatis插件开发的安全组件,旨在提供更优于市面上组件的脱敏、加解密落库等企业数据安全解决方案。组件提供注解式编程方式,开发者只需要对需要处理的字段或方法加上对应注解,无需关心安全相关需求,由组件全自动完成脱敏、加解密等功能
372 7
|
网络协议 PHP 网络虚拟化
BGP MPLS VPN(OPTION B)实验笔记
BGP MPLS VPN(OPTION B)实验笔记
391 0
BGP MPLS VPN(OPTION B)实验笔记
|
JavaScript
uniapp-----封装接口
uniapp-----封装接口
308 0
uniapp-----封装接口

热门文章

最新文章