Какой макет для использования для меню на основе изображения 2x2?
-
28-09-2019 - |
Вопрос
Я пытаюсь создать экран (в портретном режиме), который показывает 4 изображения (одинаковый размер, предназначенный для масштаба вниз, чтобы поделиться на экране), принимая на себя весь экран, разбивая экран в квадранты (высокая, 2x2 сетка). Это будет действовать в качестве основного меню типа активности, и каждое изображение должно быть кликабельным, чтобы взять пользователь к другому действию.
Я попробовал использовать GRIDVIEW внутри LinerLayout (используя много из учебного пособия Google GridView), но не может правильно получить изображения всеми масштабами, чтобы заполнить весь экран. Я получаю дополнительные поля вокруг изображений и / или прокрутку всего экрана.
Я также попробовал использовать TableLayout, размещая 2 изображения в каждом из 2 рядов. Визуально, это работало прекрасно. К сожалению, при использовании этого я не могу ссылаться на элементы ImageView в TableLayout в своем коде активности (FindViewByID всегда возвращает NULL).
Я чувствую, что такер - это действительно не «правильная вещь, чтобы сделать», но я хотел бы услышать, что должны сказать другие. В любом случае, что должно быть сделано для достижения желаемой функциональности?
Спасибо.
Редактировать 1.1: Относительная макет работает намного лучше для того, чтобы выстроились. Теперь я только что останусь с проблемой, где FindViewById всегда возвращается NULL. Вот мой код до сих пор:
<?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");
}
});
}
}
Решение
Я думаю, что такер может работать для вас, но я бы порекомендовал попробовать RelativeLayout. также. Вы можете в основном выкрепить ваши изображения четырем квадрантам, используя комбинации
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"`
на ваших изображениях.
Я делаю что-то подобное в моем приложении, где у меня есть несколько кнопок на домашней странице, которая может запустить соответствующие действия. Relativelayout работает нормально, и это позволяет избежать вложенных объектов макета, которые могут препятствовать производительности во время процедур рендеринга и макета (если он выходит из-под контроля).
Другие советы
Вот макет образец, показывающий, как вы можете достичь сетки 2 x 2, которая охватывает весь экран, используя только реляционное значение.
<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>
Вышеуказанные раскладки приводит к этому: