android - 如何在 android 中创建类似 iphone 设置的 View ？

Question

我想在 android 上创建一个类似于 iphone 设置的 View 。

以图片为例

Answer 1

使用 XML 文件创建圆角矩形。并将该 xml 文件作为不同布局的背景，如 RelativeLayout、LinearLayout 等。

例如:borderframe.xml文件

    <?xml version="1.0" encoding="UTF-8"?>
<shape 
    xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke android:width="1dip" android:color="#A6A6A6" />
    <solid 

        android:color="#ffffff"
        android:paddingLeft="5dip"
        android:paddingTop="5dip"/>

    <corners android:radius="10px"/>

    <padding 

        android:top="10dip" 

        android:bottom="10dip" /> 
</shape>

把这个xml文件放到drawable目录下，设置为Any layout的背景。如下所示:
只需复制粘贴此布局文件，您就会得到解决方案。

    <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <!-- Header Part Start -->
    <RelativeLayout  android:id="@+id/headerPart" android:layout_height="45dp" android:layout_width="fill_parent"
        android:layout_alignParentTop="true" android:background="@drawable/header_gradient">

        <TextView android:id="@+id/header" android:text="Bill"
            android:textColor="#ffffff" android:textStyle="bold"
            android:textSize="20dp" android:layout_centerInParent="true"
            android:layout_width="wrap_content" android:layout_height="wrap_content"/>

    </RelativeLayout>
    <!-- Header Part Finish -->


    <RelativeLayout android:layout_below="@+id/headerPart" android:layout_width="fill_parent"
        android:layout_height="fill_parent" android:layout_marginBottom="55dp">


        <RelativeLayout android:id="@+id/firstBorderLayout"
            android:layout_height="wrap_content" android:layout_width="fill_parent"
            android:layout_marginLeft="20dp" android:layout_marginRight="20dp" 
            android:layout_marginTop="30dp" android:background="@drawable/borderframe">

            <TableLayout android:id="@+id/TableLayout01" android:layout_width="fill_parent" 
                android:gravity="center_horizontal"
                android:layout_height="wrap_content" android:stretchColumns="1">     

                <TableRow android:id="@+id/TableRow01" android:layout_width="fill_parent" 
                    android:layout_height="wrap_content" android:layout_gravity="center_vertical">       


                    <TextView android:id="@+id/totalAmoutHeading" android:layout_width="wrap_content" android:layout_gravity="center_vertical|right"
                        android:layout_height="wrap_content" android:text="Total" android:layout_marginRight="10dp"
                        android:textSize="18dp" android:textColor="#A8A8A8"/>     

                    <TextView android:id="@+id/totalAmountValue" android:layout_width="wrap_content" android:layout_marginLeft="10dp"
                        android:layout_marginRight="30dp" android:layout_gravity="center_vertical|left"
                        android:textSize="18dp" android:textColor="#000000"
                        android:layout_height="wrap_content" android:text=" $00.00"/>
                </TableRow>     

                <TableRow android:id="@+id/TableRow02" android:layout_width="wrap_content" 
                    android:layout_height="wrap_content" android:layout_gravity="center_vertical">       

                    <TextView android:id="@+id/percentageTipsAmountHeading" android:layout_width="wrap_content" android:layout_gravity="center_vertical|right"
                        android:layout_height="wrap_content" android:text="% TIP" android:layout_marginRight="10dp"
                        android:textSize="18dp" android:textColor="#A8A8A8"/>

                    <TextView android:id="@+id/percentageTipsAmountValue" android:layout_width="wrap_content" android:layout_marginLeft="10dp"
                        android:layout_marginRight="30dp" android:layout_gravity="center_vertical|left"
                        android:textSize="18dp" android:textColor="#000000"
                        android:layout_height="wrap_content" android:text="$00.00"/>
                </TableRow>   

                <View        
                    android:layout_height="2dip"
                    android:background="#FF909090"
                    android:layout_marginBottom="3dp"
                    android:layout_marginLeft="5dp"
                    android:layout_marginRight="5dp"
                    android:layout_marginTop="3dp" />
                <TableRow android:id="@+id/TableRow02" android:layout_width="wrap_content" 
                    android:layout_height="wrap_content" android:layout_gravity="center_vertical">       

                    <TextView android:id="@+id/TextView03" android:layout_width="wrap_content" android:layout_gravity="center_vertical|right"
                        android:layout_height="wrap_content" android:text="Grand Total" android:layout_marginRight="10dp"
                        android:textSize="18dp" android:textColor="#656565" android:textStyle="bold"/>

                    <TextView android:id="@+id/grantTotalValue" android:layout_width="wrap_content" android:layout_marginLeft="10dp"
                        android:layout_marginRight="30dp" android:layout_gravity="center_vertical|left" 
                        android:textSize="18dp" android:textColor="#000000" android:textStyle="bold"
                        android:layout_height="wrap_content" android:text="$00.00"/>
                </TableRow>

            </TableLayout> 

        </RelativeLayout>

        <!-- Second Border Frame -->
        <RelativeLayout android:id="@+id/secondBorderLayout" android:layout_below="@+id/firstBorderLayout"
            android:layout_height="wrap_content" android:layout_width="fill_parent"
            android:layout_marginLeft="20dp" android:layout_marginRight="20dp" 
            android:layout_marginTop="30dp" android:background="@drawable/borderframe">

            <TableLayout android:id="@+id/TableLayout01" android:layout_width="fill_parent" 
                android:gravity="center_horizontal"
                android:layout_height="wrap_content" android:stretchColumns="1">     

                <TableRow android:id="@+id/TableRow01" android:layout_width="fill_parent" 
                    android:layout_height="wrap_content" android:layout_gravity="center_vertical">       


                    <TextView android:id="@+id/taxAndTipsByPartySizeHeading" android:layout_width="wrap_content" android:layout_gravity="center_vertical|right"
                        android:layout_height="wrap_content" android:text="Tax and Tip / 2" android:layout_marginRight="10dp"
                        android:textSize="18dp" android:textColor="#A8A8A8"/>     

                    <TextView android:id="@+id/taxAndTipsByPartySizeValue" android:layout_width="wrap_content" android:layout_marginLeft="10dp"
                        android:layout_marginRight="30dp" android:layout_gravity="center_vertical|left"
                        android:textSize="18dp" android:textColor="#000000" android:paddingRight="5dp"
                        android:layout_height="wrap_content" android:text=" $00.00"/>
                </TableRow>     

                <View        
                    android:layout_height="2dip"
                    android:background="#FF909090"
                    android:layout_marginBottom="3dp"
                    android:layout_marginLeft="5dp"
                    android:layout_marginRight="5dp"
                    android:layout_marginTop="3dp" />
                <TableRow android:id="@+id/TableRow02" android:layout_width="wrap_content" 
                    android:layout_height="wrap_content" android:layout_gravity="center_vertical">       

                    <TextView android:id="@+id/grantTotalByPartySizeHeading" android:layout_width="wrap_content" android:layout_gravity="center_vertical|right"
                        android:layout_height="wrap_content" android:text="Grand Total / 2" android:layout_marginRight="10dp"
                        android:textSize="18dp" android:textColor="#656565" android:textStyle="bold"/>

                    <TextView android:id="@+id/grantTotalByPartySizeValue" android:layout_width="wrap_content" android:layout_marginLeft="10dp"
                        android:layout_marginRight="30dp" android:layout_gravity="center_vertical|left"
                        android:textSize="18dp" android:textColor="#000000" android:textStyle="bold"
                        android:layout_height="wrap_content" android:text="$00.00"/>
                </TableRow>

            </TableLayout> 

        </RelativeLayout>

        <!-- Bottom Continue Start -->
        <RelativeLayout android:id="@+id/bottomContinueLayout" 
            android:layout_height="45dp" android:layout_width="fill_parent"
            android:layout_alignParentBottom="true" android:background="@drawable/header_gradient">

            <Button android:id="@+id/backToPartySize" android:text="Party Size"
                android:textColor="#ffffff" android:layout_alignParentLeft="true"
                android:layout_width="wrap_content" android:layout_height="wrap_content" 
                android:layout_centerInParent="true" android:background="@drawable/selector_button"/>

        </RelativeLayout>
        <!-- Bottom Continue Finish -->
    </RelativeLayout>
     <LinearLayout android:id="@+id/addMobLayout" android:layout_below="@+id/bottomContinueLayout" 
        android:layout_height="wrap_content" android:layout_width="fill_parent" android:layout_alignParentBottom="true">

    </LinearLayout>

</RelativeLayout>

希望对您有所帮助。谢谢。