如何使用ActionBar+ViewPager实现fragment相互切换

本篇博客主要介绍如何使用ActionBar，并将ActionBar的导航模式设置tab模式，之所以了解到这种用法还是因为看了手机桌面时钟的源码。感觉这种方法很cool，不过已经被google废弃了，现在就做为了解一下吧！！

先看一下效果图吧：

效果还可以吧，特别是配合selector动画使用，感觉效果更好，其实真是的运行情况要比gif图好很多，感觉效果图不是很流畅，有兴趣的朋友可以自己拷贝我的代码实际跑一下！！

先看一下主布局文件：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical">    <android.support.v4.view.ViewPager        android:id="@+id/vp"        android:layout_width="match_parent"        android:layout_height="match_parent"></android.support.v4.view.ViewPager></LinearLayout>

闹钟布局文件：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="@color/colorAccent">    <TextView        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_gravity="center_vertical"        android:gravity="center"        android:text="@string/alarm_name"        android:textAllCaps="false"/></LinearLayout>

其他两个fragment内部的布局文件一样，在这里就不单独给出了！！

现在看一下tab里图标的动画：
使用的drawable是vectorDrawable，看一下代码吧：

<vector xmlns:android="http://schemas.android.com/apk/res/android"    android:width="24dp"    android:height="24dp"    android:viewportWidth="24.0"    android:viewportHeight="24.0">    <group        android:name="alarm_group"        android:pivotX="12"        android:pivotY="12">        <path            android:fillColor="#FF000000"            android:pathData="M22,5.72l-4.6,-3.86 -1.29,1.53 4.6,3.86L22,5.72zM7.88,3.39L6.6,1.86 2,5.71l1.29,1.53 4.59,-3.85z"/>    </group>    <path        android:fillColor="#FF000000"        android:pathData="M12.5,8L11,8v6l4.75,2.85 0.75,-1.23 -4,-2.37L12.5,8zM12,4c-4.97,0 -9,4.03 -9,9s4.02,9 9,9c4.97,0 9,-4.03 9,-9s-4.03,-9 -9,-9zM12,20c-3.87,0 -7,-3.13 -7,-7s3.13,-7 7,-7 7,3.13 7,7 -3.13,7 -7,7z"/></vector>

这里的drawable是从google提供的vectordrawable中找的，有关vectorDrawable还有什么不清楚的地方，请自行查阅我以前写的关于VectorDrawable的博客！！
设置闹钟vector的动画：

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android">    <set android:ordering="sequentially">        <objectAnimator            android:duration="33"            android:propertyName="Rotation"            android:valueFrom="0"            android:valueTo="-8"            android:valueType="floatType" />        <objectAnimator            android:duration="67"            android:propertyName="Rotation"            android:valueFrom="-8"            android:valueTo="8"            android:valueType="floatType" />        <objectAnimator            android:duration="67"            android:propertyName="Rotation"            android:valueFrom="8"            android:valueTo="-8"            android:valueType="floatType" />        <objectAnimator            android:duration="67"            android:propertyName="Rotation"            android:valueFrom="-8"            android:valueTo="8"            android:valueType="floatType" />        <objectAnimator            android:duration="67"            android:propertyName="Rotation"            android:valueFrom="8"            android:valueTo="-8"            android:valueType="floatType" />        <objectAnimator            android:duration="33"            android:propertyName="Rotation"            android:valueFrom="-8"            android:valueTo="0"            android:valueType="floatType" />    </set></set>

最后通过AnimatedSelectorDrawable将动画和VectorDrawable链接起来，其实是将AnimatedVectorDrawable放入AnimatedSelectorDrawable中，详细的还是看一下代码吧：

<?xml version="1.0" encoding="utf-8"?><animated-selector xmlns:android="http://schemas.android.com/apk/res/android">    <item        android:id="@+id/off"        android:drawable="@drawable/ic_alarm"        android:state_selected="false" />    <item        android:id="@+id/on"        android:drawable="@drawable/ic_alarm"        android:state_selected="true" />    <transition        android:fromId="@id/off"        android:toId="@id/on">        <animated-vector android:drawable="@drawable/ic_alarm">            <target                android:name="alarm_group"                android:animation="@animator/alarm_animator" />        </animated-vector>    </transition></animated-selector>

看过我之前写的关于Drawable的博客，在看这个xml文件时应该没有压力了吧！！！很简单就是状态改变时候执行这个动画：

<animated-vector android:drawable="@drawable/ic_alarm">            <target                android:name="alarm_group"                android:animation="@animator/alarm_animator" />        </animated-vector>

好了，现在看一下闹钟的fragment代码：

