Блог

Главная - Вопросы по программированию - Android gridview для создания головоломки на нескольких экранах

Android gridview для создания головоломки на нескольких экранах

#android #gridview #imageview #screen #puzzle

#Android #gridview #просмотр изображений #экран #Головоломка

Вопрос:

У меня проблема с созданием пользовательского интерфейса для головоломки на Android, который поддерживает несколько экранов! Желаемая головоломка выглядит примерно так:

Головоломка

Я использовал GridView и установил изображение в каждой ячейке.(Каждая ячейка имеет отдельное изображение) Я не знаю, как установить размеры Gridview и его ячеек (высота строки / ширина столбца) без использования разрешения экрана! : ( изображения имеют соотношение сторон 1: 1 и должны растягиваться в ячейках.

Что я сделал:

row_grid.xml

 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="300dp"
        android:layout_height="100dp"
        android:padding="0dp" >

        <ImageView
            android:id="@ id/item_image"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:scaleType="fitXY"
            android:src="@drawable/icon2" >
        </ImageView>
</FrameLayout>

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"
    android:background="@drawable/katy">

    <GridView
        android:id="@ id/gridView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:horizontalSpacing="0dp"
        android:numColumns="2"
        android:stretchMode="columnWidth"
        android:verticalSpacing="0dp" >

    </GridView>

    <TextView
        android:id="@ id/textView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:text="TextView"
        android:textSize="30sp" />

</FrameLayout>

MainActivity.java

 package com.example.test;

import java.util.ArrayList;

import android.R.dimen;
import android.R.integer;
import android.os.Bundle;
import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Point;
import android.view.Display;
import android.view.Menu;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.widget.Button;
import android.widget.FrameLayout;
import android.widget.GridView;
import android.widget.TextView;


public class MainActivity extends Activity {
    GridView gridView;
    ArrayList<Item> gridArray = new ArrayList<Item>();
    CustomGridViewAdapter customGridAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        //Remove App TitleBar
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        final TextView txt = (TextView) findViewById(R.id.textView1);
        txt.setText(Integer.toString(width) " x " Integer.toString(height));


        Bitmap block  = BitmapFactory.decodeResource(this.getResources(), R.drawable.icon1);
        Bitmap block2 = BitmapFactory.decodeResource(this.getResources(), R.drawable.icon2);
        Bitmap block3 = BitmapFactory.decodeResource(this.getResources(), R.drawable.icon3);
        Bitmap block4 = BitmapFactory.decodeResource(this.getResources(), R.drawable.icon4);

        gridArray.add(new Item(block));
        gridArray.add(new Item(block2));
        gridArray.add(new Item(block3));
        gridArray.add(new Item(block4));

        gridView = (GridView) findViewById(R.id.gridView1);

        ViewGroup.LayoutParams layoutParams = gridView.getLayoutParams();
        layoutParams.height = 300; //this is in pixels
        layoutParams.width  = 300; //this is in pixels
        gridView.setLayoutParams(layoutParams);


        customGridAdapter = new CustomGridViewAdapter(this, R.layout.row_grid, gridArray);
        gridView.setAdapter(customGridAdapter);
    }


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

}

Результат:

Результат

