Какой макет использовать для меню на основе изображений 2x2? - PullRequest
1 голос
/ 03 ноября 2010

Я пытаюсь создать экран (в портретном режиме), который показывает 4 изображения (одного размера, предназначенные для уменьшения до размера экрана), занимая весь экран, разбивая экран на квадранты (высокая сетка 2x2).Это будет действовать как тип главного меню, и каждое изображение должно быть кликабельным, чтобы пользователь мог перейти к другому виду деятельности.

Я пытался использовать GridView внутри LinerLayout (много из Google GridViewучебное пособие), но не может получить изображения в полном масштабе, чтобы заполнить весь экран.Я получаю дополнительные поля вокруг изображений и / или прокрутки всего экрана.

Я также пытался использовать TableLayout, размещая 2 изображения в каждой из 2 строк.Визуально это сработало отлично.К сожалению, при использовании этого я не могу ссылаться на элементы ImageView в TableLayout в своем коде активности (findViewById всегда возвращает ноль).

Я чувствую, что TableLayout на самом деле не "правильная вещь", но яхотел бы услышать, что говорят другие.В любом случае, что нужно сделать для достижения желаемой функциональности?

Спасибо.

Редактировать 1.1: Относительная компоновка работает намного лучше для выстраивания линий.Теперь я просто остался с проблемой, когда findViewById всегда возвращает ноль.Вот мой код:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:background="@color/homescreen_bgcolor"
        >
    <ImageView id="@+id/one"
               android:layout_alignParentTop="true"
               android:layout_alignParentLeft="true"
               android:src="@drawable/item1"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"/>
    <ImageView id="@+id/two"
               android:layout_alignParentTop="true"
               android:layout_alignParentRight="true"
               android:src="@drawable/item2"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"/>
    <ImageView id="@+id/three"
               android:layout_alignParentBottom="true"
               android:layout_alignParentLeft="true"
               android:src="@drawable/item3"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"/>
    <ImageView id="@+id/four"
               android:layout_alignParentBottom="true"
               android:layout_alignParentRight="true"
               android:src="@drawable/item4"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"/>
    </RelativeLayout>

public class HomeScreenActivity2 extends Activity {
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.homescreen2);

    ImageView imageView = (ImageView) findViewById(R.id.one);


    imageView.setClickable(true);
    imageView.setOnClickListener(new View.OnClickListener() {
      public void onClick(View view) {
        Log.i("Test", "test");
      }
    });
  }
}

Ответы [ 2 ]

1 голос
/ 12 июня 2015

Вот пример макета, показывающий, как вы можете получить сетку 2 X 2, которая покрывает весь экран, используя только RelativeLayout.

<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" >

<View
    android:id="@+id/centerVerticalShim"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_centerVertical="true"
    android:visibility="invisible" />

<View
    android:id="@+id/centerHorizontalShim"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_centerHorizontal="true"
    android:visibility="invisible" />

<TextView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_above="@+id/centerVerticalShim"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:layout_toLeftOf="@+id/centerHorizontalShim"
    android:background="#42A5F5"
    android:gravity="center"
    android:text="@string/one"
    android:textColor="#FFFFFF" >
</TextView>

<TextView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_above="@+id/centerVerticalShim"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true"
    android:layout_toRightOf="@+id/centerHorizontalShim"
    android:background="#EF5350"
    android:gravity="center"
    android:text="@string/two"
    android:textColor="#FFFFFF" >
</TextView>

<TextView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:layout_below="@+id/centerVerticalShim"
    android:layout_toLeftOf="@+id/centerHorizontalShim"
    android:background="#66BB6A"
    android:gravity="center"
    android:text="@string/three"
    android:textColor="#FFFFFF" >
</TextView>

<TextView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:layout_below="@+id/centerVerticalShim"
    android:layout_toRightOf="@+id/centerHorizontalShim"
    android:background="#5C6BC0"
    android:gravity="center"
    android:text="@string/four"
    android:textColor="#FFFFFF" >
</TextView></RelativeLayout>

Приведенный выше макет приводит к следующему: image

0 голосов
/ 03 ноября 2010

Я думаю, что TableLayout может сработать для вас, но я бы порекомендовал попробовать RelativeLayout . Вы можете прикрепить ваши изображения к четырем квадрантам, используя комбинации

android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"`

на ваших изображениях.

Я делаю нечто подобное в своем приложении, где у меня есть несколько кнопок на главной странице, которые могут запускать соответствующие действия. RelativeLayout работает нормально и позволяет избежать вложенных объектов Layout, что может снизить производительность во время процедур рендеринга и макета (если он выходит из-под контроля).

...