模仿知乎Android APP,使用ToolBar+DrawerLayout+ViewPager

首先,需要使用ToolBar就需要有android.support.v7包,关于他的一些问题,大家可以看我之前的blog:关于V7的的一些问题和解决方法。

主要是需要下载到V7包,然后添加到他的class path去,这样才可以支持ToolBar的一些style,然后还需要V7的JAR包,大家把他放在lib目录底下,build path就可以了。

demo的大概框架:

开始之前,我们了解一些关于ToolBar的一些知识,他是相当于ActionBar的第二代,在新的谷歌设计规范中提倡大家使用,然后废话不多说。

使用ToolBar主要是使用到几个类:首先需要继承V7包下的ActionBarActivity,还有ActionBarDrawerToggle,以及Toolbar,V4包下的DrawerLayout。然后下面是主要的分析:

我们使用ToolBar需要定义一个Toolbar的布局文件,他的定义如下:

<?xml version="1.0" encoding="utf-8"?><android.support.v7.widget.Toolbar xmlns:android=""xmlns:app=""android:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="?attr/colorPrimary"android:minHeight="?attr/actionBarSize"app:popupTheme="@style/ThemeOverlay.AppCompat.Light"app:theme="@style/ThemeOverlay.AppCompat.ActionBar" ></android.support.v7.widget.Toolbar>他的theme主题就是类似于知乎的点击之后有一个酷酷的旋转,然后显示出菜单项。

然后我们还需要定义一个DrawerLayout的布局文件,他是和ToolBar一起使用的,我自己的尝试是不能再DrawerLayout的布局文件中使用include,所以可能比较臃肿,他是包含了左侧菜单,以及内容界面,我的内容界面使用的是VIewPager实现。代码如下:

<LinearLayout xmlns:android=""xmlns:tools=""android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"tools:context="com.example.toolbar.MainActivity" ><!– 引入toolbar –><include layout="@layout/toolbar" /><!– 引入DrawerLayout –><android.support.v4.widget.DrawerLayoutandroid:id="@+id/drawer"android:layout_width="match_parent"android:layout_height="match_parent" ><!– 内容界面 –><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical" ><LinearLayoutandroid:layout_width="match_parent"android:layout_height="40dp"android:background="?attr/colorPrimary"android:gravity="center_horizontal"android:orientation="horizontal" ><TextViewandroid:id="@+id/text_page_00"android:layout_width="wrap_content"android:layout_height="match_parent"android:layout_gravity="center_horizontal|bottom"android:layout_marginRight="25dp"android:layout_marginTop="7dp"android:text="粤剧欣赏"android:textColor="#ffffff"android:textSize="17sp"android:textStyle="bold" /><TextViewandroid:id="@+id/text_page_01"android:layout_width="wrap_content"android:layout_height="match_parent"android:layout_gravity="center_horizontal|bottom"android:layout_marginLeft="25dp"android:layout_marginTop="7dp"android:text="粤剧新闻"android:textColor="#c7cbd6"android:textSize="17sp"android:textStyle="bold" /></LinearLayout><android.support.v4.view.ViewPagerandroid:id="@+id/id_pageAdapter"android:layout_width="match_parent"android:layout_height="match_parent" ></android.support.v4.view.ViewPager></LinearLayout><!– 侧滑菜单内容 –><LinearLayoutandroid:id="@+id/drawer_view"android:layout_width="wrap_content"android:layout_height="match_parent"android:layout_gravity="start"android:background="#33cc99"android:focusable="true"android:orientation="vertical" ><TextViewandroid:id="@+id/id_textView01_Menu"android:layout_width="200dp"android:layout_height="wrap_content"android:layout_marginBottom="30dp"android:layout_marginLeft="5dp"android:focusable="true"android:text="actioin one"android:textColor="#000000"android:textSize="20sp" /><TextViewandroid:layout_width="200dp"android:layout_height="wrap_content"android:layout_marginBottom="30dp"android:layout_marginLeft="5dp"android:focusable="true"android:focusableInTouchMode="true"android:text="action two"android:textColor="#000000"android:textSize="20sp" /><TextViewandroid:layout_width="200dp"android:layout_height="wrap_content"android:layout_marginLeft="5dp"android:focusable="true"android:text="action three"android:textColor="#000000"android:textSize="20sp" /></LinearLayout></android.support.v4.widget.DrawerLayout></LinearLayout>然后,我在首页是显示两个Viewpager,他们的布局文件类似,这里贴出一个<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android=""android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"android:orientation="vertical" ><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="first tab"android:textSize="40sp"android:textStyle="bold"android:layout_gravity="center" /></LinearLayout>然后,关于使用toolbar的很重要的一环,就是我们需要取消显示ActionBar,最直接的方法就是在我们的清单文件的主题的定义中是使用NoActionBar主题。充满了恐惧的声音,一种不确定的归宿的流动。

模仿知乎Android APP,使用ToolBar+DrawerLayout+ViewPager

相关文章:

你感兴趣的文章:

标签云: