开发者

Icon menu with TableView (Google+ like)

I am working on icon based main menu for my Android application (see attached image - Google+). The obvious layout for this is a TableLayout.

Icon menu with TableView (Google+ like)

However, I have no idea and could not find information on how to center the table itself and the icons inside. The code I came up with is as follows (and resulting image is below the code):

<TableLayout android:layout_width="fill_parent" android:id="@+id/tableLayout1" android:layout_height="fill_parent" android:stretchColumns="1" android:padding="20dp">
    <TableRow android:id="@+id/tableRow1" android:layout_width="fill_parent" android:layout_height="fill_parent" android:padding="20dp"  >
        <Button android:text="Button" android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center"></Button>
        <Button android:text="Button" android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center"></Button>
    </TableRow>
    <TableRow android:id="@+id/tableRow2" android:layout_width="fill_parent" android:layout_height="fill_parent" android:padding="20dp" >
        <Button android:text="Button" android:id="@+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" ></Button>
        &开发者_运维知识库lt;Button android:text="Button" android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center"></Button>
    </TableRow>
</TableLayout>

Icon menu with TableView (Google+ like)

I will appreciate any tips and ideas.


i just made a program main menu like you need. It's density-independent, but i put it on a scrollview just to make sure it's usable everywhere. You can change the buttons to imagebuttons if you like, so you get the menu you want.

A little explanation to the code:

  • every row has a textview on the left and on the right, as placeholders. The tablelayout'a android:stretchColumns="0,3" stretchs the textviews to fill the space next to the buttons.
  • you can change the margins so the buttons are nearer or further from each other.

And now here's the xml:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TableLayout android:layout_gravity="center" 
        android:layout_width="match_parent" android:layout_height="match_parent"
        android:stretchColumns="0,3">
        <TableRow android:layout_gravity="center">
            <TextView />
            <Button android:text="1" android:layout_margin="15dp"
                android:layout_gravity="center_vertical"
                android:width="100dip" android:height="100dip" />
            <Button android:layout_gravity="center_vertical" 
                android:text="2" android:layout_margin="15dp"
                android:width="100dip" android:height="100dip" />
            <TextView />
        </TableRow>

        <TableRow android:layout_gravity="center">
            <TextView />
            <Button android:text="3"  android:layout_margin="15dp"
                android:layout_gravity="center_vertical"
                android:width="100dip" android:height="100dip" />
            <Button android:text="4"  android:layout_margin="15dp"
                android:layout_gravity="center_vertical"
                android:width="100dip" android:height="100dip" />
            <TextView />
        </TableRow>

        <TableRow android:layout_gravity="center">
            <TextView />
                <Button android:text="5"  android:layout_margin="15dp"
                android:layout_gravity="center_vertical"
                android:width="100dip" android:height="100dip" />
            <Button android:text="6"  android:layout_margin="15dp"
                android:layout_gravity="center_vertical"
                android:width="100dip" android:height="100dip" />
            <TextView />
        </TableRow>
    </TableLayout>
</ScrollView>

And this is how it looks like: http://db.tt/yQ5NFhmk


try android:gravity="center" in the TableLayout spec. This will place the table rows in the center of the screen.

also try by adding android:gravity="center" in the TableRow for placing the buttons in the center of the table row.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