介紹三個Android支持庫控件：TabLayout+ViewPager+RecyclerView

本文主要介紹如下三個Android支持庫控件的配合使用：

  • TabLayout：android.support.design.widget.TabLayout
  • ViewPager：android.support.v4.view.ViewPager
  • RecyclerView：android.support.v7.widget.RecyclerView

對于支持庫的使用，這里稍作介紹：
Android支持庫包含常用的v4、v7、v13以及v17，注解支持（annotation），設(shè)計支持（material design）等。
目前v4和v7已經(jīng)根據(jù)不同的功能進(jìn)行了拆分，以減小目標(biāo)Apk的大小，可針對某項具體的功能引入特定的包，而不用整體引入support-v4包。
比如，以下為筆者常用的支持庫，讀者可以參考：

// 實現(xiàn)各種 UI 相關(guān)組件，例如 ViewPager、NestedScrollView 和 ExploreByTouchHelper。
supportCoreUi       : 'com.android.support:support-core-ui:24.2.0',
// 添加對使用片段封裝用戶界面和功能的支持，從而使應(yīng)用能夠提供可以在大屏幕設(shè)備與小屏幕設(shè)備之間進(jìn)行調(diào)節(jié)的布局。
// 此模塊依賴于 compat、core-utils、core-ui 和 media-compat。
supportFragment     : 'com.android.support:support-fragment:24.2.0',
// 此庫添加了對操作欄用戶界面設(shè)計模式的支持。此庫包含對 Material Design 用戶界面實現(xiàn)的支持。
supportAppCompat    : 'com.android.support:appcompat-v7:24.2.0',
// recyclerview 庫添加了 RecyclerView 類。此類能夠為 RecyclerView 小部件提供支持，
// RecyclerView 是一種通過提供有限的數(shù)據(jù)項窗口有效顯示大數(shù)據(jù)集的視圖。
supportRecyclerView : 'com.android.support:recyclerview-v7:24.2.0',
// 此庫添加了對 CardView 小部件的支持，讓您能夠在卡片內(nèi)顯示信息，從而使應(yīng)用具備一致的外觀。
supportCardView     : 'com.android.support:cardview-v7:24.2.0',
// 注解軟件包提供的 API 支持向應(yīng)用中添加注解元數(shù)據(jù)。
supportAnnotations  : 'com.android.support:support-annotations:24.2.0',
// 設(shè)計軟件包提供的 API 支持向應(yīng)用中添加 Material Design 組件和模式。
supportDesign       : 'com.android.support:design:24.2.0',

最后，需要注意，支持庫的版本需要保持一致，不然容易出現(xiàn)編譯錯誤。
更多關(guān)于支持庫的使用，請參考官方文檔。

先上效果圖：

Tab頁切換效果圖

（左滑的比較慢，是為了看清效果）

一、TabLayout

TabLayout是design支持庫中引入的支持Tab頁的控件，配合ViewPager使用，實現(xiàn)Table頁面的滑動。使用時：

  1. 使用setTabMode(TabLayout.MODE_FIXED)來設(shè)置TabLayout的模式；
  2. 通過addTab來添加Tab頁面；
  3. 最后通過setupWithViewPager來關(guān)聯(lián)ViewPager.
// 設(shè)置TabLayout的模式
goodsTypeTl.setTabMode(TabLayout.MODE_FIXED);
// 添加Fragment顯示
for (int i = 0; i < 2; i++) {
    PickingTaskGoodsFragment itemFragment = PickingTaskGoodsFragment.newInstance(
            i == 0 ? unCompletedPickingSku : pickingCompletedSku);
    fragmentList.add(itemFragment);
    goodsTypeTl.addTab(goodsTypeTl.newTab().setText(titleList.get(i)));
}
// 實例化ViewPage的適配器
FragmentPagerAdapter fAdapter = new PickingFragmentPagerAdapter(
        getSupportFragmentManager(), fragmentList, titleList);
// viewpager加載adapter
goodsDetailVp.setAdapter(fAdapter);
// TabLayout加載viewpager
goodsTypeTl.setupWithViewPager(goodsDetailVp);

