如何创建 Android UI 模仿 Living Social UI？

Question

我对 Android UI 设计还很陌生。我正在尝试模仿以下 Living Social 屏幕截图的 UI 设计：

在这里构建 UI 元素的最佳方式是什么？如何在 XML 中实现？我正在尝试使用 Android Eclipse UI 编辑器来拖放 UI 元素，但似乎我需要对 UI 进行动态编程。解决此类问题的推荐方法是什么？

到目前为止，我有以下内容：

<LinearLayout 
    android:id="@+id/LinearLayout1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin">

    <ScrollView
        android:id="@+id/scrollView1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical" 
            >
            <ImageView
                android:id="@+id/imageViewBackground"
                android:layout_width="fill_parent"
                android:layout_height="match_parent"
                android:layout_gravity="fill"
                android:scaleType="fitXY"
                android:src="@android:drawable/dialog_holo_dark_frame" />
            <View
                android:id="@+id/view1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
            <View
                android:id="@+id/view2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
            <View
                android:id="@+id/view3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>
    </ScrollView>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_gravity="bottom"
        android:backgroundTint="@color/abc_search_url_text_normal"
        android:gravity="bottom|end"
        android:orientation="vertical" >

        <Button
            android:id="@+id/buttonBUY"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="BUY!" />
    </LinearLayout>
</LinearLayout>

问题：

我正在使用父 LinearLayout。在其中，我在顶部有一个 ScrollView，在底部有一个 LinearLayout。底部的 LinearLayout 有一个用于“立即购买”按钮的子按钮。这是正确的父级布局方案吗？
ScrollView 内部是一个 ImageView，它与 ScrollView 的顶部对齐。然后，滚动视图内有 X 个白色框。如何将内部白框视图稍微放在 ImageView 的顶部？我需要以编程方式执行此操作吗？
创建内部白框视图的推荐方法是什么？我是否需要为其中的每一个创建一个单独的 .xml 视图文件？或者您会建议为每个白框使用一个片段吗？或者，我是否需要为每个白框实现自定义视图 class？

谢谢

Answer 1

可能，您需要视差效果和 CardView controls inside linear layout control. In order to add bottom button you can use Relative layout. As for parallax, please, take a look at the following thread : How to do the new PlayStore parallax effect

如何创建 Android UI 模仿 Living Social UI？

How to create Android UI mimicking the Living Social UI?

android

android-layout

android-fragments

android-view