-1

我想创建以下布局 - http://postimg.org/image/56e9y0hrj/

但是当我使用相对布局并编写以下代码时，我会得到这样的结果。 http://postimg.org/image/4gm0r15k1/

这是 mt xml 文件 -

<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="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:background="#5c575c"
tools:context=".MainActivity" >

<TextView
    android:id="@+id/textView1"
    android:layout_marginTop="2dip"
    android:layout_marginBottom="2dip"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:text="Top Stories"
    android:background="#ccc6ba"
    style="@style/format"
    android:textAppearance="?android:attr/textAppearanceLarge" />

<ImageView
    android:id="@+id/imageView1"
    android:layout_width="120dip"
    android:layout_height="160dip"
    android:layout_alignLeft="@+id/textView1"
    android:layout_alignTop="@+id/textView1"
    android:src="@drawable/one" />

<ImageView
    android:id="@+id/imageView2"
    android:layout_width="120dip"
    android:layout_height="160dip"
    android:layout_alignParentRight="true"
    android:layout_alignTop="@+id/imageView1"
    android:src="@drawable/two" />

<TextView
    android:id="@+id/textView2"
    style="@style/format_text"
    android:background="#ccc6ba"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@+id/imageView1"
    android:layout_alignLeft="@+id/imageView1"
    android:text="A sample widget for multiple lines"
    android:layout_alignRight="@id/imageView1"
    android:textAppearance="?android:attr/textAppearanceSmall" />

<TextView
    android:id="@+id/textView3"
    style="@style/format_text"
    android:background="#ccc6ba"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBaseline="@+id/textView2"
    android:layout_alignBottom="@+id/textView2"
    android:layout_alignLeft="@+id/imageView2"
    android:text="A sample widget for multiple lines"
    android:textAppearance="?android:attr/textAppearanceSmall" />

<TextView
    android:id="@+id/textView4"
    android:layout_marginTop="10dip"
    android:layout_marginBottom="2dip"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_below="@id/textView2"
    android:text="World"
    android:background="#ccc6ba"
    style="@style/format"
    android:textAppearance="?android:attr/textAppearanceLarge" />
    <ImageView
    android:id="@+id/imageView3"
    android:layout_width="120dip"
    android:layout_height="160dip"
    android:layout_alignLeft="@+id/textView4"
    android:layout_alignTop="@+id/textView4"
    android:src="@drawable/three" />

<ImageView
    android:id="@+id/imageView4"
    android:layout_width="120dip"
    android:layout_height="160dip"
    android:layout_alignParentRight="true"
    android:layout_alignTop="@+id/imageView3"
    android:src="@drawable/four" />

<TextView
    android:id="@+id/textView5"
    style="@style/format_text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@+id/imageView3"
    android:layout_alignLeft="@+id/imageView3"
    android:layout_alignRight="@+id/imageView3"
    android:background="#ccc6ba"
    android:text="A sample widget for multiple lines"
    android:textAppearance="?android:attr/textAppearanceSmall" />

<TextView
    android:id="@+id/textView6"
    style="@style/format_text"
    android:background="#ccc6ba"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBaseline="@+id/textView5"
    android:layout_alignBottom="@+id/textView5"
    android:layout_alignLeft="@+id/imageView4"
    android:text="A sample widget for multiple lines"
    android:textAppearance="?android:attr/textAppearanceSmall" />

    <TextView
    android:id="@+id/textView7"
    android:layout_marginTop="10dip"
    android:layout_marginBottom="2dip"
    style="@style/format"
    android:background="#ccc6ba"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/imageView3"
    android:layout_below="@+id/imageView3"
    android:text="Cricket"
    android:textAppearance="?android:attr/textAppearanceLarge" />

</RelativeLayout>

我已经浏览了http://android-developers.blogspot.in/2009/02/android-layout-tricks-1.html和http://www.mkyong.com/android/android-relativelayout-example/但可以找不到解决方案。我使用的图像是由http://dummyimage.com/生成的 400×300 尺寸

请帮帮我！

4

1 回答 1

0

可能的布局解决方法，只是从头开始，应该只显示我的想法，而不是 testet：在一个父 LinearLayout 中指定 layout_weight="1" 的两个 LinearLayouts。这会将内部的两个 LinearLayouts 分割为相同的大小。在这两个 LinearLayout 中，设置 imageView 和 textView。而且，在这里你必须为多屏幕使用做不同的 layout.xml。 

<LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:orientation="horizontal">
   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:orientation="vertical"
       android:layout_weight="1">
   <ImageView
       android:id="@+id/imageView1"
       android:layout_width="match_parent"
       android:layout_height="160dp"
       android:scaleType="center"
       android:src="@drawable/one"
       />
   <TextView
       android:id="@+id/textView2"
       style="@style/format_text"
       android:background="#ccc6ba"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"    
       android:text="A sample widget for multiple lines"/>
   </LinearLayout>
   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:orientation="vertical"
       android:layout_weight="1">
   <ImageView
       android:id="@+id/imageView2"
       android:layout_width="match_parent"
       android:layout_height="160dp"
       android:scaleType="center"
       android:src="@drawable/two"
       />
   <TextView
       android:id="@+id/textView3"
       style="@style/format_text"
       android:background="#ccc6ba"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"    
       android:text="A sample widget for multiple lines""/>
   </LinearLayout>
 </LinearLayout>

然后，您在项目的 res-folder 中定义了一些新的布局文件夹。您需要不同尺寸的文件夹。在这些文件夹中，您必须定义一个布局文件，其中图像视图具有不同的高度以匹配相关的屏幕尺寸。但这超出了框架，因此您必须了解一些有关使用多种屏幕尺寸的知识：

http://developer.android.com/guide/practices/screens_support.html

甚至可以使用 Fragments：

http://developer.android.com/guide/components/fragments.html

http://www.vogella.com/articles/AndroidFragments/article.html

编辑

您的 textvies 的这种行为是因为屏幕尺寸不同。这就是我所说的，为了让一切看起来都很好，你必须做的不仅仅是一种布局。以下是一些示例，一种布局在不同屏幕上的外观：

HTC Desire S 3.7 英寸

在此处输入图像描述

imageViews 和 TextViews 填充了整个宽度，因此 textViews 与 imageViews 的宽度完全一样。默认情况下，如果文本太长，textView 会自动换行，但这可能取决于设备。通常定义 maxLines，这将导致 textView 内的文本换行。但是如果文本比宽度短，它不会换行。

5.1英寸设备

在此处输入图像描述

这里的文本比宽度短，所以它不会换行。您可以通过将固定大小设置为 textView 来解决此问题。

但这只是划伤主题，我不能在这里抱怨整件事。您必须学习如何处理不同的布局。您必须为不同的布局、不同的资源等设置固定大小。

于 2013-05-24T10:24:29.847 回答