Android典型界面設計(7) ——DrawerLayout+Fragement+ViewPager+PagerTabStrip實現雙導航

一、問題描述

　　在Android典型界面設計（3）的我們實現了雙導航效果，即外層底部導航和內部區域的頭部導航，如網易新聞等很多應用采用了這種導航，但Google提供DrawerLayout可實現抽屜式導航，建議使用DrawerLayout代替底部導航，下面我們就使用官方提供的DrawerLayout+Fragement+ViewPager+PagerTabStrip實現下圖效果：

二、本例相關技術

1、 DrawerLayout 抽屜式導航

2、 Fragment管理

3、 ViewPager和PagerTabStrip的使用

三、實現過程

　　1、  考慮到向下兼容要使用V4和V7包

　　V4建工程已經加入，需在項目中導入v7兼容包的android-support-v7-appcompat

　　2、  MainActivity組件

　　先看一下布局文件

<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">
    <!-- 包含主要內容的 view -->
    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <!-- 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="#fff"/>
</android.support.v4.widget.DrawerLayout>

　　DrawerLayout有兩個子視圖(child view):一個FrameLayout用來包含主要內容(在運行時填入Fragment)，和一個navigation drawer這里使用的ListView。

navigation drawer部分必須使用android:layout_gravity屬性指定它的horizontal gravity

“start”表示左側，”end”表示右側

　　3、  MainActivity代碼：

public class MainActivity extends ActionBarActivity implements 
OnItemClickListener{
    private DrawerLayout drawerLayout;
    private ActionBarDrawerToggle toggle;
    private ListView navList;
    private FragmentManager fm;
    private List<Fragment> fragments;
    private ArrayAdapter<String> adapter;
    private ActionBar actionBar;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        drawerLayout=(DrawerLayout)super.findViewById(R.id.drawer_layout);
        navList=(ListView)super.findViewById(R.id.left_drawer);
        navList.setOnItemClickListener(this);
        fragments=new ArrayList<Fragment>();
        fm=super.getSupportFragmentManager();
        initListView();
        initActionBar();
        initDrawerLayout();
        initFragments();
    }
            private String[] tabs=new String[]{"新聞","閱讀 ","視聽","發現","我的設置 "};
        /**
    初始化drawer的item列表。這要根據你的app內容來處理，但是一個navigation drawer通常由一個ListView組成，所以列表應該通過一個Adapter填入。
*/
    private void initListView(){
        adapter=new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,
                tabs);
        navList.setAdapter(adapter);
    }
    private void initFragments(){
        NewsFragment newsFragment=new NewsFragment();
        fragments.add(newsFragment);
        ReadFragment readFragment=new ReadFragment();
        fragments.add(readFragment);
        VideoFragment videoFragment=new VideoFragment();
        fragments.add(videoFragment);
        FoundFragment foundFragment=new FoundFragment();
        fragments.add(foundFragment);
        OwnerFragment ownerFragment=new OwnerFragment();
        fragments.add(ownerFragment);
        setFragments(0);
    }
    private void setFragments(int position){
        fm.beginTransaction().replace(R.id.content_frame, 
                fragments.get(position),"t"+position).commit();
    }
    private void initActionBar(){
        actionBar=super.getSupportActionBar();
        actionBar.setDisplayHomeAsUpEnabled(true);
        actionBar.setIcon(new ColorDrawable(0));
        actionBar.setTitle(tabs[0]);    
    }
    private void initDrawerLayout(){
        toggle=new ActionBarDrawerToggle(this, drawerLayout, 
                R.drawable.com_btn, R.string.drawer_open,
                R.string.drawer_closed){
                    /** 當drawer處於完全關閉的狀態時調用 */
                    @Override
                    public void onDrawerClosed(View drawerView) {
                        super.onDrawerClosed(drawerView);
                    }
                       /** 當drawer處於完全打開的狀態時調用 */
                    @Override
                    public void onDrawerOpened(View drawerView) {
                        super.onDrawerOpened(drawerView);
                    }
            
        };
        // 設置drawer觸發器為DrawerListener
        drawerLayout.setDrawerListener(toggle);
    }
    private void toggleNav(){
        if(drawerLayout.isDrawerOpen(Gravity.START)){
            drawerLayout.closeDrawer(Gravity.START);
        }else{
            drawerLayout.openDrawer(Gravity.START);
        }
        
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
                getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }
  @Override
   public boolean onOptionsItemSelected(MenuItem item){
      switch(item.getItemId()){
          case android.R.id.home:
          toggleNav();
          break;
      }
      return true;
  }

　　4、  NewsFragment組件