package com.example.actionbardemo.Fragment;import android.content.Context;import android.os.Bundle;import android.support.annotation.Nullable;import android.support.v4.app.Fragment;import android.support.v7.widget.PopupMenu;import android.view.Gravity;import android.view.LayoutInflater;import android.view.MenuItem;import android.view.View;import android.view.ViewGroup;import android.widget.Button;import android.widget.Toast;import com.example.actionbardemo.R;/** * Created by zhuyuqiang on 2017/3/27. */public class AlarmFragment extends Fragment {    private Button mPopButton;    public AlarmFragment() {        super();    }    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {        View view = inflater.inflate(R.layout.alarm_layout,container,false);//        return super.onCreateView(inflater, container, savedInstanceState);        return view;    }    @Override    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {//        mPopButton = (Button) view.findViewById(R.id.btn);        super.onViewCreated(view, savedInstanceState);    }    @Override    public String toString() {        return super.toString();    }    @Override    public void onAttach(final Context context) {        super.onAttach(context);    }    @Override    public void onStart() {//        mPopButton.setOnClickListener(new View.OnClickListener() {//            @Override//            public void onClick(View v) {//                final PopupMenu mMenu = new PopupMenu(getContext(),v){//                    @Override//                    public void show() {//                        super.show();//                    }//                };//                mMenu.inflate(R.menu.test);//                mMenu.setGravity(Gravity.END);//                mMenu.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() {//                    @Override//                    public boolean onMenuItemClick(MenuItem item) {//                        Toast.makeText(getContext(),""+item.getTitle(),Toast.LENGTH_LONG).show();//                        return true;//                    }//                });//                mMenu.show();//            }//        });        super.onStart();    }    @Override    public void onResume() {        super.onResume();    }    @Override    public void onPause() {        super.onPause();    }    @Override    public void onStop() {        super.onStop();    }    @Override    public void onDestroyView() {        super.onDestroyView();    }    @Override    public void onDestroy() {        super.onDestroy();    }    @Override    public void onDetach() {        super.onDetach();    }}

没什么好说的，里面只是解析加载一个layout，另外两个fragment就不在赘述了！！！

好了，终于可以看activity的java文件了：

package com.example.actionbardemo;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentPagerAdapter;import android.support.v4.app.FragmentTransaction;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import android.support.v7.app.ActionBar;import android.support.v7.app.ActionBar.Tab;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import com.example.actionbardemo.Fragment.AlarmFragment;import com.example.actionbardemo.Fragment.LocationFragment;import com.example.actionbardemo.Fragment.ToyFragment;import java.util.ArrayList;import java.util.List;public class MainActivity extends AppCompatActivity {    private ActionBar mActionBar;    private ActionBarTabListener mTabListener;    private ViewPager mViewPager;    private List<Fragment> mFragments;    private PagerAdapter mPagerAdapter;    private FragmentManager mFragmentManager;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        mActionBar = getSupportActionBar();        mViewPager = (ViewPager) findViewById(R.id.vp);        if (mActionBar != null) {            mTabListener = new ActionBarTabListener();            initActionBar();        }        initFragments();        initPagerViewer();    }    private void initPagerViewer() {        mFragmentManager = getSupportFragmentManager();        mPagerAdapter = new PagerAdapter(mFragments, mFragmentManager);        mViewPager.setAdapter(mPagerAdapter);        mViewPager.addOnPageChangeListener(new ViewPagerListener());    }    private void initFragments() {        mFragments = new ArrayList<>();        mFragments.add(0, new AlarmFragment());        mFragments.add(1, new LocationFragment());        mFragments.add(2, new ToyFragment());    }    private void initActionBar() {        mActionBar.setDisplayOptions(0);        mActionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);        Tab mAlarm = mActionBar.newTab();        mAlarm.setTabListener(mTabListener);        mAlarm.setIcon(R.drawable.alarm_animation);        mActionBar.addTab(mAlarm);        Tab mTimer = mActionBar.newTab();        mTimer.setTabListener(mTabListener);        mTimer.setIcon(R.drawable.location_animation);        mActionBar.addTab(mTimer);        Tab mStopSwitch = mActionBar.newTab();        mStopSwitch.setTabListener(mTabListener);        mStopSwitch.setIcon(R.drawable.toy_animation);        mActionBar.addTab(mStopSwitch);        mActionBar.setSelectedNavigationItem(0);    }    private class ActionBarTabListener implements ActionBar.TabListener {        @Override        public void onTabSelected(Tab tab, FragmentTransaction ft) {            int position = tab.getPosition();            mViewPager.setCurrentItem(position, true);        }        @Override        public void onTabUnselected(Tab tab, FragmentTransaction ft) {        }        @Override        public void onTabReselected(Tab tab, FragmentTransaction ft) {        }    }    private class ViewPagerListener implements OnPageChangeListener {        @Override        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {        }        @Override        public void onPageSelected(int position) {            mActionBar.setSelectedNavigationItem(position);        }        @Override        public void onPageScrollStateChanged(int state) {        }    }    private class PagerAdapter extends FragmentPagerAdapter {        private List<Fragment> mList;        public PagerAdapter(List<Fragment> mList, FragmentManager fm) {            this(fm);            this.mList = mList;        }        public PagerAdapter(FragmentManager fm) {            super(fm);        }        @Override        public Fragment getItem(int position) {            return mList.get(position);        }        @Override        public int getCount() {            return mList.size();        }    }    @Override    protected void onResume() {        super.onResume();    }    @Override    protected void onDestroy() {        cancelAllListener();        super.onDestroy();    }    private void cancelAllListener() {        if (mViewPager != null){            mViewPager.addOnPageChangeListener(null);        }        if (mActionBar != null){            int count = mActionBar.getNavigationItemCount();            for(int i = 0;i<count;i++){                Tab tab = mActionBar.getTabAt(i);                if(tab != null){                    tab.setTabListener(null);                }            }        }    }}

这里也没有什么难度，都是基本的监听事件设置，唯一需要注意的可能就是设置一下actionBar的导航模式，这里需要设置为NAVIGATION_MODE_TABS！！！

好了，关于ActionBar实现Tab标签切换Fragment就说到这，谢谢大家的关注！！！

这是我的微信公众号，如果可以的话，希望您可以帮忙关注一下，这将是对我最大的鼓励了，谢谢！！

源码地址：

https://github.com/zhuyuqiang2017/Other