移动软件开发-设计app首页

一、实验目标

做一个APP首页，包括顶部图片、顶部菜单栏、中部消息模块、底部Tab按钮。学习 ScrollView, RelativeLayout，以及插件之间的穿插使用。

二、实验步骤

1.我们要实现的效果图：

 

2.实验准备：

了解ScrollView, RelativeLayout，以及插件之间的穿插使用，ScrollView组件有且只有一个子控件。

RelativeLayout的用法：

 

3.功能实现：

3.1：首先我们需要设计出顶部的图片模板，我们先 创建出一个线性父布局，指定这个线性父布局的宽度和高度，以及它下面的子布局的排列方式，这里我们选择它的排列方式为垂直排列。然后我们新建一个ScrollView布局，它里面只允许一个子布局。

代码如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent">
​
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="640dp">
        
        //子布局
        </ScrollView>
        
</LinearLayout>

接着我们需要设计出首页及其下面的那副大的播报图，这里我们先在ScrollView里面镶嵌一个LinearLayout父布局，首先使用TextView和ImageView组件存放首页大字和下面的播报图，代码如下：

<LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <TextView
                android:textSize="18dp"
                android:textColor="#333"
                android:textStyle="bold"
                android:gravity="center"
                android:text="首页"
                android:layout_width="match_parent"
                android:layout_height="50dp"/>
​
            <ImageView
                android:layout_marginRight="10dp"
                android:layout_marginLeft="10dp"
                android:src="@mipmap/test_img"
                android:layout_width="match_parent"
                android:layout_height="200dp"/>
     </LinearLayout>

效果图如下：

 

3.2：设计菜单模板，在这里我们选一个在ImageView后面追加一个LinearLayout子布局，里面再镶嵌四个LinearLayout布局，且每一个布局呈水平排列。

代码如下：

<LinearLayout
    android:layout_marginRight="10dp"
    android:layout_marginLeft="10dp"
    android:weightSum="4"
    android:background="#DCDCDC"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
​
    <LinearLayout
        android:orientation="vertical"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="100dp">
​
        <ImageView
            android:layout_marginTop="10dp"
            android:layout_gravity="center_horizontal"
            android:background="@mipmap/test_icon1"
            android:layout_width="50dp"
            android:layout_height="50dp"/>
        <TextView
            android:layout_marginTop="10dp"
            android:textSize="20dp"
            android:gravity="center"
            android:text="验房"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
​
    </LinearLayout>
    <LinearLayout
        android:orientation="vertical"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="100dp">
​
        <ImageView
            android:layout_marginTop="10dp"
            android:layout_gravity="center_horizontal"
            android:background="@mipmap/test_icon2"
            android:layout_width="50dp"
            android:layout_height="50dp"/>
        <TextView
            android:textSize="20dp"
            android:layout_marginTop="10dp"
            android:gravity="center"
            android:text="日常巡检"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
​
    </LinearLayout>
    <LinearLayout
        android:orientation="vertical"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="100dp">
​
        <ImageView
            android:layout_marginTop="10dp"
            android:layout_gravity="center_horizontal"
            android:background="@mipmap/test_icon4"
            android:layout_width="50dp"
            android:layout_height="50dp"/>
        <TextView
            android:textSize="20dp"
            android:layout_marginTop="10dp"
            android:gravity="center"
            android:text="钥匙管理"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
​
    </LinearLayout>
    <LinearLayout
        android:orientation="vertical"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="100dp">
​
        <ImageView
            android:layout_marginTop="10dp"
            android:layout_gravity="center_horizontal"
            android:background="@mipmap/test_icon5"
            android:layout_width="50dp"
            android:layout_height="50dp"/>
        <TextView
            android:textSize="20dp"
            android:layout_marginTop="10dp"
            android:gravity="center"
            android:text="统计分析"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
​
    </LinearLayout>
​
</LinearLayout>

效果图：

 

3.3：设计代办模板：在这里我们先设计代办和更多字条，它们之间呈水平分布，其中代办字条的左间距为10dp，更多字条的右间距为10dp，占满整个字条的宽度和高度。

代码如下：

<LinearLayout
    android:layout_marginTop="20dp"
    android:background="#DCDCDC"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:layout_weight="1"
        android:textStyle="bold"
        android:textColor="#333"
        android:textSize="16dp"
        android:layout_marginLeft="10dp"
        android:text="待办(10)"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <TextView
        android:textColor="#666"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:text="更多"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
​
</LinearLayout>

接着我们需要显示详细的代办详情，我们在代办后面追加一个线性布局，指定它的高度和宽度，再在里面镶嵌一个TextView，显示第一条代办的标题，如下：

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="25dp"
    android:background="#dcdcdc">
​
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="25dp"
        android:layout_marginRight="10dp"
        android:layout_marginLeft="10dp"
        android:background="#ffff">
​
        <LinearLayout
            android:layout_width="80dp"
            android:layout_height="25dp"
            android:background="#0000ff">
