Question

我要设计一个Android应用程序的用户界面，其中我有10个包含图像和文本的垂直图块（图片中的2个大框），点击图块后，它会消失，并被包含6的可滚动gridview取代同一页面上的元素（如下图中央所示）。（以动画显示）

以下是我试图解释的视图的快照。此图像仅显示10个瓷砖中的2个和单击时出现的网格视图。每个白色框都包含图像和文本。我不擅长设计，所以对此实施的详细解答将不胜感激。谢谢。 enter image description here

Answer 1

你的问题中没有太多细节，即使图片并没有澄清所有内容，但这里有一点刺痛。

当你说瓷砖时，不确定你的意思＆＃34;展开＆＃34;此外，你是否期望看到中间的六块瓷砖在那时出现或者它们总是在那里？如果他们出现，那会是动画吗？

为了获得你所拥有的图片，你应该在顶层获得RelativeLayout。这仅仅是因为您的右上方有TextView，而底部有SlidingDrawer的句柄。您可以使用壁纸主题设置RelativeLayout的背景，如果这是静态的话，我想顶部的蓝色条。

然后在这个顶级的RelativeLayout中，你有一个水平方向的LinearLayout。这个将包含三个＆＃34; windows＆＃34;在你的照片上。

在那个水平的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：How can I make a horizontal ListView in Android?，代码和说明以及示例可在此处找到：http://www.dev-smart.com/archives/34

然后，您需要创建自己的适配器来填充该List。您可以将其基于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的可见性更改为可见。

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

要完成所有这些操作需要编写相当多的代码，但是如果你保持井井有条，它应该不会太糟糕....

使用动画设计复杂的Android UI

1 个答案: