«

已发布的计算器界面布局分享,可自动适配不同分辨率

时间:2024-3-2 17:21     作者:韩俊     分类: Html+Css


本人所写的Hy计算器,已在豌豆荚发布,在此公开界面布局代码,并配注释。该界面布局通过自动压缩计算器显示屏的大小,可以使得按键的布局在不同分辨率手机上相对保持不变。

本人能力有限,兴许在诸位大拿看来,此计算器界面粗鄙不堪,但若是有同我一般的初学者在阅读了本篇文章后,自己的一些疑惑得到了解答,那我不惜耗费时间写下这篇文章,也就不是完全没有意义了。

在写这个计算器的过程中,也是遇到了很多困难,在网上搜索后,很多问题没能找到答案,有些问题即使找到了答案,也耗费了诸多时间。若是这篇文章能够抛砖引玉,大家能多多分享自己的心得见解,让后来人学习的过程稍稍平坦,那更是意外之喜了。

好了,下边且听我细细道来,若有不对之处,还望斧正,若有更佳之方法,欢迎补充。(最下方有效果图)

<!-- 线性布局为大框架,里边有两个表格布局,第一个表格布局里装的是EditText,作为
计算器显示屏,第二个表格布局里装的是GridLayout布局,Gridlayout里装的是所有的按键 -->
<LinearLayout  xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/root"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
<!-- 采用线性布局为大框架,目的是可以设置权重,然后可以自由分配剩余的空间,
第一个tablelayout权重为999,第二个tablelayout权重为1,这样在不同分辨率下,
被拉伸、被收缩的就只有tablelayout1,即显示屏,而tablelayout2即按键几乎不会
改变相对大小 -->
    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="999" >
        <EditText
            android:id="@+id/EditText"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:text=""
            android:textSize="15sp" />
    </TableLayout>
<!-- 注意android:layout_height="wrap_content"这句话,如果不是wrap的话,
当显示屏的字符占满屏幕后,继续输入的话,显示屏会不断扩张,按键会被挤出手机屏幕外 -->
    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
         >
<!-- 采用Gridlayout是因为有些按键需要占据两个,不使用Gridlayout,当分辨率变化,显示
的按键就会错位 -->
        <GridLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:columnCount="4"
            android:orientation="horizontal"
            android:rowCount="9" 
            >
