суббота, 8 августа 2015 г.

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

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

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


Иконки, которые автоматически вставила Андроид Студио, находятся в папке нашего проекта 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>
 


Комментариев нет:

Отправить комментарий