我怎样才能在android中实现这个设计?

时间:2014-01-29 06:45:27

标签: android xml layout

我需要为这些按钮实现以下设计

enter image description here

我有所有的图像。 左侧圆形图像具有按下状态和正常 按钮文本背景图像,但它们是矩形。

我使用线性布局和表格布局 这是我的XML代码

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/stbk"
android:gravity="center"
android:orientation="vertical" >

<TableLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="20dp"
    android:layout_marginRight="20dp"
    android:gravity="center" >

    <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/scttransband" >

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/acc" />


        <Button
            android:id="@+id/accountButton"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@null"
            android:gravity="left|center"
            android:paddingLeft="15dp"
            android:text="My Account" />
    </TableRow>

    <TableRow
        android:id="@+id/tableRow2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:background="@drawable/scttransband" >

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="60dp"
            android:layout_height="64dp"
            android:src="@drawable/dd" />

        <Button
            android:id="@+id/locateButton"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@null"
            android:gravity="left|center"
            android:paddingLeft="15dp"
            android:text="Locate Branches &amp; ATM" />
    </TableRow>

这是我得到的输出

enter image description here

如何剪切背景的左角以及如何进行按下状态以使背景和左图像更改以及文本颜色也发生变化?

1 个答案:

答案 0 :(得分:1)

请尝试以下代码:

我只为单个项目编写了示例代码..

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="8dp" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginLeft="-20dp"
        android:layout_toRightOf="@+id/imageView1"
        android:background="YOUR_COLOR"
        android:gravity="center"
        android:padding="8dp"
        android:text="YOUR_TEXT"
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:src="YOUR_CIRCLE_IMAGE" />

</RelativeLayout>

希望它能帮助这段代码...... !!!