开源中国源码学习UI篇（二）之NavigationDrawer+Fragment的使用分析

    前文链接：开源中国源码学习UI篇（一）之FragmentTabHost的使用分析

    开源中国2.2版，完整源码地址为：http://git.oschina.net/oschina/android-app/tree/v2.2/

    今天来复习回忆NavigationDrawer和ViewPager分别结合Fragment的使用方式。

1、编写基类

    NavigationDrawer即抽屉导航，就是在界面中侧面划出的那部分，我们先来定义BaseFragment，这是为了将常用的代码写到这里，增强代码的复用。

public class BaseFragment extends Fragment implements OnClickListener {

	protected LayoutInflater mInflater;
	
	public AppContext getApplication() {
        return (AppContext) getActivity().getApplication();
    }
	
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		this.mInflater = inflater;
		View view = super.onCreateView(inflater, container, savedInstanceState); 
		return view;
	}

	@Override
	public View getView() {
		// TODO Auto-generated method stub
		return super.getView();
	}
}

2、布局文件---foot、items、整体

    1）fragment_navigation_drawer_items---抽屉的每条详细数据

    在布局文件中，可以多多使用style，个人理解就是对窗体元素的属性设置进行统一保存，当存在大量重复的属性时，使用style可以很好的减少重复代码的使用。我们这里，抽屉布局有四个item，每个item的显示外观形式是一样的，可以很好地使用style。

             线性布局线面的1px的view，充当抽屉里每个item的分界线。

<pre name="code" class="html"> <LinearLayout
        android:id="@+id/menu_item_quests"
        style="@style/MenuItemLayoutStyle" >

        <ImageView
            style="@style/MenuItemImageViewStyle"
            android:background="@drawable/drawer_menu_icon_quest"
            android:contentDescription="@null" />

        <TextView
            style="@style/MenuItemTextViewStyle"
            android:gravity="center"
            android:text="技术问答" />
    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1px"
        android:background="#d2d2d2" />

    下面是，对应的style具体的配置，styles.xml的位置为res/values/styles.xml，

 <!-- 菜单layout的样式 -->
    <style name="MenuItemLayoutStyle">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:minHeight">55dip</item>
        <item name="android:gravity">center_vertical</item>
        <item name="android:orientation">horizontal</item>
        <item name="android:paddingLeft">15dip</item>
        <item name="android:paddingRight">15dip</item>
        <item name="android:background">@drawable/drawer_menu_item_background</item>
    </style>
     <!-- 菜单ImageView的样式 -->
    <style name="MenuItemImageViewStyle">
        <item name="android:layout_width">24dip</item>
        <item name="android:layout_height">24dip</item>
        <item name="android:layout_marginRight">15dip</item>
    </style>

    <!-- 菜单TextView的样式 -->
    <style name="MenuItemTextViewStyle">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:textColor">@color/drawer_menu_text</item>
        <item name="android:drawablePadding">10.0dip</item>
        <item name="android:textSize">16.0dp</item>
    </style>

2）fragment_navigation_drawer_foot---抽屉位于底部的设置和退出按钮

    整体就是，于抽屉底部对其的线性布局，里面有两个水平分布的子线性布局。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:baselineAligned="false"
    android:layout_marginBottom="5dip"
    android:orientation="horizontal" >

    <LinearLayout
        android:id="@+id/menu_item_setting"
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_margin="5dip"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="horizontal" >

        <ImageView
            style="@style/MenuItemImageViewStyle"
            android:background="@drawable/drawer_menu_icon_setting" />

        <TextView
            style="@style/MenuItemTextViewStyle"
            android:textSize="14.0dip"
            android:text="设置" />
    </LinearLayout>
    
    <LinearLayout
        android:id="@+id/menu_item_exit"
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_margin="5dip"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="horizontal" >

        <ImageView
            style="@style/MenuItemImageViewStyle"
            android:background="@drawable/drawer_menu_icon_exit" />

        <TextView
            style="@style/MenuItemTextViewStyle"
            android:textSize="14.0dp"
            android:text="退出" />
    </LinearLayout>

</LinearLayout>

3）fragment_navigation_drawer---将抽屉的items和foot结合到一起

    需要注意的是，通过include语句将前面两个布局文件整合到此，CustomerScrollView是自定义的继承ScrollView的窗体类，使得拖动拥有更好的效果，这里可以用Android自带的ScrollView代替，有关CustomerScrollView的代码，这里不再分析，有兴趣的话，可以在下面的源码demo中查阅。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#e2e2e2" >
	
    <com.example.testui.widget.CustomerScrollView
        android:layout_width="match_parent"
        android:layout_height="0dip"
        android:layout_weight="1">
        
        <include layout="@layout/fragment_navigation_drawer_items"/>
        
    </com.example.testui.widget.CustomerScrollView >
    
    <include layout="@layout/fragment_navigation_drawer_foot"/>
    
</LinearLayout>

3、NavigationDrawerFragment---抽屉界面的相关配置

    NavigationDrawerFragment继承自之前编写的BaseFragment，定义声明drawer中出现的控件后，重写onCreateView()，其他函数不是显示抽屉必要的。

@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		//fragment_navigation_drawer为layout文件
		mDrawerListView = inflater.inflate(R.layout.fragment_navigation_drawer, container,false);
		mDrawerListView.setOnClickListener(this);
		//butterKnife声明
		ButterKnife.inject(this,mDrawerListView);
		//定义各个button的触发单击事件
		initView(mDrawerListView);
		//暂时没用
		initData();
		return mDrawerListView;
	}

在主界面activity_main.xml中添加此drawerFragment

        注意，android:name属性为刚才建的NavigationDrawerFragment，而tools:layout为对应的布局文件。

<!-- 左侧侧滑菜单 -->

    <fragment
        android:id="@+id/navigation_drawer"
        android:name="com.example.testui.ui.fragment.NavigationDrawerFragment"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        tools:layout="@layout/fragment_navigation_drawer" />

最后在MainActivity.java中调用

mNavigationDrawerFragment = (NavigationDrawerFragment) getSupportFragmentManager()
	            .findFragmentById(R.id.navigation_drawer);

4、总结

总结：

• 设计抽屉的界面（items、foot、前两者整合）
• 将上面的整合界面，放到由<android.support.v4.widget.DrawerLayout>最外层包裹的主界面中
• 定义继承Fragment类的抽屉类，在onCreateView（）中显示出来
• 主界面.java一句话调用

demo图片展示，就这一个界面。demo地址开源中国源码学习UI篇（二）之NavigationDrawer+Fragment和ViewPager+Fragment的使用分析。