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

標籤：toolbar   drawerlayout   viewpager   

首先，需要使用ToolBar就需要有android.support.v7包，關於他的一些問題，大家可以看我之前的blog：關於V7的的一些問題和解決方案。

主要是需要下載到V7包，然後添加到他的class  path去，這樣才可以支援ToolBar的一些style，然後還需要V7的JAR包，大家把他放在lib目錄底下，build path就可以了。

demo的大概架構：

。

開始之前，我們瞭解一些關於ToolBar的一些知識，他是相當於ActionBar的第二代，在新的Google設計規範中提倡大家使用，然後廢話不多說。

使用ToolBar主要是使用到幾個類：首先需要繼承V7包下的ActionBarActivity，還有ActionBarDrawerToggle，以及Toolbar，V4包下的DrawerLayout。然後下面是主要的分析：

我們使用ToolBar需要定義一個Toolbar的布局檔案，他的定義如下：

<?xml version="1.0" encoding="utf-8"?><android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res/com.example.toolbar"    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="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/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.DrawerLayout        android:id="@+id/drawer"        android:layout_width="match_parent"        android:layout_height="match_parent" >        <!-- 內容介面 -->        <LinearLayout            android:layout_width="match_parent"            android:layout_height="match_parent"            android:orientation="vertical" >            <LinearLayout                android:layout_width="match_parent"                android:layout_height="40dp"                android:background="?attr/colorPrimary"                android:gravity="center_horizontal"                android:orientation="horizontal" >                <TextView                    android: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" />                <TextView                    android: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.ViewPager                android:id="@+id/id_pageAdapter"                android:layout_width="match_parent"                android:layout_height="match_parent" >            </android.support.v4.view.ViewPager>        </LinearLayout>        <!-- 側滑菜單內容 -->        <LinearLayout            android: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" >            <TextView                android: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" />            <TextView                android: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" />            <TextView                android: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="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:gravity="center"    android:orientation="vertical" >    <TextView        android: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主題。

所以我們定義的style檔案內容是：

<resources xmlns:android="http://schemas.android.com/apk/res/android">    <!-- 他是作為該app的主題樣式，使用的是NoActionBar -->    <style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">        <!-- toolbar（actionbar）顏色 -->        <item name="colorPrimary">#4876FF</item>        <!-- 狀態列顏色 -->        <item name="colorPrimaryDark">#3A5FCD</item>        <!-- 視窗的背景顏色 -->        <item name="android:windowBackground">@android:color/white</item>    </style></resources>

注意：他的布局的地方只有兩個

一在 res/values/styles.xml中

二在 /res/values-v21/styles.xml中

而且我們的targetSdkVersion也應該設定為21或以上，這樣才能保證我們能正常使用Toolbar

之後是JAVA的主代碼：先貼出代碼：

