设计LinearLayout并将图像设置为它们

时间:2014-07-02 11:15:16

标签: android android-linearlayout

我想创建给定的布局,但我无法做到。我有三个图像,每个图像都附有一个textView。

enter image description here

我不能在这里使用重量,因为第二个和最后一个ImageView之间存在差距。

我的xml

 <LinearLayout
    android:id="@+id/item_com_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/item_layout"
    android:orientation="horizontal" >

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

    <TextView
        android:id="@+id/item_comment"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="22 COMMENTS"
        android:textSize="12sp" />

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

    <TextView
        android:id="@+id/item_tableview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="12"
        android:textSize="12sp" />

    <TextView
        android:id="@+id/item_readmore"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="READ MORE"
        android:layout_gravity="right"
        android:textSize="12sp" />

    <ImageView
        android:id="@+id/item_arrow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:src="@drawable/nxt_icn" />
</LinearLayout>

我只是想创造这个。我认为必须有一种使用权重属性的方法,但仍然无法得到我想要的

6 个答案:

答案 0 :(得分:1)

试试这个,

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/item_com_layout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/item_layout"
    android:orientation="horizontal"
    android:weightSum="2" >

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/item_layout"
        android:layout_weight="1.5"
        android:orientation="horizontal" >

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

        <TextView
            android:id="@+id/item_comment"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="22 COMMENTS"
            android:textSize="12sp" />

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

        <TextView
            android:id="@+id/item_tableview"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="12"
            android:textSize="12sp" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/item_layout"
        android:layout_weight=".5"
        android:gravity="right|center_vertical"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/item_readmore"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:text="READ MORE"
            android:textSize="12sp" />

        <ImageView
            android:id="@+id/item_arrow"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:src="@drawable/ic_launcher" />
    </LinearLayout>

</LinearLayout>

答案 1 :(得分:1)

您可以尝试以下

<?xml version="1.0" encoding="utf-8"?>
   <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/item_com_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/item_layout"
     >

    <TextView
        android:id="@+id/item_comment"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="22 COMMENTS"
        android:textSize="12sp"
        android:drawableLeft="@drawable/cmmt_icn"
        android:gravity="center_vertical"
        android:layout_alignParentLeft="true"
        />



    <TextView
        android:id="@+id/item_readmore"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="READ MORE"
        android:layout_gravity="right"
        android:textSize="12sp" 
        android:drawableRight="@drawable/nxt_icn"
        android:gravity="center_vertical"
        android:layout_alignParentRight="true"/>

    <TextView
        android:id="@+id/item_tableview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="12"
        android:textSize="12sp" 
        android:drawableLeft="@drawable/table_viewcount_icn"
        android:gravity="center_vertical"
        android:layout_toLeftOf="@+id/item_readmore"
        android:layout_toRightOf="@+id/item_comment"/>

</RelativeLayout>

答案 2 :(得分:1)

嘿试试这个会起作用,我试着为我做这个工作

所有Xml元素的内容都会更改您达到目标的以下代码

<LinearLayout
    android:id="@+id/item_com_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" >
<LinearLayout
    android:id="@+id/item_com_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
  android:orientation="horizontal"
android:weightSum="10"> 
    <ImageView
        android:id="@+id/item_comment_img"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:weight="2"
        android:src="@drawable/cmmt_icn"/>

    <TextView
        android:id="@+id/item_comment"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:weight="2"
        android:text="22 COMMENTS"
        android:textSize="12sp" />

    <ImageView
        android:id="@+id/item_tableview_img"
       android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:weight="2"
        android:src="@drawable/table_viewcount_icn" />

    <TextView
        android:id="@+id/item_tableview"
       android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:weight="2"
        android:text="12"
        android:textSize="12sp" />

<LinearLayout
    android:id="@+id/item_com_sub_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
  android:orientation="horizontal"
android:gravity="right"
android:weight="2"> 
 <TextView
        android:id="@+id/item_readmore"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:text="READ MORE"
        android:layout_gravity="center_horizontal"
        android:textSize="12sp" />

    <ImageView
        android:id="@+id/item_arrow"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="center_horizontal"
        android:src="@drawable/nxt_icn" />

</LinearLaouyt>
</LinearLayout>
<LinearLayout>

答案 3 :(得分:0)

试试这个。这正是您想要调整布局的方式,就像您想要的那样并调整权重。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="100" >

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:weightSum="10"
    android:layout_weight="30" >

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_weight="3"
        android:layout_height="match_parent" >

        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:text="Button" />

    </RelativeLayout>

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_weight="3"
        android:layout_height="match_parent" >

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:text="Large Text"
            android:textAppearance="?android:attr/textAppearanceLarge" />

    </RelativeLayout>

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_weight="4"
        android:layout_height="match_parent" >

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:text="Button" />

    </RelativeLayout>

</LinearLayout>

</LinearLayout>

答案 4 :(得分:0)

使用此

<LinearLayout
android:id="@+id/item_com_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >



<TextView
    android:id="@+id/item_comment"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="22 COMMENTS"
    android:gravity="center"
    android:drawableLeft="@drawable/ic_launcher"
    android:textSize="12sp" />



<TextView
    android:id="@+id/item_tableview"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="12"
    android:drawableLeft="@drawable/ic_launcher"
     android:gravity="center"
    android:textSize="12sp" />
<View android:layout_width="0dp"
    android:layout_height="1dp"
    android:layout_weight="1"/>

   <TextView
    android:id="@+id/item_readmore"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="READ MORE"
    android:layout_gravity="right"
     android:drawableRight="@drawable/ic_launcher"
     android:gravity="center"
    android:textSize="12sp" />


 </LinearLayout>

我希望这会有效..

答案 5 :(得分:0)

不是对每张图片使用ImageViews,而是使用drawableLeft中的drawableRightTextView,并将android:layout_weight="1"提供给第二张TextView

请尝试以下数据:

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

        <TextView
            android:id="@+id/item_tableview"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:drawableLeft="@drawable/ic_launcher"
            android:gravity="center_vertical"
            android:text="1 Comments"
            android:textSize="12sp" />

        <TextView
            android:id="@+id/item_readmore"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:drawableLeft="@drawable/back_icon"
            android:gravity="center_vertical"
            android:text="12"
            android:textSize="12sp" />

        <TextView
            android:id="@+id/item_arrow"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:drawableRight="@drawable/camera_icon"
            android:gravity="center_vertical"
            android:text="Read More" />
    </LinearLayout>