Android中的仪表板设计

时间:2012-11-11 05:43:57

标签: android android-layout relativelayout dashboard

我的应用程序中有以下类型的仪表板,我想在Android中设计。但我无法将其与设计中的相同。

这是设计...... enter image description here

注意 - 使用6个按钮,分别命名为一,二,三等。我也有用户ViewStub的公共标题。我已创建了如下所示的320x480圆形圆圈,并将其设置为背景图像并相应地放置按钮。这是我使用的方法。

布局代码: -

<?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="fill_parent"
    android:background="@drawable/background" >

    <LinearLayout
        android:id="@+id/banner"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dip" >

        <ViewStub
            android:id="@+id/vsHeader"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:inflatedId="@+id/headings"
            android:layout="@layout/header" />
    </LinearLayout>

    <RelativeLayout
        android:id="@+id/categories"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/banner" >

        <ImageView
            android:id="@+id/logo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:contentDescription="desc"
            android:src="@drawable/logo" />

        <Button
            android:id="@+id/one"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_below="@id/logo"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="100dp"
            android:background="@drawable/truck_button"
            android:onClick="onButtonClicker" />

        <Button
            android:id="@+id/two"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_alignParentTop="true"
            android:layout_marginRight="20dp"
            android:layout_marginTop="150dp"
            android:background="@drawable/two"
            android:onClick="onButtonClicker" />

        <Button
            android:id="@+id/three"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/two"
            android:layout_below="@+id/two"
            android:layout_marginTop="15dp"
            android:background="@drawable/tire_button"
            android:onClick="onButtonClicker" />

        <Button
            android:id="@+id/four"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBaseline="@+id/two"
            android:layout_alignBottom="@+id/two"
            android:layout_marginLeft="25dip"
            android:layout_marginRight="14dp"
            android:background="@drawable/tow_truck_button"
            android:onClick="onButtonClicker" />

        <Button
            android:id="@+id/five"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBaseline="@+id/three"
            android:layout_alignBottom="@+id/three"
            android:layout_alignParentLeft="true"
            android:layout_marginLeft="25dip"
            android:background="@drawable/trailer_button"
            android:onClick="onButtonClicker" />

        <Button
            android:id="@+id/six"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/one"
            android:layout_below="@+id/five"
            android:background="@drawable/six"
            android:onClick="onButtonClicker" />
    </RelativeLayout>

</RelativeLayout>

如果有人对此有任何疑问,请提供帮助或提供您宝贵的建议。

1 个答案:

答案 0 :(得分:1)

最简单的方法是创建自己的CustomView并跟踪onTouch处的点击,否则您:

  1. 在UI上准备不同的细分 - 至少4-6
  2. 使用相对布局对齐它们
  3. 有他们独立的backgorund属性,你想在尝试不同的分辨率时扩展它。