Android相对布局,表格布局包含按钮,文字和图像

时间:2017-05-19 16:26:26

标签: android android-layout android-tablelayout android-relativelayout

enter image description here 以下是content_main.xml布局文件代码。以上是我作为设计输出的图像:

 <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        xmlns:android="http://schemas.android.com/apk/res/android">

        <TableLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">

            <TableRow
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:weightSum="1"
                android:layout_weight="0.5">
                <RelativeLayout
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="0.33">
                    <Button
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:text="Area"
                        android:id="@+id/area"
                        android:textSize="12sp"
                        android:onClick="onClick"
                        android:gravity="center|bottom"
                        android:paddingBottom="10dp"/>
                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerInParent="true"
                        android:id="@+id/imageView" />
                </RelativeLayout>
                <RelativeLayout
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="0.33">
                    <Button
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:text="Length"
                        android:id="@+id/length"
                        android:textSize="12sp"
                        android:onClick="onClick"
                        android:gravity="center|bottom"
                        android:paddingBottom="10dp"/>
                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerInParent="true"/>
                </RelativeLayout>
                <RelativeLayout
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="0.33">
                    <Button
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:text="Weight"
                        android:id="@+id/weight"
                        android:textSize="12sp"
                        android:onClick="onClick"
                        android:gravity="center|bottom"
                        android:paddingBottom="10dp"/>
                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerInParent="true"/>
                </RelativeLayout>
            </TableRow>

            <TableRow
                android:layout_width="fill_parent"
                android:layout_height="0dp"
                android:weightSum="1"
                android:layout_weight="0.5">
                <RelativeLayout
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="0.33">
                    <Button
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:text="Temperature"
                        android:id="@+id/temperature"
                        android:textSize="12sp"
                        android:onClick="onClick"
                        android:gravity="center|bottom"
                        android:paddingBottom="10dp"/>
                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerInParent="true"/>
                </RelativeLayout>
                <RelativeLayout
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="0.33">
                    <Button
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:text="Cooking"
                        android:id="@+id/cooking"
                        android:textSize="12sp"
                        android:onClick="onClick"
                        android:gravity="center|bottom"
                        android:paddingBottom="10dp"/>
                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerInParent="true"/>
                </RelativeLayout>
                <RelativeLayout
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="0.33">
                    <Button
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:text="Currency"
                        android:id="@+id/currency"
                        android:textSize="12sp"
                        android:onClick="onClick"
                        android:gravity="center|bottom"
                        android:paddingBottom="10dp"/>
                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerInParent="true"/>
                </RelativeLayout>
            </TableRow>

            <TableRow
                android:layout_width="fill_parent"
                android:layout_height="0dp"
                android:weightSum="1"
                android:layout_weight="0.5">
                <RelativeLayout
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="0.33">
                    <Button
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:text="Digital Storage"
                        android:id="@+id/storage"
                        android:textSize="12sp"
                        android:onClick="onClick"
                        android:gravity="center|bottom"
                        android:paddingBottom="10dp"/>
                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerInParent="true"/>
                </RelativeLayout>
                <RelativeLayout
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="0.33">
                    <Button
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:text="Energy"
                        android:id="@+id/energy"
                        android:textSize="12sp"
                        android:onClick="onClick"
                        android:gravity="center|bottom"
                        android:paddingBottom="10dp"/>
                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerInParent="true"/>
                </RelativeLayout>
                <RelativeLayout
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="0.33">
                    <Button
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:text="Fuel Consumption"
                        android:id="@+id/fuel"
                        android:textSize="12sp"
                        android:onClick="onClick"
                        android:gravity="center|bottom"
                        android:paddingBottom="10dp"/>
                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerInParent="true"/>
                </RelativeLayout>
            </TableRow>

            <TableRow
                android:layout_width="fill_parent"
                android:layout_height="0dp"
                android:weightSum="1"
                android:layout_weight="0.5">
                <RelativeLayout
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="0.33">
                    <Button
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:text="Power"
                        android:id="@+id/power"
                        android:textSize="12sp"
                        android:onClick="onClick"
                        android:gravity="center|bottom"
                        android:paddingBottom="10dp"/>
                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerInParent="true"/>
                </RelativeLayout>
                <RelativeLayout
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="0.33">
                    <Button
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:text="Pressure"
                        android:id="@+id/pressure"
                        android:textSize="12sp"
                        android:onClick="onClick"
                        android:gravity="center|bottom"
                        android:paddingBottom="10dp"/>
                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerInParent="true"/>
                </RelativeLayout>
                <RelativeLayout
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="0.33">
                    <Button
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:text="Speed"
                        android:id="@+id/speed"
                        android:textSize="12sp"
                        android:onClick="onClick"
                        android:gravity="center|bottom"
                        android:paddingBottom="10dp"/>
                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerInParent="true"/>
                </RelativeLayout>
            </TableRow>

            <TableRow
                android:layout_width="fill_parent"
                android:layout_height="0dp"
                android:weightSum="1"
                android:layout_weight="0.5">
                <RelativeLayout
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="0.33">
                    <Button
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:text="Time"
                        android:id="@+id/time"
                        android:textSize="12sp"
                        android:onClick="onClick"
                        android:gravity="center|bottom"
                        android:paddingBottom="10dp"/>
                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerInParent="true"/>
                </RelativeLayout>
                <RelativeLayout
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="0.33">
                    <Button
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:text="Torque"
                        android:id="@+id/torque"
                        android:textSize="12sp"
                        android:onClick="onClick"
                        android:gravity="center|bottom"
                        android:paddingBottom="10dp"/>
                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerInParent="true"/>
                </RelativeLayout>
                <RelativeLayout
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="0.33">
                    <Button
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:text="Volume"
                        android:id="@+id/volume"
                        android:textSize="12sp"
                        android:onClick="onClick"
                        android:gravity="center|bottom"
                        android:paddingBottom="10dp"/>
                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerInParent="true"/>
                </RelativeLayout>
            </TableRow>
        </TableLayout>

    </RelativeLayout>

