仿oschina 主界面的实现（二） -------Toolbar + DrawerLayout

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">





側栏參考 http://blog.csdn.net/u012938203/article/details/47439281

ListView http://blog.csdn.net/u012938203/article/details/47448333





1.加入actionbar   custom_toolbar.xml

<?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-auto"
    android:id="@+id/my_awesome_toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:minHeight="?

attr/actionBarSize"
    android:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:theme="@style/ThemeOverlay.AppCompat.ActionBar">
</android.support.v7.widget.Toolbar>

2.改动主题风格  styles.xml

<resources>

    <!--
        Base application theme, dependent on API level. This theme is replaced
        by AppBaseTheme from res/values-vXX/styles.xml on newer devices.
    -->
    <style name="AppBaseTheme" parent="android:Theme.Light">
        <!--
            Theme customizations available in newer API levels can go in
            res/values-vXX/styles.xml, while customizations related to
            backward-compatibility can go here.
        -->
    </style>

    <!-- Application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!--状态栏颜色-->
        <item name="colorPrimaryDark">@color/Indigo_colorPrimaryDark</item>
        <!--Toolbar颜色-->
        <item name="colorPrimary">@color/Indigo_colorPrimary</item>
        <!--返回键样式-->
        <item name="drawerArrowStyle">@style/AppTheme.DrawerArrowToggle</item>
    </style>
    <style name="AppTheme.DrawerArrowToggle" parent="Base.Widget.AppCompat.DrawerArrowToggle">
        <item name="color">@android:color/white</item>
    </style>

</resources>

主界面代码MainActivity

package com.skyfin.oschina;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;

import android.R.string;
import android.app.Activity;
import android.graphics.Color;
import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentTabHost;
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.util.Log;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.SimpleAdapter;
import android.widget.TabHost.OnTabChangeListener;
import android.widget.Toast;
import android.widget.TabHost.TabSpec;
import android.widget.TextView;
import android.widget.TabHost.TabContentFactory;

public class MainActivity extends ActionBarActivity {

	//工具条
	private Toolbar mtoolbar;
	//側滑主框架
	private DrawerLayout mDrawerLayout;
	//监听toolbar上button
	private ActionBarDrawerToggle mDrawerToggle;
	//左側側滑的listview
	private ListView lvLeftMenu;
	//listview 的title名字
	private String[] ListMunuItemArray = {"技术问答","开源软件","博客区","Gitclient"};
	//listview的图片资源
	private int[] ListMenuImageArray = {R.drawable.drawer_menu_icon_quest_nor,R.drawable.drawer_menu_icon_opensoft_nor
	        ,R.drawable.drawer_menu_icon_blog_nor,R.drawable.drawer_menu_icon_gitapp_nor};
	//listview的适配容器
	ArrayList<Map<String,Object>> mData= new ArrayList<Map<String,Object>>();
	private ArrayAdapter arrayAdapter;
	//切换动画
	private AnimationDrawable mAnimationDrawable;
	String old_tag;
	//tab框架的实例
	private MyFragmentTabHost mTabHost;

	private LayoutInflater layoutInflater;

	//中间的加入button
	private View fragmentQuickoption;
	//tab 框架的资源
	private Class fragmentArray[] = { FragmentNews.class, FragmentTweet.class,
			FragmentQuickoption.class, FragmentExplore.class, FragmentMe.class };
	//tab 的资源
	private int mImageArray[] = { R.drawable.main_tab_news,
			R.drawable.main_tab_tweet, R.drawable.main_tab_quickoption,
			R.drawable.main_tab_explore, R.drawable.main_tab_me };

