模仿知乎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="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;

	@Override
	protected 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);//添加两个view

		text_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()
		{

			@Override
			public void destroyItem(ViewGroup container, int position, Object object)
			{
				container.removeView(data.get(position));
			}

			@Override
			public Object instantiateItem(ViewGroup container, int position)
			{
				View view = data.get(position);
				container.addView(view);
				return view;
			}

			@Override
			public boolean isViewFromObject(View arg0, Object arg1)
			{
				return arg0 == arg1;
			}

			@Override
			public int getCount()
			{
				return data.size();
			}
		};

		page.setAdapter(adapter);
		page.setCurrentItem(0);
	}

	@Override
	public 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://是用于测试左侧菜单的功能，他会启动一个新的Activity
			Intent 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
	{

		@Override
		public void onPageScrollStateChanged(int arg0)
		{

		}

		@Override
		public void onPageScrolled(int arg0, float arg1, int arg2)
		{

		}

		//当滑动停止的时候，我们需要设置字体的颜色
		@Override
		public 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
{
	@Override
	protected void onCreate(Bundle savedInstanceState)
	{
		// TODO Auto-generated method stub
		super.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

时间： 2024-10-23 14:15:45

模仿知乎Android APP，使用ToolBar+DrawerLayout+ViewPager的相关文章

模仿知乎Android APP二

这一次本人分享的是模仿知乎Android APP这个类型的,还有网易新闻等,他们都菜单界面等挺相似的. 我使用的是Material Design中提倡的app bar.使用ToolBar+DrawerLayout+Fragment实现,大家也可以在Fragment里面嵌套ViewPager这样使得Fragment包含一个ViewPager,ViewPager包含更多的Faragment去显示内容. 这个Demo的大概功能叙述: 使用ToolBar,然后会有一个左侧菜单,使用的是Fragment来

模仿知乎Android APP三

这是接着上一篇blog的,然后,做出的改变是在点击了LeftMenuFragment之后,显示了FirstFragment,现在,我们需要在FirstFragment中使用ViewPager + Fragment的形式来使得FirstFragment去显示更多的内容. 实现的大致效如下: 主要思路就是在点击进入了FirstFragment为内容界面的时候,我们为FirstFragment添加一个布局文件,里面包含了Fragment + ViewPager.使用FragmentPagerAdapt

android 5.X Toolbar+DrawerLayout实现抽屉菜单

前言 ?android5.X新增的一个控件Toolbar,这个控件比ActionBar更加自由,可控,因为曾经的ActionBar的灵活性比較差,所以google逐渐使用Toolbar替代ActionBar,所以Toolbar也能够说是超级ActionBar. 这篇文章不具体介绍ToolBar的使用(定制),主要是介绍Toolbar使用的一个样例.即Toolbar结合DrawerLayout实现抽屉菜单. 使用这个两个控件须要引入对应的库依赖: dependencies { compile fi

Android之官方导航栏之Toolbar(Toolbar+DrawerLayout+ViewPager+PagerSlidingTabStrip)

通过前几篇文章,我们对Android的导航栏有了一定的了解认识,本次文章将对Toolbar进行综合应用,主要结合DrawerLayout.ViewPager.PagerSlidingTabStrip一起使用. PagerSlidingTabStrip是github上一个开源库,地址为:https://github.com/astuetz/PagerSlidingTabStrip DrawerLayout之前有过介绍,在此不在过多介绍. 先看布局文件: <RelativeLayout xmlns:

优化Android App性能？十大技巧必知

无论锤子还是茄子手机的不断冒出,Android系统的手机市场占有率目前来说还是最大的,因此基于Android开发的App数量也是很庞大的.那么,如何能开发出更高性能的Android App?相信是软件开发公司以及广大程序员们头疼的一大难题.今天,就给大家提供几个提高Android App性能的技巧. 高效地利用线程 1.在后台取消一些线程中的动作 我们知道App运行过程中所有的操作都默认在主线程(UI线程)中进行的,这样App的响应速度就会受到影响.会导致程序陷入卡顿.死掉甚至会发生系统错误.

优化Android App性能？十大技巧必知！

无论锤子还是茄子手机的不断冒出,Android系统的手机市场占有率目前来说还是最大的,因此基于Android开发的App数量也是很庞大的.那么,如何能开发出更高性能的Android App?相信是软件开发公司以及广大程序员们头疼的一大难题.今天,就给大家提供几个提高Android App性能的技巧. 高效地利用线程 1.在后台取消一些线程中的动作 我们知道App运行过程中所有的操作都默认在主线程(UI线程)中进行的,这样App的响应速度就会受到影响.会导致程序陷入卡顿.死掉甚至会发生系统错误.

Android App 沉浸式状态栏解决方案

伴随着 Android 5.0 发布的 Material Design,让 Android 应用告别了以前的工程师审美,迎来了全新的界面,灵动的交互,也让越来越多的 App 开始遵从 material design 设计原则,不再是以前拿着iOS设计稿,做着Android开发.本文就其中的沉浸式状态栏这一特性,描述其兼容到4.4的实现,以及一些使用中的小细节. 前言 在4.4之前状态栏一直是黑色的,在4.4中带来了 windowTranslucentStatus 这一特性,因此可以实现给状态栏设

Toolbar+DrawerLayout高仿网易新闻客户端

首先看效果图,网易新闻客户端的特点是双向侧滑,并且左上角的图标会随着菜单的侧滑会有动画效果. 我们采用Toolbar和DrawerLayout实现双向侧滑以及actionbar 在菜单文件里先定义菜单 <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools=&q

Android Studio官方版DrawerLayout侧滑菜单解析

效果图如下 这是使用Android Studio新建的一个DrawerLayout项目跑出来后的效果(没有Android Studio的盆友赶紧去下载个吧). 生成后的代码有点混乱,稍微整理一下,那么先看布局文件 activity_main.xml: <?xml version="1.0" encoding="utf-8"?>   <android.support.v4.widget.DrawerLayout xmlns:android="