2

我想为平板电脑制作 UI，如图所示。此 UI 将根据项目数重复。并且每个块（即小块或大块）的位置可以动态变化。请给我建议我应该使用哪种视图，布局。任何建议将不胜感激...在此先感谢。

在此处输入图像描述

4

6 回答 6

2

如果您的目标是 API v14 或更高版本，您可以使用 GridLayout：http: //developer.android.com/reference/android/widget/GridLayout.html

于 2013-09-05T14:12:26.467 回答
1

使用添加每个类别的 LinearLayout 并为每个类别使用 RelativeLayout 是一个不错的选择。您应该根据其包含的产品数量自定义相关布局的 onlayout 方法。

您也可以使用片段、列表视图。

图像更改后编辑：您可以扩展 relativelayout 并覆盖 onLayout 方法。这将比嵌套布局执行得更好，我想不出还有什么可以让您轻松摆脱的。

编辑详细说明：

这是我使用的示例类。基本上在 onlayout 方法中，您做出每个决定并通过调用每个子视图的布局方法并传递矩形的参数来告诉所有子视图将它们放置在一个矩形中。看看我如何使用子视图的布局方法来指示矩形。

public class KnockPile extends  HandPile
{

private static final String TAG = "KnockPile";

static final int EXPECTED_CARDS = 3;

int mColoring; // this is the coloring group this pile is associated with.
// every card added to this pile should be set with this color.


public KnockPile(Context context, GameActivity ref , int ingroup)
{
    super(context );
    mColoring = ingroup;
    mActivityReference = ref;

    setWillNotDraw(false);
    setClickable(true);
    setOnDragListener(this);
    mCardBorders = new ArrayList<Integer>(); 

    final LayoutTransition transition  = new LayoutTransition();
    setLayoutTransition(transition );
    //transition .enableTransitionType(LayoutTransition.CHANGING);
    //transition .disableTransitionType(LayoutTransition.CHANGE_APPEARING);

}



/**
 * this overrides the card ordering of handpile. This method lays the cards in a linear fashion.
 * Possibly overlapping fashion. This is not dependent to orientation of screen.
 *
 * @see com.kavhe.kondi.gin.layouts.HandPile#onLayout(boolean, int, int, int, int)
 */
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {   


    int availablewidth = getMeasuredWidth() ;//this is the maximum availlable  
    int distance = availablewidth /Math.max(getChildCount(), 1) ; // the horizontal distance between two cards
    Log.v(TAG,"available width onlayout is :" + availablewidth +"and distance is  " + distance);
    int cardheight = getHeight();
    int cardwidth  = cardheight*3/4; 
    if(distance > cardwidth) distance = cardwidth;
    mCardBorders.clear();
    for(int i = 0 ; i < mCards.size() ; i++)
    {     
        //save this border into a global variable so that it can be used when one of the cards dragged
        //by user to show that user can insert to that location
        mCardBorders.add( i*distance);
        mCards.get(i).layout(  i*distance ,  0 , cardwidth+ i*distance ,   cardheight); 
    }

}
}

这是来自文档

protected void onLayout (boolean changed, int left, int top, int right, int bottom)

当此视图应为其每个子级分配大小和位置时，从布局中调用。带有孩子的派生类应该覆盖这个方法并在他们的每个孩子上调用布局。

参数

已更改这是此视图的新大小或位置

left 相对于父级的左侧位置

top 相对于父级的顶部位置

right 相对于父级的右位置

底部底部位置，相对于父级

于 2013-09-05T14:36:10.370 回答
1

也可以通过具有行跨度属性的表格布局

于 2013-10-08T14:54:54.047 回答
0

要为平板电脑设计此类 UI，您应该使用Fragments并在 Fragment 内添加/删除您各自的布局。如果您正在使用相对布局，则需要正确使用 RelativeLayout.LayoutParams。

如果您正在寻找使用 Fragments 的最佳示例，请尝试使用Google IO 应用程序源。它使用各种动态 UI 功能。

希望能帮助到你 ！

于 2013-09-05T13:58:45.267 回答
0

在 StaggeredGridView 的帮助下，我满足了我的要求。感谢大家的帮助和支持。

于 2013-10-01T09:11:56.993 回答
0

“产品”是否总是能很好地贴合您绘制的线条？如果是这样，您可以使用相互嵌套的 LinearLayouts（垂直和水平）。

于 2013-09-05T13:53:52.607 回答