Пишем игру для Андроид

Часть вторая. Установка оригинальных иконок и заднего фона.

Добавим в наше приложение оригинальные иконки.

Иконки, которые автоматически вставила Андроид Студио, находятся в папке нашего проекта res/mipmap.

 В папке находится 4 файла ic_launcher, в которых располагаются иконки разного размера в пикселях. Например, открыв файл ic_launcher(mdpi), увидим изображение андроида размером 48х48 dpi (Dots per inch (количество точек на дюйм) применяется для указания разрешения изображения). Наша задача заменить иконки на оригинальные. Копируем нашу иконку нужного разрешения и вставляем в эту же папку под тем же именем ic_launcher. (Если вы скачаете мои иконки, то не забудьте в конце убрать цифры, показывающие разрешение иконки).

Студия переспросит вас, нужно перезаписать? Смело отвечаем, Overwrite! 

 Так проделываем еще с тремя иконками.

Теперь, если запустить наше приложение, мы увидим снова  “Hello world!”, но когда закроем приложение, на экране будет красоваться наша иконка!

 Размещение фона MoonBase

Сначала нашу картинку с фоном нужно разместить в папку, где будут храниться все наши изображения  res/drawable. 

 Не знаю, заметили ли вы, что иконки у нас были с расширением png, а рисунок мы вставили  jpg. Рисунок служит нам фоном, на котором будет кнопка перехода к игре, поэтому прозрачности png нам не нужно. В формате jpg файл меньше «весит» байт. Это очень важно, когда мы создаем любые приложения для мобильных устройств. Ведь от этого будет зависеть общий «вес» вашего приложения, скорость загрузки и многие другие факторы.

Теперь разместим рисунок на главном окне, вместо Hello world.

Посмотрим файл главного активити MainActivity.java  (он находится в папке java). Вот его фрагмент.

package com.adc2017gmail.moonbase;

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;


public class MainActivity extends ActionBarActivity {

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

В начале, идет ссылка на пакет, где сохраняется весь наш проект

package com.adc2017gmail.moonbase;

Потом импортируются нужные библиотеки. Студия автоматически будет их добавлять и убирать, взамисимости от того, какие используете.

Потом объявляется класс MainActivity, который наследуется от ActionBarActivity. Это наследование в итоге создает нам черную полоску вверху с названием приложения. Нам это не нужно, поэтому будем наследоваться от класса  Activity. Студия сразу предложит импортировать нужную библиотеку, соглашайтесь.

public class MainActivity extends Activity {

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

Теперь разберемся с тем, что мы видим в главном окне. У нас работает метод  onCreate, который устанавливает (setContentView(R.layout.activity_main);) то, что прописано в файле activity_main.xml, который часто называют файлом разметки.

Открываем файл ресурсов res/layout/ activity_main.xml.

Смело удаляем ту разметку, которая там была и вставляем следующее

<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"

    tools:context=".MainActivity"

    android:background="@android:color/black">

    />



    <ImageView

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:id="@+id/imageView1"

        android:layout_gravity="center"

        android:scaleType="fitXY"

        android:src="@drawable/moon_base"

        android:contentDescription="@string/bg"

        />

</FrameLayout>

Студия начинает ругаться, что в ресурсах строк нет такого описания bg, поэтому нужно открыть файл res/values/strings.xml и вставить строчку

<string name="bg">background</string>

<resources>

    <string name="app_name">MoonBase</string>



    <string name="hello_world">Hello world!</string>

    <string name="action_settings">Settings</string>

    <string name="bg">background</string>

</resources>

Теперь разберемся с тем, что написано в activity_main.xml.. 

Мы выбрали тип верстки FrameLayout, при этом может отображаться только один элемент в строке. Т.е. если внутри FrameLayout мы поместим несколько элементов, то следующий будет отображаться поверх предыдущего. Нам это и нужно, ведь поверх нашего фона мы хотим расположим кнопку.

Мы разместили в ФрэймЛэйауте пока только один элемент ImageView. Стараемся, чтобы картинка растянулась на весь экран, а они у нас могут быть самые разные! И тут нас спасает замечательная строка

android:scaleType="fitXY"

т.е. наша картинка будет полностью втиснута в наш экран. Студия в режиме Design показывает нам activity_main.xml, вроде все хорошо. 

 Проверим на реальных устройствах.

 Кажется, что всё замечательно, но стоит мне повернуть планшет в горизонтальную позицию, как моя картинка безобразно растягивается. 

 С моим телефоном этого не происходит просто потому, что в нем нет такого режима отображения. Вспоминаем, что не прописали в файле манифеста только вертикальное расположение главного активити.

Открываем файл манифеста AndroidManifest.xml и после строчки

android:label="@string/app_name"

вставляем строчку

android:screenOrientation="portrait"

Теперь при повороте планшета, картинка меняться не будет и останется только в вертикальной.

В следующей части, наконец-то, установим кнопку и сделаем переход на новое активити.

Отсюда можно скачать иконки и фото лунной базы 

https://drive.google.com/open?id=0B-ReL1Efi6XVflZXMVk3ZUhtNl94YWVYWm5nVWhxOU9fM29saG1uaTQyUDZxWXZHQVc2SEE

Файлы приложения на данный момент

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.adc2017gmail.moonbase" >

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name"
            android:screenOrientation="portrait">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

MainActivity.java

package com.adc2017gmail.moonbase;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;


public class MainActivity extends Activity {

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

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

activity_main.xml

<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"
    tools:context=".MainActivity"
    android:background="@android:color/black">
    />

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/imageView1"
        android:layout_gravity="center"
        android:scaleType="fitXY"
        android:src="@drawable/moon_base"
        android:contentDescription="@string/bg"
        />
</FrameLayout>

strings.xml

<resources>
    <string name="app_name">MoonBase</string>

    <string name="hello_world">Hello world!</string>
    <string name="action_settings">Settings</string>
    <string name="bg">background</string>
</resources>