import java.util.ArrayList;import java.util.List;import android.content.Context;import android.content.Intent;import android.os.Bundle;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import android.support.v4.widget.DrawerLayout;import android.support.v7.app.ActionBarActivity;import android.support.v7.app.ActionBarDrawerToggle;import android.support.v7.widget.Toolbar;import android.view.LayoutInflater;import android.view.View;import android.view.View.OnClickListener;import android.view.ViewGroup;import android.widget.TextView;/** * @author Administrator * */@SuppressWarnings("deprecation")public class MainActivity extends ActionBarActivity implements OnClickListener{private DrawerLayout mDrawerLayout;private ActionBarDrawerToggle mDrawerToggle;private Toolbar mToolbar;private List<View> data;private ViewPager page;private TextView text_page_00;private TextView text_page_01;private TextView id_textView01_Menu;@Overrideprotected void onCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initViews();}private void initViews(){mToolbar = (Toolbar) findViewById(R.id.toolbar);mToolbar.setTitle("嶺南雅韻");setSupportActionBar(mToolbar);getSupportActionBar().setDisplayHomeAsUpEnabled(true);/* findView */mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer);mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.drawer_open,    R.string.drawer_close);mDrawerToggle.syncState();mDrawerLayout.setDrawerListener(mDrawerToggle);data = new ArrayList<View>();page = (ViewPager) this.findViewById(R.id.id_pageAdapter);page.setOnPageChangeListener(new MyOnPageChangeListener());//監聽滑動事件LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);View view_00 = inflater.inflate(R.layout.fragment_01, null);View view_01 = inflater.inflate(R.layout.fragment_02, null);data.add(view_00);data.add(view_01);//添加兩個viewtext_page_00 = (TextView) this.findViewById(R.id.text_page_00);text_page_01 = (TextView) this.findViewById(R.id.text_page_01);text_page_00.setOnClickListener(this);text_page_01.setOnClickListener(this);id_textView01_Menu = (TextView) this.findViewById(R.id.id_textView01_Menu);id_textView01_Menu.setOnClickListener(this);//初始化適配器PagerAdapter adapter = new PagerAdapter(){@Overridepublic void destroyItem(ViewGroup container, int position, Object object){container.removeView(data.get(position));}@Overridepublic Object instantiateItem(ViewGroup container, int position){View view = data.get(position);container.addView(view);return view;}@Overridepublic boolean isViewFromObject(View arg0, Object arg1){return arg0 == arg1;}@Overridepublic int getCount(){return data.size();}};page.setAdapter(adapter);page.setCurrentItem(0);}@Overridepublic void onClick(View v){reSetTextColor();switch (v.getId()){case R.id.text_page_00://按下粵劇欣賞之後，設定ViewPager為第一頁，他的字型為白色，粵劇新聞字型為灰色page.setCurrentItem(0);text_page_00.setTextColor(getResources().getColor(R.color.text1));break;case R.id.text_page_01://按下粵劇新聞之後，設定ViewPager為第二頁，他的字型為白色，粵劇欣賞字型為灰色page.setCurrentItem(1);text_page_01.setTextColor(getResources().getColor(R.color.text1));break;case R.id.id_textView01_Menu://是用於測試左側菜單的功能，他會啟動一個新的ActivityIntent intent = new Intent(this, OtherActivity.class);startActivity(intent);this.finish();break;}}/** * 重設字型顏色 */private void reSetTextColor(){text_page_00.setTextColor(getResources().getColor(R.color.text2));text_page_01.setTextColor(getResources().getColor(R.color.text2));}/** * 這個類似用於監聽ViewPager發生滑動的時候使用 * @author Administrator * */private class MyOnPageChangeListener implements OnPageChangeListener{@Overridepublic void onPageScrollStateChanged(int arg0){}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2){}//當滑動停止的時候，我們需要設定字型的顏色@Overridepublic void onPageSelected(int arg0){reSetTextColor();if (arg0 == 0){text_page_00.setTextColor(getResources().getColor(R.color.text1));} else{text_page_01.setTextColor(getResources().getColor(R.color.text1));}}}}

首先他的首頁顯示ToolBar，然後會包含兩個textView，點擊可以切換（ViewPager）,，然後，點擊左上方的菜單會顯示一系列的功能表項目，點擊第一個啟動一個新的Activity(我這裡只設定了第一個功能表項目作為測試，其他沒有，介面也沒有最佳化)。

在這個MainActivity中，我們需要做的事情就是當viewpager滑動的時候，改變字型顏色，點擊字型的時候可以切換viewpager，他自己的顏色也會隨之改變。

啟動的OtherActivity

import android.os.Bundle;import android.support.v7.app.ActionBarActivity;import android.widget.TextView;@SuppressWarnings("deprecation")public class OtherActivity extends ActionBarActivity{@Overrideprotected void onCreate(Bundle savedInstanceState){// TODO Auto-generated method stubsuper.onCreate(savedInstanceState);TextView tv = new TextView(this);tv.setText("liweijie");setContentView(tv);}}

片：第一張是初次開啟，第二代是點擊粵劇新聞或者是望右拖動viewpager

參考blog：http://blog.csdn.net/jdsjlzx/article/details/41441083和http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0303/2522.html

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