TabLayout + ViewPager + Fragment

最新推荐文章于 2024-11-13 17:53:20 发布

weixin_34360651

最新推荐文章于 2024-11-13 17:53:20 发布

阅读量70

点赞数

文章标签：移动开发 python

原文链接：https://my.oschina.net/wangxnn/blog/603376

版权

2019独角兽企业重金招聘Python工程师标准>>>

这一部分内容其实网上有很多资料了, 我也只是总结整理下, 方便自己以后查看.

主要参考的几个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;
   }
}

主要就是这么些内容了

转载于:https://my.oschina.net/wangxnn/blog/603376