APP门户界面设计（移动开发作业一）

---

一、任务

用AS实现简单的微信界面

二、步骤

1.新建项目

新建Empty Activity，下一步


点击Finish，一个空白项目就建好了

2.开始操作

右键单击新建layout
包括bottom和top，首先建这两个

3.bottom

bottom布局如下


属性可以在右边框中设置，也可以在代码中添加
部分属性如下图所示




其余属性设置类推

对于图片的添加，可以在阿里巴巴矢量图库下载之后，先添加到drawable，再在属性栏中添加到布局中。
如果图片添加到drawable报错，可以先把图片放到桌面上再尝试。

bottom对应代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="100dp"
    android:layout_weight="1"
    android:layout_gravity="bottom"
    android:background="#AAA8A8">

    <LinearLayout
        android:id="@+id/LinearLayout_weixin"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="match_parent"
            android:layout_height="70dp"
            android:src="@drawable/message"
            app:srcCompat="@drawable/message" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="微信"
            android:textColor="@color/black" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/LinearLayout_book"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="match_parent"
            android:layout_height="70dp"
            android:src="@drawable/book"
            app:srcCompat="@drawable/book" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="通讯录"
            android:textColor="@color/black" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/LinearLayout_find"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="match_parent"
            android:layout_height="70dp"
            android:src="@drawable/find"
            app:srcCompat="@drawable/find" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="发现"
            android:textColor="@color/black" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/LinearLayout_my"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView4"
            android:layout_width="match_parent"
            android:layout_height="70dp"
            android:src="@drawable/my"
            app:srcCompat="@drawable/my" />

        <TextView
            android:id="@+id/textView4"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="我"
            android:textColor="@color/black" />
    </LinearLayout>
</LinearLayout>

对于后续运行图片不能显示的问题
可以把代码中的图像来源改为

android:src="@drawable/message"

4.top

布局如下

属性如下

top对应代码如下：

<?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="110dp">

    <TextView
        android:id="@+id/textView"
        android:layout_width