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

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
  3. xmlns:app="http://schemas.android.com/apk/res-auto"
  4. android:id="@+id/my_awesome_toolbar"
  5. android:layout_width="match_parent"
  6. android:layout_height="wrap_content"
  7. android:background="?attr/colorPrimary"
  8. android:minHeight="?
  9.  
  10. attr/actionBarSize"
  11. android:popupTheme="@style/ThemeOverlay.AppCompat.Light"
  12. app:theme="@style/ThemeOverlay.AppCompat.ActionBar">
  13. </android.support.v7.widget.Toolbar>

2.改动主题风格  styles.xml

  1. <resources>
  2.  
  3. <!--
  4. Base application theme, dependent on API level. This theme is replaced
  5. by AppBaseTheme from res/values-vXX/styles.xml on newer devices.
  6. -->
  7. <style name="AppBaseTheme" parent="android:Theme.Light">
  8. <!--
  9. Theme customizations available in newer API levels can go in
  10. res/values-vXX/styles.xml, while customizations related to
  11. backward-compatibility can go here.
  12. -->
  13. </style>
  14.  
  15. <!-- Application theme. -->
  16. <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
  17. <!--状态栏颜色-->
  18. <item name="colorPrimaryDark">@color/Indigo_colorPrimaryDark</item>
  19. <!--Toolbar颜色-->
  20. <item name="colorPrimary">@color/Indigo_colorPrimary</item>
  21. <!--返回键样式-->
  22. <item name="drawerArrowStyle">@style/AppTheme.DrawerArrowToggle</item>
  23. </style>
  24. <style name="AppTheme.DrawerArrowToggle" parent="Base.Widget.AppCompat.DrawerArrowToggle">
  25. <item name="color">@android:color/white</item>
  26. </style>
  27.  
  28. </resources>

