How to make a dynamic table layout using XML
I want to make a table layout as shown in the below screen:
I am able to make this UI using the code. But I want to make it using the XML. I tried the following approach.
I tried to make a tablelayout which will have header and title. Now I have two row below title which is getting repeated.
So I made these two rows in separate XML file named row1 and row2. But Now I don't know how to integrate these three in the code. I know there is method LayoutInflater.inflate()
to do it but I have two rows with diff kind of layout. See below the code for two rows. Please suggest What approach I should follow to make this kind of UI.
ROW_1.xml:
<?xml version="1.0" encoding="utf-8"?>
<TableRow xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/table_row"
android:minHeight="30dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/light_grey"
android:clickable="true"
>
<TextView android:id="@+id/tv1"
android:text="column1"
android:gravity="center"
android:textColor="@color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="5dip"
android:paddingRight="5dip"
/>
<TextView android:id="@+id/tv2"
android:text="column2"
android:gravity="center"
android:textColor="@color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="5dip"
android:paddingRight="5dip"
/>
<TextView android:id="@+id/tv3"
android:text="column3"
android:gravity="center"
android:textColor="@color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="5dip"
android:paddingRight="5dip"
/>
</Table开发者_JS百科Row>
ROW_2.xml
<?xml version="1.0" encoding="utf-8"?>
<TableRow xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/table_row"
android:minHeight="30dip"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@color/light_grey"
android:clickable="true"
>
<TextView android:id="@+id/tv1"
android:text="short description text for Title 0 comes here"
android:paddingLeft="5dip"
android:paddingRight="5dip"
android:gravity="center"
android:textColor="@color/black"
/>
</TableRow>
from looking at the image i would suggest taking the list view route. have your layout as
R1Col1 R1Col2 R1Col3
R2 Looooong Col1
this should workout well for you.
UPDATE
you list_item.xml should look something like this.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/wrapper"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<LinearLayout android:id="@+id/wrapper"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
<TextView android:id="@+id/tv1"
android:text="column1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView android:id="@+id/tv2"
android:text="column2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView android:id="@+id/tv3"
android:text="column3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
<TextView android:id="@+id/tv1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="short description text for Title 0 comes here" />
</LinearLayout>
here is a sample to learn how to populate a ListView
ListView Example
Why you need two different rows ?
You can integrate two rows in one Xml and so you have only one row to add in table view
精彩评论