	private String mTextArray[] = { "综合", "动弹", "加入", "发现", "我" };

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		initView();
		findViews();
	       //京东RunningMan动画效果，和本次Toolbar无关
        //mAnimationDrawable = (AnimationDrawable) ivRunningMan.getBackground();
        //mAnimationDrawable.start();
        mtoolbar.setTitle("Toolbar");//设置Toolbar标题
        mtoolbar.setTitleTextColor(Color.parseColor("#ffffff")); //设置标题颜色
        setSupportActionBar(mtoolbar);
        getSupportActionBar().setHomeButtonEnabled(true); //设置返回键可用
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        //创建返回键，并实现打开关/闭监听
        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mtoolbar, R.string.open, R.string.close) {
            @Override
            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);
                //mAnimationDrawable.stop();
            }
            @Override
            public void onDrawerClosed(View drawerView) {
                super.onDrawerClosed(drawerView);
                //mAnimationDrawable.start();
            }
        };
        mDrawerToggle.syncState();
        mDrawerLayout.setDrawerListener(mDrawerToggle);

        int lengh = ListMunuItemArray.length;
        for(int i =0; i < lengh; i++) {
            Map<String,Object> item = new HashMap<String,Object>();
            item.put("image", ListMenuImageArray[i]);
            item.put("title", ListMunuItemArray[i]);
            mData.add(item);
        }
        SimpleAdapter adapter = new SimpleAdapter(this,mData,R.layout.menu_item,
                new String[]{"image","title"},new int[]{R.id.menu_image,R.id.menu_title});     

        //设置菜单列表
        lvLeftMenu.setAdapter(adapter);
        //側滑菜单的监听
        lvLeftMenu.setOnItemClickListener(new OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?

> adapterView, View view, int position,
                long id) {
            //Toast.makeText(getApplicationContext(),position, Toast.LENGTH_SHORT).show();
            }
        });
	}

	private void initView() {

		// 实例化布局对象
		layoutInflater = LayoutInflater.from(this);

		// 实例化TabHost对象。得到TabHost
		mTabHost = (MyFragmentTabHost) findViewById(android.R.id.tabhost);
		mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);

		// 得到fragment的个数
		int count = fragmentArray.length;

		for (int i = 0; i < count; i++) {
			// View indicator =
			// LayoutInflater.from(getApplicationContext()).inflate(R.layout.tab_item_btn_view,
			// null);
			// 为每个Tabbutton设置图标、文字和内容
			TabSpec tabSpec = mTabHost.newTabSpec(mTextArray[i]).setIndicator(
					getTabItemView(i));
			// 将Tabbutton加入进Tab选项卡中
			if (i == 2) {
				//设置中间的加入button不可用
				mTabHost.setNoTabChangedTag(mTextArray[i]);
			}
			mTabHost.addTab(tabSpec, fragmentArray[i], null);
			// 设置Tabbutton的背景
			mTabHost.getTabWidget().getChildAt(i)
					.setBackgroundResource(R.color.Fragment_tab_bg);
			// 去掉竖线
			mTabHost.getTabWidget().setDividerDrawable(null);
		}
		// 设置button的监听
		mTabHost.setOnTabChangedListener(new OnTabChangedListener());

	}
    private void findViews() {
    	mtoolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
        mDrawerLayout = (DrawerLayout) findViewById(R.id.dl_left);
        lvLeftMenu = (ListView) findViewById(R.id.lv_left_menu);
    }

	/**
	 * button的监听的类
	 *
	 * @author Skyfin
	 *
	 */
	class OnTabChangedListener implements OnTabChangeListener {

		@Override
		public void onTabChanged(String tabId) {
			// TODO Auto-generated method stub
			// Toast.makeText(getApplication(),
			// tabId,Toast.LENGTH_SHORT).show();
			if (old_tag != tabId) {
				Toast.makeText(getApplicationContext(), tabId,
						Toast.LENGTH_SHORT).show();
			} else {
				Toast.makeText(getApplicationContext(), "加入",
						Toast.LENGTH_SHORT).show();
			}
			old_tag = tabId;

		}

	}

	/**
	 * 给Tabbutton设置图标和文字
	 */
	private View getTabItemView(int index) {
		View view = layoutInflater.inflate(R.layout.tab_item_view, null);

		if (index != 2) {
			ImageView imageView = (ImageView) view.findViewById(R.id.imageview);
			imageView.setImageResource(mImageArray[index]);

			TextView textView = (TextView) view.findViewById(R.id.textview);
			textView.setText(mTextArray[index]);
		} else {
			view = layoutInflater.inflate(R.layout.tab_item_btn_view, null);
			ImageView imageView = (ImageView) view.findViewById(R.id.imageview);
			imageView.setImageResource(mImageArray[index]);
		}
		return view;
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
		// Handle action bar item clicks here. The action bar will
		// automatically handle clicks on the Home/Up button, so long
		// as you specify a parent activity in AndroidManifest.xml.
		int id = item.getItemId();
		if (id == R.id.action_settings) {
			return true;
		}
		return super.onOptionsItemSelected(item);
	}
}

dome 下载：http://pan.baidu.com/s/1sjEAmbb