第31篇 Android Studio实现五子棋游戏（二）布局

1.界面布局

我在做界面的时候，就喜欢自己先手绘一下大概的界面，然后再看看有没有什么要添加的地方，还或者删减的地方，都说了写文档的编码就比较快，但是我这个人心是比较急的，没有坚持把文档写完就开始编码了，有些地方如果先写文档，那就是很好的，因为当你已经开始编码了，再思考，那么可能又要修改很多地方了。
因此未来避免过多得增删，所以先写文档是非常有必要的，因为已经达到了你想要的效果，所以没有太多的地方修改，除非你弄错了什么，不然编码是挺快的。
所以界面也是一样，先画出来，编码时想要什么布局，哪些按钮要放在哪里，就能很快的写出来了。

1.1.整体布局

这里和以前唯一的区别就是添加了背景，我之前是不知道怎么给布局或者背景添加图片的，（刚学），然后我看到background似乎可以加很多东西，我就想能不能加一张图片，果然成功了。当然，你要把布局拉大为整个屏幕界面。
match_parent：和父控件一样大，就是说这个整体布局如果宽高都这样设置，那宽高就和手机屏幕一样了。
wrap_content：只要能显示出所有控件就行，比如我们在这个整体布局只加一个按钮，那整体布局的宽高都和这个按钮一样。

1.2.棋盘界面

ChessBoardActivity是继承于View的，所以按照这样直接加进来就好，而且是透明的，不需要设置其他什么东西，也不需要添加按钮，棋盘的线条在其他地方加。

1.3.代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    android:background="@drawable/background_image"
    tools:context=".MainActivity">


    <TextView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:text="@string/welcome_name"
        android:gravity="center"
        android:layout_weight="1"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginTop="10dp"
        android:gravity="center"
        android:layout_weight="1"
        android:orientation="horizontal">

        <TextView
            android:layout_width="0dp"
            android:layout_height="40dp"
            android:gravity="center"
            android:layout_weight="1"
            android:text="@string/current_player_name"/>
        <TextView
            android:layout_width="0dp"
            android:layout_height="40dp"
            android:gravity="center"
            android:text="@string/white_chess_name"
            android:layout_weight="1"
            android:layout_marginStart="10dp" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="40dp"
            android:gravity="center"
            android:text="@string/current_mode_name"
            android:layout_weight="1"
            android:layout_marginStart="70dp"/>
        <Spinner
            android:id="@+id/spinner_mode"
            android:layout_width="0dp"
            android:layout_height="40dp"
            android:entries="@array/mode_name"
            android:layout_weight="3"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:orientation="horizontal"
        android:layout_weight="2"
        android:layout_marginTop="10dp">

        <ImageView
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_weight="1"
            android:src="@drawable/background_player1"/>
        <ImageView
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_weight="1"
            android:layout_marginStart="85dp"
            android:src="@drawable/background_play"/>
        <ImageView
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_weight="1"
            android:src="@drawable/background_player2"
            android:layout_marginStart="85dp"/>
    </LinearLayout>

    <com.example.myapplication.ChessBoardActivity
        android:id="@+id/view_five_chess_board"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginTop="10dp"
        android:layout_weight="7" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:orientation="horizontal"
        android:layout_weight="2"
        android:gravity="center"
        android:layout_marginTop="10dp">

        <Button
            android:id="@+id/btn_begin"
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:text="@string/btn_begin_name"
            android:layout_weight="1"/>
        <Button
            android:id="@+id/btn_prompt"
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:text="@string/btn_prompt_name"
            android:layout_weight="1"/>
        <Button
            android:id="@+id/btn_repent"
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:text="@string/btn_repent_name"
            android:layout_weight="1"/>
        <Button
            android:id="@+id/btn_help"
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:text="@string/btn_help_name"
            android:layout_weight="1"/>
    </LinearLayout>

</LinearLayout>

2.strings.xml

数据

<resources>
    <string name="app_name">星星五子棋</string>
    <string name="welcome_name">欢迎来到星星五子棋</string>

    <string name="current_player_name">选手</string>
    <string name="white_chess_name">白方</string>
    <string name="black_chess_name">黑方</string>

    <string name="current_mode_name">模式</string>
    <string-array name="mode_name">
        <item>人机对战</item>
        <item>双人对战</item>
        <item>联机对战</item>
    </string-array>

    <string name="btn_begin_name">开始</string>
    <string name="btn_prompt_name">提示</string>
    <string name="btn_repent_name">悔棋</string>
    <string name="btn_help_name">帮助</string>

</resources>