TabLayout + ViewPager + Fragment + SwipeRefreshLayout + RecyclerView

TabLayout + ViewPager + Fragment + SwipeRefreshLayout + RecyclerView

Android开发中，顶栏和底栏的的使用很普遍，处理方法也不少；

本文对主流的 TabLayout + ViewPager + Fragment + SwipeRefreshLayout + RecyclerView方式进行简要说明；

配置环境

• 首先在gradle中添加依赖(具体版本自行决定)：compile ‘com.android.support:design:25.1.0’

自定义TabLayout样式

• 自定义tab的样式：
  
  • 在 styles.xml 中添加自定义的style
  • 在相应layout中应用到 TabLayout 中

styles.xml

    
    -- 自定义 TabText 的外观 -->
    

layout.xml

    "match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        .support.design.widget.TabLayout
            android:id="@+id/tl_title"
            style="@style/CustomTabLayout" //设置自定义style
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

        .support.v4.view.ViewPager
            android:id="@+id/my_viewpager"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
        .support.v4.view.ViewPager>
    

具体代码

• 自定义一个FragmentPagerAdapter:

public class MyViewPagerAdapter extends FragmentPagerAdapter {
    private List fragments;
    private String[] titles;  

    public MyViewPagerAdapter(FragmentManager fm, String[] titles, List fragments) {
        super(fm);  
        this.titles = titles;  
        this.fragments = fragments;
    }  

    @Override  
    public Fragment getItem(int arg0) {  
        return fragments.get(arg0);  
    }  

    @Override  
    public CharSequence getPageTitle(int position) {  
        return titles[position];  
    }  

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

• 然后看代码中的具体使用：

private String[] titles=new String[]{"tab1","tab2"};
protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        firstPage = new FirstFragment();
        secondPage = new SecondFragment();
        fragments.add(firstPage);
        fragments.add(secondPage);

        mViewPager = (ViewPager) findViewById(R.id.my_viewpager);
        viewPagerAdapter = new MyViewPagerAdapter(getSupportFragmentManager(), titles, fragments);
        mViewPager.setAdapter(viewPagerAdapter);

        TabLayout tabLayout = (TabLayout) findViewById(R.id.tl_title);
        tabLayout.setTabMode(TabLayout.MODE_FIXED);
        tabLayout.setupWithViewPager(mViewPager);

        mViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));

        tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                mViewPager.setCurrentItem(tab.getPosition(), true);
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });
    }

• 再来看看RecyclerView在Fragment中的使用：
• 首先是分割线，官方并没有封装分割线，需要自定义（其实也可以不使用分割线，而是使用CardView，效果可能更好）：

public class MyDividerItemDecoration extends RecyclerView.ItemDecoration {

    private static final int[] ATTRS = new int[]{
            android.R.attr.listDivider
    };
    public static final int HORIZONTAL_LIST = LinearLayoutManager.HORIZONTAL;
    public static final int VERTICAL_LIST = LinearLayoutManager.VERTICAL;

    private Drawable mDivider;

    private int mOrientation;


    public MyDividerItemDecoration(Context context, int orientation) {
        final TypedArray a = context.obtainStyledAttributes(ATTRS);
        mDivider = a.getDrawable(0);
        a.recycle();
        setOrientation(orientation);
    }

    @Override
    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
        // 绘制间隔
        if (mOrientation == VERTICAL_LIST) {
            drawVertical(c, parent);
        } else {
            drawHorizontal(c, parent);
        }
    }

    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        if (mOrientation == VERTICAL_LIST) {
            outRect.set(0, 0, 0, mDivider.getIntrinsicHeight());
        } else {
            outRect.set(0, 0, mDivider.getIntrinsicWidth(), 0);
        }
    }

    private void setOrientation(int orientation) {
        if (orientation != HORIZONTAL_LIST && orientation != VERTICAL_LIST) {
            throw new IllegalArgumentException("invalid orientation");
        }
        mOrientation = orientation;
    }

    /**
     * 绘制间隔
     */
    private void drawVertical(Canvas c, RecyclerView parent) {
        final int left = parent.getPaddingLeft();
        final int right = parent.getWidth() - parent.getPaddingRight();
        final int childCount = parent.getChildCount();
        for (int i = 0; i < childCount; i++) {
            final View child = parent.getChildAt(i);
            final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child
                    .getLayoutParams();
            final int top = child.getBottom() + params.bottomMargin +
                    Math.round(ViewCompat.getTranslationY(child));
            final int bottom = top + mDivider.getIntrinsicHeight();
            mDivider.setBounds(left, top, right, bottom);
            mDivider.draw(c);
        }
    }

    /**
     * 绘制间隔
     */
    private void drawHorizontal(Canvas c, RecyclerView parent) {
        final int top = parent.getPaddingTop();
        final int bottom = parent.getHeight() - parent.getPaddingBottom();
        final int childCount = parent.getChildCount();
        for (int i = 0; i < childCount; i++) {
            final View child = parent.getChildAt(i);
            final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child
                    .getLayoutParams();
            final int left = child.getRight() + params.rightMargin +
                    Math.round(ViewCompat.getTranslationX(child));
            final int right = left + mDivider.getIntrinsicHeight();
            mDivider.setBounds(left, top, right, bottom);
            mDivider.draw(c);
        }
    }
}

