转换多个嵌套LineairLayouts到一个单一的RelativeLayout [英] Convert multiple nested LineairLayouts to a single RelativeLayout

查看：172
本文介绍了转换多个嵌套LineairLayouts到一个单一的RelativeLayout的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

首先，我一般在UI pretty坏的，这就是为什么我需要一些帮助。现在，我有以下几点：

First of all, I'm pretty bad at UI in general, that's why I need some help. Right now I have the following:

解释用油漆图片：

Explained with a Paint picture:

实际截图：

Actual Screenshot of what I currently have:

随着code，可以在这个岗位的底部。这是通过几个嵌套LineairLayouts和重量进行。

With the code that can be found at the bottom of this post. This is done with a few nested LineairLayouts and weights.

我现在想的是以下几点：

What I want now is the following:


  1. 的ImageButton（宽度和高度是已知的/图像被设置在XML）

  2. TextView的
    3. （高度是已知的，宽度应1和3之间填充）
  3. 的TextView（高度是已知的，宽度（文本）还不知道）

  4. 的EditText（高度是已知的，宽度（文本）还不知道）

  5. AutoCompleteTextView
    6. （高度是已知的，宽度应4和9之间填充）
  6. TextView的（宽度和高度已知/文本设置XML格式）

  7. 微调（高度是已知的，宽度应和6之间填充8）

  8. 的ImageButton（宽度和高度已知/图像设置XML格式）的这是一个我想现在补充。

  9. 空间（宽度和高度都决定IN- $ C $三来一补的空白）

  1. ImageButton (width and height are known / Image is set in xml)
  2. TextView (height is known, width should fill between 1 and 3)
  3. TextView (height is known, width (text) is not known yet)
  4. EditText (height is known, width (text) is not known yet)
  5. AutoCompleteTextView (height is known, width should fill between 4 and 9)
  6. TextView (width and height are known / Text is set in xml)
  7. Spinner (height is known, width should fill between 6 and 8)
  8. ImageButton (width and height are known / Image is set in xml) This is the one I want to add now.
  9. Space (width and height are both determined in-code to fill the empty spaces)

我知道我可能能够想出如何与另一个嵌套LineairLayout和嵌套重量添加此ImageButton的，但因为我的应用程序的性能是不是已经很大，目前我正在试图解决很多性能问题，我认为这是最好的这个list_item.xml转换为单一RelativeLayout的。

I know I'm probably able to figure out how to add this ImageButton with another nested LineairLayout and nested weight, but since the performance of my app isn't that great already and I'm currently trying to resolve a lot of performance issues, I think it's best to convert this list_item.xml to a single RelativeLayout.

那么，我该怎么做呢？我只是简单的吮吸UI布局，所以我会AP preciate所有帮助我能。如何与第二画图图像的结果创造一个RelativeLayout的？

目前的code：

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE xml>
<!-- The DOCTYPE above is added to get rid of the following warning:
     "No grammar constraints (DTD or XML schema) detected for the document." -->

