TabLayout + ViewPager + Fragment
这一部分内容其实网上有很多资料了, 我也只是总结整理下, 方便自己以后查看.
主要参考的几个bloger有:
http://chenfuduo.me/2015/07/30/TabLayout-of-design-support-library/
记录下自己安装别人的写了一个自己的demo
1.首先导入库:
compile 'com.android.support:appcompat-v7:23.1.1' compile 'com.android.support:design:23.1.1' compile 'com.android.support:support-v4:23.1.1'
2. 然后就是 布局文件
<?xml version="1.0" encoding="utf-8"?>
<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=".TabLayoutActivity">
<android.support.design.widget.TabLayout
android:id="@+id/tl_tabs"
style="@style/MyCustomTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<android.support.v4.view.ViewPager
android:id="@+id/vp_viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="@android:color/white"/>
</LinearLayout>
3. 这里将TabLaoyut的样式设置放入到了style文件中了,颜色神马的就不贴了
如果在布局中使用属性, 带tab开头的属性使用"app:"前缀而不是"andorid:"前缀
<resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style> <style name="MyCustomTabLayout" parent="Widget.Design.TabLayout"> <!--Tablayout 使用的样式--> <item name="tabMaxWidth">@dimen/tab_max_width</item> <!--TAB最大宽度--> <item name="tabIndicatorColor">?attr/colorAccent</item> <!--TAB底部滑块颜色--> <item name="tabIndicatorHeight">5dp</item> <!--TAB底部滑块高度--> <item name="tabPaddingStart">12dp</item> <!--TAB左边padding--> <item name="tabPaddingEnd">12dp</item> <!--TAB右边padding--> <item name="tabBackground">?attr/selectableItemBackground</item> <!--TAB背景色--> <item name="tabTextAppearance">@style/MyCustomTabTextAppearance</item> <!--TAB文字样式--> <item name="tabSelectedTextColor">?android:textColorPrimary</item> <!--TAB选中文字颜色--> </style> <style name="MyCustomTabTextAppearance" parent="TextAppearance.Design.Tab"> <!--TAB文字样式--> <item name="android:textSize">14sp</item> <item name="android:textColor">?android:textColorSecondary</item> <item name="textAllCaps">false</item> <!--英文大写,默认true--> </style> <dimen name="tab_max_width">36dp</dimen> </resources>
4.然后就是Activity文件了
public class TabLayoutActivity extends AppCompatActivity {
private ViewPagerAdapter viewPagerAdapter;
private ViewPager viewPager;
private TabLayout tl;
private static final String POSITION = "position";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tablayout);
viewPager = (ViewPager) findViewById(R.id.vp_viewpager);
tl = (TabLayout) findViewById(R.id.tl_tabs);
}
@Override
protected void onResume() {
super.onResume();
viewPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager());
viewPager.setAdapter(viewPagerAdapter);
tl.setupWithViewPager(viewPager); //ViewPager 和 TabLayout 关联
tl.setTabMode(TabLayout.MODE_SCROLLABLE); //用于多个TAB, Tablayout可以滚动
//更改TAB默认的文本布局,自定义TAB布局
for (int i = 0; i < tl.getTabCount(); i++) {
TabLayout.Tab tabAt = tl.getTabAt(i);
tabAt.setCustomView(viewPagerAdapter.getTabView(i));
}
viewPagerAdapter.notifyDataSetChanged();
}
@Override
public void onSaveInstanceState(Bundle outState) {
super.onSaveInstanceState(outState);
outState.putInt(POSITION, tl.getSelectedTabPosition());
}
@Override
protected void onRestoreInstanceState(Bundle savedInstanceState) {
super.onRestoreInstanceState(savedInstanceState);
viewPager.setCurrentItem(savedInstanceState.getInt(POSITION));
}
}
5. 然后就是ViewPager的Adapter了
private class ViewPagerAdapter extends FragmentPagerAdapter {
int pageCount = 10;
private int color[] = new int[]{R.color.orange, R.color.green, R.color.red,
R.color.color_grays, R.color.color_red, R.color.color_black,
R.color.color_furvous, R.color.color_blue, R.color.color_green,R.color.color_orange
};
public ViewPagerAdapter(FragmentManager supportFragmentManager) {
super(supportFragmentManager);
}
@Override
public Fragment getItem(int position) {
return ViewPagerFragment.getInstance(position + 1, color[position]);
}
@Override
public int getCount() {
return pageCount;
}
@Override
public CharSequence getPageTitle(int position) {
// if (position == 4) {
// Drawable img = getResources().getDrawable(R.drawable.ic_one);
// img.setBounds(0, 0, img.getIntrinsicWidth(), img.getIntrinsicHeight());
// SpannableString sb = new SpannableString("Page" + (position + 1) + " ");
// ImageSpan imageSpan = new ImageSpan(img, ImageSpan.ALIGN_BASELINE);
// sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
// return sb;
// }else{
// return "Page" + (position + 1);
// }
return null; //如果采用自定义TAB布局,则这里返回null就可以了
}
//引入TAB自定义布局
public View getTabView(int position) {
View view = View.inflate(TabLayoutActivity.this, R.layout.tab_item, null);
TextView tv = (TextView) view.findViewById(R.id.tv);
ImageView iv = (ImageView) view.findViewById(R.id.iv);
tv.setText("Page" + (position + 1));
if (position == 5) {
iv.setVisibility(View.VISIBLE);
} else {
iv.setVisibility(View.GONE);
}
return view;
}
}
6.然后可能重要的就是Fragment了
public class ViewPagerFragment extends BaseFragment {
public int page;
private int color;
public static final String GETPAGE = "get_page";
public static final String GETCOLOR = "get_color";
private static List<ViewPagerFragment> frags = new ArrayList<>();
private View rootView;
public static Fragment getInstance(int page, int color) {
ViewPagerFragment cacheFrag = null;
cacheFrag = getCacheFrag(page, cacheFrag);
if (cacheFrag != null){
return cacheFrag; //首先尝试获取缓存的Fragment
}
Bundle args = new Bundle();
args.putInt(GETPAGE, page);
args.putInt(GETCOLOR, color);
//new 一个Fragment
ViewPagerFragment pageFragment = new ViewPagerFragment();
pageFragment.setArguments(args);
frags.add(pageFragment);
return pageFragment;
}
//获取缓存的Fragment
private static ViewPagerFragment getCacheFrag(int page, ViewPagerFragment cacheFrag) {
if (frags != null && frags.size() > 0){
for (ViewPagerFragment frag : frags){
if (frag.page == page){
cacheFrag = frag;
break;
}
}
}
return cacheFrag;
}
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
page = getArguments().getInt(GETPAGE);
color = getArguments().getInt(GETCOLOR);
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
Log.i(this.getClass().getSimpleName(), "onCreateView");
if(rootView == null) {
rootView = inflater.inflate(R.layout.layout_fragment, container, false);
TextView tv = (TextView) rootView.findViewById(R.id.tv_fragment);
tv.setText("Page=====>" + page);
rootView.setBackgroundResource(color);
}
//缓存的rootView需要判断是否已经被加过parent， 如果有parent需要从parent删除，
//要不然会发生这个rootview已经有parent的错误。
ViewGroup parent = (ViewGroup) rootView.getParent();
if (parent != null){
parent.removeView(rootView);
}
return rootView;
}
}
主要就是这么些内容了