Android布局创建两行,其中一列合并为图片

时间:2015-03-23 23:31:56

标签: android android-layout

我试图创建这样的布局。首先,GridLayout是最好的方法吗?我尝试了很多不同的布局,但每个布局都有自己的问题。以下是我试过的代码。任何帮助表示赞赏。提前谢谢。

attemptelayout

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"    
    android:rowCount="2"
    android:columnCount="3">

            <ImageButton
        android:src="@drawable/avatar_male_update"
        android:scaleType="fitCenter"
        android:adjustViewBounds="true"
        android:layout_height="100dp"
        android:layout_width="100dp"
        android:layout_row="0"
        android:layout_column="0"
        android:id="@+id/imageButtonMale" />

                <Button
        android:text="Refresh"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:background="@drawable/mybutton"

        android:layout_row="0"
        android:layout_column="1" 
        android:id="@+id/btnCSRefresh" />

                <Button
        android:text="Change Avatar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/mybutton"
        android:layout_row="0"
        android:layout_column="2"
        android:id="@+id/btnChangeAvatar" />

            <LinearLayout
    android:orientation="vertical"
                android:layout_row="1"
        android:layout_column="0"
    android:minWidth="25px"
    android:minHeight="25px"
    android:layout_width="match_parent"
    android:layout_height="50dp"

    android:id="@+id/linearLayoutButtons">

         <TextView
    android:text="Welcome "
    android:textAppearance="?android:attr/textAppearanceMedium"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"

    android:id="@+id/txtViewHeader"
    android:background="#FE6A00" />
<ListView
    android:minWidth="25px"
    android:minHeight="25px"
    android:layout_width="match_parent"
    android:layout_height="match_parent"

    android:id="@+id/lstViewSummary" />

    </LinearLayout>

2 个答案:

答案 0 :(得分:2)

你真正想要的东西对我来说不是很清楚,因为你在xml中使用了listview,所以plz会更清晰地发布你的问题。

试试这个布局:

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

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:minHeight="100dp"
            android:minWidth="100dp"
            android:src="@drawable/ic_launcher" />

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

            <Button
                android:id="@+id/button1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

            <Button
                android:id="@+id/button2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toRightOf="@id/button1" />

            <Button
                android:id="@+id/button3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/button1" />

            <Button
                android:id="@+id/button4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/button2"
                android:layout_toRightOf="@+id/button3" />
        </RelativeLayout>
    </LinearLayout>

答案 1 :(得分:1)

我应该低估你的问题,因为你的xml与你的照片不符!

但是如果你想要你在你的照片中画出的东西:

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

  <ImageView 
    android:align_parentLeft="true"
    android:center_in_vertical="true"
    android:id="@+id/imageButtonMale"
    android:layout_height="100dp"
    android:layout_width="100dp" />

    <View 
      android:id="@+id/spacer1"
      android:layout_width="match_parent"
      android:layout_height="0dp"
      android:align_toRightOf="@id/imageButtonMale"
      android:center_vertical="true" />

    <Button
      android:text="Refresh"
      android:id="@+id/btnCSRefresh"
      android:layout_above="@id/spacer1"
      android:align_toRightOf="@id/imageButtonMale"
      android:layout_width="100dp"
      android:layout_height="100dp" />

    <Button
      android:text="Change Avatar"
      android:id="@+id/btnChangeAvatar"
      android:layout_above="@id/spacer1"
      android:align_toRightOf="@id/btnCSRefresh"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content" />

    <Button
      android:text="Row2Col1"
      android:id="@+id/button_below_refresh_button"
      android:layout_below="@id/spacer1"
      android:align_toRightOf="@id/imageButtonMale"
      android:layout_width="100dp"
      android:layout_height="100dp" />

    <Button
      android:text="Row2Col2"
      android:id="@+id/button_below_change_avatar_button"
      android:layout_below="@id/spacer1"
      android:align_toRightOf="@id/button_below_in_col1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content" />
</RelativeLayout>

有些观点:

这将环绕,这意味着如果您希望将其扩展为屏幕宽度,则可以将相对布局父宽度更改为match_parent。现在,根据您是否希望按钮的宽度相等,您可以将其宽度更改为match_parent,但是您必须将android:align_parentRight更改为第2列中的两个按钮,然后添加android:align_toLeftOf="@id/button_in_col2"到第一列中的按钮(即第一列中的按钮位于图像视图的右侧和第二列中按钮的右侧;列中的按钮与父级对齐;两个按钮,与父级匹配上述对齐将占用相等的空间)。