Как я могу сделать это независимым от размера и разрешения экрана ?! : (

Редактировать: я попытался динамически изменить ширину GridView, но произошло фатальное исключение!

 package com.example.test;

import java.util.ArrayList;

import android.R.dimen;
import android.R.integer;
import android.os.Bundle;
import android.app.Activity;
import android.content.res.Resources;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Point;
import android.view.Display;
import android.view.Menu;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.widget.Button;
import android.widget.FrameLayout;
import android.widget.GridView;
import android.widget.LinearLayout;
import android.widget.TextView;


public class MainActivity extends Activity {
    GridView gridView;
    ArrayList<Item> gridArray = new ArrayList<Item>();
    CustomGridViewAdapter customGridAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        //Remove App TitleBar
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //Get Screen Dimensions
        Display display = getWindowManager().getDefaultDisplay();
        Point size = new Point();
        display.getSize(size);
        int width = size.x;
        int height = size.y;

        final TextView txt = (TextView) findViewById(R.id.textView1);
        txt.setText(Integer.toString(width) " x " Integer.toString(height));

        Bitmap block  = BitmapFactory.decodeResource(this.getResources(), R.drawable.icon1);
        Bitmap block2 = BitmapFactory.decodeResource(this.getResources(), R.drawable.icon2);
        Bitmap block3 = BitmapFactory.decodeResource(this.getResources(), R.drawable.icon3);
        Bitmap block4 = BitmapFactory.decodeResource(this.getResources(), R.drawable.icon4);

        gridArray.add(new Item(block));
        gridArray.add(new Item(block2));
        gridArray.add(new Item(block3));
        gridArray.add(new Item(block4));

        gridView = (GridView) findViewById(R.id.gridView1);

        //###### Change Height of cells #####//
        LinearLayout rg = (LinearLayout) findViewById(R.layout.row_grid);
        ViewGroup.LayoutParams rgparam = rg.getLayoutParams();
        rgparam.height = rgparam.width;
        rg.setLayoutParams(rgparam);          

        customGridAdapter = new CustomGridViewAdapter(this, R.layout.row_grid, gridArray);
        gridView.setAdapter(customGridAdapter);
    }


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

}

также я протестировал это:

     customGridAdapter = new CustomGridViewAdapter(this, rg.getId(), gridArray);

Ответ №1:

Взгляните на относительную компоновку. Я считаю, что это решит вашу проблему. Вы указываете, где находится изображение и к чему оно прилегает. Итак, на приведенном выше изображении поле 2 будет справа от поля 1 и выровнено по верхней части родительского представления. Поле 1 будет выровнено по верху и слева от родительского элемента.

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

1. Как я могу определить ширину и высоту ячеек в соответствии с разрешением экрана? Исправлено количество строк и колонок сетки (9×6)

2. Я бы посмотрел на высоту и ширину холста / экрана и разделил соответствующим образом. Затем я бы использовал класс Path для создания прямоугольных фигур на основе этих размеров. Я бы заполнил эти поля тем же цветом фона, что и изображение, и расположил изображение по центру внутри каждого поля (не уверен, как это сделать, но я видел вопросы, задаваемые по этому поводу при поиске других вопросов). Вы бы создали свой собственный вид, который отличается от моего первоначального ответа.

3. Я попытался динамически изменять размер макета «row_grid» в соответствии с размером экрана, но произошла ошибка во время выполнения, и приложение завершило работу!!!

Ответ №2:

 Try with below code and check if its working or not?  



        <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools"
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:padding="0dp" >

                <ImageView
                    android:id="@ id/item_image"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:scaleType="fitXY"
                    android:src="@drawable/ic_launcher" >
                </ImageView>

            </LinearLayout>

    -------------------------------

    <RelativeLayout 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"
        android:background="@drawable/background" >

        <GridView
            android:id="@ id/gridView1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:horizontalSpacing="0dp"
            android:numColumns="3"
            android:stretchMode="columnWidth"
            android:verticalSpacing="0dp" >
        </GridView>

    </RelativeLayout>

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

1. Большое вам спасибо. Я пробовал это раньше. все хорошо, но высота строки неправильная! Высота строки в Gridview должна быть равна ширине ячейки, но я думаю, что она равна высоте исходного изображения (300 пикселей)!!! Это результат: s1.uploads.im/GhseS.png

2. @Jessica да, я это видел, просто проверьте мой отредактированный ответ и проверьте, сработает ли это, если это не сработает, дайте мне знать. Я дам вам другой код.

3. Спасибо. К сожалению, это не работает! Посмотрите на это: i.imgur.com/nQ87UZa.png ; правая сторона изображений обрезана!!! Кроме того, я не хочу использовать абсолютную ширину и высоту (100dp). Я попытался установить row_grid.height равным row_grid.width, но произошла ошибка во время выполнения!

4. @jessica Я думаю, вам нужно использовать динамическую ширину и высоту, не могли бы вы прислать мне свой код, позвольте мне сделать это за вас и отправить его вам обратно.

5. @Jessica привет, можешь прислать мне свой cdoe, дай мне проверить в моем редакторе.