【问题标题】:unable to get the following UI in my android app无法在我的 android 应用程序中获得以下 UI
【发布时间】:2012-09-17 15:14:37
【问题描述】:

在我的应用程序中,我有一个列表视图,其中我需要放置以下 UI

如上图所示,我可以在垂直方向的线性布局中获得圆形背景。所以我按顺序放置了以下内容 1. 文本视图 2. FrameLayout 中的ImageView 以便在FrameLayout 中的ImageView 上放置一个TextView 3.又是一个TextView

Now my problem is 
1. i want to place the image view of the calendar icon at the top right corner, so that a part of the icon gets placed over the image view 
2. The image inside the Frame layouts imageview is received from an url without round corners. I want to show round corners over the image

以下是我的布局内容

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" 
        android:background="@drawable/img_bg"
        android:layout_margin="10dp">

        <TextView
            android:id="@+id/event_list_header"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="@string/app_name"
            android:textColor="@color/title"
            android:textAppearance="?android:attr/textAppearanceLarge" 
            android:layout_marginTop="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"/>

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical" 
            android:layout_margin="6dp">

            <FrameLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content">

                <ImageView
                    android:contentDescription="@string/app_name"
                    android:id="@+id/event_list_image"
                    android:layout_width="fill_parent"
                    android:layout_height="280dp"/>

                <RelativeLayout
                    android:layout_width="fill_parent"
                    android:layout_height="match_parent" 
                    android:background="@drawable/offer_title_bg"
                    android:layout_gravity="bottom">

                    <TextView
                        android:id="@+id/event_overlay_text"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentLeft="true"
                        android:layout_centerVertical="true"
                        android:textColor="#FFFFFF"
                        android:layout_marginLeft="10dp"
                        android:textAppearance="?android:attr/textAppearanceMedium" />
                </RelativeLayout>
            </FrameLayout>
        </LinearLayout>

        <TextView
            android:id="@+id/event_timing_text"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="@string/app_name"
            android:textColor="@color/black"
            android:textAppearance="?android:attr/textAppearanceLarge" 
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"/>

    </LinearLayout>

</RelativeLayout>

如何使这个 UI 成为可能......

【问题讨论】:

  • 把你的代码我的朋友我会编辑并发送给你
  • Google 研究员 - 我已经添加了我的代码......

标签: android user-interface


【解决方案1】:

使用RelativeLayout和alignTop:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/event_list_image"
        android:layout_width="110dip"
        android:layout_height="110dip"
        android:layout_margin="1dip"
        android:src="@drawable/main0x" />

    <TextView
        android:id="@+id/event_overlay_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/event_list_image"
        android:layout_marginLeft="100dp"
        android:layout_marginTop="1dp"/>


</RelativeLayout>

【讨论】:

  • 您应该更改以下属性:android:layout_belowandroid:layout_aboveandroid:layout_alignTopandroid:layout_marginTop 和 ...
  • 我更新了我的答案。但我无法远程编辑您的布局。将文本和图像都放在一个 RelativeLayout 并更改我提到的设置
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-11-18
  • 1970-01-01
  • 2019-03-19
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多