以下是activity_main.xml文件:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="sg.unitconverter.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_main"/>

</android.support.design.widget.CoordinatorLayout>

具有AREA,LENGTH和WEIGHT的第一行与其余行不同。我希望所有行的大小相等。有人可以帮忙吗?

以下是清单XML文件:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="sg.unitconverter">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity
            android:name="sg.unitconverter.MainActivity"
            android:label="@string/app_name"
            android:theme="@style/AppTheme.NoActionBar">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity
            android:name="sg.unitconverter.StandardCal"
            android:label="@string/title_activity_standard_cal"
            android:theme="@style/AppTheme.NoActionBar" />
        <activity
            android:name="sg.unitconverter.ScientificCal"
            android:label="@string/title_activity_scientific_cal"
            android:theme="@style/AppTheme.NoActionBar" />
        <activity
            android:name="sg.unitconverter.UnitConverter"
            android:label="@string/title_activity_unit_coverter"
            android:theme="@style/AppTheme.NoActionBar" />
        <activity
            android:name="sg.unitconverter.UnitArea"
            android:label="@string/title_activity_unit_area"
            android:theme="@style/AppTheme.NoActionBar" />
        <activity
            android:name="sg.unitconverter.UnitLength"
            android:label="@string/title_activity_unit_length"
            android:theme="@style/AppTheme.NoActionBar" />
        <activity
            android:name="sg.unitconverter.UnitWeight"
            android:label="@string/title_activity_unit_weight"
            android:theme="@style/AppTheme.NoActionBar" />
        <activity
            android:name="sg.unitconverter.UnitTemperature"
            android:label="@string/title_activity_unit_temperature"
            android:theme="@style/AppTheme.NoActionBar" />
        <activity
            android:name="sg.unitconverter.UnitCooking"
            android:label="@string/title_activity_unit_temperature"
            android:theme="@style/AppTheme.NoActionBar" />
        <activity
            android:name="sg.unitconverter.UnitCurrency"
            android:label="@string/title_activity_unit_area"
            android:theme="@style/AppTheme.NoActionBar" />
        <activity
            android:name="sg.unitconverter.UnitEnergy"
            android:label="@string/title_activity_unit_length"
            android:theme="@style/AppTheme.NoActionBar" />
        <activity
            android:name="sg.unitconverter.UnitFuel"
            android:label="@string/title_activity_unit_weight"
            android:theme="@style/AppTheme.NoActionBar" />
        <activity
            android:name="sg.unitconverter.UnitPower"
            android:label="@string/title_activity_unit_temperature"
            android:theme="@style/AppTheme.NoActionBar" />
        <activity
            android:name="sg.unitconverter.UnitPressure"
            android:label="@string/title_activity_unit_temperature"
            android:theme="@style/AppTheme.NoActionBar" />
        <activity
            android:name="sg.unitconverter.UnitSpeed"
            android:label="@string/title_activity_unit_area"
            android:theme="@style/AppTheme.NoActionBar" />
        <activity
            android:name="sg.unitconverter.UnitStorage"
            android:label="@string/title_activity_unit_length"
            android:theme="@style/AppTheme.NoActionBar" />
        <activity
            android:name="sg.unitconverter.UnitTime"
            android:label="@string/title_activity_unit_weight"
            android:theme="@style/AppTheme.NoActionBar" />
        <activity
            android:name="sg.unitconverter.UnitTorque"
            android:label="@string/title_activity_unit_temperature"
            android:theme="@style/AppTheme.NoActionBar" />
        <activity
            android:name="sg.unitconverter.UnitVolume"
            android:label="@string/title_activity_unit_temperature"
            android:theme="@style/AppTheme.NoActionBar" />
        <activity
            android:name="sg.unitconverter.History"
            android:label="@string/title_activity_history"
            android:theme="@style/AppTheme.NoActionBar"></activity>
    </application>

</manifest>

2 个答案:

答案 0 :(得分:0)

在内容的顶部添加填充等于actionBar的高度以抵消它:

<RelativeLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:paddingTop="?attr/actionBarSize"
        xmlns:android="http://schemas.android.com/apk/res/android">
...

同时将所有fill_parent替换为match_parent,因为它已被弃用,并且都做同样的事情。

答案 1 :(得分:0)

我认为工具栏与您的内容布局重叠。只需将RelativeLayout添加到根public enum ProductCategory { FOOD, BEVERAGE, DEFAULT; private final String label; private ProductCategory(String label){ this.label = label; } public String getLabel(){ return label; } ,不要使用填充。