<!-- The View for a single CheckListItem -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/item_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <!-- The TextViews -->
    <LinearLayout
        android:id="@+id/ll1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="horizontal" >

        <ImageView
            android:id="@+id/image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/default_margin"
            android:adjustViewBounds="true"
            android:background="@layout/transparent_background"
            android:contentDescription="@string/checkbox_content_description"
            android:src="@drawable/checkbox_unchecked" />

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginRight="@dimen/default_margin"
            android:layout_marginTop="@dimen/default_margin"
            android:layout_weight="1"
            android:gravity="center_vertical" >

            <TextView
                android:id="@+id/tv_product_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:singleLine="true" />

        </LinearLayout>

        <TextView
            android:id="@+id/tv_price"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="@dimen/default_margin"
            android:layout_marginTop="@dimen/default_margin" />

    </LinearLayout>

    <!-- The EditTexts -->
    <LinearLayout
        android:id="@+id/ll2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/ll1"
        android:gravity="center"
        android:orientation="horizontal"
        android:visibility="visible" >

        <Space
            android:id="@+id/filler_space_image"
            android:layout_width="1dp"
            android:layout_height="1dp"
            android:layout_marginBottom="@dimen/default_margin"
            android:layout_marginLeft="@dimen/default_margin"
            android:layout_marginRight="@dimen/default_margin" />

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="@dimen/default_margin"
            android:layout_marginRight="@dimen/default_margin"
            android:orientation="vertical"
            android:padding="0dp">

            <EditText
                android:id="@+id/et_result_amount"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:inputType="number" />

            <TextView
                android:id="@+id/tv_tags"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/tags"
                android:gravity="center" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginBottom="@dimen/default_margin"
            android:layout_marginRight="@dimen/default_margin"
            android:layout_weight="1"
            android:gravity="center_vertical"
            android:padding="0dp"
            android:orientation="vertical">

            <AutoCompleteTextView
                android:id="@+id/actv_result_name"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:ellipsize="end"
                android:inputType="text"
                android:singleLine="true" />

            <Spinner
                android:id="@+id/sp_tags"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

            <!--<ImageButton
                android:id="@+id/btn_tags"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:src="@android:drawable/ic_menu_manage"
                android:contentDescription="@string/button_tags_content_description"
                android:background="@layout/transparent_background" />-->

        </LinearLayout>

        <Space
            android:id="@+id/filler_space_price"
            android:layout_width="1dp"
            android:layout_height="1dp"
            android:layout_marginBottom="@dimen/default_margin"
            android:layout_marginRight="@dimen/default_margin" />

    </LinearLayout>

</RelativeLayout>

编辑1：

EDIT 1:

我试过 @AlexBalo建议后它接近的工作。它只是有与 Android的麻烦：layout_leftOf =@ ID / left_ll

After I've tried @AlexBalo suggestion it's close to working. It's only having trouble with the android:layout_leftOf="@id/left_ll".

PS：我有我的项目两种不同的状态：一个未经检查/绿色复/红叉，这只能说明视图1，2和3。还有一橙黄色检查，这就好比提供的图片

PS: I have two different states for my Item: One unchecked/green check/red cross, which only shows the Views 1, 2 and 3. And one orange-yellow check, which is like the pictures provided.

下面是AlexBalo的变化的结果，到目前为止：

Here is the result of AlexBalo's changes so far:

国家选中/绿色复/红十字会：

State unchecked / green check / red cross:

国家橙黄色检查：

State orange-yellow check:

通过以​​下code：

With the following code:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE xml>
<!-- The DOCTYPE above is added to get rid of the following warning:
     "No grammar constraints (DTD or XML schema) detected for the document." -->

