天天看点

《安卓应用开发学习》仿锤子计算器(上)

首先百度搜索下载锤子计算器的apk,解压锤子计算器apk得到资源文件,如下图。

《安卓应用开发学习》仿锤子计算器(上)

有了这这些图片我们就可以依葫芦画瓢了,需要说明的是解压得到的图片有两套,分别用于横竖屏的布局,在这里我使用的是竖屏状态下的布局,横屏布局先不做处理。下面是计算器的竖屏布局文件。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/background"
    android:orientation="vertical" >

    <RelativeLayout
        android:id="@+id/rl_cal_typebox"
        android:layout_width="wrap_content"
        android:layout_height="100dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="30dp"
        android:background="@drawable/typebox"
        android:orientation="vertical" >

        <GridView
            android:id="@+id/gv_cal_typebox"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="15dp"
            android:horizontalSpacing="0dp"
             android:verticalSpacing="2dp"
            android:numColumns="10" >
        </GridView>
    </RelativeLayout>

    <TableLayout
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="25dp" >

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >

            <ImageButton
                android:id="@+id/img_cal_mc"
                android:layout_width="0dp"
                android:layout_height="70dp"
                android:layout_weight="1"
                android:adjustViewBounds="true"
                android:background="@drawable/selector_cal_mc"
                android:scaleType="centerCrop" />

            <ImageButton
                android:id="@+id/img_cal_madd"
                android:layout_width="0dp"
                android:layout_height="70dp"
                android:layout_weight="1"
                android:adjustViewBounds="true"
                android:background="@drawable/selector_cal_madd"
                android:scaleType="centerCrop" />

            <ImageButton
                android:id="@+id/img_cal_mminus"
                android:layout_width="0dp"
                android:layout_height="70dp"
                android:layout_weight="1"
                android:adjustViewBounds="true"
                android:background="@drawable/selector_cal_mminus"
                android:scaleType="centerCrop" />

            <ImageButton
                android:id="@+id/img_cal_ac"
                android:layout_width="0dp"
                android:layout_height="70dp"
                android:layout_weight="1"
                android:adjustViewBounds="true"
                android:background="@drawable/selector_cal_ac"
                android:scaleType="centerCrop" />
        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >

            <ImageButton
                android:id="@+id/img_cal_c"
                android:layout_width="0dp"
                android:layout_height="70dp"
                android:layout_weight="1"
                android:adjustViewBounds="true"
                android:background="@drawable/selector_cal_c"
                android:scaleType="centerCrop" />

            <ImageButton
                android:id="@+id/img_cal_addminus"
                android:layout_width="0dp"
                android:layout_height="70dp"
                android:layout_weight="1"
                android:adjustViewBounds="true"
                android:background="@drawable/selector_cal_addminus"
                android:scaleType="centerCrop" />

            <ImageButton
                android:id="@+id/img_cal_div"
                android:layout_width="0dp"
                android:layout_height="70dp"
                android:layout_weight="1"
                android:adjustViewBounds="true"
                android:background="@drawable/selector_cal_div"
                android:scaleType="centerCrop" />

            <ImageButton
                android:id="@+id/img_cal_multiply"
                android:layout_width="0dp"
                android:layout_height="70dp"
                android:layout_weight="1"
                android:adjustViewBounds="true"
                android:background="@drawable/selector_cal_multiply"
                android:scaleType="centerCrop" />
        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >

            <ImageButton
                android:id="@+id/img_cal_d7"
                android:layout_width="0dp"
                android:layout_height="70dp"
                android:layout_weight="1"
                android:adjustViewBounds="true"
                android:background="@drawable/selector_cal_d7"
                android:scaleType="centerCrop" />

            <ImageButton
                android:id="@+id/img_cal_d8"
                android:layout_width="0dp"
                android:layout_height="70dp"
                android:layout_weight="1"
                android:adjustViewBounds="true"
                android:background="@drawable/selector_cal_d8"
                android:scaleType="centerCrop" />

            <ImageButton
                android:id="@+id/img_cal_d9"
                android:layout_width="0dp"
                android:layout_height="70dp"
                android:layout_weight="1"
                android:adjustViewBounds="true"
                android:background="@drawable/selector_cal_d9"
                android:scaleType="centerCrop" />

            <ImageButton
                android:id="@+id/img_cal_minus"
                android:layout_width="0dp"
                android:layout_height="70dp"
                android:layout_weight="1"
                android:adjustViewBounds="true"
                android:background="@drawable/selector_cal_minus"
                android:scaleType="centerCrop" />
        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >

            <ImageButton
                android:id="@+id/img_cal_d4"
                android:layout_width="0dp"
                android:layout_height="70dp"
                android:layout_weight="1"
                android:adjustViewBounds="true"
                android:background="@drawable/selector_cal_d4"
                android:scaleType="centerCrop" />

            <ImageButton
                android:id="@+id/img_cal_d5"
                android:layout_width="0dp"
                android:layout_height="70dp"
                android:layout_weight="1"
                android:adjustViewBounds="true"
                android:background="@drawable/selector_cal_d5"
                android:scaleType="centerCrop" />

            <ImageButton
                android:id="@+id/img_cal_d6"
                android:layout_width="0dp"
                android:layout_height="70dp"
                android:layout_weight="1"
                android:adjustViewBounds="true"
                android:background="@drawable/selector_cal_d6"
                android:scaleType="centerCrop" />

            <ImageButton
                android:id="@+id/img_cal_add"
                android:layout_width="0dp"
                android:layout_height="70dp"
                android:layout_weight="1"
                android:adjustViewBounds="true"
                android:background="@drawable/selector_cal_add"
                android:scaleType="centerCrop" />
        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >

            <TableLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="3"
                android:background="@android:color/holo_blue_light"
                android:orientation="vertical" >

                <TableRow
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" >

                    <ImageButton
                        android:id="@+id/img_cal_d1"
                        android:layout_width="0dp"
                        android:layout_height="70dp"
                        android:layout_weight="1"
                        android:adjustViewBounds="true"
                        android:background="@drawable/selector_cal_d1"
                        android:scaleType="centerCrop" />

                    <ImageButton
                        android:id="@+id/img_cal_d2"
                        android:layout_width="0dp"
                        android:layout_height="70dp"
                        android:layout_weight="1"
                        android:adjustViewBounds="true"
                        android:background="@drawable/selector_cal_d2"
                        android:scaleType="centerCrop" />

                    <ImageButton
                        android:id="@+id/img_cal_d3"
                        android:layout_width="0dp"
                        android:layout_height="70dp"
                        android:layout_weight="1"
                        android:adjustViewBounds="true"
                        android:background="@drawable/selector_cal_d3"
                        android:scaleType="centerCrop" />
                </TableRow>

                <TableRow
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" >

                    <ImageButton
                        android:id="@+id/img_cal_d0"
                        android:layout_width="0dp"
                        android:layout_height="70dp"
                        android:layout_weight="2"
                        android:adjustViewBounds="true"
                        android:background="@drawable/selector_cal_d0"
                        android:scaleType="centerCrop" />

                    <ImageButton
                        android:id="@+id/img_cal_dot"
                        android:layout_width="0dp"
                        android:layout_height="70dp"
                        android:layout_weight="1"
                        android:adjustViewBounds="true"
                        android:background="@drawable/selector_cal_dot"
                        android:scaleType="centerCrop" />
                </TableRow>
            </TableLayout>

            <TableLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@android:color/holo_green_light"
                android:orientation="vertical" >

                <TableRow
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" >

                    <ImageButton
                        android:id="@+id/img_cal_amount"
                        android:layout_width="0dp"
                        android:layout_height="140dp"
                        android:layout_weight="1"
                        android:adjustViewBounds="true"
                        android:background="@drawable/selector_cal_amount"
                        android:scaleType="centerCrop" />
                </TableRow>
            </TableLayout>
        </TableRow>
    </TableLayout>

</LinearLayout>
           

布局文件其实可以很自由,这里我使用的是TableLayout,当然你也可以用LinearLayout,GirdLayout等等。 效果图如下:

《安卓应用开发学习》仿锤子计算器(上)

值得一看的是,图中红色区域的布局该如何实现,大家看代码就明白了,我就不再说明了。其实办法有很多,大家可以自由发挥。顺便附上锤子计算器原版界面,图片来自锤子论坛,在实现计算功能的过程中我发现锤子好像没有清除屏全部的功能,于是我把右上角的mr按钮替换成了ac,用做清除屏幕的功能。还有原版锤子的第二行的第一个按钮变成了ac替换成了c,不过不要紧,毕竟我们可以随便修改了。水平低,轻点喷啊。。。

《安卓应用开发学习》仿锤子计算器(上)