Android井字游戏（一）首页制作

创建一个新程序：

应用名： Tic Tac Toe
公司域名： example.org
尺寸： Phone and Tablet
最低SDK： API16: Android 4.1
添加活动： Empty Activity
活动名： MainActivity
布局名： activity_main
标题： UT3

1  使用XML进行设计

1.1创建主屏幕——编辑activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipChildren="false"
    tools:context=".TicTacToeActivity">

    <fragment
        android:id="@+id/main_fragment"
        class="org.example.tictactoe.MainFragment"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        tools:layout="@layout/fragment_main" />

</FrameLayout>

以上标签的属性解释

xmlns:android="http://schemas.android.com/apk/res/android"：定义命名空间android，以便能够在后面使用包含android：的属性名

xmlns:tools="http://schemas.android.com/tools"：定义命名空间tools

android:layout_width="match_parent"：将视图设置为与父视图等宽。由于是顶级元素，就是与屏幕等宽。

android:layout_height="match_parent"：同上，与父视图等高。每个视图都要设置宽度和高度。

android:clipChildren="false"

tools:context=".TicTacToeActivity"： 指出该布局文件是供TicTacToeActivity类使用的。不同于其他属性，该属性是供可视化编辑器使用的，而不是在运行
阶段使用的。


android:id="@+id/fragment_main"：定义新资源标识符fragment_main，在代码或其他XML属性中使用。@+表示定义新内容，@表示引用已在其他地方定义过的内容。

class="org.example.tictactoe.MainFragment"：让android知道该片段是MainFragment类的一个实例。换句话说，android在根据XML创建该片段时，将创建
一个MainFragment实例。

android:layout_width="wrap_content"：将片段设置为与其包含的内容等宽。

android:layout_height="wrap_content"：将片段设置为与其包含的内容等高。

android:layout_gravity="center"：将片段在其父视图中居中设置。还可设置为（top、bottom、left、right、center、fill、top|right等）

tools:layout="@layout/fragment_main"：引用另一个XML文件

1.2 创建主片段——编辑fragment_main.xml

 要将4个元素排成一列，因此使用 LinearLayout布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/menu_background"
    android:elevation="@dimen/elevation_high"
    android:orientation="vertical"
    android:padding="@dimen/menu_padding"
    tools:context=".TicTacToeActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="@dimen/menu_space"
        android:text="@string/long_app_name"
        android:textAppearance="?android:textAppearanceLarge"
        android:textSize="@dimen/menu_text_size" />

    <Button
        android:id="@+id/continue_button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/menu_button_margin"
        android:padding="@dimen/menu_button_padding"
        android:text="@string/continue_label"/>

    <Button
        android:id="@+id/new_button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="@dimen/menu_button_margin"
        android:padding="@dimen/menu_button_padding"
        android:text="@string/new_game_label"/>


    <Button
        android:id="@+id/about_button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="@dimen/menu_button_margin"
        android:padding="@dimen/menu_button_padding"
        android:text="@string/about_label"/>

</LinearLayout>

以上标签的属性解释

android:background="@drawable/menu_background"：设置整个视图的背景。

android:elevation="@dimen/elevstion_high"：令视图比画布稍高。

android:orientation="vertical"：指定布局的方向。可能取值vertical（排成一列）, horizontal（排成一行）

android:padding="@dimen/menu_padding"：让android在视图内部留出少量的空间。若在外部留空间用margin。


android:layout_marginBottom="@dimen/menu_space"：在文本视图和按钮之间留出一定空间。

android:text="@string/long_app_name"： 指定要显示的文本

android:textAppearance="?android:textAppearanceLarge"：让文本字体比常规状态更大更粗。？表示引用了当前主题中定义的一个常量。

android:textSize="@dimen/menu_text_size" ：用硬编码的方式指定了更大的字号。


android:layout_margin="@dimen/menu_button_margin"：在按钮周围留出一些额外的空间。

android:padding="@dimen/menu_button_padding"：在按钮内部留出一些额外的空间。

android:text="@string/continue_label"：指定按钮要显示的文本。

2  编写代码

2.1 定义主活动——MainActivity.java

package org.example.tictactoe;

import android.app.Activity;
import android.os.Bundle;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

2.2 主活动使用的片段——MainFragment.java

先添加about框

package org.example.tictactoe;

