如何创建类似附图的用户界面

Question

请问这种照片效果叫什么？我想知道如何为这个附加的图像效果创建一个适配器。

@编辑： 这是Android市场的一张样例照片。我想要创建一个类似的布局。我认为应该通过重写GridView适配器来实现。

竖屏截图

---

风景截图

---

---

另一张截图

---

非常抱歉我的问题没有让你们理解。

可能是重复的问题。

- san

---

从截图中无法理解您想要什么。 - Jin35

@Jin35，非常抱歉我的问题不够清晰。希望我的编辑能更加明确。 - san

Answer 1

你尝试过这个吗：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.54" >
        <Button
            android:id="@+id/Button01"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1.00"
            android:text="Button" />    
        <Button
            android:id="@+id/Button02"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1.00"
            android:text="Button" />    
    </LinearLayout>
    <Button
        android:id="@+id/button3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button" />  
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="99dp" > 
        <Button
            android:id="@+id/button1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="Button" />  
        <Button
            android:id="@+id/button2"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="Button" />    
    </LinearLayout>   
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >    
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical" >   
            <Button
                android:id="@+id/button4"
                android:layout_width="match_parent"
                android:layout_height="152dp"
                android:text="Button" />    
            <Button
                android:id="@+id/button5"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Button" />    
        </LinearLayout>    
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical" >
            <Button
                android:id="@+id/button6"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Button" />
            <Button
                android:id="@+id/button7"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="Button" />
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

看看这个帖子：Heterogeneous GridLayout

- radzio

---

是的，基本上就是使用视图翻页器。 - leenephi

我喜欢你的回答。谢谢分享。这绝对有帮助。干杯！悬赏金给你。 - san

Answer 2

按照以下顺序创建：

权重总和为2的LinearLayout（VERTICAL）；

权重为1，权重总和为3的LinearLayout（VERTICAL）；

其中包含3个布局，水平线性布局的权重为0.70，水平线性布局的权重为0.50，imageView的权重为1.80

权重为1，权重总和为3的LinearLayout（VERTICAL）；

其中包含3个线性布局

2 *（其中2个）-水平权重为0.50，权重总和为2 在此水平布局中将有两个图像视图，每个权重为1

最后是一个权重为1.50的图像视图

按照此方式创建，您将得到符合您喜好的正确加权布局

- eoghanm

Answer 3

如果我要复制市场布局，我会使用以下类：

如果我要复制市场布局，我会使用以下类：

 1. Obviously ViewPager for horizontal swiping ability.
 2. A heavily customized ListView.

在ListView中有一个名为addHeaderView()的方法，你可以使用它来处理自定义布局中出现在listview中的前几个项目。在这种情况下，列表中的第一项、第四项、第五项和第六项将是一个宽度与父控件匹配、可能具有固定高度的ImageView。

第二和第三项将仅是一个水平LinearLayout，其中包含两个等权重的ImageView，其余的则只是带有自定义布局的ListViews。

所有这些都是指手机上的“竖屏”视图。对于“横屏”视图，您还需要手动完成。

关键在于如何修改您的BaseAdapter以填充您的ListView。在默认的listviews中，“position”指的是列表视图中的一行。在这种情况下，您的自定义listview布局由一行中的两个项目组成。尝试弄清楚这一点，玩弄一下您的数据和数组。我相信它是可以做到的。=)

- Stark

Answer 4

您可以创建一个表格布局，在表格行中，您可以添加列和行跨度来创建这样的布局。

- jeet

---

我澄清了我的问题。请您查看并更新我。 - san

Answer 5

这个控件看起来不像是普通的Gridview或listview适配器。你可能需要为它创建一个自定义控件。例如，在给定的示例中，某些应用程序比其他应用程序更重要。具有更高权重的应用程序应占据全部宽度，而其他应用程序将占据宽度的50％或33％（根据横向或纵向）。因此，逻辑是创建一个表格布局，并基于权重在适配器上添加更多控件。根据权重，您必须相应地创建行或列跨度。

- user1553388

Answer 6

我认为市场应用程序是使用ViewPager完成的，每个页面包含一个RelativeLayout或LinearLayout。要制作类似于地铁的界面，在每个页面中使用GridView更合适。

    page 1             page 2         page 3
________________________________________________
|              |                 |              | 
|              |                 |              | 
|    GridView  |     GridView    |   GridView   | 
|              |                 |              | 
|              |                 |              | 
|              |                 |              | 
|              |                 |              |
|              |                 |              |
-------------------------------------------------

这里有一些ViewPager教程的链接

这里还有一个

更新：

你甚至可以使用OverScroller在滚动时使其具有弹性效果。

- Ron

Answer 7

这应该使用 GridView 实现。

从外观上看，您有三个尺寸：一个覆盖1个空间，一个覆盖2个空间，一个覆盖4个空间。这不应该很容易。

但是由于图像是堆叠的，并且布局的方向，我认为您最好的选择是使用 GridView。它在实现列和行方面非常灵活，并且在方向更改时提供了一些准备好的实现。

您应该制作3种类型的项目，其中包含4个小 View 的一个，另一个包含2个项目，另一个包含一个大的 View。每个单元格中可以有其中之一。

根据某些属性，您应该填充 GridView。然后，您应该尝试使用 GridView 提供的选项（它具有一些属性，可以根据布局中的宽度和高度“自动”堆叠元素）。这就是我能提供的全部，因为我没有做过类似的事情。

编辑： 只通过复制粘贴而没有稍微搜索一下就试图实现 Android 市场界面？这绝不会像您想象的那么容易。

无论如何，如果我是您，我仍然会从我之前提到的实现开始。虽然我不能提供任何代码，因为我没有做过类似的事情，在您的情况下，具有所有已经提供的实现的 GridView 将是一个很好的帮助。

附言：我的建议是先尝试搜索一下，然后再更新问题。

- 10s

---

我让我的问题更清晰了。请求您查看并更新我。 - san