​
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="钥匙管理"
                android:textColor="#ffff"
                android:textStyle="bold" />
​
        </LinearLayout>
​
    </LinearLayout>
​
</LinearLayout>

然后我们还需要显示这条代办的内容，追加一个LinearLayout，里面镶嵌一个TextView和ImageView组件显示内容，如下：

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="90dp"
    android:background="#dcdcdc"
    android:orientation="vertical">
​
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:background="#fff"
        android:orientation="vertical">
​
​
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="25dp"
            android:layout_marginTop="10dp"
            android:orientation="horizontal">
​
            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginLeft="20dp"
                android:layout_weight="1"
                android:text="鼎世华府1号8单元801业主提报钥匙借用申请"
                android:textSize="14dp"
                android:textStyle="bold" />
​
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_marginRight="10dp"
                android:background="@mipmap/right" />
​
        </LinearLayout>
​
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:layout_marginTop="5dp">
​
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="20dp"
                android:text="3000"
                android:textColor="#ff0000"
                android:textSize="25dp"
                android:textStyle="bold" />
​
            <TextView
                android:layout_width="match_parent"
                android:layout_height="30dp"
                android:text=" 条"
                android:textSize="18dp"
                android:textStyle="bold" />
        </LinearLayout>
​
       </LinearLayout>
​
    </LinearLayout>

效果图如下：

 

上图显示两条代办，只需要代办重复两次即可。

3.4：设计底部Tab按钮：底部的Tab按钮和ScrollView组件里面的内容是并行的，所以我们只需要在ScrollView追加一个LinearLayout线性父布局，它们两个之间呈垂直排列，然后这个LinearLayout线性父布局里面镶嵌这四个RelativeLayout布局，分别表示首页，验房，设计，设置。

代码如下：

<LinearLayout
    android:weightSum="4"
    android:layout_width="match_parent"
    android:background="#C0C0C0"
    android:gravity="bottom"
    android:layout_height="80dp">
​
    <RelativeLayout
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="match_parent">
​
        <ImageView
            android:id="@+id/img"
            android:layout_marginTop="15dp"
            android:layout_centerHorizontal="true"
            android:background="@mipmap/test_icon3"
            android:layout_width="30dp"
            android:layout_height="30dp"/>
        <TextView
            android:layout_marginTop="5dp"
            android:gravity="center"
            android:layout_below="@+id/img"
            android:layout_centerHorizontal="true"
            android:text="首页"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
    </RelativeLayout>
​
    <RelativeLayout
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="match_parent">
​
        <ImageView
            android:id="@+id/x"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="15dp"
            android:background="@mipmap/x" />
        <TextView
            android:layout_marginTop="5dp"
            android:gravity="center"
            android:layout_below="@+id/x"
            android:layout_centerHorizontal="true"
            android:text="验房"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
​
    </RelativeLayout>
​
    <RelativeLayout
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="match_parent">
​
        <ImageView
            android:id="@+id/y"
            android:layout_marginTop="15dp"
            android:layout_centerHorizontal="true"
            android:background="@mipmap/y"
            android:layout_width="30dp"
            android:layout_height="30dp"/>
        <TextView
            android:layout_marginTop="5dp"
            android:gravity="center"
            android:layout_below="@+id/y"
            android:layout_centerHorizontal="true"
            android:text="统计"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
​
    </RelativeLayout>
​
    <RelativeLayout
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="match_parent">
​
        <ImageView
            android:id="@+id/z"
            android:layout_marginTop="15dp"
            android:layout_centerHorizontal="true"
            android:background="@mipmap/z"
            android:layout_width="30dp"
            android:layout_height="30dp"/>
        <TextView
            android:layout_marginTop="5dp"
            android:gravity="center"
            android:layout_below="@+id/z"
            android:layout_centerHorizontal="true"
            android:text="设置"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
​
    </RelativeLayout>
​
</LinearLayout>

效果图如下：

 

三、程序运行结果

 

四、问题总结与体会

1.在设置代办的详细内容时，右箭头不能准确与右边界保持一定的距离？

在这里我们首先需要把箭头前面的内容权重改为1，然后宽度改为0dp，最后为该箭头加上一个右间距等于10dp即可。

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="25dp"
    android:layout_marginTop="10dp"
    android:orientation="horizontal">
​
    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"//内容的左间距
        android:layout_weight="1"//权重
        android:layout_gravity="center_vertical"
        android:text="海尔公司还有8套房需要检查"
        android:textSize="14dp"
        android:textStyle="bold" />
​
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="10dp"//箭头的右间距
        android:layout_gravity="center_vertical"
        android:background="@mipmap/right" />
​
</LinearLayout>

2.最后显示底部按钮的时候，发现底部按钮不在页面之内？

这是因为我们需要把这部分放在ScrollView之外，表示与它垂直排列，之前一直都是放在ScrollView组件里面