二、ViewPager

ViewPager是在v4包中引入的控件，在布局文件中，緊接著TabLayout進(jìn)行布局。ViewPager繼承自ViewGroup，在使用時，最關(guān)鍵的是為其添加PagerAdapter，一般ViewPage會包含F(xiàn)ragment，那么這里PagerAdapter會使用FragmentPagerAdapter：

public abstract class FragmentPagerAdapter extends PagerAdapter

FragmentPagerAdapter是一個抽象類，在使用時一般繼承自FragmentPagerAdapter自定義實現(xiàn)：

public class PickingFragmentPagerAdapter extends FragmentPagerAdapter {

    private List<Fragment> fragmentList;
    private List<String> titleList;

    public PickingFragmentPagerAdapter(FragmentManager fm,
                                       List<Fragment> fragmentList, List<String> titleList) {
        super(fm);
        this.fragmentList = fragmentList;
        this.titleList = titleList;
    }

    @Override
    public Fragment getItem(int position) {
        return fragmentList.get(position);
    }

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

    @Override
    public CharSequence getPageTitle(int position) {
        return titleList.get(position);
    }
}

getItem和getCount方法必須要求實現(xiàn)，分別返回List<Fragment>的內(nèi)容就行了。

在實例化PickingFragmentPagerAdapter時，需要傳入FragmentManager，一般采用getSupportFragmentManager()。

三、RecyclerView

RecyclerView是v7支持庫中引入的控件，使用時需要依賴com.android.support:recyclerview-v7:22.2.1，使用RecyclerView需要注意兩點：

  1. 設(shè)置LayoutManager
recyclerView.setLayoutManager(new LinearLayoutManager(context));

當(dāng)然，這里還可以設(shè)置GridLayoutManager。

  1. 設(shè)置Adapter
recyclerView.setAdapter(new PickingTaskGoodsAdapter(pickingTaskDParams, mListener));

RecyclerView的Adapter是需要重點關(guān)注的。其中，需要實現(xiàn)的方法有三個：onCreateViewHolder、onBindViewHolder和getItemCount。

  • onCreateViewHolder：這個方法的返回值是ViewHolder，而這個ViewHolder一般都需要自定義，當(dāng)然，默認(rèn)RecyclerView也有ViewHolder。
View view = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.out_picking_goods_detail_item, parent, false);
return new ViewHolder(view, new MySkuItemData());

View是直接通過Inflater提取出來的（注意item的根ViewGroup的height不能設(shè)置為match parent，不然多行item無法正常顯示），ViewHolder的入?yún)⑿枰獋魅隫iew。ViewHolder的定義有點講究，與ListView中有不一致：

public class ViewHolder extends RecyclerView.ViewHolder {
    final View mView;

    AutofitTextView goodsNumberTv;
    TextView goodsNameTv;
    TextView goodsLeftNumberTv;
    ImageView skuState;
    Button pickingSku;

    ViewHolder(View view) {
        super(view);
        mView = view;

        goodsNumberTv = (AutofitTextView) view.findViewById(R.id.out_picking_task_goods_number_tv);
        goodsNameTv = (TextView) view.findViewById(R.id.out_picking_task_goods_name_tv);
        goodsLeftNumberTv = (TextView) view.findViewById(R.id.out_picking_task_goods_left_number_tv);
        skuState = (ImageView) view.findViewById(R.id.out_picking_task_goods_sku_state_iv);
        pickingSku = (Button) view.findViewById(R.id.out_picking_task_goods_picking_btn);
    }
}

首先，需要定義一個帶參構(gòu)造器，第一個參數(shù)一定是View，ViewHolder也需要包含View的域，另外，ViewHolder可以包含各個View的監(jiān)聽器，而這種監(jiān)聽器一般都需要自定義，因為其中會包含重要的參數(shù)。

  • onBindViewHolder是具體實現(xiàn)數(shù)據(jù)更新的地方，onBindViewHolder的入?yún)?code>ViewHolder holder, int position，因此，首先通過position獲取數(shù)據(jù)，然后對ViewHolder的控件依次設(shè)置：