public class NewsFragment extends Fragment {
    private ViewPager mViewPager;
    private List<String> tabs;
    private List<Fragment> fragmentList;
    private NewsFragmentPagerAdapter adapter;

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onActivityCreated(savedInstanceState);
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
    }

    private View view;
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        if(view==null){
            view=inflater.inflate(R.layout.news_fragment, null);
            mViewPager=(ViewPager)view.findViewById(R.id.pager);
            initViewPager();
        }
        ViewGroup parent=(ViewGroup)view.getParent();
        if(parent!=null) parent.removeView(view);
        return view;
    }
    private void initViewPager(){
        setTabs();
        setFragments();
        adapter=new NewsFragmentPagerAdapter(super.getActivity().getSupportFragmentManager(), 
                fragmentList, tabs);
        mViewPager.setAdapter(adapter);
    }
    
    private void setFragments(){
        fragmentList=new ArrayList<Fragment>();
        for(int i=0;i<tabs.size();i++){
            NewsChannelFragment fragment=new NewsChannelFragment();
            Bundle bundle=new Bundle();
            bundle.putString("title", tabs.get(i)+"區域");
            fragment.setArguments(bundle);
            fragmentList.add(fragment);
            
        }
    }
    private void setTabs(){
        tabs=new ArrayList<String>();
        tabs.add("頭條");
        tabs.add("娛樂");
        tabs.add("體育");
        tabs.add("財經");
        tabs.add("熱點");
        tabs.add("科技");
    }
    @Override
    public void onDestroyView() {
        // TODO Auto-generated method stub
        super.onDestroyView();
    }

}

NewsFragment的布局文件：

<android.support.v4.view.ViewPager
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    <android.support.v4.view.PagerTabStrip
        android:id="@+id/pager_tab_strip"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="top"
        android:background="#33b5e5"
        android:textColor="#fff"
        android:paddingTop="4dp"
        android:paddingBottom="4dp" />
</android.support.v4.view.ViewPager>

NewsFragmentPagerAdapter代碼：

public class NewsFragmentPagerAdapter extends FragmentPagerAdapter {
    private List<String> tabs;
    private List<Fragment> fragmentList;
    public NewsFragmentPagerAdapter(FragmentManager fm,
List<Fragment> fragmentList,List<String> tabs) {
        super(fm);
        this.tabs=tabs;
        this.fragmentList=fragmentList;
        
    }
    @Override
    public Fragment getItem(int idx) {
        return fragmentList.get(idx);
    }

    @Override
    public int getCount() {
        return fragmentList.size();
    }
    @Override
    public CharSequence getPageTitle(int position) {
        return tabs.get(position);
    }
}

　　5、  ReadFragment代碼（其他Fragment也簡單處理同ReadFragment基本相同）

public class ReadFragment extends Fragment {

    @Override
    public void onAttach(Activity activity) {
        // TODO Auto-generated method stub
        super.onAttach(activity);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
        Bundle savedInstanceState) {
        TextView tvTitle=new TextView(super.getActivity());
        tvTitle.setText("閱讀");
        tvTitle.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT));
        tvTitle.setBackgroundColor(Color.WHITE);
        return tvTitle;
    }
    @Override
    public void setArguments(Bundle args) {
        // TODO Auto-generated method stub
        super.setArguments(args);
    }

}

6、樣式文件values/styles.xm 

    <style name="AppTheme" parent="@style/Theme.AppCompat.Light">
        <item name="actionBarStyle">@style/ActionBar.Solid</item>
        <item name="homeAsUpIndicator">@drawable/com_btn</item> 
        <item name="titleTextStyle">@style/ActionBar_TitleStyle</item>
    </style>
    <style name="ActionBar.Solid" parent="@style/Widget.AppCompat.Light.ActionBar.Solid">
        <item name="android:background">@drawable/ab_background</item>
        <item name="backgroundSplit">@drawable/ab_bottom_solid</item>    
    </style>
         <style name="ActionBar_TitleStyle">  
        <item name="android:textSize">18sp</item>
        <item name="android:textColor">#ffffff</item>  
</style>
values-v14/styles.xml
    <style name="AppBaseTheme" parent="android:Theme.Holo.Light.DarkActionBar">
    </style>
  <style name="AppTheme" parent="@style/Theme.AppCompat.Light">
        <item name="android:actionBarStyle">@style/ActionBar.Solid</item>
        <item name="android:homeAsUpIndicator">@drawable/com_btn</item>     
    </style>
    <style name="ActionBar.Solid" parent="@style/Widget.AppCompat.Light.ActionBar.Solid">
        <item name="android:background">@drawable/ab_background</item>
        <item name="android:backgroundSplit">@drawable/ab_bottom_solid</item>
        <item name="android:titleTextStyle">@style/ActionBar_TitleStyle</item>
    </style>
     <style name="ActionBar_TitleStyle">  
        <item name="android:textSize">18sp</item>
        <item name="android:textColor">#ffffff</item>  
    </style>

 

　　想要了解更多內容的小伙伴，可以點擊查看源碼，親自運行測試。

　　疑問咨詢或技術交流，請加入官方QQ群： （452379712）

 

作者： 傑瑞教育
出處： http://www.cnblogs.com/jerehedu/ 
本文版權歸煙台傑瑞教育科技有限公司和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利。