Мелкие детали рисунка - выбор

[math64]

Делаю головоломку Эйнштейна для Андроида
оригинал на C++ - http://games.flowix.com
Как удобнее сделать выбор фишек?
Размер большой фишки - 48 пикселей, маленькой - 16. В такие трудно попасть пальцем.

[KamiSempai]

Можно использовать PopupWindow. При клике на набор фишек показывать их увеличенный вариант в этом PopupWindow.
А если его показывать точно над уменьшенной копией и анимацию хорошую сделать получится просто зашибись.

Еще я бы не советовал пихать все в одно окно. На планшете будет терпимо, а на телефоне лишком мелко получается. Пусть подсказки будут в одном окне, а сами фишки в другом.
Ну и, конечно, лучше использовать разные разметки для разных ориентаций экрана. Например для портретного режима лучше показывать фишки в сетке 2х3 а не 3х2.

PS: Я бы не прочь себе такую игрушку на телефон поставить. Буду рад помочь скорейшему ее созданию.

[math64]

Модель уже есть и работает. Нужно придумать как сделать интерфейс, сохранение и загрузку игры (объекты имеют метод toString() - их можно использовать для сохранения), таблицу рекордов, музыку (можно взять оригинальные wav и сконвертировать в mp3).
Проблема в том, что нужно видеть одновременно игровое поле и подсказки, использованные подсказки можно убирать с экрана, но место для них на экране всё равно должно остаться.
В каких координатах выдаётся место нажатия в onTouchEvent ? В координатах View или всего экрана?
Прилагаю исходники на данный момент, без ресурсов - Слишком большой размер вложения.
Картинки ресурсов можно взять из оригинальной игры, сконвертировав из bmp в png, заменив '-' на '_' и приведя имена файлов к нижнему регистру.

[rezak90]

В каких координатах выдаётся место нажатия в onTouchEvent ? В координатах View или всего экрана?

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

[KamiSempai]

onTouchEvent всегда возвращает координаты нажатия относительно View, а не всего экрана.

[AndreyI]

Устройство посылает события с координатами экрана, а обработчик приводит эти координаты к координатам View обрабатывающим эти события.
Чтобы получить необработанные координаты (т.е. координаты экрана, не привязанные к View) можно вызвать методы getRawX и getRawY.

[KamiSempai]

По поводу проблемы с одновременным отображением...
Если использовать ViewPager, перемещаться между фишками и подсказками можно будет в одно движение пальцем.

[math64]

С использованием GridView вместо одного EinsteinView всё упростилось - попадать стало удобнее, даже без увеличения размеров фишек. Вместо onTouchEvent - onItemClick, и андроид сам подсвечивает нажетую фишку.
ViewPager не подойтёт, поскольку нужно видеть одновременно игровое поле и хотя бы часть подсказок (фактически, это не подсказки, а правила - Rules).
Но как описать лейауты, чтобы размеры подгонались под экран?
cell_layout.xml:

Код: Выделить всё

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" >

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/empty"
        android:src="@drawable/hint_tile" />
    <TableLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical" >
        <TableRow
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >
            <ImageView
                android:id="@+id/imageView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:contentDescription="@string/empty"
                android:src="@drawable/small_a1" />
            <ImageView
                android:id="@+id/imageView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:contentDescription="@string/empty"
                android:src="@drawable/small_a2" />
            <ImageView
                android:id="@+id/imageView3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:contentDescription="@string/empty"
                android:src="@drawable/small_a3" />
        </TableRow>
        <TableRow
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >
            <ImageView
                android:id="@+id/imageView4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:contentDescription="@string/empty"
                android:src="@drawable/small_a4" />
            <ImageView
                android:id="@+id/imageView5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:contentDescription="@string/empty"
                android:src="@drawable/small_a5" />
            <ImageView
                android:id="@+id/imageView6"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:contentDescription="@string/empty"
                android:src="@drawable/small_a6" />
        </TableRow>
    </TableLayout>
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="gone" />
</FrameLayout>

hor_rule.xml:

