文档章节

TabLayout + ViewPager + Fragment

新年
 新年
发布于 2016/01/15 17:37
字数 929
阅读 749
收藏 4

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

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

主要就是这么些内容了

© 著作权归作者所有

新年
粉丝 7
博文 84
码字总数 46086
作品 0
海淀
程序员
私信 提问
TabLayout实现顶部导航(一)

前言 顶部导航栏,是我们在开发中比较常见的一种显示布局,它的实现可以有多种方式,那么今天我们就来讲讲 TabLayout 对它的实现。 此篇文章参考以下链接 TabLayout轻松实现仿今日头条顶部t...

奔跑的佩恩
01/07
0
0
viewpager里如何实现webview的回退功能?

Android studio 里用v4包里的viewPager和design包下的tabLayout实现可滑动的不同页面(viewpager里嵌套了fragment),不同fragment里分别放入webview; 出现的情况:每当按返回键是总是退出了...

影而有形
2016/08/31
250
0
Android底部导航栏(可滑动)----TabLayout+viewPager

【TabLayout】   ①TabLayout是选项卡,在屏幕空间有限的情况下,对不同的空间进行分组。属于android support design,更多的用于新闻上,如果放在底部也可做底部导航栏        ②T...

汪菜菜
03/12
0
0
TabLayout自定义tab,实现多样导航栏

前言 之前讲过TabLayout的基本属性全解,但是对于TabLayout实现的导航栏仍是有诸多限制,例如不能任意设置text的文字大小,若导航中涉及到图片的话,图片只能简单的设计到文字上方,所以布局...

奔跑的佩恩
01/07
0
0
Fragment + ViewPager +TabLayout

1.添加依赖 com.android.support:design:25.3.1 2.XML布局文件 <android.support.design.widget.TabLayout android:id="@+id/TabLayout" android:layoutwidth="matchparent" android:layouth......

空潼
2017/10/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

docker百万连接设置相关资料

借助Docker单机秒开数十万TCP连接

youngjdong
6分钟前
0
0
这可能是史上最全 Redis 高可用解决方案总结

本文主要针对 Redis 常见的几种使用方式及其优缺点展开分析。 一、常见使用方式 Redis 的几种常见使用方式包括: 1.Redis 单副本; 2.Redis 多副本(主从); 3.Redis Sentinel(哨兵); 4....

别打我会飞
8分钟前
0
0
Qt编写数据可视化大屏界面电子看板11-自定义控件

一、前言 说到自定义控件,我是感觉特别熟悉的几个字,本人亲自原创的自定义控件超过110个,都是来自各个行业的具体应用真实需求,而不是凭空捏造的,当然有几个小控件也有点凑数的嫌疑,在编...

飞扬青云
11分钟前
0
0
第二讲:编写UDP Socket小程序

1、编写服务器端代码 文件-->新建 新建一个控制台程序: 下面用的是一张旧图,只要点确认就可以了。 切换到FileView视图 编译、链接 StdAfx.cpp( 里面的代码不用修改) 编辑UDPServer.cpp文...

一匹狼工作室
11分钟前
1
0
android ------ 实现高德定位并获取相应信息 ( 最新版高德SDK 和 Android SDK版本)

Android开发项目时常常会遇到定位这个功能, 很久以前写过一篇了,官方也更新了一些东西,我也更新下 以前使用的是jar包 导入来实现高德定位 老版本 链接:https://blog.csdn.net/DickyQie/...

切切歆语
14分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部