分享

Android拼图游戏开发全纪录1

 水与火604 2016-03-13

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


1资源文件:

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

首先是颜色等:

  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的小清新的风格

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

  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使用这个背景后,就比较配合小清新的风格了

  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

  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>  

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

首先是首页界面:


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

  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了

  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>  

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


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

  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>  

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

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多