Android小例子--实现微信界面

大家都用过微信，相信都对那种页面在手指滑动间自由切换的效果十分惊奇吧，这篇博客就介绍如何用 ViewPager + Fragment 来实现自由切换页面。ViewPager 和 Fragment 的基本介绍我在以前的博客中都有介绍，有兴趣的朋友可以去看看。

1、TitleBar的实现

一般都是认为从上而下，所以首先是来实现 TitleBar。我这里是使用 ToolBar 来实现，首先是布局文件中 ToolBar 的引用：

<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="match_parent"
    android:orientation="vertical">

    <android.support.v7.widget.Toolbar
        app:subtitleTextColor="?android:attr/textColorPrimary"
        android:id="@+id/id_toolbar"
        android:background="?attr/colorPrimary"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <TextView
            android:text="微信"
            android:textSize="20sp"
            android:textColor="?android:attr/textColorPrimary"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </android.support.v7.widget.Toolbar>

</LinearLayout>

还有对样式的修改，style.xml：

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
        <item name="android:windowBackground">@color/windowBackground</item>
        <item name="colorPrimary">#413d3d</item>
        <item name="colorPrimaryDark">#000000</item>
    </style>

</resources>

在 Menu 中为 ToolBar 增加两个 item，menu_main.xml：

<menu 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"
    tools:context=".MainActivity">

    <item android:id="@+id/tool_search"
        app:actionViewClass="android.support.v7.widget.SearchView"
        android:icon="@mipmap/toolbar_search_icon"
        app:showAsAction="ifRoom|collapseActionView"
        android:title="search" />

    <item android:id="@+id/tool_overflow"
        android:icon="@mipmap/toolbar_add_icon"
        app:showAsAction="always"
        android:title="overflow" />

</menu>

在这里我用 PopUpWindow 替代系统提供的弹出框，PopUpWindow 的布局文件 action_overflow_popupwindow.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#2a2c2e"
    android:orientation="vertical"
    android:padding="10dp">

    <LinearLayout
        android:paddingBottom="10dp"
        android:id="@+id/ll_item1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/groupchat" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="18dp"
            android:layout_marginRight="50dp"
            android:text="发起群聊"
            android:textColor="#ffffff"
            android:textSize="18sp" />
    </LinearLayout>

    <LinearLayout
        android:paddingBottom="10dp"
        android:id="@+id/ll_item2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/menu_add_icon" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="18dp"
            android:layout_marginRight="50dp"
            android:text="添加朋友"
            android:textColor="#ffffff"
            android:textSize="18sp" />
    </LinearLayout>

    <LinearLayout
        android:paddingBottom="10dp"
        android:id="@+id/ll_item3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content&