Tablayout、ViewPage與Fragment使用
阿新 • • 發佈：2018-12-15
看下效果圖：
實現步驟
：
1、xml佈局：
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/white"> <com.yanzhenjie.sofia.StatusView android:id="@+id/status_view" android:layout_width="match_parent" android:layout_height="wrap_content" /> <TextView android:id="@+id/tv_title" android:layout_width="match_parent" android:layout_height="40dp" android:layout_below="@+id/status_view" android:gravity="center" android:text="發現" android:textColor="@color/color_333333" android:textSize="18sp" /> <View android:id="@+id/divider" android:layout_width="match_parent" android:layout_height="1px" android:layout_below="@+id/tv_title" android:background="#eaeaea" /> <android.support.design.widget.TabLayout android:id="@+id/tab" android:layout_width="match_parent" android:layout_height="44dp" android:layout_below="@+id/divider" android:layout_centerVertical="true" app:tabIndicatorColor="@color/color_333333" app:tabSelectedTextColor="@color/color_333333" app:tabTextAppearance="@style/MyTabBar" app:tabTextColor="@color/color_999999" /> <android.support.v4.view.ViewPager android:id="@+id/view_pager_hair" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@+id/tab" android:visibility="visible" /> </RelativeLayout>
佈局檔案沒什麼好說的，就是個頭部檔案和viewpage。
2、初始化控制元件相關
package com.jm.ec.main.find; import android.app.Activity; import android.os.Bundle; import android.support.annotation.NonNull; import android.support.annotation.Nullable; import android.support.design.widget.TabLayout; import android.support.v4.view.ViewPager; import android.view.View; import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.JSONObject; import com.jm.core.delegates.bottom.BottomItemDelegate; import com.jm.core.net.RestClient; import com.jm.core.util.log.JLogger; import com.jm.ec.R; import com.jm.ec.constant.JConstants; import com.jm.ui.launcher.ILauncherListener; import java.util.ArrayList; import java.util.List; public class FindDelegate extends BottomItemDelegate { private TabLayout mTabLayout = null; private ViewPager mViewPager = null; private ILauncherListener launcherListener = null; private FindPagerAdapter pagerAdapter; @Override public void onAttach(Activity activity) { super.onAttach(activity); if (activity instanceof ILauncherListener) { launcherListener = (ILauncherListener) activity; } } @Override public Object setLayout() { return R.layout.find_delegate; } @Override public void onSupportVisible() { super.onSupportVisible(); getAppBar().statusBarDarkFont(); } @Override public void onBindView(@Nullable Bundle savedInstanceState, @NonNull View rootView) { mViewPager = $(R.id.view_pager_hair); mTabLayout = $(R.id.tab); } @Override public void onLazyInitView(@Nullable Bundle savedInstanceState) { super.onLazyInitView(savedInstanceState); requestArticleCategory(); } private void requestArticleCategory() { RestClient.builder() .url("資料介面") .success(this::updateIndexView) .build() .post(); } private void updateIndexView(String response) { JLogger.e(response); try { final JSONObject jsonObject = JSON.parseObject(response); if (JConstants.OK.equals(jsonObject.getString("code"))) { List<FindEntity> entities = new ArrayList<>(); entities.add(new FindEntity("", "推薦"));//將標題“推薦”加入進去 entities.addAll(FindDataConverter.convert(response));//解析的全部資料存放進entities中 initTabLayout(entities);//初始化tablayout } } catch (Exception e) { } } private void initTabLayout(List<FindEntity> entities) { mTabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);//TabLayout位置居中 pagerAdapter = new FindPagerAdapter(getChildFragmentManager(), entities);//adpter介面卡 mViewPager.setAdapter(pagerAdapter);//為viewpage設定adapter mTabLayout.setupWithViewPager(mViewPager);//tablayout與viewpager繫結 } }
這裡專案中的tablayout的標題是動態獲取的，這樣做的好處是，不需要固定標題的，後期產品那邊可以任意更改標題。只需要資料介面提供方過來，解析這一資料，再新增進去即可。看下資料介面解析方法
package com.jm.ec.main.find; import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.JSONArray; import com.alibaba.fastjson.JSONObject; import com.jm.core.util.log.JLogger; import com.jm.ec.main.index.article.ArticleEntity; import java.util.ArrayList; import java.util.List; public class FindDataConverter { public static List<FindEntity> convert(String json) { JLogger.json(json); final List<FindEntity> dataList = new ArrayList<>(); final JSONArray jsonArray = JSON.parseObject(json).getJSONArray("data"); final int size = jsonArray.size(); for (int i = 0; i < size; i++) { final JSONObject arrayJSONObject = jsonArray.getJSONObject(i); final String id = arrayJSONObject.getString("id"); final String name = arrayJSONObject.getString("name"); FindEntity entity = new FindEntity(id, name); dataList.add(entity); } return dataList; } }
3、Entity類
package com.jm.ec.main.find;
import java.io.Serializable;
public class FindEntity implements Serializable {
private String id;
private String name;
public FindEntity(String id, String name) {
this.id = id;
this.name = name;
}
public String getId() {
return id;
}
public FindEntity setId(String id) {
this.id = id;
return this;
}
public String getName() {
return name;
}
public FindEntity setName(String name) {
this.name = name;
return this;
}
}
因為引數只需要id和name，這裡解析和entity也就寫此兩個即可。
4、adapter方法
主要看這句pagerAdapter = new FindPagerAdapter(getChildFragmentManager(), entities);getChildFragmentManager()所得到的是在fragment 裡面子容器的管理器。
看下adapter方法
package com.jm.ec.main.find;
import android.os.Parcelable;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import com.jm.ec.gallery.HairDelegate;
import java.util.List;
/**
* FragmentStatePagerAdapter繼承自 PagerAdapter。但是，和 FragmentPagerAdapter 不一樣的是，
* 正如其類名中的 'State' 所表明的含義一樣，該 PagerAdapter 的實現將只保留當前頁面，
* 當頁面離開視線後，就會被消除，釋放其資源；而在頁面需要顯示時，生成新的頁面(就像 ListView 的實現一樣)。
* 這麼實現的好處就是當擁有大量的頁面時，不必在記憶體中佔用大量的記憶體
*/
public class FindPagerAdapter extends FragmentStatePagerAdapter {
private final List<FindEntity> entities;
public FindPagerAdapter(FragmentManager fm, List<FindEntity> entities) {
super(fm);
this.entities =entities;
}
@Override
public void restoreState(Parcelable state, ClassLoader loader) {
// Do NOTHING
}
@Override
public Fragment getItem(int position) {
FindEntity entity = entities.get(position);
return RecommendDelegate.create(entity.getId()); //從Fragment佇列中得到文章類Fragment並加入到ViewPager中
}
@Override
public int getCount() {
return entities.size();
}
@Override
public CharSequence getPageTitle(int position) {
return entities.get(position).getName();//得到對應tablayout的標題
}
}
關於FragmentStatePagerAdapter的相關知識，可以參考這個連結，講解的很詳細http://www.cnblogs.com/dancefire/archive/2013/01/02/why-notifyDataSetChanged-does-not-work.html