安卓应用开发 MyWeChat（一）

项目gitee仓库

相应项目gitee地址

实现MyWeChat初步静态界面

要完成的初步静态界面如下图所示：

根据想要完成的效果将整个界面分为三部分：首部（top）、中部（fragment）、底部（bottom）。

项目中res/layout结构如上图所示（top.xml、bottom.xml以及4个对应页面的fragment.xml）。

静态界面首部（top）

首部需要实现的效果很简单，在LinearLayout中使用textView写上相应标题即可实现。以下为top.xml：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/black">

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:layout_weight="1"
        android:gravity="center"
        android:text="MyWeChat"
        android:textColor="@color/white"
        android:textSize="26sp" />
</LinearLayout>

静态界面底部（bottom）

底部需要实现的效果是4个tab（这里未将4个tab置于底部，于activity_main中进行相应操作），4个tab分别作为LinearLayout（vertical）放置相应的图标和文字，再将4个tab组合在外层的LinearLayout（horizontal）中，结构如下图所示。

以下为bottom.xml：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="80dp"
    android:gravity="center">

    <LinearLayout
        android:id="@+id/weixin"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@color/black"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            app:srcCompat="@drawable/barweixin" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:textColor="@color/white"
            android:text="微信"
            android:textSize="16sp" />
	</LinearLayout>

	//其余3个tab同理，注意id之间的区分，此处省略。
</LinearLayout>

静态界面中部（fragment）

以第一个页面（fragment_weixin）为例。

很简单的一个textView实现，不再赘述，以下为fragment_weixin.xml：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".weixinFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="这是微信页面"
        android:textSize="48sp" />

</LinearLayout>

综合整理静态界面

在完成top.xml、bottom.xml以及4个fragment.xml后可以着手开始编写activity_main.xml了。
按照我们的设想，引入top.xml和bottom.xml作为首部和底部，中间的FrameLayout为之后的4个fragment占位置。

以下为activity_main.xml：

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android