主界面代码MainActivity

  1. package com.skyfin.oschina;
  2.  
  3. import java.util.ArrayList;
  4. import java.util.HashMap;
  5. import java.util.Map;
  6.  
  7. import android.R.string;
  8. import android.app.Activity;
  9. import android.graphics.Color;
  10. import android.graphics.drawable.AnimationDrawable;
  11. import android.os.Bundle;
  12. import android.support.v4.app.FragmentActivity;
  13. import android.support.v4.app.FragmentTabHost;
  14. import android.support.v4.widget.DrawerLayout;
  15. import android.support.v7.app.ActionBarActivity;
  16. import android.support.v7.app.ActionBarDrawerToggle;
  17. import android.support.v7.widget.Toolbar;
  18. import android.util.Log;
  19. import android.view.LayoutInflater;
  20. import android.view.Menu;
  21. import android.view.MenuItem;
  22. import android.view.View;
  23. import android.view.View.OnClickListener;
  24. import android.widget.AdapterView;
  25. import android.widget.AdapterView.OnItemClickListener;
  26. import android.widget.ArrayAdapter;
  27. import android.widget.ImageView;
  28. import android.widget.ListView;
  29. import android.widget.SimpleAdapter;
  30. import android.widget.TabHost.OnTabChangeListener;
  31. import android.widget.Toast;
  32. import android.widget.TabHost.TabSpec;
  33. import android.widget.TextView;
  34. import android.widget.TabHost.TabContentFactory;
  35.  
  36. public class MainActivity extends ActionBarActivity {
  37.  
  38. //工具条
  39. private Toolbar mtoolbar;
  40. //側滑主框架
  41. private DrawerLayout mDrawerLayout;
  42. //监听toolbar上button
  43. private ActionBarDrawerToggle mDrawerToggle;
  44. //左側側滑的listview
  45. private ListView lvLeftMenu;
  46. //listview 的title名字
  47. private String[] ListMunuItemArray = {"技术问答","开源软件","博客区","Gitclient"};
  48. //listview的图片资源
  49. private int[] ListMenuImageArray = {R.drawable.drawer_menu_icon_quest_nor,R.drawable.drawer_menu_icon_opensoft_nor
  50. ,R.drawable.drawer_menu_icon_blog_nor,R.drawable.drawer_menu_icon_gitapp_nor};
  51. //listview的适配容器
  52. ArrayList<Map<String,Object>> mData= new ArrayList<Map<String,Object>>();
  53. private ArrayAdapter arrayAdapter;
  54. //切换动画
  55. private AnimationDrawable mAnimationDrawable;
  56. String old_tag;
  57. //tab框架的实例
  58. private MyFragmentTabHost mTabHost;
  59.  
  60. private LayoutInflater layoutInflater;
  61.  
  62. //中间的加入button
  63. private View fragmentQuickoption;
  64. //tab 框架的资源
  65. private Class fragmentArray[] = { FragmentNews.class, FragmentTweet.class,
  66. FragmentQuickoption.class, FragmentExplore.class, FragmentMe.class };
  67. //tab 的资源
  68. private int mImageArray[] = { R.drawable.main_tab_news,
  69. R.drawable.main_tab_tweet, R.drawable.main_tab_quickoption,
  70. R.drawable.main_tab_explore, R.drawable.main_tab_me };
  71.  
  72. private String mTextArray[] = { "综合", "动弹", "加入", "发现", "我" };
  73.  
  74. @Override
  75. protected void onCreate(Bundle savedInstanceState) {
  76. super.onCreate(savedInstanceState);
  77. setContentView(R.layout.activity_main);
  78. initView();
  79. findViews();
  80. //京东RunningMan动画效果,和本次Toolbar无关
  81. //mAnimationDrawable = (AnimationDrawable) ivRunningMan.getBackground();
  82. //mAnimationDrawable.start();
  83. mtoolbar.setTitle("Toolbar");//设置Toolbar标题
  84. mtoolbar.setTitleTextColor(Color.parseColor("#ffffff")); //设置标题颜色
  85. setSupportActionBar(mtoolbar);
  86. getSupportActionBar().setHomeButtonEnabled(true); //设置返回键可用
  87. getSupportActionBar().setDisplayHomeAsUpEnabled(true);
  88. //创建返回键,并实现打开关/闭监听
  89. mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mtoolbar, R.string.open, R.string.close) {
  90. @Override
  91. public void onDrawerOpened(View drawerView) {
  92. super.onDrawerOpened(drawerView);
  93. //mAnimationDrawable.stop();
  94. }
  95. @Override
  96. public void onDrawerClosed(View drawerView) {
  97. super.onDrawerClosed(drawerView);
  98. //mAnimationDrawable.start();
  99. }
  100. };
  101. mDrawerToggle.syncState();
  102. mDrawerLayout.setDrawerListener(mDrawerToggle);
  103.  
  104. int lengh = ListMunuItemArray.length;
  105. for(int i =0; i < lengh; i++) {
  106. Map<String,Object> item = new HashMap<String,Object>();
  107. item.put("image", ListMenuImageArray[i]);
  108. item.put("title", ListMunuItemArray[i]);
  109. mData.add(item);
  110. }
  111. SimpleAdapter adapter = new SimpleAdapter(this,mData,R.layout.menu_item,
  112. new String[]{"image","title"},new int[]{R.id.menu_image,R.id.menu_title});
  113.  
  114. //设置菜单列表
  115. lvLeftMenu.setAdapter(adapter);
  116. //側滑菜单的监听
  117. lvLeftMenu.setOnItemClickListener(new OnItemClickListener() {
  118. @Override
  119. public void onItemClick(AdapterView<?
  120.  
  121. > adapterView, View view, int position,
  122. long id) {
  123. //Toast.makeText(getApplicationContext(),position, Toast.LENGTH_SHORT).show();
  124. }
  125. });
  126. }
  127.  
  128. private void initView() {
  129.  
  130. // 实例化布局对象
  131. layoutInflater = LayoutInflater.from(this);
  132.  
  133. // 实例化TabHost对象。得到TabHost
  134. mTabHost = (MyFragmentTabHost) findViewById(android.R.id.tabhost);
  135. mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);
  136.  
  137. // 得到fragment的个数
  138. int count = fragmentArray.length;
  139.  
  140. for (int i = 0; i < count; i++) {
  141. // View indicator =
  142. // LayoutInflater.from(getApplicationContext()).inflate(R.layout.tab_item_btn_view,
  143. // null);
  144. // 为每个Tabbutton设置图标、文字和内容
  145. TabSpec tabSpec = mTabHost.newTabSpec(mTextArray[i]).setIndicator(
  146. getTabItemView(i));
  147. // 将Tabbutton加入进Tab选项卡中
  148. if (i == 2) {
  149. //设置中间的加入button不可用
  150. mTabHost.setNoTabChangedTag(mTextArray[i]);
  151. }
  152. mTabHost.addTab(tabSpec, fragmentArray[i], null);
  153. // 设置Tabbutton的背景
  154. mTabHost.getTabWidget().getChildAt(i)
  155. .setBackgroundResource(R.color.Fragment_tab_bg);
  156. // 去掉竖线
  157. mTabHost.getTabWidget().setDividerDrawable(null);
  158. }
  159. // 设置button的监听
  160. mTabHost.setOnTabChangedListener(new OnTabChangedListener());
  161.  
  162. }
  163. private void findViews() {
  164. mtoolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
  165. mDrawerLayout = (DrawerLayout) findViewById(R.id.dl_left);
  166. lvLeftMenu = (ListView) findViewById(R.id.lv_left_menu);
  167. }
  168.  
  169. /**
  170. * button的监听的类
  171. *
  172. * @author Skyfin
  173. *
  174. */
  175. class OnTabChangedListener implements OnTabChangeListener {
  176.  
  177. @Override
  178. public void onTabChanged(String tabId) {
  179. // TODO Auto-generated method stub
  180. // Toast.makeText(getApplication(),
  181. // tabId,Toast.LENGTH_SHORT).show();
  182. if (old_tag != tabId) {
  183. Toast.makeText(getApplicationContext(), tabId,
  184. Toast.LENGTH_SHORT).show();
  185. } else {
  186. Toast.makeText(getApplicationContext(), "加入",
  187. Toast.LENGTH_SHORT).show();
  188. }
  189. old_tag = tabId;
  190.  
  191. }
  192.  
  193. }
  194.  
  195. /**
  196. * 给Tabbutton设置图标和文字
  197. */
  198. private View getTabItemView(int index) {
  199. View view = layoutInflater.inflate(R.layout.tab_item_view, null);
  200.  
  201. if (index != 2) {
  202. ImageView imageView = (ImageView) view.findViewById(R.id.imageview);
  203. imageView.setImageResource(mImageArray[index]);
  204.  
  205. TextView textView = (TextView) view.findViewById(R.id.textview);
  206. textView.setText(mTextArray[index]);
  207. } else {
  208. view = layoutInflater.inflate(R.layout.tab_item_btn_view, null);
  209. ImageView imageView = (ImageView) view.findViewById(R.id.imageview);
  210. imageView.setImageResource(mImageArray[index]);
  211. }
  212. return view;
  213. }
  214.  
  215. @Override
  216. public boolean onCreateOptionsMenu(Menu menu) {
  217. // Inflate the menu; this adds items to the action bar if it is present.
  218. getMenuInflater().inflate(R.menu.main, menu);
  219. return true;
  220. }
  221.  
  222. @Override
  223. public boolean onOptionsItemSelected(MenuItem item) {
  224. // Handle action bar item clicks here. The action bar will
  225. // automatically handle clicks on the Home/Up button, so long
  226. // as you specify a parent activity in AndroidManifest.xml.
  227. int id = item.getItemId();
  228. if (id == R.id.action_settings) {
  229. return true;
  230. }
  231. return super.onOptionsItemSelected(item);
  232. }
  233. }

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

