Android Design之TableLayout选项卡

先上效果图：

1.导入Design包（所有Design下的控件，第一步都是倒包）

compile 'com.android.support:design:25.0.0'

2.先看第一种，TableLayou + ViewPager:

2.1.Activity:

public class OneActivity extends AppCompatActivity {

    private TabLayout tabLayout;
    private ViewPager viewPager;

    private List<String> list;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.one);
        initView();
        list = new ArrayList<>();
        for (int i = 0; i < 6; i++) {
            list.add((i + 1) + "");
        }
        //viewpager设置adapter
        viewPager.setAdapter(new MyAdapter(getSupportFragmentManager(), list));
        //tablayout关联viewpager
        tabLayout.setupWithViewPager(viewPager);

        setIndicator(tabLayout, 20, 20);   //这里为了明显，所以设置的计较大20

    }

    private void initView() {
        tabLayout = (TabLayout) findViewById(R.id.tabLayout);
        viewPager = (ViewPager) findViewById(R.id.viewPager);
    }


    /**
     * 设置TableView下划线的宽度
     * @param tabs      tablaout
     * @param leftDip   距离左边
     * @param rightDip  距离右边
     */
    public void setIndicator(TabLayout tabs,int leftDip,int rightDip){
        Class<?> tabLayout = tabs.getClass();
        Field tabStrip = null;
        try {
            tabStrip = tabLayout.getDeclaredField("mTabStrip");
        } catch (NoSuchFieldException e) {
            e.printStackTrace();
        }

        tabStrip.setAccessible(true);
        LinearLayout llTab = null;
        try {
            llTab = (LinearLayout) tabStrip.get(tabs);
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        }

        int left = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, leftDip, Resources.getSystem().getDisplayMetrics());
        int right = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, rightDip, Resources.getSystem().getDisplayMetrics());

        for (int i = 0; i < llTab.getChildCount(); i++) {
            View child = llTab.getChildAt(i);
            child.setPadding(0, 0, 0, 0);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.MATCH_PARENT, 1);
            params.leftMargin = left;
            params.rightMargin = right;
            child.setLayoutParams(params);
            child.invalidate();
        }
    }

    //跳转Activity
    public static void startActivity(Context context) {
        Intent intent = new Intent(context, OneActivity.class);
        context.startActivity(intent);
    }


}

2.2,用到的Adapter和Fragment

Fragment:

public class BlankFragment extends Fragment {


    public BlankFragment() {
        // Required empty public constructor
    }

    public static BlankFragment newInstance(String text) {

        Bundle args = new Bundle();
        args.putString("text",text);
        BlankFragment fragment = new BlankFragment();
        fragment.setArguments(args);
        return fragment;
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_blank, container, false);
    }

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

Adapter:

public class MyAdapter extends FragmentPagerAdapter {

    private List<String> list;

    public MyAdapter(FragmentManager fm) {
        super(fm);
    }

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

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

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

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

3.接下来就是TabLayout + ListView

Activity:

public class TwoActivity extends AppCompatActivity implements TabLayout.OnTabSelectedListener {

    private TabLayout tabLayout;
    private ListView listView;

    private List<String> list;
    private Adapter adapter;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.two);
        initData();
        initView();

        tabLayout.addTab(tabLayout.newTab().setText("已支付"));
        tabLayout.addTab(tabLayout.newTab().setText("未支付"));
        tabLayout.setOnTabSelectedListener(this);
    }

    private void initData() {
        list = new ArrayList<>();
        for (int i = 0; i < 50; i++) {
            list.add("我是第" + (i + 1) + "项");
        }
    }

    private void initView() {
        tabLayout = (TabLayout) findViewById(R.id.tabLayout2);
        listView = (ListView) findViewById(R.id.listView);
        adapter = new Adapter(this, list);
        listView.setAdapter(adapter);

//鸿洋的万能适配器
//        listView.setAdapter(new CommonAdapter<String>(this, R.layout.item, list) {
//            @Override
//            protected void convert(ViewHolder viewHolder, String item, int position) {
//                viewHolder.setText(R.id.item_Text, list.get(position));
//            }
//        });
    }


    //跳转Activity
    public static void startActivity(Context context) {
        Intent intent = new Intent(context, TwoActivity.class);
        context.startActivity(intent);
    }


    //tableLayout的点击事件
    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        Toast.makeText(this, "你点击了" + tab.getText(), Toast.LENGTH_SHORT).show();
        Log.e("-------", tab.getPosition() + "---");
        list.clear();
        if (tab.getPosition() == 0) {
            for (int i = 0; i < 50; i++) {
                list.add("我是第" + (i + 1) + "项");
            }
        } else if (tab.getPosition() == 1) {

            for (int i = 0; i < 50; i++) {
                list.add("哈哈哈哈哈" + (i + 1));
            }
        }

        adapter.notifyDataSetChanged();


    }

    @Override
    public void onTabUnselected(TabLayout.Tab tab) {

    }

    @Override
    public void onTabReselected(TabLayout.Tab tab) {

    }
}

Design系列一：TableLayout,接下来会持续更新！

Demo下载