从零开始学android<使用嵌套布局实现计算器界面.十七.>

2022-09-25 17:45:36

所谓的嵌套布局就是在一个文件中嵌套多个布局文件

<span style="font-size:18px;">  <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >
<FrameLayout 
android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >
……
……
……
</FrameLayout >

</LinearLayout></span>

接下来使用嵌套布局来实现一个简单计算器的UI效果

下面是基本构思图

从零开始学android<使用嵌套布局实现计算器界面.十七.>

使用Xml布局文件设置计算器效果

<span style="font-size:18px;"><?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:orientation="vertical" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:layout_weight="3"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/text2"
            android:layout_width="match_parent"
            android:layout_height="fill_parent"
            android:layout_marginTop="0dp"
            android:layout_weight="1"
            android:padding="0dp" />

        <TextView
            android:id="@+id/text1"
            android:layout_width="match_parent"
            android:layout_height="fill_parent"
            android:layout_marginTop="0dp"
            android:layout_weight="2"
            android:padding="0dp" />
    </LinearLayout>

    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:orientation="vertical" >

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="fill_parent"
            android:layout_weight="0.2" >

            <Button
                android:id="@+id/left_bracket_button"
                android:layout_height="fill_parent"
                android:layout_marginBottom="1dp"
                android:layout_marginLeft="1dp"
                android:layout_weight="0.25"
                android:background="#333333"
                android:text="（"
                android:textColor="@android:color/white"
                android:textSize="25sp" />

            <Button
                android:id="@+id/right_bracket_button"
                android:layout_height="fill_parent"
                android:layout_marginBottom="1dp"
                android:layout_marginLeft="1dp"
                android:layout_weight="0.25"
                android:background="#333333"
                android:text="）"
                android:textColor="@android:color/white"
                android:textSize="25sp" />

            <Button
                android:id="@+id/divisor_button"
                android:layout_height="fill_parent"
                android:layout_marginBottom="1dp"
                android:layout_marginLeft="1dp"
                android:layout_weight="0.25"
                android:background="#333333"
                android:text="÷"
                android:textColor="@android:color/white"
                android:textSize="25sp" />

            <Button
                android:id="@+id/backspace_button"
                android:layout_height="fill_parent"
                android:layout_marginBottom="1dp"
                android:layout_marginLeft="1dp"
                android:layout_weight="0.25"
                android:background="#ffa500"
                android:text="C"
                android:textSize="25sp" />
        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="fill_parent"
            android:layout_weight="0.2" >
              <Button
                android:id="@+id/seven_button"
                android:layout_height="fill_parent"
                android:layout_width="fill_parent"
                android:layout_weight="0.25"
                android:layout_marginLeft="1dp"
		    	android:layout_marginBottom="1dp"
		    	android:textSize="25sp"
                android:background="@android:color/darker_gray"
                android:text="7" />

            <Button
                android:id="@+id/eight_button"
                android:layout_height="fill_parent"
                android:layout_width="fill_parent"
                android:layout_weight="0.25"
                android:layout_marginLeft="1dp"
		    	android:layout_marginBottom="1dp"
		    	android:textSize="25sp"
                android:background="@android:color/darker_gray"
                android:text="8" />

            <Button
                android:id="@+id/nine_button"
                android:layout_height="fill_parent"
                android:layout_width="fill_parent"
                android:layout_weight="0.25"
                android:layout_marginLeft="1dp"
		    	android:layout_marginBottom="1dp"
		    	android:textSize="25sp"
                android:background="@android:color/darker_gray"
                android:text="9" />

            <Button
                android:id="@+id/product_button"
                android:layout_height="fill_parent"
                android:layout_width="fill_parent"
                android:layout_weight="0.25"
                android:layout_marginLeft="1dp"
		    	android:layout_marginBottom="1dp"
                android:background="#333333"
                android:textSize="25sp"
		    	android:textColor="@android:color/white"
                android:text="×" />
        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="fill_parent"
            android:layout_weight="0.2" >
            <Button
                android:id="@+id/four_button"
                android:layout_height="fill_parent"
                android:layout_width="fill_parent"
                android:layout_weight="0.25"
                android:layout_marginLeft="1dp"
		    	android:layout_marginBottom="1dp"
		    	android:textSize="25sp"
                android:background="@android:color/darker_gray"
                android:text="4" />

            <Button
                android:id="@+id/five_button"
                android:layout_height="fill_parent"
                android:layout_width="fill_parent"
                android:layout_weight="0.25"
                android:layout_marginLeft="1dp"
		    	android:layout_marginBottom="1dp"
		    	android:textSize="25sp"
                android:background="@android:color/darker_gray"
                android:text="5" />

            <Button
                android:id="@+id/six_button"
                android:layout_height="fill_parent"
                android:layout_width="fill_parent"
                android:layout_weight="0.25"
                android:layout_marginLeft="1dp"
		    	android:layout_marginBottom="1dp"
		    	android:textSize="25sp"
                android:background="@android:color/darker_gray"
                android:text="6" />

            <Button
                android:id="@+id/minus_button"
                android:layout_height="fill_parent"
                android:layout_width="fill_parent"
                android:layout_weight="0.25"
                android:layout_marginLeft="1dp"
		    	android:layout_marginBottom="1dp"
                android:background="#333333"
                android:textSize="25sp"
		    	android:textColor="@android:color/white"
                android:text="-" />
        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="fill_parent"
            android:layout_weight="0.2" >
             <Button
                android:id="@+id/one_button"
                android:layout_height="fill_parent"
                android:layout_width="fill_parent"
                android:layout_weight="0.25"
                android:layout_marginLeft="1dp"
		    	android:layout_marginBottom="1dp"
		    	android:textSize="25sp"
                android:background="@android:color/darker_gray"
                android:text="1" />

            <Button
                android:id="@+id/two_button"
                android:layout_height="fill_parent"
                android:layout_width="fill_parent"
                android:layout_weight="0.25"
                android:layout_marginLeft="1dp"
		    	android:layout_marginBottom="1dp"
		    	android:textSize="25sp"
                android:background="@android:color/darker_gray"
                android:text="2" />

            <Button
                android:id="@+id/three_button"
                android:layout_height="fill_parent"
                android:layout_width="fill_parent"
                android:layout_weight="0.25"
                android:layout_marginLeft="1dp"
		    	android:layout_marginBottom="1dp"
		    	android:textSize="25sp"
                android:background="@android:color/darker_gray"
                android:text="3" />

            <Button
                android:id="@+id/plus_button"
                android:layout_height="fill_parent"
                android:layout_width="fill_parent"
                android:layout_weight="0.25"
                android:layout_marginLeft="1dp"
		    	android:layout_marginBottom="1dp"
                android:background="#333333"
                android:textSize="25sp"
		    	android:textColor="@android:color/white"
                android:text="+" />
        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="fill_parent"
            android:layout_weight="0.2" >
            <Button
                android:id="@+id/point_button"
                android:layout_height="fill_parent"
                android:layout_width="wrap_content"
                android:layout_weight="0.5"
                android:layout_marginLeft="1dp"
		    	android:layout_marginBottom="1dp"
		    	android:textSize="40sp"
                android:background="@android:color/darker_gray"
                android:text="." />

            <Button
                android:id="@+id/zero_button"
                android:layout_height="fill_parent"
                android:layout_width="wrap_content"
                android:layout_weight="0.5"
                android:layout_marginLeft="1dp"
		    	android:layout_marginBottom="1dp"
		    	android:textSize="25sp"
                android:background="@android:color/darker_gray"
                android:text="0" />
            

            <Button
                android:id="@+id/equal_button"
                android:layout_height="fill_parent"
                android:layout_width="wrap_content"
                android:layout_weight="3.1"
                android:layout_marginLeft="1dp"
		    	android:layout_marginBottom="1dp"
		    	android:textSize="25sp"
                android:background="#00CC00"
                android:text="=" />
        </TableRow>
    </TableLayout>

</LinearLayout></span>

下面是模拟器效果图

从零开始学android<使用嵌套布局实现计算器界面.十七.>

上面的代码中反复用到了

<span style="font-size:18px;"> android:layout_weight=""</span>

要想设置好一个布局就必须了解权重的概念android:layout_weight的真实含义

下节预报：

滚动视图ScrollView

从零开始学android<使用嵌套布局实现计算器界面.十七.>,布布扣,bubuko.com

从零开始学android<使用嵌套布局实现计算器界面.十七.>

码农公寓

相关文章