Divide the width between the table elements evenly
I am trying to make a table to display something like this:
________
|__|__|__|
|__|__|__|
All boxes need to be split evenly, and the middle box in the bottom row will have a very large image that will be forced into a smaller size. This is my current XML layout, but I wind up with a layout like this:
________
|_|____|_|
|_|____|_|
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchCo开发者_JS百科lumns="1">
<TableRow>
<TextView
android:layout_column="1"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_weight="1"
android:text="Unused"
android:padding="3dip" />
<TextView
android:layout_column="2"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_weight="1"
android:text="Top Center"
android:padding="3dip" />
<TextView
android:layout_column="3"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_weight="1"
android:text="Unused"
android:padding="3dip" />
</TableRow>
<TableRow>
<TextView
android:layout_column="1"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_weight="1"
android:text="---->" />
<ImageView
android:id="@+id/mainImg"
android:layout_column="2"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_weight="1"
/>
<TextView
android:layout_column="3"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_weight="1"
android:text="<----" />
</TableRow>
</TableLayout>
What am I doing wrong?
You have to use linear layouts with weights.
Try this out, you may have to add some more stuff, but it should get you started.
<?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="fill_parent" android:orientation="vertical">
<LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
I’m not sure what you’re doing wrong. I tried a table layout like yours in the past and could not get it to work properly. I’ve found accomplishing a layout like yours to be easier using a relative layout.
You set the left box to left_align, the right box to right_align, etc. Then give them all a dip value to correspond with the size screen you are currently using and they will update correctly across other screen sizes.
Unfortunately, once you get beyond 3 in a row (say 4 or 5 boxes), this fix no longer works.
Edit: As per Mal's comment it appears an alternative is to use a relative layout with his XML code.
I will post my original fix for reference. I also neglected to mention this is actually a relative layout inside a frame layout.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<Button
android:id="@+id/start"
android:layout_width="110dip"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
android:text="@string/title_start" />
<Button
android:id="@+id/options"
android:layout_width="110dip"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:text="@string/title_options" />
<Button
android:id="@+id/scores"
android:layout_width="110dip"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:text="@string/title_scores" />
</RelativeLayout>
Try android:layout_weight="1" in your button/child elements of RowLayout
<TableRow
android:id="@+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<Button
android:id="@+id/button9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/str1"
android:layout_weight="1"/>
<Button
android:id="@+id/button10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/str2"
android:layout_weight="1"/>
<Button
android:id="@+id/button11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/str3"
android:layout_weight="1"/>
<Button
android:id="@+id/button12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/strMinus"
android:layout_weight="1"/>
</TableRow>
Update: Android Percent Support Library helps us to divide evenly any android widgets using its percentage attribute.
Code and Concept
Github Demo
<android.support.percent.PercentRelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/fifty_huntv"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#ff7acfff"
android:text="20% - 50%"
android:textColor="@android:color/white"
app:layout_heightPercent="20%"
app:layout_widthPercent="50%" />
<TextView
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_toRightOf="@id/fifty_huntv"
android:background="#ffff5566"
android:text="80%-50%"
app:layout_heightPercent="80%"
app:layout_widthPercent="50%"
/>
</android.support.percent.PercentRelativeLayout>
Really Awesome.
精彩评论