要求图形团队设计Android应用程序UI时的最佳实践

我不确定这在Android中是否可行，Android在各种设备上支持多种形状因素。这是我们通常面临的最痛苦的情景之一

场景：设计团队使用所有UI小部件为应用程序创建UI图形，这些小部件的位置预定义为按钮、edittext等。这是我们需要在应用程序中使用的UI

问题：无法链接UI小部件，例如，在图像上提交的实际位置上有一个提交按钮。有没有办法把它们联系起来？它会对所有的形状因素起作用吗

当前解决方案：使用布局从头开始重新创建整个UI及其所有组件

据我所知，在iOS中，人们可以将小部件放在透明背景的顶部，它可以开箱即用。这是可能的，因为您可以使用x和y的绝对值

--编辑--

我想从上面的描述中不太清楚。 问题不在于使用哪个Android布局，因为这本质上意味着使用LinearLayout或RelativeLayout组件从头开始创建布局

真正的问题是，当我们收到来自除了标准屏幕分辨率（比如480X800）之外对Android或其平台一无所知的设计师的UI设计时，我们应该向他们提出什么建议？比如说，给我一个设计，所有组件都作为层，然后可以从零开始提取并在Android布局中使用。

但这是不赞成的

---

固定布局并不理想。你可以设计它，可能是一幅肖像画和一幅风景画，但屏幕的纵横比仍然不同，所以你要么裁剪一些东西，要么适合屏幕，在一个方向上得到空边。

我建议使用相对论

使用相对布局，您可以使用其@ID“引用”其他组件，并告诉它们位于同一级别（在同一相对视图内）的其他UI组件的上方、下方、toRightOf和toLeftOf，并且您可以将它们与其父视图的顶部、底部、左侧或右侧对齐

例如：

vitune_row.xml，我为列表中的一行创建的布局文件：

android:background=“@drawable/row_selector”>

这将产生一个布局，将保持一致，无论你有什么方向或屏幕大小

---

希望有帮助。

解决这个问题的最好办法是线性布局

---

在这些情况下，我要做的是在垂直线性布局中嵌套水平线性布局，并使用权重调整位置，通过空白文本视图围绕我的实际按钮控件。

我感觉到了。然而，当我们需要理解并可能理解iOS只有这么多屏幕尺寸时。另一方面，Android则不然。在为android设计时，我们不能对像素大小做任何假设，否则生活会变得更加复杂。最好保持大小不可知，使用相对大小。这与设计html页面的过程类似，html页面可以以任何大小显示

取决于您正在开发什么-如果您使用完全定制的设计开发游戏或其他东西，没有特别的指导原则，但是如果您想要使用标准控件，下面是一些有用的链接：

---

好的，现在澄清你的问题，也许我可以分享一些经验

小故事：我把我们的设计师送到Android UI指南（）上，但他要么没有时间阅读，要么根本不在乎！哈哈哈！男人。。。正因为如此，我们在使用第一个应用程序时遇到了困难

的确，在Android网站上有很多关于如何进行设计的信息，但这些信息分散在各个地方（一种查找信息的方法，可能只有我们，开发人员习惯了吧？）

以下是我的建议，基于我从Android网站获得的信息和经验：

制作应用程序的故事板以定义基本外观，其中UI 控制措施将被取消，等等

因为应用程序需要一个好的启动图标，所以首先发送到您的 为Android网站上的图标设计模板 （）

与设计师坐下来（或进行Skype会议），确保 他/她完全了解密度、ldpi、mdpi、hdpi和xhdpi 以及像素和dpi之间的差异。确保他/她 非常了解这一点，以避免将来出现问题。（见 )

让他们使用向量，因为你需要3种不同的方法 每个资源的大小

向他们解释命名约定和文件夹结构。问他们 使用ic_uuu前缀命名文件并在 这是个合适的地方。他们可以使用Photoshop的功能，例如 自动执行任务，将资源以不同大小保存在 找到正确的文件夹，然后向您发送一个包含资源的zip文件

指南建议设计师使用mdpi资源 首先，一个测试，然后得到其他尺寸的测试

请您的设计师创建应用程序的“功能原型”。如果 他/她在Photoshop上工作，有很多方法可以使用Dreamweaver 将设计导出到您可以浏览和访问的实际网站 通过这些活动。您可以使用下载页面下载整套
将对应文件夹中的最新资源作为zip文件

告诉他们Android使用的样式和主题与 CSS，并且您需要十六进制的颜色。索取一份带有 渐变的颜色等（您可以在镀铬或镀铬上使用滴管） CollorZilla在Firefox上从功能原型中提取它们 也是）

在emulator上创建许多不同的设备，使用不同的 屏幕密度和大小

最后，没有“神奇公式”。。。森

    <ImageView android:id="@+id/image_view_venue_row_thumb" 
        android:layout_width="48dp" 
        android:layout_height="48dp" 
        android:scaleType="fitCenter" 
        android:adjustViewBounds="true" 
        android:src="@drawable/ic_default_map"
        android:background="@drawable/image_place_holder" 

        android:layout_alignParentTop="true" 
        android:layout_marginTop="4dip"
        android:layout_marginLeft="4dip"
        android:layout_marginRight="6dip" 

        android:layout_gravity="center_horizontal" />

    <ImageView android:id="@+id/image_view_more_arrow" 
        android:layout_width="18dp" 
        android:layout_height="18dp" 
        android:src="@drawable/ic_view_more" 
        android:layout_gravity="center_vertical" 

        android:layout_centerVertical="true" 
        android:layout_alignParentRight="true" />

    <TextView android:id="@+id/text_view_venue_row_distance" 
        android:text="0.5 Miles" 
        android:layout_width="75dp" 
        android:layout_height="wrap_content" 
        android:minWidth="44dp"
        android:maxWidth="44dp"
        style="@style/VenueRowDistance" 

        android:layout_centerVertical="true" 
        android:layout_toLeftOf="@id/image_view_more_arrow" />

    <TextView android:id="@+id/text_view_venue_row_name" 
        android:singleLine="false" 
        android:focusable="false" 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="left" 
        style="@style/VenueRowName" 
        android:layout_toRightOf="@id/image_view_venue_row_thumb" 
        android:layout_toLeftOf="@id/text_view_venue_row_distance"  
        android:layout_alignParentTop="true" />

    <TextView android:id="@+id/text_view_venue_row_description" 
        android:singleLine="false" 
        android:focusable="false" 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="left" 
        style="@style/VenueRowDescription"
        android:layout_below="@id/text_view_venue_row_name"
        android:layout_toRightOf="@id/image_view_venue_row_thumb" 
        android:layout_toLeftOf="@id/text_view_venue_row_distance" />