开源中国源码学习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();}@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {this.mInflater = inflater;View view = super.onCreateView(inflater, container, savedInstanceState); return view;}@Overridepublic View getView() {// TODO Auto-generated method stubreturn super.getView();}
}

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

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

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

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

<pre name="code" class="html"> <LinearLayoutandroid:id="@+id/menu_item_quests"style="@style/MenuItemLayoutStyle" ><ImageViewstyle="@style/MenuItemImageViewStyle"android:background="@drawable/drawer_menu_icon_quest"android:contentDescription="@null" /><TextViewstyle="@style/MenuItemTextViewStyle"android:gravity="center"android:text="技术问答" /></LinearLayout><Viewandroid: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" ><LinearLayoutandroid: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" ><ImageViewstyle="@style/MenuItemImageViewStyle"android:background="@drawable/drawer_menu_icon_setting" /><TextViewstyle="@style/MenuItemTextViewStyle"android:textSize="14.0dip"android:text="设置" /></LinearLayout><LinearLayoutandroid: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" ><ImageViewstyle="@style/MenuItemImageViewStyle"android:background="@drawable/drawer_menu_icon_exit" /><TextViewstyle="@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.CustomerScrollViewandroid: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()，其他函数不是显示抽屉必要的。

@Overridepublic 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为对应的布局文件。

<!-- 左侧侧滑菜单 --><fragmentandroid: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的使用分析。