1

我已经建立了一个自定义 listView xml 项；但是，我没有得到我所期望的......我更改了背景颜色以更详细地显示第二张图片上发生的事情。

基本上，播放列表项应该延伸到屏幕的右侧，彩色文本应该全部在屏幕的右侧（这就是设计器显示的内容）。现在，彩色文本在歌曲标题结束的地方排成一行。

我该如何解决？

预期结果

预期结果

我得到了什么！

我得到了什么

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"
android:layout_height="64dp"
android:orientation="horizontal" >

<ImageView
    android:id="@+id/imgSongThumbnail"
    android:layout_width="64dp"
    android:layout_height="64dp"
    android:layout_weight="0"
    android:contentDescription="@string/hello_world"
    android:src="@drawable/crayonpop_barbarbar" />

<FrameLayout
    android:layout_width="fill_parent"
    android:layout_height="match_parent"
    android:layout_weight="0" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:layout_margin="8dp"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/txtSongName"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:ellipsize="middle"
            android:singleLine="true"
            android:text="Bar Bar Bar Bar Bar Bar Bar"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:textColor="#DDD" />

        <TextView
            android:id="@+id/txtGroupName"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="@string/group"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textColor="#DDD" 
            android:singleLine="true" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:layout_gravity="end"
        android:layout_margin="8dp"
        android:gravity="bottom"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/txtSongMetaInfo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="end"
            android:layout_weight="0"
            android:text="@string/meta_data"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:textColor="@android:color/holo_blue_bright"
            android:textSize="12sp" />

    </LinearLayout>
</FrameLayout>

</LinearLayout>

更新

在我注意到这里弹出一堆答案之前，我重新编写了我的代码以遵循混合LinearLayoutx方案。RelativeLayout@yahya 与我想出的几乎相同，所以我接受了这个答案，因为这个答案确实考虑到了我在上面的照片中呈现的精确布局，并注意减少使用大量边距代码。

以下是我的代码（与下面@yahya 的答案非常相似）在我的手机上的样子。来吧...查找这些歌曲并享受；）

在此处输入图像描述

4

6 回答 6

2

我修改了您的布局，并减少使用的嵌入式布局以改善您的视图层次

<?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="64dp"
android:orientation="horizontal" >

<ImageView
    android:id="@+id/imgSongThumbnail"
    android:layout_width="64dp"
    android:layout_height="64dp" 
    android:contentDescription="@string/hello_world"
    android:src="@drawable/crayonpop_barbarbar" />

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_margin="8dp"
    android:layout_height="match_parent"  >

    <TextView
        android:id="@+id/txtSongName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ellipsize="middle"
        android:singleLine="true"
        android:text="Bar Bar Bar Bar Bar Bar Bar"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textColor="#DDD" />

        <LinearLayout  
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/txtSongName"
            android:orientation="horizontal" 
            android:gravity="right" >


            <TextView
                android:id="@+id/txtSongMetaInfo"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="end"
                android:layout_weight="0"
                android:text="@string/meta_data"
                android:textAppearance="?android:attr/textAppearanceSmall"
                android:textColor="@android:color/holo_blue_bright"
                android:textSize="12sp" />

            <TextView
                android:id="@+id/txtGroupName"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/group" 
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:textColor="#DDD" 
                android:singleLine="true" />  

        </LinearLayout>
</RelativeLayout>

</LinearLayout>
于 2013-09-19T06:18:58.937 回答
1

我建议您使用 RelativeLayout 而不是 LinearLayout。使用RelativeLayout，您可以根据其他组件对齐组件。

在这种情况下，

id 为 txtSongName 的主文本视图应将宽度作为 match_parent。

txtGroupName应该使用layout_botton=@id/txtSongName

并且txtSongMetaInfo应该使用layout_torightof=@id/txtGroupName和android:layout_alignParentRight="true"

这样做的主要优点是减少了布局数量，从而提高了性能。

于 2013-09-19T03:06:07.067 回答
1

您的解决方案来了，只需复制以下代码即可满足您的要求。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/vw_grey_btn" >

<ImageView
    android:id="@+id/imageView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="false"
    android:layout_centerVertical="true"
    android:src="@drawable/logo" />

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="false"
    android:layout_centerVertical="true"
    android:layout_toRightOf="@+id/imageView1"
    android:orientation="vertical"
    android:padding="10dp" >

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

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

        <TextView
            android:id="@+id/textView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:text="Medium Text"
            android:textAppearance="?android:attr/textAppearanceMedium" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:text="Small Text"
            android:textAppearance="?android:attr/textAppearanceSmall" />

    </RelativeLayout>

</LinearLayout>

</RelativeLayout>

由于我的声誉很低，我无法附上我的屏幕截图：

于 2013-09-19T07:32:00.520 回答
0

删除 ImageView 上的权重，将 FrameLayout 的权重更改为 1，将宽度更改为 0dp，应该这样做。但是，就像@prijupaul 建议的那样，使用RelativeLayout 来减少视图数量，尤其是当它在ListView 中时。顺便说一句，我建议你看看这个工具：jimulabs.com。

于 2013-09-19T06:07:47.007 回答
0

你膨胀布局的代码是什么？

您应该使用类似这样的方式进行充气（假设您使用的是 BaseAdapter）

convertView = mInflater.inflate(R.layout.XXXX, parent, false);

如果在膨胀时将 null 作为 ViewGroup 根传递，它将忽略根布局的 fill_parent/match_parent 参数并将其设置为 wrap_content，从而为您提供您得到的结果。

即使看起来你已经得到了你想要的布局，你应该确保你仍然正确地膨胀它。

于 2013-09-19T09:36:42.053 回答
0

实际上，整个布局可以通过将所有子视图放在单个 RelativeLayout 中来使用更少的视图来完成：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="64dp"
    android:background="#333" >

    <ImageView
        android:id="@+id/imgSongThumbnail"
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:contentDescription="@string/hello_world"
        android:src="@drawable/crayonpop_barbarbar" />

    <TextView
        android:id="@+id/txtSongName"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="8dp"
        android:layout_toRightOf="@id/imgSongThumbnail"
        android:ellipsize="middle"
        android:singleLine="true"
        android:text="Bar Bar Bar Bar Bar Bar Bar"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textColor="#DDD" />

    <TextView
        android:id="@+id/txtGroupName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@id/txtSongName"
        android:layout_below="@id/txtSongName"
        android:layout_marginBottom="8dp"
        android:singleLine="true"
        android:text="Sistar"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="#DDD" />

    <TextView
        android:id="@+id/txtSongMetaInfo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@id/txtGroupName"
        android:layout_alignRight="@id/txtSongName"
        android:layout_gravity="end"
        android:layout_weight="0"
        android:text="Remix #1"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:textColor="@android:color/holo_blue_bright"
        android:textSize="12sp" />

</RelativeLayout>
于 2013-09-19T13:14:56.110 回答