Код: Выделить всё

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" >
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >
        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@string/empty"
            android:src="@drawable/large_b1" />
        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@string/empty"
            android:src="@drawable/large_b2" />
        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@string/empty"
            android:src="@drawable/large_b3" />
    </LinearLayout>
    <ImageView
        android:id="@+id/arrow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top|center_horizontal"
        android:contentDescription="@string/empty"
        android:src="@drawable/betwarr" />
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="gone" />
</FrameLayout>

vert_rule.xml:

Код: Выделить всё

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical" >
    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/empty"
        android:src="@drawable/large_a1" />
    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/empty"
        android:src="@drawable/large_b1" />
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="gone" />
</LinearLayout>

einstein.xml:

Код: Выделить всё

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/vertLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <GridView
        android:id="@+id/einsteinView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:numColumns="6" >
    </GridView>
    <GridView
        android:id="@+id/horHints"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:numColumns="3" >
    </GridView>
    <GridView
        android:id="@+id/vertHints"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:numColumns="9" >
    </GridView>
</LinearLayout>

einstein.xml,ландшафт:

Код: Выделить всё

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/horLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical" >
        <GridView
            android:id="@+id/einsteinView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:numColumns="6" >
        </GridView>
        <GridView
            android:id="@+id/vertHints"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:numColumns="6" >
        </GridView>
    </LinearLayout>
    <GridView
        android:id="@+id/horHints"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:numColumns="auto_fit" >
    </GridView>
</LinearLayout>

[math64]

Решил пока проблемы с увеличением рисунков заменой ImageView на View и свойства android:src на android:background и вписыванием размеров в программе в виде констант - под другой размер экрана работать не будет - как их считать не знаю. Можно, конечно, прописать эти константы в dimen.xml в нескольких вариантах.

[KamiSempai]

По поводу "попадать стало удобней" советую почитать одну статью с хабра: http://habrahabr.ru/post/142445/
С этим однозначно нужно что-то делать. Залил скрин себе на телефон, не в восторге. Лично меня напрягают такие маленькие кнопочки.

PS: Вернусь из отпуска, через 2 недели, попытаюсь сделать всплывающее окошко из PopupWindow, для увеличения ячейки. Если до меня этого никто еще не сделает

[math64]

попадать стало не удобнО, а удобнЕЕ, чем в первом варианте (исходники которого выложены). У меня телефон с экраном 4 дюйма, 480x800 пискелей - при меньшем (по размеру) экране попадать будет совсем трудно, при меньшем разрешении - не различить детали на рисунке. Если устройство с джойстиком, можно сделать выбор джойстиком, но у меня джойстика нет.
Игровое поле сейчас размером 480x480 пикселей, занимает всю верхнюю или левую часть экрана, размеры вшиты в код программы.
Делать больше - придётся и для него прокрутку делать.
Остальная часть экрана - подсказки, с прокруткой, без увеличения. В портретном разрешении видно 12 горизонтальных и 9 вертикальных, в ландшафте - 14 горизонтальных и 6 вертикальных.
Мелкие картинки фишек из ресурсов выкинул - получаю уменьшением больших.
Ссылка с хабра рекомендует делать объекты размером 1 дюйм - но таких на экран влезет совсем мало.
Всплывающее окно:

Код: Выделить всё

		onCellClick = new OnItemClickListener() {
			public void onItemClick(AdapterView<?> parent, View view,
					int position, long id1) {
				Cell cell = (Cell) parent.getItemAtPosition(position);
				if (!cell.isOpened()) {
					View pv = inflater.inflate(R.layout.cell_popup, null, false);
					Einstein.this.cell = cell;
					setupButton(pv, 0, R.id.imageButton1);
					setupButton(pv, 1, R.id.imageButton2);
					setupButton(pv, 2, R.id.imageButton3);
					setupButton(pv, 3, R.id.imageButton4);
					setupButton(pv, 4, R.id.imageButton5);
					setupButton(pv, 5, R.id.imageButton6);
					int w = 250;
					int h = 150;
					pw = new PopupWindow(pv, w, h, true);
					pw.setBackgroundDrawable(getResources().getDrawable(R.drawable.tile));
					pw.setOutsideTouchable(true);
					pw.showAsDropDown(view);
				}
			}

		};

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

