Гость

Сайт разработчика Александр Климова

/* Моя кошка замечательно разбирается в программировании. Стоит мне объяснить проблему ей - и все становится ясно. */
John Robbins, Debugging Applications, Microsoft Press, 2000

Наряди робота

Даже не обладая большим опытом в программировании под Android, вполне можно написать простую игру, которая может повеселить окружающих. В этой статье мы рассмотрим, как можно нарядить зелёного робота, чтобы пригласить его на вечеринку.

Возьмём изображение робота.

Android

В фотошопе или другом подходящем графическом редакторе разрежем картинку на части (инструемент Slice):

В результате получим отдельные фрагменты изображения.

Создадим новый проект и скопируем все полученные картинки в папку res/drawable.

Создадим разметку для основного экрана. Наша задача - собрать мозаику из частей робота в одно целое, как это было на исходном изображении.


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/LinearLayout01"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

    <LinearLayout
        android:id="@+id/LinearLayout02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <ImageView
            android:id="@+id/csap"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/csap" >
        </ImageView>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/LinearLayout03"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <ImageView
            android:id="@+id/fej"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/fej" >
        </ImageView>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/LinearLayout04"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <ImageView
            android:id="@+id/balkar"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/balkar" >
        </ImageView>

        <ImageView
            android:id="@+id/test"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/test" >
        </ImageView>

        <ImageView
            android:id="@+id/jobbkar"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/jobbkar" >
        </ImageView>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/LinearLayout05"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <ImageView
            android:id="@+id/balalso"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/balalso" >
        </ImageView>

        <ImageView
            android:id="@+id/lab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/lab" >
        </ImageView>

        <ImageView
            android:id="@+id/jobbalso"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/jobbalso" >
        </ImageView>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/LinearLayout06"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >
    </LinearLayout>

</LinearLayout>

Android

Теперь надо отдельные фрагменты робота отредактировать - создать их копии и внести изменения, чтобы у пользователя появился выбор. Например, на голову можно нацепить модные очки, на руку нанести татуировку или вложить кружку пива. Фантазируйте.

Android

Создадим новый класс DataStorage.java, который будет запоминать выбранный вариант приодетого робота, чтобы не повторять процедуру наряжения заново при новом запуске игры.


package com.helloandroid.game;

import java.util.ArrayList;

import android.content.Context;
import android.content.Intent;
import android.content.SharedPreferences;
import android.preference.PreferenceManager;
import android.util.Log;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageView;

public class DataStorage {
	private SharedPreferences mPrefs;

	public DataStorage(Context context) {
		mPrefs = PreferenceManager.getDefaultSharedPreferences(context);
	}

	public void setHead(int id) {
		SharedPreferences.Editor edit = mPrefs.edit();
		edit.putInt("fej", id);
		edit.commit();

	}

	public int getHead() {
		return mPrefs.getInt("fej", 0);
	}

	public void setHorn(int id) {
		SharedPreferences.Editor edit = mPrefs.edit();
		edit.putInt("horn", id);
		Log.d("savehorn:", "" + id);
		edit.commit();
	}

	public int getHorn() {
		return mPrefs.getInt("horn", 0);
	}

	public void setLeftHand(int id) {
		SharedPreferences.Editor edit = mPrefs.edit();
		edit.putInt("lefthand", id);
		edit.commit();
	}

	public int getLeftHand() {
		return mPrefs.getInt("lefthand", 0);
	}

	public void setRightHand(int id) {
		SharedPreferences.Editor edit = mPrefs.edit();
		edit.putInt("righthand", id);
		edit.commit();
	}

	public int getRightHand() {
		return mPrefs.getInt("righthand", 0);
	}

	public void setLegs(int id) {
		SharedPreferences.Editor edit = mPrefs.edit();
		edit.putInt("legs", id);
		edit.commit();
	}

	public int getLegs() {
		return mPrefs.getInt("legs", 0);
	}

	public void setBody(int id) {
		SharedPreferences.Editor edit = mPrefs.edit();
		edit.putInt("body", id);
		edit.commit();
	}

	public int getBody() {
		return mPrefs.getInt("body", 0);
	}

