前文链接:开源中国源码学习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的使用分析。