仿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
仿oschina 主界面的实现(二) -------Toolbar + DrawerLayout的更多相关文章
- Android ActionBar应用实战,高仿微信主界面的设计
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/26365683 经过前面两篇文章的学习,我想大家对ActionBar都已经有一个相对 ...
- Android应用经典主界面框架之二:仿网易新闻client、CSDN client (Fragment ViewPager)
另外一种主界面风格则是以网易新闻.凤凰新闻以及新推出的新浪博客(阅读版)为代表.使用ViewPager+Fragment,即ViewPager里适配器里放的不是一般的View.而是Fragment.所 ...
- Android利用ViewPager仿微信主界面-android学习之旅(78)
首先是介绍ViewPager这个控件 ,这个控件需要pagerAdapter作为容器来提供数据,同时pagerAdapter的数据源是View数组 效果图如下 部分代码如下,实现如下的方法 mPage ...
- 高仿美团主界面<一>
声明:本demo还未完好,正在持续更新中... 先上图吧: 这个小demo资源图片全是用青花瓷抠出来的,如今仅仅是完毕了 一部分. 会持续更行中. . .有兴趣的朋友能够关注我,我们一起coding, ...
- Android 之高仿微信主界面
源码下载: http://files.cnblogs.com/aibuli/WeChatSample.zip 主界面主要使用ActionBar来完成. 要实现这个效果,第一步当然是编辑menu目录 ...
- [deviceone开发]-仿微信主界面示例
一.简介 模仿微信主界面的4个页面,作为一个很常规应用的框架模板,值得参考.另外包括简单的菜单,其中搜索还支持语音录入,不过你需要增加飞讯的语音组件重新打包,才能看到效果 二.效果图 三.相关下载 h ...
- ViewPager学习之仿微信主界面
由于素材的原因,这里都是从网上找的图片,所以所谓的仿微信实际上最后成了下图这货.. .,点击变色也是自己用的windows自带绘图的颜料桶填充的空白. .. watermark/2/text/aHR0 ...
- 仿windows phone风格主界面
使用了ZAKER到最新版本,其主界面采用windows phone的风格,感觉还蛮好看的,挺喜欢的,就模仿写了一下,实现到界面截图如下: 第一版面: 第二版面: 在实现了它到九宫格菜单,还实现了背景图 ...
- (NO.00004)iOS实现打砖块游戏(二):实现游戏主界面动画
大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请告诉我,如果觉得不错请多多支持点赞.谢谢! hopy ;) 一个内容不错的游戏也要一个好的包装.玩家进入游戏时第一眼看到的是 ...
随机推荐
- 洛谷P1720 月落乌啼算钱
目背景 (本道题目木有以藏歌曲……不用猜了……) <爱与愁的故事第一弹·heartache>最终章. 吃完pizza,月落乌啼知道超出自己的预算了.为了不在爱与愁大神面前献丑,只好还是硬着 ...
- JS原生方法被覆盖后的恢复办法
alert 被覆盖 今天装修博客园,调试了下JS代码发现 alert() 方法被官方覆盖了,查看源码得知 alert 的功能被替换成了 console.log. 恢复 var _frame = doc ...
- 南阳oj 士兵杀敌(二) 题目116 NYOJ 数据结构
/*士兵杀敌(二) 时间限制:1000 ms | 内存限制:65535 KB 难度:5 描写叙述 南将军手下有N个士兵.分别编号1到N.这些士兵的杀敌数都是已知的. 小工是南将军手下的军师, ...
- 将字符串使用md5加密
>>> import md5 >>> md5.md5('123').hexdigest() '202cb962ac59075b964b07152d234b70' & ...
- hdu 1233 还是畅通project (克鲁斯卡尔裸题)
还是畅通project Time Limit: 4000/2000 MS (Java/Others) M ...
- 有关cascade的结构体
/* internal cascade classifier */ typedef struct CvCascadeHaarClassifier { CV_INT_HAAR_CLASSIFIER_FI ...
- js13--对象、原型
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- code blocks常用快捷键
CodeBlocks常用操作快捷键 编辑部分: Ctrl + A:全选 Ctrl + C:复制 Ctrl + X: 剪切 Ctrl + V:粘贴 Ctrl + Z:撤销(后退一步) Ctrl + S: ...
- STM32介绍以及与通常ARM的区别
ARM是英国的芯片设计公司,其最成功的莫过于32位嵌入式CPU核----ARM系列,最常用的是ARM7和ARM9,ARM公司主要提供IP核,就是CPU的内核结构,只包括最核心的部分,并不是完整的处理器 ...
- 如何应对DDOS网络攻击
650) this.width=650;" border="0" alt="" src="http://img1.51cto.com/a ...