android 中的 UI 问题

Question

我正在尝试实现以下屏幕：

因此我在XML中尝试了以下代码：

<RelativeLayout
        android:id="@+id/Numberlayout"
        android:layout_width="match_parent"
        android:layout_height="75dp"
        android:layout_marginLeft="5dp"
        android:visibility="visible"
        android:layout_marginRight="5dp"
        android:layout_marginTop="5dp" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:baselineAligned="false"
            android:orientation="horizontal" >

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_margin="1dp"
                android:layout_weight="1"
                android:background="@color/whiteText"
                android:orientation="vertical" >

                <RelativeLayout
                    android:id="@+id/balancelayout"
                    android:layout_width="match_parent"
                    android:layout_height="0dp"
                    android:layout_weight=".50"
                    android:background="@color/layoutcolor_bal_net"
                    android:gravity="center" >

                    <ImageView
                        android:id="@+id/balancerupee"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="3dp"
                        android:background="@drawable/rupees_symbol"
                        android:paddingBottom="5dp"
                        android:paddingTop="5dp"
                        android:visibility="visible" />

                    <TextView
                        android:id="@+id/balanceamount"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_toRightOf="@id/balancerupee"
                        android:paddingLeft="2dp"
                        android:text="@string/numbers"
                        android:textColor="@color/numbertext"
                        android:textSize="14sp"
                        tools:ignore="RtlSymmetry,RtlHardcoded" />

                    <ImageView
                        android:id="@+id/leftarrow"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@drawable/leftarrow"
                        android:layout_alignParentLeft="true"
                        android:visibility="visible" />


                </RelativeLayout>
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_margin="1dp"
                android:layout_weight="1"
                android:background="@color/whiteText"
                android:orientation="vertical" >

                <RelativeLayout
                    android:id="@+id/netlayout"
                    android:layout_width="match_parent"
                    android:layout_height="0dp"
                    android:layout_weight=".50"
                    android:background="@color/layoutcolor_bal_net"
                    android:gravity="center" >

                    <ImageView
                        android:id="@+id/netrupee"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="3dp"
                        android:background="@drawable/rupees_symbol"
                        android:paddingBottom="5dp"
                        android:paddingTop="5dp"
                        android:visibility="visible" />

                    <TextView
                        android:id="@+id/netamount"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_toRightOf="@id/netrupee"
                        android:paddingLeft="2dp"
                        android:text="@string/numbers"
                        android:textColor="@color/numbertext"
                        android:textSize="14sp"
                        tools:ignore="RtlSymmetry" />

                    <TextView
                        android:id="@+id/nettext"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_below="@id/netamount"
                        android:paddingLeft="12dp"
                        android:text="@string/networth"
                        android:textSize="14sp"
                        tools:ignore="RtlSymmetry" />

                    <ImageView
                        android:id="@+id/rightarrow"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@drawable/rightarrow"
                        android:layout_alignParentRight="true"
                        android:visibility="visible" />

                </RelativeLayout>
            </LinearLayout>
        </LinearLayout>
        </RelativeLayout>

箭头没有正确地左右放置，数字也移动了。我正在努力解决这个问题。

有人可以帮我解决这个问题吗？

谢谢！

Answer 1

将 drawableLeft 与 textview 结合使用来附加图像： http://developer.android.com/reference/android/widget/TextView.html#attr_android:drawableLeft`

Answer 2

你可以从这样的事情开始：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="wrap_content">

  <ImageView
    android:id="@+id/left_arrow"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/leftarrow" />

  <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:drawableLeft="@drawable/rupees"
    android:layout_toRightOf="@id/left_arrow"
    tools:text="123456" />

  <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:drawableLeft="@drawable/rupees"
    android:layout_toLeftOf="@+id/right_arrow"
    tools:text="123456" />

  <ImageView
    android:id="@id/right_arrow"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/rightarrow"
    android:layout_alignParentRight="true"/>

</RelativeLayout>

一般来说，避免嵌套布局。除了性能影响，它真的很难阅读和重构。

android 中的 UI 问题

Issue with UI in android

android

android-linearlayout

android-relativelayout