问题
I have built a custom listView xml item; however, I am not getting what I expected...I changed the background colors to show in more detail what is happening on the second picture.
Basically, the playlist items should extend to the right side of the screen, and the colored text should be all on the right side of the screen (That is what the Designer is showing). Right now the colored text lines up right where the song title ends.
How do I fix this?
EXPECTED RESULT
WHAT I AM GETTING!
<?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
Based I reworked my code to follow a hybrid LinearLayout x RelativeLayout scheme before I noticed a bunch of answers pop up here. @yahya was the almost identical to what I came up with, so I accepted that answer, as that answer really took into account the precise layout that I presented in the photos above with attention on reducing the use of a lot of margin code.
The following is what my code (which again is very similar to @yahya 's answer below) looks like on my phone. Go ahead...look up these songs and enjoy ;)
回答1:
I modified your layout, and reduce used embedded layouts to improve your view hierarc
<?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>
回答2:
I would suggest you to use a RelativeLayout instead of LinearLayout. With RelativeLayout, you can align the components based on other components.
In this case,
The main textview with id txtSongName, should take width as match_parent.
txtGroupName should use layout_botton=@id/txtSongName
and txtSongMetaInfo should use layout_torightof=@id/txtGroupName and android:layout_alignParentRight="true"
Doing this the main advantages are reduced number layouts and hence better performance.
回答3:
Here comes your solution, just copy the below code it will suit your requirement.
<?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>
Since my reputation is low am not able to attach my screen shot :
回答4:
Remove the weight on your ImageView, change the weight of your FrameLayout to 1 and width to 0dp, that should do it. But still, like @prijupaul suggested, use RelativeLayout to reduce the number of views, especially when its inside a ListView. BTW, I'd recommend you to take a look at this tool: jimulabs.com.
回答5:
What is your code for inflating the layout?
You should be inflating using something like this (assuming you are using a BaseAdapter)
convertView = mInflater.inflate(R.layout.XXXX, parent, false);
If you pass null as the ViewGroup root when you inflate, it will ignore the fill_parent/match_parent parameters of the root layout and set it to wrap_content, giving you the result you were getting.
Even though it looks like you've got the layout you wanted, you should ensure you are still inflating it correctly.
回答6:
Actually, this entire layout could be done with many fewer views by putting all of the children inside of a single 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>
来源：https://stackoverflow.com/questions/18884937/android-custom-control-layout-troubles