import android.os.Bundle;
import android.app.AlertDialog;
import android.app.Fragment;
import android.content.DialogInterface;
import android.content.Intent;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class MainFragment extends Fragment {

    private AlertDialog mDialog;

    @Override
    /**inflater 可用于将XML转换为视图
     * container 指向父容器的引用
     * savedInstanceState 保存的一些状态
     */
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View rootView =
                inflater.inflate(R.layout.fragment_main, container, false);
        // Handle buttons here...
        // 获取视图中的按钮
        View aboutButton = rootView.findViewById(R.id.about_button);


        //设置点击监视器
        aboutButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                // 传入当前活动
                AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());
                // 设置对话框的标题和消息内容
                builder.setTitle(R.string.about_title);
                builder.setMessage(R.string.about_text);
                // 使得android不会再用户轻按对话框外面时关闭它
                builder.setCancelable(false);
                // 添加ok按钮
                builder.setPositiveButton(R.string.ok_label,
                        new DialogInterface.OnClickListener() {
                            @Override
                            public void onClick(DialogInterface dialogInterface, int i) {
                                // nothing
                            }
                        });
                // 负责将以上定义的对话框显示出来
                mDialog = builder.show();
            }
        });


        return rootView;
    }

    @Override
    // 如果启动另一应用，暂停包含该片段的活动
    public void onPause() {
        super.onPause();

        // Get rid of the about dialog if it's still up
        if (mDialog != null)
            mDialog.dismiss();
    }
}

3 定义资源

3.1 字符串

编辑res/values中的资源文件strngs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">UT3</string>
    <string name="long_app_name">Ultimate Tic Tac Toe</string>
    <string name="action_settings">Settings</string>
    <string name="restart_label">Restart</string>
    <string name="main_menu_label">Main Menu</string>
    <string name="declare_winner">%1$s is the winner</string>
    <string name="continue_label">Continue</string>
    <string name="new_game_label">New Game</string>
    <string name="about_title">About Ultimate Tic Tac Toe</string>
    <string name="about_label">About</string>
    <string name="ok_label">OK</string>
    <string name="about_text">
This game is played just like
regular Tic Tac Toe with one difference: to win a tile
you have to win a smaller game of Tic Tac Toe inside that tile.



A tie happens when there are no further moves.
In the case of a tie in a small board, that will count as a win for
both sides in the larger game.
</string>
</resources>

3.2 尺寸

编辑res/values中的文件dimens.xml 

有两个版本的dimens.xml 文件：常规版本 和 使用w820dp标记的版本（用于宽屏设备的替代资源） 

<resources>
   <dimen name="elevation_high">8dp</dimen>
   <dimen name="stroke_width">1dp</dimen>
   <dimen name="corner_radius">4dp</dimen>
   <dimen name="menu_padding">10dp</dimen>
   <dimen name="menu_space">10dp</dimen>
   <dimen name="menu_text_size">32sp</dimen>
   <dimen name="menu_button_margin">4dp</dimen>
   <dimen name="menu_button_padding">10dp</dimen>
</resources>

 3.3 drawable

drawable指的是可在屏幕上绘制的任何图形对象。通常以png或jpg格式存储。在主屏幕上，应用的启动图标就是位图。

还可用XML来创建drawable。以下为主屏幕选项的背景的定义，放于res/drawable中。

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <stroke
        android:width="@dimen/stroke_width"
        android:color="@color/border_color"/>
    <solid android:color="@color/field_color"/>
    <corners android:radius="@dimen/corner_radius"/>
</shape>

该文件定义了一个矩形形状，带圆角且用纯色填充。

使用XML的优点有：图形是基于矢量的，支持任意分辨率。

3.4 颜色

位于res/values下的colors.xml

 <?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="field_color">#b5cee0</color>
   <color name="border_color">#7f7f7f</color>
</resources>

在android中，颜色表示形式有两种： #RRGGBB 和  #AARRGGBB

RR、GG、BB分别指定红色、绿色、蓝色成分。AA为alpha组分， 表示颜色的透明度（0为完全透明，255为完全不透明）

3.5 样式和主题

打开AndroidManifest.xml 有如下行

android:theme="@style/AppTheme"

按住Ctrl并单击AppTheme打开 styles.xml

修改

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- Base application theme. -->
    <style name="AppTheme"
        parent="android:Theme.Holo.Light.NoActionBar.Fullscreen">
        <!-- Customize your theme here. -->
    </style>
</resources>

 接下来便可运行程序，运行结果如下图

摘自《Hello, Android》