• 接下来是自定义RecyclerView.Adapter，添加点击事件（因为没有自带）:

public class SimpleItemAdapter extends RecyclerView.Adapter<SimpleItemAdapter.SimpleItemViewHolder> {

    private final Context context;
    private List> data;

    private OnItemClickListener clickListener;

    //Fragment中调用以监听点击事件，通过RecyclerView.ViewHolder来传递
    public void setClickListener(OnItemClickListener clickListener) {
        this.clickListener = clickListener;
    }

    //点击事件接口
    public static interface OnItemClickListener {
        void onClick(View view, int position);
    }

    public SimpleItemAdapter(Context context, List> data) {
        this.context = context;
        this.data = data;
    }

    //方便刷新数据
    public void updateData(List> data) {
        this.data = data;
        notifyDataSetChanged();
    }

    @Override
    public SimpleItemViewHolder onCreateViewHolder(ViewGroup viewGroup, int viewType) {
        View itemView = LayoutInflater.from(context).inflate(R.layout.list_first, viewGroup, false);
        return new SimpleItemViewHolder(itemView);
    }

    @Override
    public void onBindViewHolder(SimpleItemViewHolder viewHolder, int position) {
        viewHolder.status.setBackground(context.getResources().getDrawable((Integer) data.get(position).get("im")));
        viewHolder.name.setText((String) data.get(position).get("tv"));
    }

    @Override
    public int getItemCount() {
        return (this.data != null) ? this.data.size() : 0;
    }

    final class SimpleItemViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener{
        //为方便，将layout设为 ImageView + TextView
        LinearLayout rootView;
        ImageView im;
        TextView tv;

        SimpleItemViewHolder(View itemView) {
            super(itemView);
            rootView = (LinearLayout) itemView.findViewById(R.id.root_view);
            rootView.setOnClickListener(this);
            this.im = (ImageView) itemView.findViewById(R.id.im);
            this.tv = (TextView) itemView.findViewById(R.id.tv);

        }

        //传递点击事件
        @Override
        public void onClick(View view) {
            if (clickListener != null) {
                clickListener.onClick(itemView, getAdapterPosition());
            }
        }
    }
}

• 在Fragment中处理RecyclerView和SwipeRefreshLayout：

public View initView() {
        View view = View.inflate(mActivity, R.layout.fragment_first, null);

        //RecyclerView
        mRecyclerView = (RecyclerView) view.findViewById(R.id.rv_first);
        //添加分割线
        mRecyclerView.addItemDecoration(new MyDividerItemDecoration(mActivity, LinearLayoutManager.VERTICAL));
        //设置布局
        mRecyclerView.setLayoutManager(new LinearLayoutManager(mActivity));
        adapter = new SimpleItemAdapter(mActivity, data);
        mRecyclerView.setAdapter(adapter);
        //监听点击事件：使用adapter中自定义的点击事件接口
        adapter.setClickListener(new SimpleItemAdapter.OnItemClickListener() {
            @Override
            public void onClick(View view, int position) {
            //do something
            }
        });

        //SwipeRefreshLayout
        mSwipeRefreshLayout = (SwipeRefreshLayout) view.findViewById(R.id.sl_first);
        //设置样式
        mSwipeRefreshLayout.setColorSchemeResources(R.color.lightblue, R.color.lightpink, R.color.orange, R.color.lightgreen);
        mSwipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
            public void onRefresh() {
                refreshData();
            }
        });
}