[Android]AndroidDesign中ActionBar探究2 嵌入Fragment

上一节我们只是简单了介绍了Android Design风格中的ActionBar的简单实用,如添加MenuItem,这节我们会进一步了解ActionBar的其他功能。

在Android Develop的文档(http://developer.android.com/training/implementing-navigation/index.html)详细地介绍了Navigation的实用(我们为了更好的理解就不把这个翻译为中文):

通过tabs来创建可以滑动的视图

常见的我们可以通过v4包中的ViewPager来创建可以左右滑动的视图,Viewpager可以通过FragmentStatePagerAdapte来填充Viewpager,它的每一项Item都是一个Fragment这样就显得很灵活。

那我们就通过一个简单的ViewPager来做一个实例。

先通过ViewPager来设一个Layout:

<?xml version="1.0" encoding="utf-8"?>

<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" />

再新建一个FragmentStatePagerAdapter对象来设置ViewPager内容:

public class CollectionDemoActivity extends FragmentActivity {

    // When requested, this adapter returns a DemoObjectFragment,

    // representing an object in the collection.

    DemoCollectionPagerAdapter mDemoCollectionPagerAdapter;

    ViewPager mViewPager;



    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_collection_demo);



        // ViewPager and its adapters use support library

        // fragments, so use getSupportFragmentManager.

        mDemoCollectionPagerAdapter =

                new DemoCollectionPagerAdapter(

                        getSupportFragmentManager());

        mViewPager = (ViewPager) findViewById(R.id.pager);

        mViewPager.setAdapter(mDemoCollectionPagerAdapter);

    }

}



// Since this is an object collection, use a FragmentStatePagerAdapter,

// and NOT a FragmentPagerAdapter.

public class DemoCollectionPagerAdapter extends FragmentStatePagerAdapter {

    public DemoCollectionPagerAdapter(FragmentManager fm) {

        super(fm);

    }



    @Override

    public Fragment getItem(int i) {

        Fragment fragment = new DemoObjectFragment();

        Bundle args = new Bundle();

        // Our object is just an integer :-P

        args.putInt(DemoObjectFragment.ARG_OBJECT, i + 1);

        fragment.setArguments(args);

        return fragment;

    }



    @Override

    public int getCount() {

        return 100;

    }



    @Override

    public CharSequence getPageTitle(int position) {

        return "OBJECT " + (position + 1);

    }

}



// Instances of this class are fragments representing a single

// object in our collection.

public static class DemoObjectFragment extends Fragment {

    public static final String ARG_OBJECT = "object";



    @Override

    public View onCreateView(LayoutInflater inflater,

            ViewGroup container, Bundle savedInstanceState) {

        // The last two arguments ensure LayoutParams are inflated

        // properly.

        View rootView = inflater.inflate(

                R.layout.fragment_collection_object, container, false);

        Bundle args = getArguments();

        ((TextView) rootView.findViewById(android.R.id.text1)).setText(

                Integer.toString(args.getInt(ARG_OBJECT)));

        return rootView;

    }

}

 

这样ViewPager中的每一项都可以通过FragmentStateViewPagerAdapter来设置,是不是觉得生活又回复了美好,Fragment是一个灵活的、缩减版的Activity,我们可以很自由轻松而快乐的开发。

对了这节不是讲ActionBar跟这个ViewPager有关系么,不知道你用微信客户端是不是发现微信主页也是采用ActionBar的,其中聊天、发现、通讯录这三项就是一个Tabs组,那么Tab就是我们接下来要将的重点.

添加Tabs到ActionBar

为了能告诉Activity我们使用了Tabs,我们需要在Activity中为ActionBar设置NAVIGATION_MODE_TABS属性:

 actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

我们可以通过ViewPager的滑动事件来让顶部的Tabs根据ViewPager的变化而变化,同理我们也可以通过点击Tabs来这是ViewPager。

对于Tabs可以通过TabListener来监听Tabs点击位置变化:

@Override

public void onCreate(Bundle savedInstanceState) {

    final ActionBar actionBar = getActionBar();

    ...



    // Specify that tabs should be displayed in the action bar.

    actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);



    // Create a tab listener that is called when the user changes tabs.

    ActionBar.TabListener tabListener = new ActionBar.TabListener() {

        public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {

            // show the given tab

        }



        public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction ft) {

            // hide the given tab

        }



        public void onTabReselected(ActionBar.Tab tab, FragmentTransaction ft) {

            // probably ignore this event

        }

    };



    // Add 3 tabs, specifying the tab's text and TabListener

    for (int i = 0; i < 3; i++) {

        actionBar.addTab(

                actionBar.newTab()

                        .setText("Tab " + (i + 1))

                        .setTabListener(tabListener));

    }

}

当我们可以通过Tabs是的位置让ViewPager的位置也发生变化:

public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {

            // When the tab is selected, switch to the

            // corresponding page in the ViewPager.

            mViewPager.setCurrentItem(tab.getPosition());

        }

ViewPager可以滑动,当滑动到ViewPager的哪一项时,Tabs的选中项也要变化:

 

 

@Override

public void onCreate(Bundle savedInstanceState) {

    ...



    mViewPager = (ViewPager) findViewById(R.id.pager);

    mViewPager.setOnPageChangeListener(

            new ViewPager.SimpleOnPageChangeListener() {

                @Override

                public void onPageSelected(int position) {

                    // When swiping between pages, select the

                    // corresponding tab.

                    getActionBar().setSelectedNavigationItem(position);

                }

            });

    ...

}

 

这个Tabs可能不能达到微信的那个左右滑动过程中,Tabs选中的变化,我们也可以使用新的V4包中Tabs的替代者那就是PagerTitleStrip,这个以前也是个开源项目,Android后来也把这个放到了V4支持包中。

这个很像Tabs,不过在ViewPager在滑动过程中,Tabs的Tile下面的选中项是有滑动过程,而不是Tabs那样只有一个结果

<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.PagerTitleStrip

        android:id="@+id/pager_title_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>

你可能感兴趣的:(Actionbar)