	public void ClickListener(ArrayList<ImageView> im, final int i,
			final int testresz, final DataStorage ds, final Context context) {
		im.get(i).setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				// ds.setHorn((ImageView)v.);
				switch (testresz) {
				case 1:
					ds.setHorn(i);
					break;
				case 2:
					ds.setHead(i);
					break;
				case 3:
					ds.setBody(i);
					break;
				case 4:
					ds.setLeftHand(i);
					break;
				case 5:
					ds.setRightHand(i);
					break;
				case 6:
					ds.setLegs(i);
					break;
				}
				Intent i = new Intent(context.getApplicationContext(),
						Game.class);
				context.startActivity(i);
			}
		});
	}

}

Возвращаемся к основному классу и пишем следующий код:


package com.helloandroid.game;

import java.util.ArrayList;

import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.Toast;

public class Game extends Activity {
	Context context = this;
	ImageView csap, fej, balkar, test, jobbkar, balalso, lab, jobbalso;
	Button exit;
	private DataStorage ds;

	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);

		ds = new DataStorage(this);

		ArrayList<Integer> csaplist = new ArrayList<Integer>();
		csaplist.add(R.drawable.csap);
		csaplist.add(R.drawable.csap1);
		csaplist.add(R.drawable.csap2);
		ArrayList<Integer> fejlist = new ArrayList<Integer>();
		fejlist.add(R.drawable.fej);
		fejlist.add(R.drawable.fej2);
		fejlist.add(R.drawable.fej3);
		csap = (ImageView) findViewById(R.id.csap);
		csap.setImageResource(csaplist.get(ds.getHorn()));
		Log.d("gethorn", "" + ds.getHorn());
		fej = (ImageView) findViewById(R.id.fej);
		fej.setImageResource(fejlist.get(ds.getHead()));

		test = (ImageView) findViewById(R.id.test);
		test.setImageResource(R.drawable.test);

		balkar = (ImageView) findViewById(R.id.balkar);
		balkar.setImageResource(R.drawable.balkar);

		test = (ImageView) findViewById(R.id.test);
		test.setImageResource(R.drawable.test);

		jobbkar = (ImageView) findViewById(R.id.jobbkar);
		jobbkar.setImageResource(R.drawable.jobbkar);

		balalso = (ImageView) findViewById(R.id.balalso);
		balalso.setImageResource(R.drawable.balalso);

		lab = (ImageView) findViewById(R.id.lab);
		lab.setImageResource(R.drawable.lab);

		jobbalso = (ImageView) findViewById(R.id.jobbalso);
		jobbalso.setImageResource(R.drawable.jobbalso);

		csap.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				Intent i = new Intent(context.getApplicationContext(),
						ItemSelect.class);
				i.putExtra("testresz", 1);
				startActivity(i);
			}
		});

		fej.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {
				Intent i = new Intent(context.getApplicationContext(),
						ItemSelect.class);
				i.putExtra("testresz", 2);
				startActivity(i);
			}
		});

		test.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				Intent i = new Intent(context.getApplicationContext(),
						ItemSelect.class);
				i.putExtra("testresz", 3);

				startActivity(i);

			}
		});
		balkar.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				Intent i = new Intent(context.getApplicationContext(),
						ItemSelect.class);
				i.putExtra("testresz", 4);
				startActivity(i);
			}
		});

		jobbkar.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				Intent i = new Intent(context.getApplicationContext(),
						ItemSelect.class);
				i.putExtra("testresz", 5);
				startActivity(i);
			}
		});

		lab.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				Intent i = new Intent(context.getApplicationContext(),
						ItemSelect.class);
				i.putExtra("testresz", 6);
				startActivity(i);
			}
		});
	}

	public void onResume() {
		super.onResume();
		ds = new DataStorage(this);
		ArrayList<Integer> csaplist = new ArrayList<Integer>();
		csaplist.add(R.drawable.csap);
		csaplist.add(R.drawable.csap1);
		csaplist.add(R.drawable.csap2);
		csap = (ImageView) findViewById(R.id.csap);
		csap.setImageResource(csaplist.get(ds.getHorn()));
		ArrayList<Integer> fejlist = new ArrayList<Integer>();
		fejlist.add(R.drawable.fej);
		fejlist.add(R.drawable.fej2);
		fejlist.add(R.drawable.fej3);
		fej = (ImageView) findViewById(R.id.fej);
		fej.setImageResource(fejlist.get(ds.getHead()));

		balkar = (ImageView) findViewById(R.id.balkar);

		ArrayList<Integer> balkarlist = new ArrayList<Integer>();
		balkarlist.add(R.drawable.balkar);
		balkarlist.add(R.drawable.balkar2);
		balkarlist.add(R.drawable.balkar3);
		balkar.setImageResource(balkarlist.get(ds.getLeftHand()));

		test = (ImageView) findViewById(R.id.test);
		ArrayList<Integer> testlist = new ArrayList<Integer>();
		testlist.add(R.drawable.test);
		testlist.add(R.drawable.test2);
		testlist.add(R.drawable.test3);
		test.setImageResource(testlist.get(ds.getBody()));

		jobbkar = (ImageView) findViewById(R.id.jobbkar);

		ArrayList<Integer> jobbkarlist = new ArrayList<Integer>();
		jobbkarlist.add(R.drawable.jobbkar);
		jobbkarlist.add(R.drawable.jobbkar2);
		jobbkarlist.add(R.drawable.jobbkar3);
		jobbkar.setImageResource(jobbkarlist.get(ds.getRightHand()));

		lab = (ImageView) findViewById(R.id.lab);
		ArrayList<Integer> lablist = new ArrayList<Integer>();
		lablist.add(R.drawable.lab);
		lablist.add(R.drawable.lab2);
		lablist.add(R.drawable.lab3);
		lab.setImageResource(lablist.get(ds.getLegs()));
		Toast.makeText(context, "onresume", 3).show();
	}
}