仿oschina 主界面的实现(二) -------Toolbar + DrawerLayout的更多相关文章

  1. Android ActionBar应用实战,高仿微信主界面的设计

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/26365683 经过前面两篇文章的学习,我想大家对ActionBar都已经有一个相对 ...

  2. Android应用经典主界面框架之二:仿网易新闻client、CSDN client (Fragment ViewPager)

    另外一种主界面风格则是以网易新闻.凤凰新闻以及新推出的新浪博客(阅读版)为代表.使用ViewPager+Fragment,即ViewPager里适配器里放的不是一般的View.而是Fragment.所 ...

  3. Android利用ViewPager仿微信主界面-android学习之旅(78)

    首先是介绍ViewPager这个控件 ,这个控件需要pagerAdapter作为容器来提供数据,同时pagerAdapter的数据源是View数组 效果图如下 部分代码如下,实现如下的方法 mPage ...

  4. 高仿美团主界面&lt;一&gt;

    声明:本demo还未完好,正在持续更新中... 先上图吧: 这个小demo资源图片全是用青花瓷抠出来的,如今仅仅是完毕了 一部分. 会持续更行中. . .有兴趣的朋友能够关注我,我们一起coding, ...

  5. Android 之高仿微信主界面

    源码下载:  http://files.cnblogs.com/aibuli/WeChatSample.zip 主界面主要使用ActionBar来完成.  要实现这个效果,第一步当然是编辑menu目录 ...

  6. [deviceone开发]-仿微信主界面示例

    一.简介 模仿微信主界面的4个页面,作为一个很常规应用的框架模板,值得参考.另外包括简单的菜单,其中搜索还支持语音录入,不过你需要增加飞讯的语音组件重新打包,才能看到效果 二.效果图 三.相关下载 h ...

  7. ViewPager学习之仿微信主界面

    由于素材的原因,这里都是从网上找的图片,所以所谓的仿微信实际上最后成了下图这货.. .,点击变色也是自己用的windows自带绘图的颜料桶填充的空白. .. watermark/2/text/aHR0 ...

  8. 仿windows phone风格主界面

    使用了ZAKER到最新版本,其主界面采用windows phone的风格,感觉还蛮好看的,挺喜欢的,就模仿写了一下,实现到界面截图如下: 第一版面: 第二版面: 在实现了它到九宫格菜单,还实现了背景图 ...

  9. (NO.00004)iOS实现打砖块游戏(二):实现游戏主界面动画

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请告诉我,如果觉得不错请多多支持点赞.谢谢! hopy ;) 一个内容不错的游戏也要一个好的包装.玩家进入游戏时第一眼看到的是 ...

