android - 设计带有动画的复杂 Android UI

Question

我必须为 Android 应用程序设计一个 UI，其中有 10 个包含图像和文本的垂直图 block (图中的 2 个大框)，单击一个图 block 时，它会消失并被包含 6 个的可滚动 GridView 取代元素(如下图中心所示)位于同一页面上。 (以动画展示)

这是我试图解释的 View 的快照。该图像仅显示 10 个图 block 中的 2 个以及单击时出现的 GridView 。每个白色框都包含图像和文本。我不擅长设计，所以如果能提供实现这一点的详细答案将不胜感激。谢谢。

Answer 1

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

不确定当您说图 block 进一步“扩展”时是什么意思，您是否希望看到中间的六个图 block 当时出现，或者它们总是在那里？如果它们出现，会被动画化吗？

为了实现您所拥有的图片，您可能应该在顶层获得一个RelativeLayout。 那只是因为您的日期 TextView 位于右上角，而 SlidingDrawer 的句柄位于底部。您可以使用壁纸主题设置相对布局的背景，如果它是静态的，我猜顶部的蓝色条。

然后在这个顶级的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>

从这里开始，仍然有很多东西需要填充，并且需要编写一些代码来填充图 block 列表(左侧和右侧)，在用户单击某个项目时进行处理，然后还显示内容ViewPager 位于屏幕中间。您可能希望在每个页面中使用 GridLayout。

如果您需要隐藏该 ViewPager 直到用户单击某个图 block ，您可以将可见性设置为隐藏并在代码中更改它。

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

好的，所以保留顶层的RelativeLayout，日期和底部的SlidingDrawer。

中间部分可以使用这个人拼凑的Horizo​​ntalListView:How can I make a horizontal ListView in Android? ，代码、说明和示例可以在这里找到:http://www.dev-smart.com/archives/34

然后您需要创建自己的适配器来填充该列表。您可以将其基于 BaseAdapter(该决定更多地取决于图像/信息的存储方式)。

在该适配器的 getView 函数中，可以有一种布局，其中折叠 View 和展开 View 都组合到一个 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>

在列表适配器中，您需要为不同的 View 设置适当的标签，这样当用户单击一张图像时，您就知道单击了哪一张。要展开一个 View ，请将 LinearLayout 的可见性更改为“消失”，并将 ViewPager 的可见性更改为可见。

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

要做这一切需要编写相当多的代码，但如果你保持它的组织性，它应该不会太糟糕......