@Override
public void onBindViewHolder(ViewHolder holder, int position) {
    PickingTaskDParam dParam = taskDParamList.get(position);
    holder.goodsNumberTv.setText(dParam.getSkuNo());
    holder.goodsNameTv.setText(dParam.getSkuName());
    holder.goodsLeftNumberTv.setText(String.valueOf(dParam.getPlannedPickQty().intValue()));

    if (dParam.getOptStatus() == 1 || dParam.getOptStatus() == 2) {
        // 大小設(shè)置
        holder.pickingSku.setVisibility(View.GONE);
        holder.skuState.setVisibility(View.VISIBLE);
    } else {
        holder.skuState.setVisibility(View.GONE);
        if (pickingVisible) {
            holder.pickingSku.setVisibility(View.VISIBLE);
            holder.pickingSku.setOnClickListener(new MyItemOnClickListener(dParam));
        } else {
            holder.pickingSku.setVisibility(View.GONE);
        }
    }
}
  • getItemCount就直接返回數(shù)據(jù)List的size()就可以啦。

RecyclerView添加分割：分為設(shè)置垂直方向距離和設(shè)置分隔條兩種方式：

垂直方向距離：

public class VerticalSpaceItemDecoration extends RecyclerView.ItemDecoration {

    private final int verticalSpaceHeight;

    public VerticalSpaceItemDecoration(int verticalSpaceHeight) {
        this.verticalSpaceHeight = verticalSpaceHeight;
    }

    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent,
            RecyclerView.State state) {
        outRect.bottom = verticalSpaceHeight;
    }
}

分隔條：

public class DividerItemDecoration extends RecyclerView.ItemDecoration {

    private static final int[] ATTRS = new int[]{android.R.attr.listDivider};

    private Drawable divider;

    /**
     * Default divider will be used
     */
    public DividerItemDecoration(Context context) {
        final TypedArray styledAttributes = context.obtainStyledAttributes(ATTRS);
        divider = styledAttributes.getDrawable(0);
        styledAttributes.recycle();
    }

    /**
     * Custom divider will be used
     */
    public DividerItemDecoration(Context context, int resId) {
        divider = ContextCompat.getDrawable(context, resId);
    }

    @Override
    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
        int left = parent.getPaddingLeft();
        int right = parent.getWidth() - parent.getPaddingRight();

        int childCount = parent.getChildCount();
        for (int i = 0; i < childCount; i++) {
            View child = parent.getChildAt(i);

            RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams();

            int top = child.getBottom() + params.bottomMargin;
            int bottom = top + divider.getIntrinsicHeight();

            divider.setBounds(left, top, right, bottom);
            divider.draw(c);
        }
    }
}

以上關(guān)于分隔條內(nèi)容可參考Stack Overflow：How to add dividers and spaces between items in RecyclerView?

四、One more thing

最后，復(fù)習(xí)下Fragment和Activity的數(shù)據(jù)傳遞：

  • 從Activity到Fragment：Bundle，通過Fragment的newInstance方法：
public static PickingTaskGoodsFragment newInstance(List<PickingTaskDParam> pickingTaskDParams) {
    PickingTaskGoodsFragment fragment = new PickingTaskGoodsFragment();
    Bundle args = new Bundle();
    args.putParcelable(PICKING_TASK_D_PARAM, Parcels.wrap(pickingTaskDParams));
    fragment.setArguments(args);
    return fragment;
}
  • 從Fragment到Activity：接口回調(diào)，在Fragment中定義接口，讓包含該Fragment的Activity必須實現(xiàn)接口：
@Override
public void onAttach(Context context) {
    super.onAttach(context);
    if (context instanceof OnListFragmentInteractionListener) {
        mListener = (OnListFragmentInteractionListener) context;
    } else {
        throw new RuntimeException(context.toString()
                + " must implement OnListFragmentInteractionListener");
    }
}
@Override
public void onDetach() {
    super.onDetach();
    mListener = null;
}
public interface OnListFragmentInteractionListener {

    void onListFragmentInteraction(PickingTaskDParam item);
}

以上。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容