Android: как автоматически подогнать GridView под все размеры экрана?

Я написал небольшое приложение, это мое первое приложение для Android. Это приложение для инфракрасного дистанционного управления телевизором, которое я разработал с помощью Samsung Galaxy S4, где, похоже, все работает нормально.

Вот как это выглядит на моем Galaxy S4: Скриншот Samsung Galaxy S4

Но так как я опубликовал в магазине игр, я получил еще один снимок экрана от пользователя Galaxy Note 2, где он выглядит действительно испорченным и не подходит для его экрана: Скриншот Samsung Galaxy Note 2

Это код макета моего фрагмента, fragment_page1.xml.

 <?xml version="1.0" encoding="utf-8"?>
 <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">

<TextView
    android:id="@+id/section_label"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

<GridLayout

    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000000"
    android:orientation="vertical"
    android:rowCount="7"
    android:columnCount="5"
    android:layout_alignParentTop="true"
    android:layout_alignParentStart="true"
    android:layout_alignParentLeft="true">






    // POWER

    <ImageButton
        android:onClick="pressPowerButton"
        android:layout_width="72dp"
        android:layout_height="72dp"
        android:id="@+id/power"
        android:layout_row="0"
        android:layout_column="0"
        android:src="@drawable/stand_by"
        android:layout_marginTop="1.5dp"
        />

    <Button
        android:onClick="pressButton"
        android:layout_width="72dp"
        android:layout_height="72dp"
        android:text="SLEEP"
        android:id="@+id/sleep"
        android:textColor="#2299bb"
        android:textSize="12dp"
        android:layout_row="0"
        android:layout_column="1"
        android:layout_marginTop="1.5dp"
        />

    // VOLUME

    <Button
        android:onClick="pressButton"
        android:layout_width="72dp"
        android:layout_height="72dp"
        android:text="Vol +"
        android:id="@+id/volUp"
        android:textColor="#2299bb"
        android:textStyle="bold"
        android:layout_row="1"
        android:layout_column="0"
        />

    <Button
        android:onClick="pressButton"
        android:layout_width="72dp"
        android:layout_height="72dp"
        android:text="Vol -"
        android:id="@+id/volDown"
        android:textColor="#2299bb"
        android:textStyle="bold"
        android:layout_row="2"
        android:layout_column="0"
        />

    <Button
        android:onClick="pressButton"
        android:layout_width="72dp"
        android:layout_height="72dp"
        android:text="Mute"
        android:id="@+id/mute"
        android:textColor="#2299bb"
        android:layout_row="3"
        android:layout_column="0"
        />

    // PROGRAM
    <Button
        android:onClick="pressButton"
        android:layout_width="72dp"
        android:layout_height="72dp"
        android:text="Ch +"
        android:id="@+id/progUp"
        android:textColor="#2299bb"
        android:textStyle="bold"
        android:layout_row="1"
        android:layout_column="4"
        />

    <Button
        android:onClick="pressButton"
        android:layout_width="72dp"
        android:layout_height="72dp"
        android:text="Ch -"
        android:id="@+id/progDown"
        android:textColor="#2299bb"
        android:textStyle="bold"
        android:layout_row="2"
        android:layout_column="4"
        />

    <Button
        android:onClick="pressButton"
        android:layout_width="72dp"
        android:layout_height="72dp"
        android:text="CH LIST"
        android:id="@+id/chList"
        android:textColor="#2299bb"
        android:textSize="12dp"
        android:layout_marginTop="-2dp"
        android:layout_row="3"
        android:layout_column="4"
        />

    <Button
        android:onClick="pressButton"
        android:layout_width="72dp"
        android:layout_height="72dp"
        android:text="Info"
        android:id="@+id/info"
        android:textColor="#2299bb"
        android:layout_row="2"
        android:layout_column="3"
        />

    <Button
        android:onClick="pressButton"
        android:layout_width="72dp"
        android:layout_height="72dp"
        android:text="Guide"
        android:id="@+id/guide"
        android:textColor="#2299bb"
        android:layout_row="1"
        android:layout_column="3"
        />

    <Button
        android:onClick="pressButton"
        android:layout_width="72dp"
        android:layout_height="72dp"
        android:text="A"
        android:id="@+id/red"
        android:textColor="#cc2200"
        android:textStyle="bold"
        android:layout_row="3"
        android:layout_column="3"
        />

    // MENU

    <Button
        android:onClick="pressButton"
        android:layout_width="72dp"
        android:layout_height="72dp"
        android:text="Menu"
        android:id="@+id/menu"
        android:textColor="#777777"
        android:textSize="12dp"
        android:layout_marginTop="-1.5dp"
        android:layout_row="1"
        android:layout_column="1"
        />

    <Button
        android:onClick="pressButton"
        android:layout_width="72dp"
        android:layout_height="72dp"
        android:text="Internet\n\@TV"
        android:id="@+id/internet"
        android:textColor="#777777"
        android:textSize="12dp"
        android:layout_marginTop="-9.5dp"
        android:layout_row="1"
        android:layout_column="2"
        />

    <Button
        android:onClick="pressButton"
        android:layout_width="72dp"
        android:layout_height="72dp"
        android:text="Media\nPlay"
        android:id="@+id/media"
        android:textColor="#777777"
        android:textSize="12dp"
        android:layout_marginTop="-9dp"
        android:layout_row="2"
        android:layout_column="2"
        />

    <Button
        android:onClick="pressButton"
        android:layout_width="72dp"
        android:layout_height="72dp"
        android:text="Tools"
        android:id="@+id/tools"
        android:textColor="#777777"
        android:textSize="12dp"
        android:layout_marginTop="-2dp"
        android:layout_row="2"
        android:layout_column="1"
        />

    <Button
        android:onClick="pressButton"
        android:layout_width="72dp"
        android:layout_height="72dp"
        android:text="Source"
        android:id="@+id/source"
        android:textColor="#777777"
        android:textSize="12dp"
        android:layout_marginTop="-2dp"
        android:layout_row="3"
        android:layout_column="1"
        />

    <Button
        android:onClick="pressButton"
        android:layout_width="72dp"
        android:layout_height="72dp"
        android:text="Content"
        android:id="@+id/content"
        android:textColor="#777777"
        android:textSize="12dp"
        android:layout_marginTop="-2.5dp"
        android:layout_row="3"
        android:layout_column="2"
        />

    // NAVIGATE

    <Button
        android:onClick="pressButton"
        android:layout_width="72dp"
        android:layout_height="72dp"
        android:text="\u25b2"
        android:id="@+id/up"
        android:textColor="#2299bb"
        android:textStyle="bold"
        android:textSize="20dp"
        android:layout_marginTop="-4.5dp"
        android:layout_row="4"
        android:layout_column="2"
        />

    <Button
        android:onClick="pressButton"
        android:layout_width="72dp"
        android:layout_height="72dp"
        android:text="\u25bc"
        android:id="@+id/down"
        android:textColor="#2299bb"
        android:textStyle="bold"
        android:textSize="20dp"
        android:layout_row="6"
        android:layout_column="2"
        />

    <Button
        android:onClick="pressButton"
        android:layout_width="72dp"
        android:layout_height="72dp"
        android:text="\u25c0"
        android:id="@+id/left"
        android:textColor="#2299bb"
        android:textStyle="bold"
        android:textSize="20dp"
        android:layout_row="5"
        android:layout_column="1"
        />

    <Button
        android:onClick="pressButton"
        android:layout_width="72dp"
        android:layout_height="72dp"
        android:text="\u23ea"
        android:id="@+id/rewind"
        android:textColor="#777777"
        android:textStyle="bold"
        android:textSize="15dp"
        android:layout_marginTop="-2.5dp"
        android:layout_row="5"
        android:layout_column="0"
        />


    <Button
        android:onClick="pressButton"
        android:layout_width="72dp"
        android:layout_height="72dp"
        android:text="\u23e9"
        android:id="@+id/forward"
        android:textColor="#777777"
        android:textStyle="bold"
        android:textSize="15dp"
        android:layout_marginTop="-2.5dp"
        android:layout_row="5"
        android:layout_column="4"
        />

    <Button
        android:onClick="pressButton"
        android:layout_width="72dp"
        android:layout_height="72dp"
        android:text="\u25b7"
        android:id="@+id/play"
        android:textColor="#777777"
        android:textStyle="bold"
        android:textSize="30dp"
        android:layout_marginTop="-1dp"
        android:layout_row="4"
        android:layout_column="1"
        />

    <Button
        android:onClick="pressButton"
        android:layout_width="72dp"
        android:layout_height="72dp"
        android:text="II"
        android:id="@+id/pause"
        android:textColor="#777777"
        android:textStyle="bold"
        android:textSize="20dp"
        android:layout_marginTop="-4dp"
        android:layout_row="4"
        android:layout_column="3"
        />

    <Button
        android:onClick="pressButton"
        android:layout_width="72dp"
        android:layout_height="72dp"
        android:text="\u25a0"
        android:id="@+id/stop"
        android:textColor="#777777"
        android:textStyle="bold"
        android:textSize="20dp"
        android:layout_row="6"
        android:layout_column="3"
        />

    <Button
        android:onClick="pressButton"
        android:layout_width="72dp"
        android:layout_height="72dp"
        android:text="EXIT"
        android:id="@+id/exit"
        android:textColor="#777777"
        android:textStyle="bold"
        android:textSize="12dp"
        android:layout_marginTop="-4dp"
        android:layout_row="6"
        android:layout_column="4"
        />

    <Button
        android:onClick="pressButton"
        android:layout_width="72dp"
        android:layout_height="72dp"
        android:text="\u25cf"
        android:id="@+id/record"
        android:textColor="#777777"
        android:textStyle="bold"
        android:textSize="20dp"
        android:layout_row="6"
        android:layout_column="1"
        />

    <Button
        android:onClick="pressButton"
        android:layout_width="72dp"
        android:layout_height="72dp"
        android:text="\u25b6"
        android:id="@+id/right"
        android:textColor="#2299bb"
        android:textStyle="bold"
        android:textSize="20dp"
        android:layout_row="5"
        android:layout_column="3"
        />

    <Button
        android:onClick="pressButton"
        android:layout_width="72dp"
        android:layout_height="72dp"
        android:text="ENTER"
        android:id="@+id/ok"
        android:textColor="#118844"
        android:textStyle="bold"
        android:textSize="12dp"
        android:layout_marginTop="-3dp"
        android:layout_row="5"
        android:layout_column="2"
        />

    <Button
        android:onClick="pressButton"
        android:clickable="true"
        android:layout_width="72dp"
        android:layout_height="72dp"
        android:text="RETURN\u21b6"
        android:id="@+id/back"
        android:textColor="#cc2200"
        android:textStyle="bold"
        android:textSize="12dp"
        android:layout_marginTop="-14dp"
        android:layout_row="4"
        android:layout_column="4"
        />