<!-- The View for a single CheckListItem -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/item_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <LinearLayout
        android:id="@+id/left_ll"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:adjustViewBounds="true"
            android:background="@layout/transparent_background"
            android:contentDescription="@string/checkbox_content_description"
            android:src="@drawable/checkbox_unchecked"
            android:layout_marginTop="@dimen/default_margin"
            android:layout_marginLeft="@dimen/default_margin"
            android:layout_marginBottom="@dimen/default_margin" />

        <Space
            android:id="@+id/filler_space_image"
            android:layout_width="1dp"
            android:layout_height="1dp"
            android:layout_marginLeft="@dimen/default_margin"
            android:layout_marginBottom="@dimen/default_margin" />

    </LinearLayout>

    <TextView
        android:id="@+id/tv_product_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/left_ll"
        android:layout_toLeftOf="@+id/right_ll"
        android:ellipsize="end"
        android:singleLine="true"
        android:layout_marginTop="@dimen/default_margin"
        android:layout_marginLeft="@dimen/default_margin"
        android:layout_marginBottom="@dimen/default_margin" />

    <EditText
        android:id="@+id/et_result_amount"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/tv_product_name"
        android:layout_toRightOf="@id/left_ll"
        android:inputType="number"
        android:layout_marginLeft="@dimen/default_margin"
        android:layout_marginBottom="@dimen/default_margin" />

    <AutoCompleteTextView
        android:id="@+id/actv_result_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@id/right_ll"
        android:layout_toRightOf="@id/et_result_amount"
        android:layout_below="@+id/tv_product_name"
        android:ellipsize="end"
        android:inputType="text"
        android:singleLine="true" />

    <TextView
        android:id="@+id/tv_tags"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/et_result_amount"
        android:layout_toRightOf="@id/left_ll"
        android:text="@string/tags"
        android:gravity="center"
        android:layout_marginLeft="@dimen/default_margin"
        android:layout_marginBottom="@dimen/default_margin" />

    <Spinner
        android:id="@+id/sp_tags"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/actv_result_name"
        android:layout_toRightOf="@id/tv_tags"
        android:layout_toLeftOf="@id/right_ll"
        android:layout_marginLeft="@dimen/default_margin"
        android:layout_marginBottom="@dimen/default_margin" />

    <LinearLayout
        android:id="@id/right_ll"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:orientation="vertical">

        <TextView
            android:id="@+id/tv_price"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/default_margin" />

        <Space
            android:id="@+id/filler_space_price"
            android:layout_width="1dp"
            android:layout_height="1dp"
            android:layout_marginLeft="@dimen/default_margin"
            android:layout_marginBottom="@dimen/default_margin"
            android:layout_marginRight="@dimen/default_margin" />

        <ImageButton
            android:id="@+id/btn_tags"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:src="@android:drawable/ic_menu_manage"
            android:contentDescription="@string/button_tags_content_description"
            android:background="@layout/transparent_background"
            android:layout_marginLeft="@dimen/default_margin"
            android:layout_marginBottom="@dimen/default_margin"
            android:layout_marginRight="@dimen/default_margin" />

    </LinearLayout>

</RelativeLayout>

我也有一些问题getView被称为很多次，而不是只在一次创作，但是这是后话，<一个href=\"http://stackoverflow.com/questions/24904484/android-listview-called-too-many-times-or-changes-order-how-to-$p$pvent-both/24905156#24905156\">another问题。

推荐答案

这是你期望我的想法。尝试布局和tweek它适合你的需要：

This is what you are expecting I think. Try the layout and tweek it to suite your needs:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <!-- Left side -->

    <LinearLayout
        android:id="@+id/leftContainer"
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <ImageView
            android:id="@+id/image1"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="@android:color/white" />

        <View
            android:id="@+id/space9left"
            android:layout_width="50dp"
            android:layout_height="wrap_content"
            android:layout_below="@+id/image1" />
    </LinearLayout>

    <TextView
        android:id="@+id/textview2"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:layout_toLeftOf="@+id/rightContainer"
        android:layout_toRightOf="@+id/leftContainer"
        android:text="Textview2" />

    <EditText
        android:id="@+id/edittext4"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:layout_below="@+id/textview2"
        android:layout_toRightOf="@+id/leftContainer"
        android:text="Edittext4" />

    <TextView
        android:id="@+id/autocompleteTextview5"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:layout_toLeftOf="@+id/rightContainer"
        android:layout_toRightOf="@+id/edittext4"
        android:layout_below="@+id/textview2"
        android:text="autocompleteTextview5" />

    <TextView
        android:id="@+id/textview6"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:layout_below="@+id/edittext4"
        android:layout_toRightOf="@+id/leftContainer"
        android:text="Textview6" />

    <TextView
        android:id="@+id/spinner7"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:layout_below="@+id/autocompleteTextview5"
        android:layout_toRightOf="@+id/textview6"
        android:layout_toLeftOf="@+id/rightContainer"
        android:text="Spinner7" />

    <!-- Right side -->
    <LinearLayout
        android:id="@+id/rightContainer"
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/textview3"
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:text="Textview3" />

        <View
            android:id="@+id/space9right"
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:layout_below="@+id/image1" />

        <ImageView
            android:id="@+id/image8"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="@android:color/white" />
    </LinearLayout>

</RelativeLayout>

希望它帮助。

这篇关于转换多个嵌套LineairLayouts到一个单一的RelativeLayout的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
移动开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