#趣米杯#码农天气--码农自己的天气APP（五）

本帖最后由 jnhoodlum 于 2014-2-10 17:51 编辑

本文参与趣米杯征文活动，如需转载请注明出处和作者

#趣米杯#码农天气--码农自己的天气APP（一）
#趣米杯#码农天气--码农自己的天气APP（二）
#趣米杯#码农天气--码农自己的天气APP（三）
#趣米杯#码农天气--码农自己的天气APP（四）


之前四篇文章已经把码农天气的主要功能都实现的差不多了，现在还剩最后一个大的功能：设置。这一讲完成以后，码农天气的功能就基本完成了，我会在文章的最后把代码贴出来，供大家拍砖。

我们先看一下彩虹天气的设置页面：
 


我没有仔细看彩虹天气的这个menu页面是怎么实现的，但是我觉得他应该是使用的一个开源框架SlidingMenu，这是SlidingMenu的GitHub主页：https://github.com/jfeinstein10/SlidingMenu，大家有兴趣的话可以研究一下这块的内容，网上教程也很多，这一块我就不多说了。

这是我实现的menu界面：
 


彩虹天气是整个页面都向右移，而我做的这个menu页面只是在标题栏下面从左侧划入/划出，不会覆盖标题栏，这个是怎么做的呢？

其实这个也很简单，我使用的是google在2013 google io大会上发布的一个新的support v4的控件Navigation Drawer。大家在这里查看到google官方的指导：http://developer.android.com/training/implementing-navigation/nav-drawer.html

大家看一下官方给出参考布局文件
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!-- The main content view -->
    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <!-- The navigation drawer -->
    <ListView android:id="@+id/left_drawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:choiceMode="singleChoice"
        android:divider="@android:color/transparent"
        android:dividerHeight="0dp"
        android:background="#111"/>
</android.support.v4.widget.DrawerLayout>
大家注意仔细看ListView里面的这句话
android:layout_gravity="start"
只要你在一个布局文件中添加了这句，android就会知道你是要在这个布局文件中实现一个Navigation Drawer，很简单吧！
下面是我写的的布局文件：

1. <?xml version="1.0" encoding="utf-8"?>
   
2. <android.support.v4.widget.DrawerLayout
   
3.     xmlns:android="http://schemas.android.com/apk/res/android"
   
4.     android:id="@+id/drawer_layout"
   
5.     android:layout_width="match_parent"
   
6.     android:layout_height="match_parent"
   
7.     android:background="#3C3C3C"
   
8.     >
   
9.     <FrameLayout
   
10.         android:id="@+id/contentFrameLayout"
    
11.         android:layout_width="match_parent"
    
12.         android:layout_height="match_parent" />
    
13.     <RelativeLayout
    
14.         android:id="@+id/drawerLayout"
    
15.         android:layout_width="210dp"
    
16.         android:layout_height="match_parent"
    
17.         android:layout_gravity="start"
    
18.         android:background="#3C3C3C"
    
19.         >
    
20.     </RelativeLayout>
    
21. </android.support.v4.widget.DrawerLayout>

复制代码

跟google官方给出的参考几乎一模一样，其实我们在做别的项目的时候也完全可以就使用这套代码，除了背景什么的可能需要修改一下，其他的完全不需要动。

最后我们在定义一个fragment，填充到上面布局文件中的RelativeLayout中

1.                 Fragment leftDrawerFragment = new LeftDrawerFragment();
   
2.                 FragmentManager fm1 = getSupportFragmentManager();
   
3.                 FragmentTransaction ft1 = fm1.beginTransaction();
   
4.                 ft1.replace(R.id.drawerLayout, leftDrawerFragment);
   
5.                 ft1.commitAllowingStateLoss();

复制代码

具体的这个菜单中的布局和逻辑，大家一会就下载了代码自己看看吧。

这是最后实现的效果图：
 

 


 


 


 


最后是源码，这是我花了5天下班时间写的，每天熬夜不容易，麻烦大家顶一下再下吧：

本帖隐藏的内容

 码农天气.rar (9.86 MB, 下载次数: 421)