// PLACEHOLDER

    <Button
        android:clickable="false"
        android:layout_width="72dp"
        android:layout_height="72dp"
        android:text=""
        android:id="@+id/placeHolder1"
        android:textSize="8dp"
        android:layout_row="0"
        android:layout_column="2"
        />

    <Button
        android:clickable="false"
        android:layout_width="72dp"
        android:layout_height="72dp"
        android:text=""
        android:id="@+id/placeHolder2"
        android:textSize="8dp"
        android:layout_row="0"
        android:layout_column="3"
        />

    <Button
        android:clickable="false"
        android:layout_width="72dp"
        android:layout_height="72dp"
        android:id="@+id/placeHolder3"
        android:textSize="8dp"
        android:layout_row="0"
        android:layout_column="4"
        />

    <Button
        android:clickable="false"
        android:layout_width="72dp"
        android:layout_height="72dp"
        android:text=""
        android:id="@+id/placeHolder4"
        android:textSize="12dp"
        android:layout_row="4"
        android:layout_column="0"
        android:layout_marginTop="-7dp"
        />

    <Button
        android:clickable="false"
        android:layout_width="72dp"
        android:layout_height="72dp"
        android:text=""
        android:id="@+id/placeHolder5"
        android:textSize="12dp"
        android:layout_row="6"
        android:layout_column="0"
        android:layout_marginTop="-4dp"
        />
