DrawerArrowDrawable + FragmentTabHost +PagerSlidingTabStrip 高仿开源中国客户端

要实现以下效果:

先上mainActivity:

public class MainActivity extends AppCompatActivity        implements NavigationView.OnNavigationItemSelectedListener, View.OnClickListener, TabHost.OnTabChangeListener, View.OnTouchListener {//    @InjectView(android.R.id.tabhost)//    public MyFragmentTabHost mTabHost;//    @InjectView(R.id.quick_option_iv)//    View mAddBt;    //建两个全局变量，等下用它们获取layout里面的两个控件    private ViewPager vp;    private PagerSlidingTabStrip pst;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        initView();    }    private void initView() {        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);        setSupportActionBar(toolbar);        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(                this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);        drawer.setDrawerListener(toggle);        toggle.syncState();        NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);        navigationView.setNavigationItemSelectedListener(this);        initFramentHost();        View  mAddBt = (View)findViewById(R.id.quick_option_iv);//         中间按键图片触发,并且触发按键图片的selector资源        mAddBt.setOnClickListener(this);        mAddBt.setOnLongClickListener(new View.OnLongClickListener() {            @Override            public boolean onLongClick(View v) {                return true;            }        });//           }    private void initFramentHost() {        MyFragmentTabHost mTabHost = (MyFragmentTabHost) findViewById(android.R.id.tabhost);//         初始化底部FragmentTabHost        mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);        mTabHost.setCurrentTab(0);        mTabHost.setOnTabChangedListener(this);        MainTab[] tabs = MainTab.values();        final int size = tabs.length;        for (int i = 0; i < size; i++) {            // 找到每一个枚举的Fragment对象            MainTab mainTab = tabs[i];            // 1. 创建一个新的选项卡            TabHost.TabSpec tab = mTabHost.newTabSpec(getString(mainTab.getResName()));            // ------------------------------------------------- 自定义选项卡 ↓            View indicator = LayoutInflater.from(getApplicationContext())                    .inflate(R.layout.tab_indicator, null);            TextView title = (TextView) indicator.findViewById(R.id.tab_title);            Drawable drawable = this.getResources().getDrawable(                    mainTab.getResIcon());            title.setCompoundDrawablesWithIntrinsicBounds(null, drawable, null,                    null);            if (i == 2) {                indicator.setVisibility(View.INVISIBLE);                mTabHost.setNoTabChangedTag(getString(mainTab.getResName()));            }            title.setText(getString(mainTab.getResName()));            tab.setIndicator(indicator);            Bundle bundle = new Bundle();            bundle.putString("key", "content: " + getString(mainTab.getResName()));            // 2. 把新的选项卡添加到TabHost中            mTabHost.addTab(tab, mainTab.getClz(), bundle);            mTabHost.getTabWidget().getChildAt(i).setOnTouchListener(this);        }    }    @Override    public void onBackPressed() {        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);        if (drawer.isDrawerOpen(GravityCompat.START)) {            drawer.closeDrawer(GravityCompat.START);        } else {            super.onBackPressed();        }    }    @Override    public boolean onCreateOptionsMenu(Menu menu) {        // Inflate the menu; this adds items to the action bar if it is present.        getMenuInflater().inflate(R.menu.main, menu);        return true;    }    @Override    public boolean onOptionsItemSelected(MenuItem item) {        int id = item.getItemId();        //noinspection SimplifiableIfStatement        if (id == R.id.action_settings) {            ToastUtil.showToast(this,"settings");        }        if(id == R.id.action_share){            ToastUtil.showToast(this,"share");        }        if(id == R.id.search){            ToastUtil.showToast(this,"search");        }        return super.onOptionsItemSelected(item);    }    @SuppressWarnings("StatementWithEmptyBody")    @Override    public boolean onNavigationItemSelected(MenuItem item) {        // Handle navigation view item clicks here.        int id = item.getItemId();        if (id == R.id.nav_camera) {            // Handle the camera action        } else if (id == R.id.nav_gallery) {        } else if (id == R.id.nav_slideshow) {        } else if (id == R.id.nav_manage) {        } else if (id == R.id.nav_share) {        } else if (id == R.id.nav_send) {        }        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);        drawer.closeDrawer(GravityCompat.START);        return true;    }    @Override    public void onClick(View view) {    }    @Override    public void onTabChanged(String s) {    }    @Override    public boolean onTouch(View view, MotionEvent motionEvent) {        return false;    }}

mainActivity文件主要实现了自定义选项卡以及加载DrawerArrowDrawable，而加载FragmentTabHost 是在MainTab里面实现的：

/** * 这里负责加载tabhost以及fragment */public enum MainTab {    NEWS(0, R.string.main_tab_name_news, R.drawable.tab_icon_new,           NewsPagerFragment.class),//第三个参数是fragment代码    TWEET(1, R.string.main_tab_name_tweet, R.drawable.tab_icon_tweet,            TweetPagerFragment.class),    QUICK(2, R.string.main_tab_name_quick, R.drawable.tab_icon_new,            null),    EXPLORE(3, R.string.main_tab_name_explore, R.drawable.tab_icon_explore,            ExplorePagerFragment.class),    ME(4, R.string.main_tab_name_my, R.drawable.tab_icon_me,            DefaultFragment.class);    private int idx;    private int resName;    private int resIcon;    private Class<?> clz;    private MainTab(int idx, int resName, int resIcon, Class<?> clz) {        this.idx = idx;        this.resName = resName;        this.resIcon = resIcon;        this.clz = clz;    }    public int getIdx() {        return idx;    }    public void setIdx(int idx) {        this.idx = idx;    }    public int getResName() {        return resName;    }    public void setResName(int resName) {        this.resName = resName;    }    public int getResIcon() {        return resIcon;    }    public void setResIcon(int resIcon) {        this.resIcon = resIcon;    }    public Class<?> getClz() {        return clz;    }    public void setClz(Class<?> clz) {        this.clz = clz;    }}

这样就实现了一个带有FragmentTabHost  和DrawerArrowDrawable的一个基本界面了。然后我们要给每一个Frament添加一个Viewpagerfragment,由于有三个Fragment我们没可能每次都写一次，所以就写一个基类：

package com.example.administrator.oschina.base;//**import android.os.Bundle;import android.support.v4.app.Fragment;import android.support.v4.view.ViewPager;import android.support.v7.app.AppCompatActivity;import android.support.v7.widget.Toolbar;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import com.astuetz.PagerSlidingTabStrip;import com.example.administrator.oschina.R;import com.example.administrator.oschina.adapter.ViewPagerFragmentAdapter;//*带有导航条的基类//        *//        *//        *//        */public abstract class BaseViewPagerFragment extends Fragment {    private PagerSlidingTabStrip mTabStrip;//    private ViewPagerFragmentAdapter mTabsAdapter;    private ViewPager mViewPager;//展示内容用的滚动布局ViewPager    protected ViewPagerFragmentAdapter mTabsAdapter; // 封装了数据集合的ViewPager适配器    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container,                             Bundle savedInstanceState) {        // 填充并返回一个公共的包含导航条和ViewPager的界面        View view = inflater.inflate(R.layout.base_viewpage_fragment, null);        mTabStrip = (PagerSlidingTabStrip)view.findViewById(R.id.pager_tabstrip);        mViewPager = (ViewPager)view.findViewById(R.id.pager);        Toolbar toolbar = (Toolbar)view.findViewById(R.id.toolbar);        ((AppCompatActivity) getActivity()).setSupportActionBar(toolbar);        return view;    }    @Override    public void onActivityCreated(Bundle savedInstanceState) {        super.onActivityCreated(savedInstanceState);        // 1.封装adapter, 注意这里是继承的FragmentPagerAdapter,        // 并且传入的是getChildFragmentManager()        mTabsAdapter = new ViewPagerFragmentAdapter(getActivity(),getChildFragmentManager());        //2.添加page页        addPageToAdapter(mTabsAdapter);        //3.设置adapter        mViewPager.setAdapter(mTabsAdapter);        //4.绑定viewPager到Indicator        mTabStrip.setViewPager(mViewPager);        setScreenPageLimit(mViewPager);    }    /**     * 设置ViewPager能够缓存的页数     */    protected void setScreenPageLimit(ViewPager mViewPager) {        mViewPager.setOffscreenPageLimit(mViewPager.getAdapter().getCount()-1);    }    /**     * 往Adapter中添加page     *     * @param fragmentAdapter     */    protected abstract void addPageToAdapter(            ViewPagerFragmentAdapter fragmentAdapter);}

写了一个基类之后想要为”综合“添加一个ViewpagerFragment就简单得多了:

 public class NewsPagerFragment extends BaseViewPagerFragment {        @Override        protected void addPageToAdapter(ViewPagerFragmentAdapter fragmentAdapter) {            String[] titles = getActivity().getResources().getStringArray(                    R.array.news_viewpage_arrays);//获取新闻tablayout的四个viewpager            //添加page,并给fragment传入对应的bundle参数，在请求接口的时候用            fragmentAdapter.addPage(titles[0], DefaultFragment.class, getBundle(NewsList.CATALOG_ALL));            fragmentAdapter.addPage(titles[1], DefaultFragment.class, getBundle(NewsList.CATALOG_WEEK));            fragmentAdapter.addPage(titles[2], DefaultFragment.class, getBundle(BlogList.CATALOG_LATEST));            fragmentAdapter.addPage(titles[3], DefaultFragment.class, getBundle(BlogList.CATALOG_RECOMMEND));        }        private Bundle getBundle(int newType) {//通过适配器得到要传输的值            Bundle bundle = new Bundle();            bundle.putInt(BaseListFragment.BUNDLE_KEY_CATALOG, newType);            bundle.putString("key", "我是综合里的: " + newType);            return bundle;        }        /**         * 基类会根据不同的catalog展示相应的数据         *         * @param catalog         *            要显示的数据类别         * @return         */        private Bundle getBundle(String catalog) {            Bundle bundle = new Bundle();            // bundle.putString(BlogFragment.BUNDLE_BLOG_TYPE, catalog);            bundle.putString("key", "我是综合里的: " + catalog);            return bundle;        }    }

同理可以把另外两个fragment的Viewpager也弄出来，其中由于笔者选择的是PagerSlidingTabSrip这个开源插件所以要在baseViewpagerfragment的xml文件上面加上pagerSlidingTabStrip:

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="match_parent"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:pstsTabPaddingLeftRight="http://schemas.android.com/tools"    android:orientation="vertical">    <android.support.design.widget.AppBarLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:theme="@style/AppTheme.AppBarOverlay">        <android.support.v7.widget.Toolbar            android:id="@+id/toolbar"            android:layout_width="match_parent"            android:layout_height="?attr/actionBarSize"            android:background="?attr/colorPrimary"            app:layout_scrollFlags="scroll|enterAlways"            app:popupTheme="@style/AppTheme.PopupOverlay" />    </android.support.design.widget.AppBarLayout>    <com.astuetz.PagerSlidingTabStrip        android:id="@+id/pager_tabstrip"        android:layout_width="match_parent"        android:layout_height="30dp"        android:background="@drawable/sliding_tab_strip_background"        app:pstsShouldExpand="true"        app:pstsIndicatorColor="@color/actionbar_background"        >    </com.astuetz.PagerSlidingTabStrip>    <android.support.v4.view.ViewPager        android:id="@+id/pager"        style="@style/fill_fill"        android:layout_below="@id/pager_tabstrip" >    </android.support.v4.view.ViewPager></LinearLayout>

至此项目效果就差不多实现了，要想更详细的代码可以在以下地址查看:

https://github.com/600849155/OsChina