В классе происходит подготовительная работа. Объявляются ImageView, создаётся массив частей тела и назначаются обработчики нажатий на частях тела.

Когда пользователь нажимает на определённую часть тела, то запускается новый экран выбора части тела из предложенных вариантов (класс ItemSelect):


package com.helloandroid.game;

import java.util.ArrayList;

import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.widget.ImageView;
import android.widget.Toast;

public class ItemSelect extends Activity {
	private int j;
	Context context = this;
	private DataStorage ds;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.itemselect);
		Intent i = getIntent();
		ds = new DataStorage(this);
		ArrayList<ImageView> im = new ArrayList<ImageView>();
		im.add((ImageView) findViewById(R.id.first));
		im.add((ImageView) findViewById(R.id.second));
		im.add((ImageView) findViewById(R.id.third));

		int testresz = (int) i.getIntExtra("testresz", -1);

		ArrayList<Integer> csaplist = new ArrayList<Integer>();
		ArrayList<Integer> fejlist = new ArrayList<Integer>();
		ArrayList<Integer> balkarlist = new ArrayList<Integer>();
		ArrayList<Integer> jobbkarlist = new ArrayList<Integer>();
		ArrayList<Integer> lablist = new ArrayList<Integer>();
		ArrayList<Integer> testlist = new ArrayList<Integer>();
		csaplist.add(R.drawable.csap);
		csaplist.add(R.drawable.csap1);
		csaplist.add(R.drawable.csap2);
		fejlist.add(R.drawable.fej);
		fejlist.add(R.drawable.fej2);
		fejlist.add(R.drawable.fej3);

		balkarlist.add(R.drawable.balkar);
		balkarlist.add(R.drawable.balkar2);
		balkarlist.add(R.drawable.balkar3);
		jobbkarlist.add(R.drawable.jobbkar);
		jobbkarlist.add(R.drawable.jobbkar2);
		jobbkarlist.add(R.drawable.jobbkar3);
		lablist.add(R.drawable.lab);
		lablist.add(R.drawable.lab2);
		lablist.add(R.drawable.lab3);
		testlist.add(R.drawable.test);
		testlist.add(R.drawable.test2);
		testlist.add(R.drawable.test3);

		switch (testresz) {
		case 1: // csap
			for (j = 0; j < csaplist.size(); j++) {
				im.get(j).setImageResource(csaplist.get(j));
				if (j == 0) {
					ds.ClickListener(im, 0, testresz, ds, context);

				} else if (j == 1) {
					ds.ClickListener(im, 1, testresz, ds, context);

				} else if (j == 2) {
					ds.ClickListener(im, 2, testresz, ds, context);

				} else if (j == 3) {
					ds.ClickListener(im, 3, testresz, ds, context);

				}

			}
			Toast.makeText(context, "Click the back button to show your robot",
					3).show();
			break;
		case 2:
			for (int j = 0; j < fejlist.size(); j++) {
				im.get(j).setImageResource(fejlist.get(j));
				if (j == 0) {
					ds.ClickListener(im, 0, testresz, ds, context);

				} else if (j == 1) {
					ds.ClickListener(im, 1, testresz, ds, context);

				} else if (j == 2) {
					ds.ClickListener(im, 2, testresz, ds, context);
				} else if (j == 3) {
					ds.ClickListener(im, 3, testresz, ds, context);
				}
			}
			Toast.makeText(context, "Click the back button to show your robot",
					3).show();
			break;
		case 3:
			for (int j = 0; j < testlist.size(); j++) {
				im.get(j).setImageResource(testlist.get(j));
				if (j == 0) {
					ds.ClickListener(im, 0, testresz, ds, context);

				} else if (j == 1) {
					ds.ClickListener(im, 1, testresz, ds, context);

				} else if (j == 2) {
					ds.ClickListener(im, 2, testresz, ds, context);
				} else if (j == 3) {
					ds.ClickListener(im, 3, testresz, ds, context);
				}
			}
			Toast.makeText(context, "Click the back button to show your robot",
					3).show();
			break;
		case 4:
			for (int j = 0; j < balkarlist.size(); j++) {
				im.get(j).setImageResource(balkarlist.get(j));
				if (j == 0) {
					ds.ClickListener(im, 0, testresz, ds, context);

				} else if (j == 1) {
					ds.ClickListener(im, 1, testresz, ds, context);

				} else if (j == 2) {
					ds.ClickListener(im, 2, testresz, ds, context);
				} else if (j == 3) {
					ds.ClickListener(im, 3, testresz, ds, context);
				}
			}
			Toast.makeText(context, "Click the back button to show your robot",
					3).show();
			break;
		case 5:
			for (int j = 0; j < jobbkarlist.size(); j++) {
				im.get(j).setImageResource(jobbkarlist.get(j));
				if (j == 0) {
					ds.ClickListener(im, 0, testresz, ds, context);

				} else if (j == 1) {
					ds.ClickListener(im, 1, testresz, ds, context);

				} else if (j == 2) {
					ds.ClickListener(im, 2, testresz, ds, context);
				} else if (j == 3) {
					ds.ClickListener(im, 3, testresz, ds, context);
				}
			}
			Toast.makeText(context, "Click the back button to show your robot",
					3).show();
			break;
		case 6:
			for (int j = 0; j < lablist.size(); j++) {
				im.get(j).setImageResource(lablist.get(j));
				if (j == 0) {
					ds.ClickListener(im, 0, testresz, ds, context);

				} else if (j == 1) {
					ds.ClickListener(im, 1, testresz, ds, context);

				} else if (j == 2) {
					ds.ClickListener(im, 2, testresz, ds, context);
				} else if (j == 3) {
					ds.ClickListener(im, 3, testresz, ds, context);
				}

			}
			Toast.makeText(context, "Click the back button to show your robot",
					3).show();
			break;
		}
	}
}

Разметка res/layout/itemselect.xml для класса, в которой пользователь будет выбирать элемент из предложенных вариантов. Разметка состоит из трёх ImageView:


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/LinearLayout01"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/first"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >
    </ImageView>

    <ImageView
        android:id="@+id/second"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >
    </ImageView>

    <ImageView
        android:id="@+id/third"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >
    </ImageView>

</LinearLayout>

Запустим проект и посмотрим, что у нас получилось. Вот голый робот.

Clothing

Выбираем варианты для левой руки (рука-крюк, рука с пивом):

Clothing

Продолжаем наряжать робота. Пусть это будет женщина на коньках. Вся такая загадочная и непредсказуемая.

Clothing

Написано по мотивам статьи Developing a clothing game for Android | Hello Android. Там же можно скачать исходник приложения. Хочу сразу предупредить, что код не слишком оптимален и его нужно перерабатывать, что останется вам в качестве домашнего задания. Я выложил статью здесь, как пример идеи, который можно реализовать без слишком глубоких знаний. Было бы желание.

Реклама

Реклама