随机推荐

  1. 洛谷P1720 月落乌啼算钱

    目背景 (本道题目木有以藏歌曲……不用猜了……) <爱与愁的故事第一弹·heartache>最终章. 吃完pizza,月落乌啼知道超出自己的预算了.为了不在爱与愁大神面前献丑,只好还是硬着 ...

  2. JS原生方法被覆盖后的恢复办法

    alert 被覆盖 今天装修博客园,调试了下JS代码发现 alert() 方法被官方覆盖了,查看源码得知 alert 的功能被替换成了 console.log. 恢复 var _frame = doc ...

  3. 南阳oj 士兵杀敌(二) 题目116 NYOJ 数据结构

     /*士兵杀敌(二) 时间限制:1000 ms  |  内存限制:65535 KB 难度:5 描写叙述 南将军手下有N个士兵.分别编号1到N.这些士兵的杀敌数都是已知的. 小工是南将军手下的军师, ...

  4. 将字符串使用md5加密

    >>> import md5 >>> md5.md5('123').hexdigest() '202cb962ac59075b964b07152d234b70' & ...

  5. hdu 1233 还是畅通project (克鲁斯卡尔裸题)

    还是畅通project                                              Time Limit: 4000/2000 MS (Java/Others)    M ...

  6. 有关cascade的结构体

    /* internal cascade classifier */ typedef struct CvCascadeHaarClassifier { CV_INT_HAAR_CLASSIFIER_FI ...

  7. js13--对象、原型

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  8. code blocks常用快捷键

    CodeBlocks常用操作快捷键 编辑部分: Ctrl + A:全选 Ctrl + C:复制 Ctrl + X: 剪切 Ctrl + V:粘贴 Ctrl + Z:撤销(后退一步) Ctrl + S: ...

  9. STM32介绍以及与通常ARM的区别

    ARM是英国的芯片设计公司,其最成功的莫过于32位嵌入式CPU核----ARM系列,最常用的是ARM7和ARM9,ARM公司主要提供IP核,就是CPU的内核结构,只包括最核心的部分,并不是完整的处理器 ...

  10. 如何应对DDOS网络攻击

      650) this.width=650;" border="0" alt="" src="http://img1.51cto.com/a ...