android - 使用动画设计复杂的 android UI

Question

我必须为 Android 应用程序设计一个 UI，其中我有 10 个包含图像和文本的垂直图块（图片中的 2 个大框），并且在单击图块时，它会消失并被包含 6 个元素的可滚动网格视图所取代（如图所示在下图的中心）在同一页上。（由动画显示）

这是我试图解释的视图的快照。此图像仅显示 10 个图块中的 2 个，以及单击时出现的 gridview 每个白框都包含图像和文本。我不擅长设计，因此将不胜感激实现这一点的详细答案。谢谢。

Answer 1

您的问题没有太多细节，即使图片也没有说明一切，但这里是一个刺。

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

要获得您所拥有的图片，您可能应该RelativeLayout在顶层获得 a。那只是因为你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。

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

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

在该 Adapter 的 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 的可见性更改为可见。

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

有相当多的代码要编写来完成所有这些，但如果你保持它的组织，它应该不会太糟糕......