大家都用过微信,相信都对那种页面在手指滑动间自由切换的效果十分惊奇吧,这篇博客就介绍如何用 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&