В вашем вопросе не так много подробностей, даже картинка не все проясняет, но вот удар.
Не уверен, что вы имеете в виду, когда говорите, что плитки «расширяются» дальше, ожидаете ли вы увидеть шесть плиток в середине, которые появятся в это время, или они всегда там? если они появятся, будет ли это анимировано?
Для достижения той картины, которая у вас есть, вам, вероятно, следует получить RelativeLayout на верхнем уровне. Это просто потому, что у вас есть дата TextView вверху справа и указатель на SlidingDrawer внизу. Вы можете установить фон этого RelativeLayout с помощью своей темы обоев, и я думаю, что синяя полоса сверху, если она статична.
Затем внутри этого RelativeLayout верхнего уровня у вас есть LinearLayout с горизонтальной ориентацией. Это будет содержать три «окна» на вашем изображении.
В этом горизонтальном LinearLayout сначала у вас есть еще один LinearLayout с вертикальной ориентацией, затем ViewPager, а затем еще один вертикальный LinearLayout, похожий на первый (не уверен, насколько правая часть отличается от левой или которая должна быть полным зеркалом ...?).
Итак, в итоге:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:id="@+id/top_level"
android:layout_height="fill_parent"
android:layout_width="fill_parent">
<TextView
android:id="@+id/date_text"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:paddingTop="..." // fill in some space to offset from the top of the screen
android:paddingRight="..." // same thing to keep it off the right edge
/>
<LinearLayout
android:layout_height="..." // set the height of your content in the center of your screen
android:layout_width="fill_parent"
android:layout_below="@+id/date_text"
android:orientation="horizontal" >
<LinearLayout
android:layout_height="fill_parent"
android:layout_width="wrap_content"
android:orientation="vertical" >
< add here some of the stuff you have above your tile like that RSS icon and so on />
<ListView
android:id="@+id/tile_list"
android:layout_height="fill_parent"
android:layout_width="fill_parent"/>
</LinearLayout>
<ViewPager
android:id="@+id/pager"
android:layout_height="fill_parent"
android:layout_width="0dp"
android:layout_weight="1" // so that will fill the remaining space between the left and the right parts
/>
<LinearLayout
android:layout_height="fill_parent"
android:layout_width="wrap_content"
android:orientation="vertical" >
< add here some of the stuff you have above your tile like that RSS icon and so on />
<ListView
android:id="@+id/tile_list"
android:layout_height="fill_parent"
android:layout_width="fill_parent"/>
</LinearLayout>
</LinearLayout>
<SlidingDrawer
android:id="@+id/drawer"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:handle="@+id/drawer_handle"
android:content="@+id/drawer_contents">
<ImageView
android:id="@+id/drawer_handle"
android:src="@drawable/image for the tab..."
android:layout_width="fill_parent"
android:layout_height="wrap_content">
</ImageView>
<Another Layout for the content of the drawer
android:id="@+id/drawer_contents"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
....
</Close that layout>
</SlidingDrawer>
</RelativeLayout>
Оттуда есть еще немало вещей, которые нужно заполнить, и некоторый код, который нужно написать, чтобы заполнить списки плиток (слева и справа), обработать, когда пользователь щелкнет элемент, а затем также отобразить содержимое ViewPager в центре экрана. Вероятно, вы захотите использовать GridLayout на каждой странице.
Если вам нужно скрыть этот ViewPager, пока пользователь не щелкнет какую-либо плитку, вы можете установить видимость как скрытую и изменить ее в своем коде.
ОБНОВЛЕНИЕ Теперь есть дополнительная информация о том, как это движется ...
Хорошо, поэтому оставьте RelativeLayout верхнего уровня с датой и SlidingDrawer внизу.
В средней части вы можете использовать HorizontalListView, созданный этим человеком: Как создать горизонтальный ListView в Android?, код, инструкции и пример можно найти здесь: http://www.dev-smart.com/archives/34
Затем вам нужно создать свой собственный адаптер для заполнения этого списка. Вы можете основывать его на BaseAdapter (это решение больше зависит от того, как хранятся ваши изображения / информация).
В функции getView этого адаптера может быть макет, в котором свернутые и развернутые представления объединены в один FrameLayout, но одновременно виден только один. Это будет выглядеть примерно так:
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent" // assuming the HorizontalListView is set with the right height
>
<LinearLayout
android:id="@+id/collapsed_view"
android:layout_height="fill_parent"
android:layout_width="wrap_content"
android:orientation="vertical" >
< add here some of the stuff you have above your tile like that RSS icon and so on />
</LinearLayout>
<ViewPager
android:id="@+id/expanded_view"
android:layout_height="fill_parent"
android:layout_width="0dp"
android:layout_weight="1" // so that will fill the remaining space between the left and the right parts
android:visibility="gone"
/>
</FrameLayout>
В адаптере списка вам нужно будет установить правильные теги для разных представлений, поэтому, когда пользователь нажимает на одно изображение, вы знаете, какое из них было нажато. Чтобы развернуть одно представление, вы изменяете видимость LinearLayout, чтобы она исчезла, а видимость ViewPager стала видимой.
Если одновременно должен быть только один развернутый, вы можете иметь в своем адаптере переменную состояния, чтобы указать, какая именно из них, и правильно установить свойства видимости для всех представлений в списке. Затем вы вызываете invalidate в ListView, чтобы обновить его.
Для всего этого нужно написать довольно много кода, но если вы сохраните его организованным, все будет не так уж плохо ...
person
Matthieu
schedule
23.08.2012
