用安卓语言写一个计算器的布局
首先要介绍一下五个布局方式,分别是线性布局 LinearLayout、相对布局RelativeLayout、 表格布局TableLayout、网格布局GridLayout、帧布局FrameLayout。我的想法是总体用一个线性布局写,然后包含一个网格布局,最后将计算器的按钮一一写上去,每一个按钮的字符最好用资源的方式,并绑定id以便于以后功能的实现。
1 //整体的一个线性布局
<LinearLayout
//设置整个计算器居中 2 android:gravity="center_horizontal" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" 5 xmlns:android="http://schemas.android.com/apk/res/android" 6 android:orientation="vertical" 7 >
//计算器的显示框 8 <EditText 9 android:layout_height="wrap_content" 10 android:layout_width="match_parent" 11 android:inputType="text" 12 android:id="@+id/express" 13 />
//网格布局 14 <GridLayout 15 16 android:layout_height="wrap_content" 17 android:layout_width="wrap_content"
//设置为5行4列的网格布局 18 android:rowCount="5" 19 android:columnCount="4" 20 >
//计算器的按钮,为了方便大家看我就不用资源了。 21 <Button 22 23 android:layout_width="wrap_content" 24 android:layout_height="wrap_content" 25 android:text="1" 26 android:id="@+id/one" 27 /> 28 <Button 29 android:layout_width="wrap_content" 30 android:layout_height="wrap_content" 31 android:text="2" 32 android:id="@+id/two" 33 /> 34 <Button 35 android:layout_width="wrap_content" 36 android:layout_height="wrap_content" 37 android:text="3" 38 android:id="@+id/three" 39 /> 40 <Button 41 android:layout_width="wrap_content" 42 android:layout_height="wrap_content" 43 android:text="+" 44 android:id="@+id/add" 45 /> 46 <Button 47 android:layout_width="wrap_content" 48 android:layout_height="wrap_content" 49 android:text="4" 50 android:id="@+id/four" 51 /> 52 <Button 53 android:layout_width="wrap_content" 54 android:layout_height="wrap_content" 55 android:text="5" 56 android:id="@+id/five" 57 /> 58 <Button 59 android:layout_width="wrap_content" 60 android:layout_height="wrap_content" 61 android:text="6" 62 android:id="@+id/six" 63 /> 64 <Button 65 android:layout_width="wrap_content" 66 android:layout_height="wrap_content" 67 android:text="-" 68 android:id="@+id/sub" 69 /> 70 <Button 71 android:layout_width="wrap_content" 72 android:layout_height="wrap_content" 73 android:text="7" 74 android:id="@+id/seven" 75 /> 76 <Button 77 android:layout_width="wrap_content" 78 android:layout_height="wrap_content" 79 android:text="8" 80 android:id="@+id/eight" 81 /> 82 <Button 83 android:layout_width="wrap_content" 84 android:layout_height="wrap_content" 85 android:text="9" 86 android:id="@+id/nine" 87 /> 88 <Button 89 android:layout_width="wrap_content" 90 android:layout_height="wrap_content" 91 android:text="*" 92 android:id="@+id/ride" 93 /> 94 95 <Button 96 android:layout_width="wrap_content" 97 android:layout_height="wrap_content" 98 android:text="." 99 android:id="@+id/dot" 100 /> 101 <Button 102 android:layout_width="wrap_content" 103 android:layout_height="wrap_content" 104 android:text="0" 105 android:id="@+id/zero"
//设置0这个按钮充满两列,并填充。 106 android:layout_columnSpan="2" 107 android:layout_gravity="fill" 108 /> 109 <Button 110 android:layout_width="wrap_content" 111 android:layout_height="wrap_content" 112 android:text="/" 113 android:id="@+id/divide" 114 /> 115 <Button 116 android:layout_width="wrap_content" 117 android:layout_height="wrap_content" 118 android:text="=" 119 android:layout_columnSpan="2" 120 android:layout_gravity="fill" 121 android:id="@+id/equal" 122 /> 123 <Button 124 android:layout_width="wrap_content" 125 android:layout_height="wrap_content" 126 android:text="back" 127 android:id="@+id/backspace" 128 /> 129 <Button 130 android:layout_width="wrap_content" 131 android:layout_height="wrap_content" 132 android:text="ac" 133 android:id="@+id/ac" 134 /> 135 </GridLayout> 136 137 138 </LinearLayout>
这样一个简单的计算器就完成了。
在计算器布局的过程中,我遇到许多问题,下面我给大家分享一下:
1.计算器下面的按钮始终不能居中,往左边靠齐。
解决方法:将整体的线性布局中加上 android:gravity="center_horizontal",并且将将统领按钮的网格布局的宽度设为围绕内容 wrap_content。这样按钮就可以居中了。
希望可以帮到你!