Android TabLayout

doubleyoujs · · 86 次点击 · · 开始浏览    

Android开发设计的时候,很多时候都会设计到页面的滑动+导航栏,我们一直的设计都是ViewPager+Fragment+ActionBar,需要自己去实现ViewPager的监听事件,但是Google在Support Design包中发布了一些列新的控件,其中就包括TabLayout。这个配合ViewPager+Fragment来用十分的方便。

一、TabLayout使用

1、引入TabLayout

TabLayout需要引入Support Design包,那么这个就可以支持之前版本的SDK,还是比较方便的

compile 'com.android.support:design:26.0.0-alpha1'

2、xml文件的编写

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <android.support.design.widget.TabLayout
        android:id="@+id/tab"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorColor="@color/colorPrimary"
        app:tabSelectedTextColor="#ff0000"
        app:tabTextColor="#000000"
        app:tabMode="scrollable">

    </android.support.design.widget.TabLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

</LinearLayout>

这里需要注意的是:需要加xmlns:app="http://schemas.android.com/apk/res-auto",如果没这行,会出现

Error:(7) Error parsing XML: unbound prefix 错误。

我当时主要关系4个参数:

app:tabIndicatorColor="@color/colorPrimary"    //下滑条的颜色
app:tabSelectedTextColor="#ff0000"   // 字体选择后的背景色   
app:tabTextColor="#000000"  //字体默认背景
app:tabMode="scrollable" //滚动模式 fiexd是固定模式

3、具体的java代码

class MyFragment extends Fragment {
    public MyFragment() {
    }

    public static MyFragment newIntence(String title) {
        Bundle bundle = new Bundle();
        bundle.putString("title", title);
        MyFragment myFragment = new MyFragment();
        myFragment.setArguments(bundle);
        return myFragment;
    }

    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        TextView textView = view.findViewById(R.id.title);
        textView.setText(getArguments().getString("title"));
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment, container, false);
    }
}
public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ViewPager viewPager = (ViewPager) findViewById(R.id.pager);
        viewPager.setAdapter(new MySelectFragmentAdapter(getSupportFragmentManager(),getData()));

        TabLayout tb = (TabLayout) findViewById(R.id.tab);
        tb.setupWithViewPager(viewPager);
    }

    public List<String> getData() {
        List<String> list = new ArrayList<>();
        for (int i = 0; i < 6; i++) {
            list.add(String.format(Locale.CHINA, "第%d页", i + 1));
        }
        return list;
    }

    class MySelectFragmentAdapter extends FragmentPagerAdapter {
        private List<String> list;

        public MySelectFragmentAdapter(FragmentManager fm, List<String> list) {
            super(fm);
            this.list = list;
        }

        @Override
        public Fragment getItem(int position) {
            return MyFragment.newIntence(list.get(position));
        }

        @Override
        public int getCount() {
            return list.size();
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return list.get(position);
        }
    }
}

具体代码不难,比较简单,需要注意两点:

  1. tb.setupWithViewPager(viewPager); 绑定tab和ViewPager,去掉繁琐的监听
  2. FragmentPagerAdapter需要实现public CharSequence getPageTitle(int position)方法,返回tab每项文字。

TabLayout的源码也比较简单,主要是viewPager相关的监听器和滑动方法的东西。

 

本文来自:博客园

感谢作者:doubleyoujs

查看原文:Android TabLayout

86 次点击  
加入收藏 微博
暂无回复
添加一条新回复 (您需要 登录 后才能回复 没有账号 ?)
  • 请尽量让自己的回复能够对别人有帮助
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`
  • 支持 @ 本站用户;支持表情(输入 : 提示),见 Emoji cheat sheet