如何创建附加照片的用户界面

时间:2012-07-23 04:36:37

标签: android android-layout user-interface styles adapter

任何人都可以告诉我这个照片效果叫什么。我想知道如何为这种附加的图像效果创建一个适配器。

@Edited: 这是Android市场的示例照片。我想创建这样的布局。我想应该重写一个GridView适配器。

人像截图


Photo http://i50.tinypic.com/donq4m.png

横向截图


Photo http://oi50.tinypic.com/foqipw.jpg


另一个截图


Photo http://i47.tinypic.com/103yek1.png

我非常抱歉,我的问题不明确。

可能duplicate

7 个答案:

答案 0 :(得分:13)

你试过这个:

<?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

enter image description here

答案 1 :(得分:4)

您按此顺序创建:

LinearLayout(VERTICAL),weightSum为2;

LinearLayout(VERTICAL),权重为1,weightSum为3;

里面将是3个布局,水平线性布局,重量为.70,水平线性布局,重量为.50,imageView,重量为1.80

LinearLayout(VERTICAL),权重为1,权重和为3;

其中将是3个线性布局

2 *(其中2个) - 水平,重量为.50,重量和为2 在这个水平布局内将是两个图像视图,每个权重为1

第三,最后是权重为1.50的图像视图

执行此操作,您可以根据自己的喜好设置正确的加权布局

答案 2 :(得分:3)

您可以创建表格布局,在表格行中,您可以添加col和row span来创建这样的布局。

答案 3 :(得分:3)

这个看起来不像普通的Gridview或listview适配器。您可能必须为其创建自定义控件。例如,在给定示例中,一些应用程序与其他应用程序相比具有更多权重。具有更多重量的那些应占据全宽,而其他将占据宽度的50%或33%(基于景观或肖像)。

因此逻辑创建表格布局并根据权重在适配器上添加更多控件。并且根据权重,您必须相应地创建行或列跨度。

答案 4 :(得分:3)

如果我要复制市场布局,我将使用以下类别:

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

ListView中有一个名为addHeaderView()的方法,您可以使用自己的自定义布局操作列表视图中出现的前几个项目。在这种情况下,列表中的第一个,第四个,第五个和第六个项目将是一个ImageView,其宽度可能与固定高度相匹配。

第2和第3项只是一个水平LinearLayout,其中2个ImageView具有相同的权重,其余的只是具有自定义布局的Listviews。

以上所有内容均指手机中的“人像”视图。再次,对于“横向”视图,您必须手动执行此操作。

诀窍是如何修改BaseAdapter以填写列表视图。在默认列表视图中,一个“位置”指的是列表视图中的一行。在这种情况下,您的自定义列表视图布局包含一行中的两个项目。尝试搞清楚这一点,玩弄你的数据和数组。我相信它可以做到。 =)

答案 5 :(得分:2)

这应该使用GridView来完成。

从外观上看,你有3种尺寸:一种覆盖1个空间,一个覆盖2个,一个覆盖4个空间。这应该不容易。

但是图像如何在堆栈中以及布局如何定位我相信你拥有的最佳选择是GridView。它在实现列和行方面非常灵活,并且在方向更改中提供了一些现成的实现。

你应该制作3种具有4个小View个的项目,另一个具有2个项目,另一个具有一个大View。在每个细胞中可以有上述之一。

根据某些属性,您应该填充GridView。然后你应该试验GridView提供的选项(它有一些属性“auto”根据布局中的宽度和高度堆叠元素)。这就是我能提供的全部因为我没有做过类似的事情。

编辑: 试图实现Android市场界面而不需要搜索一点,只能通过复制粘贴?这不像你想象的那么容易。

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

PS:我的意见是首先尝试搜索,然后再次更新问题。

答案 6 :(得分:2)

我认为市场应用程序是使用ViewPager完成的,每个页面都包含RelativeLayoutLinearLayout。为了制作类似地铁的界面,每页的GridView更合适。

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

Here you will find some links to ViewPager tutorials

Another one here

更新

您甚至可以使用OverScroller在滚动时为其提供弹性效果。