[KamiSempai]

Как и обещал выкладываю пример с использованием PopupWindow. Все-таки успел доделать до отъезда.
Там и автоматическое вычисление позиции, и размеров.
Анимация только мне не нравится. Потом как-нибудь доделаю.

[AndreyI]

Как и обещал выкладываю пример с использованием PopupWindow. Все-таки успел доделать до отъезда.
Там и автоматическое вычисление позиции, и размеров.
Анимация только мне не нравится. Потом как-нибудь доделаю.

Почему не стал наследовать ZoomWindow от PopupWindow? Вроде так было бы логичнее.

[KamiSempai]

Почему не стал наследовать ZoomWindow от PopupWindow? Вроде так было бы логичнее.

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

[math64]

Почему не стал наследовать ZoomWindow от PopupWindow? Вроде так было бы логичнее.

ZoomWindow - обёртка для PopupWindow. Никакие виртуальные методы PopupWindow не переопределяются, так что вполне разумно не делать наследования. Обертка же скрывает методы, которые не нужны для использования. Другой вариант - оставить всё в MainActivity, но там и так будет много методов.

[math64]

Размеры PopupWindow вычисляются автоматически так:

Код: Выделить всё

		pw.setWindowLayoutMode(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
		pw.showAsDropDown(view);

Но координаты можно будет узнать, когда окно будет на экране.
Как правило, pw появляется под view - и только когда там нет места - сверху.
При использовании pw.showAsDropDown(view); как я понял, игнорируется pw.setAnimationStyle(R.style.Animations_Alpha);
Предложенный способ вычисления координат основан на том, что уменьшенная копия показана на экране и не учитывает возможность использования не всей площади экрана (статус строка, заголовок - заголовок я отключил, но статус-строку (где выводится время, заряд, уровень сигнала) оставил. Часть окна может оказаться под статус-строкой.
При повороте экрана нужно делать pw.dismiss(); иначе программа зависает.
Мне пока не очень нравится вот это:

По короткому нажатию на кнопку, фишка удаляется, по долгому - удаляются все остальные.

(в оригинале это были левая и правая кнопки мыши, в андроиде правой кнопке мыши обычно соответствует долгое нажатие)

[math64]

Добавил звуки на всплывающее окно, длинное и короткое нажатие и конец игры. Теперь долгое нажатие фиксируется лучше.

[math64]

Заменил изображения на TextView. Масштабироваться должно бы лучше, но еще остаются "магические константы".

Код: Выделить всё

	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
        Cell cell = getItem(position);
        View view = super.getView(position, convertView, parent);
        int w = parent.getWidth();
        int h = parent.getHeight();
        return cell.setupView(view, w/6-3, h/6-4); // Из-за того, что у GridView остаются поля
	}

	private void setupTextLayout(TextView v, int szx, int szy) {
		v.setTextSize(szy * 0.55f); // Зависит от шрифта
		setupSizes(v, szx, szy);
	}

	private void setupSizes(View v, int szx, int szy) {
		v.setMinimumHeight(szx);
		v.setMinimumWidth(szy);
		LayoutParams lp = v.getLayoutParams();
		lp.height = szy;
		lp.width = szx;
		v.setLayoutParams(lp);
	}

Добавил анимацию ячейки

Код: Выделить всё

			if (!mOpened) {
				final Animation animation = new ScaleAnimation(1.f / 3, 1, 0.5f, 1,
						Animation.RELATIVE_TO_SELF, first%3/3.f,
						Animation.RELATIVE_TO_SELF, (float)(first/3));
				animation.setDuration(1000);
				tv.post(new Runnable() {
					public void run() {
						tv.startAnimation(animation);
					}
				});
				mOpened = opened;
			}

Каждая ячейка анимируется почему-то только один раз, хотя можно анимировать сразу несколько.

[KamiSempai]

Когда уже игра будет доделана?
Мну в ожидании

[math64]

В общем то доделана. Но проверена только на моём телефоне. Но куда её скинуть?