• Android ---------- TabLayout 实战 (一)


    1.效果图

    2.原理:TabLayout提供了一个水平的布局用来展示   Tabs

    3.添加依赖: compile 'com.android.support:design:27.+ ‘

      4.布局文件:

     

    <android.support.design.widget.TabLayout
    
    android:id="@+id/tablayout"
    
    android:layout_width="match_parent"
    
    android:layout_height="30dp"
    
    app:tabTextAppearance="@style/MyTabLayoutTextAppearanceInverse"   // 设置标签的字体大小  在style文件里进行设置
    
    app:tabIndicatorHeight="2dp"  // 设置便签下划线的高度(厚度)      不设置的话,默认大小就可以    设置为0dp就是不显示下划线
    
    app:tabIndicatorColor="#007aff" // 设置标签下划线的颜色
    
    app:tabSelectedTextColor="#007aff" // 设置选中标签的字体的颜色
    
    app:tabTextColor="@android:color/darker_gray" /> //设置未选中标签的字体的颜色
    
     
    
    <android.support.v4.view.ViewPager
    
         android:id="@+id/vpager"
    
       android:layout_width="match_parent"
    
       android:layout_height="200dp" />

     

    5.控制器部分代码:

    (一)

    class TabAdapter extends FragmentPagerAdapter {
    
        public TabAdapter(FragmentManager fm) {
            super(fm);
        }
    
        @Override
        public Fragment getItem(int position) {
            return fragments.get(position);
        }
    
        @Override
        public int getCount() {
            return fragments.size();
        }
        //显示标签上的文字
        @Override
        public CharSequence getPageTitle(int position) {
            return tabs.get(position);
        }
    }

    (二)

    
    
    public static class TabFrament extends Fragment {
            private Context context;
            private String content;
    
            public TabFrament() {
            }
    
            @SuppressLint("ValidFragment")
            public TabFrament(Context contexts, String content) {
                this.context = contexts;
                this.content = content;
            }
    
            @Nullable
            @Override
            public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
                 TextView textView = new TextView(context);   //此处用Textview举个例子,可以布置任意布局,自定义布局,用View view = inflater.inflate()方法
                 textView.setText(content);
                 textView.setTextSize(30);
                 textView.setGravity(Gravity.CENTER);
                 return textView;
    
            }
        }
    
    

    (三)

    
    
    private void initData() {
    
        for(Map<String,String> map:list) {      // 从服务器获取的数据,已经处理成list
            tabs.add(map.get("tab"));       // tab标签 
            fragments.add(new TabFrament(this,map.get("content"))); //viewpage 内容
        }
        tabLayout = (TabLayout) findViewById(R.id.tablayout);
    
        //设置TabLayout的模式
        tabLayout.setTabGravity(TabLayout.GRAVITY_CENTER);   //注:此条属性必须配合MODE_FIXED使用,不然不起作用
       //  GRAVITY_FILL  让每个标签平分TabLayout的全部宽度
    
        //  GRAVITY_CENTER  让每个标签显示自身宽度,然后所有标签居中显示
        tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
      // MODE_FIXED  表示宽度始终是tablayout控件指定的宽度,如果标签过多,那么就无限挤压控件  
      // MODE_SCROLLABLE 表示每个标签都保持自身宽度,一旦标签过多,给标题栏提供支持横向滑动的功能
    
        TabAdapter tabadapter=new TabAdapter(getSupportFragmentManager());
        vpager.setAdapter(tabadapter);

    vpager.setOffscreenPageLimit(3);  // 设置viewpager缓存页面个数,建议:有 n 个tab就缓存 n-1 个页面

     //
    关联ViewPager和TabLayout

      tabLayout.setupWithViewPager(vpager);
        //设置分割线 标签之间的纵向分割线 
    LinearLayout linear = (LinearLayout)tabLayout.getChildAt(0);
    linear.setShowDividers(LinearLayout.SHOW_DIVIDER_MIDDLE);
    linear.setDividerDrawable(ContextCompat.getDrawable(
    this,R.drawable.divider));
    //设置分割线间隔
    linear.setDividerPadding(dip2px(15)); }   
    
    
              (四)
     public int dip2px(int dip) {
            float density = getResources().getDisplayMetrics().density;
            return (int) (dip * density + 0.5);
     }

    6.实践感悟

    (1) ViewPager 的含义是单独的一个页面,如果要设置此页面滚动的话,不可在ViewPager的外部而应该在子布局的外围设置srollview;把每一个ViewPager当成独立的页面就好了。

  • 相关阅读:
    MOSS 2013研究系列动态修改WebConfig(上) 欧阳锋
    MOSS 2013研究系列MOSS 2013安装篇 欧阳锋
    GPIO
    [转]vi/vim使用进阶: 在VIM中使用GDB调试 – 使用pyclewn
    建立openwrt虚拟环境
    ebtables基本使用
    LFS小记
    Autoconf & Automake使用小记
    Packet Filter小记
    Web技术整理
  • 原文地址:https://www.cnblogs.com/apeandcat/p/8567999.html
Copyright © 2020-2023  润新知