Android自定義控件布局故障

Question

我已經構建了一個自定義listView xml項目; 然而，我沒有達到我的預期......我改變了背景顏色，以更詳細地顯示第二張照片上發生的情況。

基本上，播放列表項應該延伸到屏幕的右側，彩色文本應該全部位於屏幕的右側（這就是Designer所顯示的內容）。 現在，彩色文本在歌曲標題結束的位置排成一行。

我該如何解決？

預期結果

我正在收獲什么！

<?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>

---

UPDATE

基於我注意到我的代碼遵循混合LinearLayout x RelativeLayout方案之前我注意到這里彈出了一堆答案。 @yahya與我提出的幾乎相同，所以我接受了這個答案，因為答案真的考慮了我在上面照片中提出的精確布局，注意減少使用大量的保證金代碼。

以下是我的手機上的代碼（下面再次與@yahya的答案非常類似）。 來吧......查看這些歌曲並享受;）

Answer 1

我修改了您的布局，並減少了使用的嵌入式布局，以改善您的視圖層次結構

<?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>

Answer 2

我建議你使用RelativeLayout而不是LinearLayout。 使用RelativeLayout，您可以根據其他組件對齊組件。

在這種情況下，

id為txtSongName的主文本視圖應將width作為match_parent。

txtGroupName應使用layout_botton=@id/txtSongName

和txtSongMetaInfo應該使用layout_torightof=@id/txtGroupName和android:layout_alignParentRight="true"

這樣做的主要優點是減少了數字布局，從而提高了性能。

Answer 3

這是您的解決方案，只需復制以下代碼即可滿足您的要求。

<?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>

由於我的聲譽很低，我無法附加我的屏幕截圖：

Answer 4

移除ImageView上的重量，將FrameLayout的重量更改為1，將寬度更改為0dp，應該這樣做。 但仍然像@prijupaul建議的那樣，使用RelativeLayout來減少視圖的數量，特別是當它在ListView中時。 順便說一句，我建議你看看這個工具： jimulabs.com 。

Answer 5

膨脹布局的代碼是什么？

您應該使用類似的東西進行充氣（假設您使用的是BaseAdapter）

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

如果在膨脹時將null作為ViewGroup根傳遞，它將忽略根布局的fill_parent / match_parent參數並將其設置為wrap_content，從而為您提供結果。

盡管看起來你已經得到了你想要的布局，但你應該確保你仍然正確地對它進行充氣。

Answer 6

實際上，通過將所有子項放在一個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>