常用搭配:ViewPager+Fragment(newInstance方法)+TabLayout+RecyclerView實現簡單的Tab切換

作爲一個小白,剛開始學Android,遇到Fragment和ViewPager一起運用的場景的時候,初期一大部分知識都是參考網上博客,但是這樣有一個問題,每個人針對內容不同,工具不同,而且不一定都是很好的實現方法。所以我還是結合了一些大神的方法,寫了一個目前我覺得是最好的一個實現方法,當然,僅供參考,還是建議自己手動敲。

項目地址:https://github.com/PeachLuis/AndroidReStudy/tree/master
當中的recycler_view當中

1. 新建目標空活動BaseRecyclerView

BaseRecyclerView:

public class BaseRecyclerView extends LuisApplication {

	protected void onCreate(Bundle savedInstanceState) {
	        super.onCreate(savedInstanceState);
	
	        //因爲是TabLayout,所以這裏需要將actionBar隱藏
	        ActionBar actionBar = getSupportActionBar();
	        if (actionBar != null) {
	            getSupportActionBar().hide();
	        }
	        setContentView(R.layout.activity_base_recycler_view);
	        
}

BaseRecyclerView的xml文件:

<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"
    tools:context=".activity.item_activity.recycler_view.BaseRecyclerView">

    <android.support.design.widget.TabLayout
        android:id="@+id/recycler_tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </android.support.design.widget.TabLayout>

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

</LinearLayout>

2. 新建Item類(Base類)和ItemAdapter(RecyclerView)

這些都是老生常談的內容,也不需要過多講解,直接看代碼把

Item:

public class Item {

    private int mImageRes;

    private String mName;

    public Item(int mImageRes, String mName) {
        this.mImageRes = mImageRes;
        this.mName = mName;
    }

    public Item() {
    }

    public int getmImageRes() {
        return mImageRes;
    }

    public void setmImageRes(int mImageRes) {
        this.mImageRes = mImageRes;
    }

    public String getmName() {
        return mName;
    }

    public void setmName(String mName) {
        this.mName = mName;
    }
}

ItemAdapter:

public class ItemAdapter extends RecyclerView.Adapter<ItemAdapter.ViewHolder> {

    private List<Item> mDatas = new ArrayList<>();

    public ItemAdapter(List<Item> mDatas) {
        this.mDatas = mDatas;
    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {
        View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.base_recyclerview_item, viewGroup, false);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder viewHolder, int i) {
        Item item = mDatas.get(i);
        viewHolder.itemImage.setImageResource(item.getmImageRes());
        viewHolder.itemDescription.setText(item.getmName());
    }

    @Override
    public int getItemCount() {
        return mDatas.size() ;
    }

    static class ViewHolder extends RecyclerView.ViewHolder{

        ImageView itemImage;

        TextView itemDescription;

        ViewHolder(@NonNull View itemView) {
            super(itemView);
            itemImage = itemView.findViewById(R.id.recycler_item_image);
            itemDescription = itemView.findViewById(R.id.recycler_item_description);
        }
    }
}

RecyclerView每個小的item的xml文件–base_recyclerview_item

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="5dp">

    <ImageView
        android:id="@+id/recycler_item_image"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:src="@mipmap/ic_launcher"
        android:scaleType="centerCrop"/>

    <TextView
        android:id="@+id/recycler_item_description"
        android:layout_gravity="center"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="我是textView"
        android:textSize="20sp"/>

</LinearLayout>

3. 新建需要的Fragment類----TabFragment_Recycler

TabFragment_Recycler:

public class TabFragment_Recycler extends Fragment {

    private int mTitleID;

    private List<Item> mDatas = new ArrayList<>();

    public static TabFragment_Recycler newInstance(int titleID) {
        Bundle args = new Bundle();
        args.putInt("RecyclerTab", titleID);
        TabFragment_Recycler fragment = new TabFragment_Recycler();
        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Bundle args = getArguments();
        if (args != null) {
            mTitleID = args.getInt("RecyclerTab");
        }
        
        initData();
    }
    
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.base_recyclerview_fragment, container, false);
        initView(view);
        return view;
    }

    private void initData() {
        for (int i = 0; i < 80; i++) {
            mDatas.add(new Item(R.mipmap.ic_launcher,"這是第"+i+"個item"));
        }
    }

    private void initView(View view) {
        RecyclerView recyclerView = (RecyclerView) view.findViewById(R.id.base_recyclerView);

        switch (mTitleID) {
            case 0:
                //第一個Tab內容
                LinearLayoutManager layoutManager = new LinearLayoutManager(LuisApplication.getContext());
                recyclerView.setLayoutManager(layoutManager);
                break;
            case 1:
                //第二個Tab內容
                GridLayoutManager layoutManager1 = new GridLayoutManager(LuisApplication.getContext(), 2);
                recyclerView.setLayoutManager(layoutManager1);
                break;
            case 2:
                //第三個Tab內容
                StaggeredGridLayoutManager layoutManager2 = new StaggeredGridLayoutManager(3,StaggeredGridLayoutManager.VERTICAL);
                recyclerView.setLayoutManager(layoutManager2);
                break;
            default:
                break;
        }
        ItemAdapter adapter = new ItemAdapter(mDatas);
        recyclerView.setAdapter(adapter);
    }
}

4. 完善BaseRecyclerView

public class BaseRecyclerView extends LuisApplication {

    private TabLayout mTabLayout;

    private ViewPager mViewpager;

    private String[] mTitles = {"線性列表", "單排2個item", "瀑布流"};

    private List<Fragment> fragmentList = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        //因爲是TabLayout,所以這裏需要將actionBar隱藏
        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null) {
            getSupportActionBar().hide();
        }
        setContentView(R.layout.activity_base_recycler_view);

        initView();
    }

    private void initView() {
        mTabLayout = (TabLayout) findViewById(R.id.recycler_tabLayout);
        mViewpager = (ViewPager) findViewById(R.id.recycler_viewPager);

        //這裏使用newInstance方法創建Fragment和添加新的Tab
        for (int i=0;i<mTitles.length;i++) {
            fragmentList.add(TabFragment_Recycler.newInstance(i));
            mTabLayout.addTab(mTabLayout.newTab());
        }

        //這裏添加Adapter
        mViewpager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int i) {
                return fragmentList.get(i);
            }

            @Override
            public int getCount() {
                return fragmentList.size();
            }
            
			//這裏用來設置標題
            @Nullable
            @Override
            public CharSequence getPageTitle(int position) {
                return mTitles[position];
            }
        });

        //這裏添加一個接口
        mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {

            }

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

            }

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

            }
        });

        mTabLayout.setupWithViewPager(mViewpager);
    }


}
  1. 這裏有一個小細節:就是標題的設置放在了setAdapter裏面,而不是通過addTab後再使用setText方法,這是因爲setText會造成多添加了很多空白,詳細原因可以自己google。
  2. 還有一點,初始化數據這裏的initData需要放置在onCreate當中,如果放置在onCreateView裏面,因爲fragment的特性會導致數據加載多次

項目地址:https://github.com/PeachLuis/AndroidReStudy/tree/master
當中的recycler_view當中

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章