Question

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

但是当我使用Relative布局并编写以下代码时，我会得到类似的东西。 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/

生成的尺寸400by300

请帮帮我！

Answer 1

可能的布局解决方法，从头开始，应该只显示我的想法而不是testet：在一个父LinearLayout中指定layout_weight =“1”的两个LinearLayout。这会将内部的LinearLayouts分割为相同的大小。在这两个LinearLayouts中，设置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

甚至可以使用片段：

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

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