首先百度搜索下载锤子计算器的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,不过不要紧,毕竟我们可以随便修改了。水平低,轻点喷啊。。。