使用动画设计复杂的android UI

Question

我必须为一个Android应用程序设计一个UI，其中我有10个包含图像和文本(图片中的2个大框)的垂直瓦片，单击一个瓦片后，它就消失了，取而代之的是同一页上包含6个元素(如下图中心所示)的可滚动网格视图。(由动画显示)

这是我试图解释的视图的快照。这张图片只显示了10个瓦片中的2个，点击时会出现一个网格视图，每个白框都包含图像和文本。我不擅长设计，所以一个详细的答案实现这一点将不胜感激。谢谢。

​

Answer 1

你的问题中没有太多的细节，即使是图片也不能澄清一切，但这里有一个尝试。

当你说瓷砖“进一步扩展”时，你不确定你是什么意思，你是希望看到中间的六个瓷砖在那个时候出现，还是它们总是在那里？如果它们出现了，那会是动画吗？

为了实现你所拥有的图像，你可能应该在顶层获得一个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>

从那时起，仍然有相当多的东西需要填充，还有一些代码需要编写来填充tiles列表(在左侧和右侧)，处理用户单击项目时的处理，然后在屏幕中间显示ViewPager的内容。您可能希望在那里的每个页面中使用一个GridLayout。

如果您需要在用户单击某个磁贴之前隐藏ViewPager，您可以将可见性设置为隐藏，然后在代码中更改它。

UPDATE现在有更多关于如何移动的信息......

好的，将日期和SlidingDrawer放在最顶层的RelativeLayout中。

在中间部分，您可以使用这个人放在一起的HorizontalListView：How can I make a horizontal ListView in Android?，代码、指令和示例可以在这里找到：http://www.dev-smart.com/archives/34

然后，您需要创建自己的Adapter来填充该列表。您可以将其建立在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的可见性更改为gone，将ViewPager的可见性更改为visible。

如果一次只有一个展开的视图，您可以在Adapter中有一个状态变量来说明它是哪一个，并为列表中的所有视图正确地设置可见性属性。然后，您可以在ListView上调用invalidate来刷新它。

有相当多的代码需要编写来完成这一切，但是如果你保持它的条理性，它应该不会太糟糕……