</GridLayout>

</RelativeLayout>

Это из MainActivity.java

public class MainActivity extends FragmentActivity implements
    ActionBar.TabListener

{

/* swipe view */
private ViewPager viewPager;
private TabsPagerAdapter mAdapter;
private android.app.ActionBar actionBar;

// tab titles
private String[] tabs = { "Basic", "Advanced", "Settings"};


@Override
protected void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    /* init swipe views */
    mAdapter = new TabsPagerAdapter(getSupportFragmentManager());
    viewPager = (ViewPager) findViewById(R.id.pager);
    viewPager.setAdapter(mAdapter);

    actionBar = getActionBar();
    actionBar.setHomeButtonEnabled(false);
    actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

    for (String tabName : tabs)
        actionBar.addTab(actionBar.newTab().setText(tabName).setTabListener(this));

    /**
     * on swiping the viewpager make respective tab selected
     * */
    viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

        @Override
        public void onPageSelected(int position) {
            // on changing the page
            // make respected tab selected
            actionBar.setSelectedNavigationItem(position);
        }

        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2) {
        }

        @Override
        public void onPageScrollStateChanged(int arg0) {
        }
    });

}

Итак, как я могу это улучшить? Я читал статьи и другие сообщения об этом, но пока ничего не помогло. Я пробовал комбинации fill_parent и match_parent, wrap_content для GridView, RelativeLayout пробовал другие элементы, такие как GridLayout, LinearLayout и TableLayout, но я все еще не понимаю :(

Я знаю, что использую некоторые плохие обходные пути, такие как android:layout_marginTop="-2dp", без таких обходных путей мне не удается правильно отобразить его на моем Galaxy S4. Как избавиться от маргиналов?

Поэтому я ищу автоматически масштабируемый GridView с 5 столбцами и 7 строками, который правильно отображает все кнопки даже на больших экранах.

Нужно ли мне делать это программно или есть решение, использующее только файл макета?

Я был бы так счастлив, если кто-то может помочь мне из беды!


person tZappo    schedule 03.08.2015    source источник
comment
Если кто-то хочет загрузить копию, она уже доступна в Play Store: play.google.com/store/apps/details?id=org.tzapp.smote   -  person tZappo    schedule 03.08.2015
comment
вам просто нужно создать несколько xml и проверить, больше ли высота/ширина экрана, равна или меньше, и во всех трех случаях указать количество разных сеток   -  person Danial Hussain    schedule 03.08.2015
comment
Также, когда вы собираетесь раздувать xml внутри класса .java, вы раздуваете xml, и в этом случае он соответствует критериям.   -  person Danial Hussain    schedule 03.08.2015
comment
Хорошо, все еще не понял. Можете ли вы привести пример, пожалуйста? Несколько xml для каких элементов?   -  person tZappo    schedule 03.08.2015
comment
Есть ли у кого-нибудь другое решение?   -  person tZappo    schedule 04.08.2015


Ответы (1)


Вам необходимо динамически регулировать высоту и ширину ячейки элемента сетки. Сначала вам нужно решить, сколько ячеек вы хотите отобразить в строке сетки. Установите сетку ячейки 3 в xml. Предположим, у вас есть три ячейки для сетки для каждого экрана. В вашем файле YourActivity.java динамически вычисляйте ширину экрана. Затем определите соотношение сторон, какую ширину вы хотите, какую высоту.

Алгоритм:

expectedWidth = (screenWidth/number of cell) - ((padding or marjin between one cell to other)* (number of cell +1)  )
expectedHeight = expectedWidth*aspect ratio 

вы можете настроить соотношение сторон для вашего правильного роста

person Danial Hussain    schedule 05.08.2015