Android笔记 ActionBar+Fragment+ViewPager实现仿微信首页滑动切换窗口

    前一段时间做过TabHost切换窗口的Demo,但是TabHost不再建议使用,所以做了一个ActionBar+Fragment+ViewPager实现仿微信滑动切换窗口的Demo。
    不多说,直接上代码,后文附上Demo。
   
     1.首先建四个fragment
    
     2.MainActivity.java:
    

public class MainActivity extends ActionBarActivity implements ActionBar.TabListener, ViewPager.OnPageChangeListener {

    private List<MyTab> mTabs = new ArrayList<MyTab>();

    private ViewPager mViewPager;

    private ActionBar mActionBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mTabs.add(new MyTab(R.string.chart, ChartFrament.class));
        mTabs.add(new MyTab(R.string.friend, FriendFragment.class));
        mTabs.add(new MyTab(R.string.moment, MomentFrament.class));
        mTabs.add(new MyTab(R.string.mine, MineFragment.class));

        initActionBar();
    }

    /*
    * 初始化ActionBar
    * */
    private void initActionBar() {
        //实例化ViewPager
        mViewPager = (ViewPager) this.findViewById(R.id.pager);

        mActionBar = getSupportActionBar();
        mActionBar.setDisplayHomeAsUpEnabled(false);
        mActionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

        //循环添加Tab
        for (MyTab t : mTabs) {
            ActionBar.Tab tab = mActionBar.newTab();
            tab.setText(t.getTxt());
            //添加一个ActionBar的监听器
            tab.setTabListener(this);

            mActionBar.addTab(tab);
        }

        mViewPager.setAdapter(new TabFragmentPagerAdapter(getSupportFragmentManager()));

        //添加ViewPager的监听器
        mViewPager.setOnPageChangeListener(this);
    }

    /ActionBar的监听方法
    @Override
    public void onTabSelected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {

        //Tab选择时ViewPager随之改变
        mViewPager.setCurrentItem(tab.getPosition());
    }

    @Override
    public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {

    }

    @Override
    public void onTabReselected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {

    }


    /ViewPager的监听方法
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {
        //ViewPager滑动时,Tab根据position随之切换
        mActionBar.selectTab(mActionBar.getTabAt(position));
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }

    class MyTab {
        private int txt;
        private Class fragment;

        public MyTab() {
        }

        MyTab(int txt, Class fragment) {
            this.txt = txt;
            this.fragment = fragment;
        }

        public int getTxt() {
            return txt;
        }

        public void setTxt(int txt) {
            this.txt = txt;
        }

        public Class getFragment() {
            return fragment;
        }

        public void setFragment(Class fragment) {
            this.fragment = fragment;
        }
    }

    class TabFragmentPagerAdapter extends FragmentPagerAdapter {
        public TabFragmentPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {

            try {
                return (Fragment) mTabs.get(position).getFragment().newInstance();
            } catch (InstantiationException e) {
                e.printStackTrace();
            } catch (IllegalAccessException e) {
                e.printStackTrace();
            }
            return null;
        }

        @Override
        public int getCount() {
            return mTabs.size();
        }
    }

}

     3.通过第1、2步基本实现了滑动切换窗口,但是非常难看,要实现与微信类似,就要进行自定义Style
     style.xml:

<resources>

    <style name="Theme.ActionBar" parent="Theme.AppCompat">
        <item name="android:actionBarStyle">@style/actionbar.base.style</item>
        <item name="android:actionBarTabStyle">@style/actionBarTabStyle</item>
        <item name="android:actionBarTabTextStyle">@style/actionBarTabTextStyle</item>
        <!--Support2.1及以上-->
        <item name="actionBarStyle">@style/actionbar.base.style</item>
        <item name="actionBarTabStyle">@style/actionBarTabStyle</item>
        <item name="actionBarTabTextStyle">@style/actionBarTabTextStyle</item>
    </style>

    <!-- 自定义ActionBar 基础样式 -->
    <style name="actionbar.base.style" parent="Widget.AppCompat.ActionBar">
        <item name="android:background">@color/background_actionbar</item>
        <item name="android:backgroundStacked">@color/white</item>
        <item name="android:titleTextStyle">@style/actionBarTitleStyle</item>

        <!--Support2.1及以上-->
        <item name="background">@color/background_actionbar</item>
        <item name="backgroundStacked">@color/white</item>
        <item name="titleTextStyle">@style/actionBarTitleStyle</item>
    </style>
    <!-- 自定义ActionBarTitle基础样式 -->
    <style name="actionBarTitleStyle" parent="TextAppearance.AppCompat.Widget.ActionBar.Title">
        <item name="android:textColor">@color/white</item>
        <item name="android:textSize">18sp</item>
    </style>
    <!-- 自定义ActionBarTab基础样式 -->
    <style name="actionBarTabStyle" parent="Widget.AppCompat.ActionBar.TabView">
        <item name="android:background">@drawable/tab_indicator_ab_actionbar</item>
        <!-- Support2.1 -->
        <item name="background">@drawable/tab_indicator_ab_actionbar</item>
    </style>
    <!-- 自定义ActionBarTabText基础样式 -->
    <style name="actionBarTabTextStyle" parent="Widget.AppCompat.ActionBar.TabText">
        <item name="android:textColor">@color/tab_text</item>
        <item name="android:textSize">14sp</item>
    </style>
</resources>

最后结果演示(可能我的真机有点问题,ActionBar的颜色设置只设置了一半),Demo下载地址:链接:http://pan.baidu.com/s/1jG3VFfw 密码:52op
这里写图片描述

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值