<!-- android:layout_gravity="fill"这句话让所有按键充满网格,避免按键大小不统一,
  android:textSize="15sp"、 android:minHeight="45dp"这两个参数是我多次调整后的结果
  以适应不同分辨率手机,android:textSize="15sp"是设置按键字体的大小,android:minHeight="45dp" 
  是设置按键上下边框距离文字的长度 -->
            <Button
                android:id="@+id/clearall"
                android:layout_gravity="fill"
                android:text="清屏"
                android:textSize="15sp" 
                android:minHeight="45dp" 

                />

            <Button
                android:id="@+id/fun"
                android:layout_gravity="fill"
                android:text="功能"
                android:textSize="15sp" 
                android:minHeight="45dp" 

                />

            <Button
                android:id="@+id/backspace"
                android:layout_columnSpan="2"
                android:layout_gravity="fill"
                android:text="退格"
                android:textSize="15sp" 
                android:minHeight="45dp" 

                />

            <Button
                android:id="@+id/tentotwo"
                android:layout_gravity="fill"
                android:text="10->2"
                android:textSize="15sp"
                android:minHeight="45dp" 

                 />

            <Button
                android:id="@+id/twotosixteen"
                android:layout_gravity="fill"
                android:text="2->16"
                android:textSize="15sp"
                android:minHeight="45dp" 

                 />

            <Button
                android:id="@+id/sixteentotwo"
                android:layout_gravity="fill"
                android:text="16->2"
                android:textSize="15sp" 
                android:minHeight="45dp" 

                />

            <Button
                android:id="@+id/twototen"
                android:layout_gravity="fill"
                android:text="2->10"
                android:textSize="15sp"
                android:minHeight="45dp" 

                 />

            <Button
                android:id="@+id/sinasin"
                android:layout_gravity="fill"
                android:text="sin/asin"
                android:textSize="15sp"
                android:minHeight="45dp" 

                 />

            <Button
                android:id="@+id/cosacos"
                android:layout_gravity="fill"
                android:text="cos/acos"
                android:textSize="15sp" 
                android:minHeight="45dp" 

                />

            <Button
                android:id="@+id/tanatan"
                android:layout_gravity="fill"
                android:text="tan/atan"
                android:textSize="15sp"
                android:minHeight="45dp" 

                 />

            <Button
                android:id="@+id/exp"
                android:layout_gravity="fill"
                android:text="^"
                android:textSize="15sp"
                android:minHeight="45dp" 

                 />

            <Button
                android:id="@+id/sqrt"
                android:layout_gravity="fill"
                android:text="√"
                android:textSize="15sp"
                android:minHeight="45dp" 

                 />

            <Button
                android:id="@+id/zuokuohao"
                android:layout_gravity="fill"
                android:text="("
                android:textSize="15sp"
                android:minHeight="45dp" 

                 />

            <Button
                android:id="@+id/youkuohao"
                android:layout_gravity="fill"
                android:text=")"
                android:textSize="15sp" 
                android:minHeight="45dp" 

                />

            <Button
                android:id="@+id/add"
                android:layout_gravity="fill"
                android:text="+"
                android:textSize="15sp" 
                android:minHeight="45dp" 

                />

            <Button
                android:id="@+id/seven"
                android:layout_gravity="fill"
                android:text="7"
                android:textSize="15sp" 
                android:minHeight="45dp" 

                />

            <Button
                android:id="@+id/eight"
                android:layout_gravity="fill"
                android:text="8"
                android:textSize="15sp"
                android:minHeight="45dp" 

                 />

            <Button
                android:id="@+id/nine"
                android:layout_gravity="fill"
                android:text="9"
                android:textSize="15sp" 
                android:minHeight="45dp" 

                />

            <Button
                android:id="@+id/sub"
                android:layout_gravity="fill"
                android:text="-"
                android:textSize="15sp" 
                android:minHeight="45dp" 

                />

            <Button
                android:id="@+id/fourandD"
                android:layout_gravity="fill"
                android:text="4/d"
                android:textSize="15sp"
                android:minHeight="45dp" 

                 />

            <Button
                android:id="@+id/fiveandE"
                android:layout_gravity="fill"
                android:text="5/e"
                android:textSize="15sp" 
                android:minHeight="45dp" 

                />

            <Button
                android:id="@+id/sixandF"
                android:layout_gravity="fill"
                android:text="6/f"
                android:textSize="15sp" 
                android:minHeight="45dp" 

                />

            <Button
                android:id="@+id/mul"
                android:layout_gravity="fill"
                android:text="x"
                android:textSize="15sp"
                android:minHeight="45dp" 

                 />

            <Button
                android:id="@+id/oneandA"
                android:layout_gravity="fill"
                android:text="1/a"
                android:textSize="15sp"
                android:minHeight="45dp" 

                 />

            <Button
                android:id="@+id/twoandB"
                android:layout_gravity="fill"
                android:text="2/b"
                android:textSize="15sp" 
                android:minHeight="45dp" 

                />

            <Button
                android:id="@+id/threeandC"
                android:layout_gravity="fill"
                android:text="3/c"
                android:textSize="15sp" 
                android:minHeight="45dp" 

                />

            <Button
                android:id="@+id/div"
                android:layout_gravity="fill"
                android:text="÷"
                android:textSize="15sp" 
                android:minHeight="45dp" 

                />

            <Button
                android:id="@+id/zero"
                android:layout_gravity="fill"
                android:text="0"
                android:textSize="15sp"
                android:minHeight="45dp" 

                 />

            <Button
                android:id="@+id/point"
                android:layout_gravity="fill"
                android:text="."
                android:textSize="15sp"
                android:minHeight="45dp" 

                 />

            <Button
                android:id="@+id/eql"
                android:layout_columnSpan="2"
                android:layout_gravity="fill"
                android:text="="
                android:textSize="15sp" 
                android:minHeight="45dp" 

                />
        </GridLayout>
    </TableLayout>
</LinearLayout>

下边是效果图:




标签: javascript html css

热门推荐