高级UI之TableLayout

发表于 | 分类于 | |

TableLayout选项卡，用于需要使用选项卡的场景，一般是用于切换Fragment，现在的主流做法一般是TableLayout+ViewPager+Fragment，综合实现选项卡的操作

由于TableLayout位于support-design里面，故在使用前要导入依赖

1
implementation 'com.android.support:design:25.4.0'

准备测试布局
app:tabIndicatorColor：选中下划线颜色
app:tabTextColor：标签颜色
app:tabSelectedTextColor：选中颜色
app:tabMode：标签模式，有scrollable和fixed两种
app:tabGravity：位置选择，一般会配合tabMode使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.design.widget.TabLayout
        android:id="@+id/table_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorColor="@android:color/holo_green_light"
        app:tabTextColor="@android:color/black"
        app:tabSelectedTextColor="@android:color/holo_orange_light"
        app:tabMode="scrollable"
        app:tabGravity="center"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </android.support.v4.view.ViewPager>

</LinearLayout>

自定义一个Fragment，用来做显示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
public class DefaultFragment extends Fragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        TextView textView = new TextView(getContext());
        Bundle bundle = getArguments();
        String title = bundle.getString("title");
        textView.setBackgroundColor(Color.rgb(
                (int) (Math.random() * 255),
                (int) (Math.random() * 255),
                (int) (Math.random() * 255)));
        textView.setText(title);
        return textView;
    }
}

使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
public class MainActivity extends AppCompatActivity {
    private TabLayout tabLayout;
    private ViewPager viewPager;
    private String[] title = {
//            "新闻", "体育", "NBA", "娱乐", "财经",
//            "股票", "汽车", "科技", "手机", "数码",
//            "女人", "直播", "视频", "旅游", "房产",
//            "家居", "教育", "读书", "四川", "健康",
//            "彩票", "车险", "海淘", "理财", "艺术"
            "新闻", "体育", "汽车", "科技", "手机", "数码", "读书", "艺术"
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tabLayout = (TabLayout) findViewById(R.id.table_layout);
        viewPager = (ViewPager) findViewById(R.id.view_pager);
        MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager());
        //TableLayout滑动关联ViewPager
        tabLayout.setOnTabSelectedListener(new OnTabSelectedListener() {
            @Override
            public void onTabSelected(Tab tab) {
                viewPager.setCurrentItem(tab.getPosition(), true);
            }

            @Override
            public void onTabUnselected(Tab tab) {

            }

            @Override
            public void onTabReselected(Tab tab) {

            }
        });
        //ViewPager滑动关联TableLayout
        viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
        //设置的标签来自于adapter，因此需要重写getPageTitle()方法
        tabLayout.setTabsFromPagerAdapter(adapter);
        viewPager.setAdapter(adapter);
    }

    class MyPagerAdapter extends FragmentPagerAdapter {

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

        @Override
        public CharSequence getPageTitle(int position) {
            return title[position];
        }

        @Override
        public Fragment getItem(int position) {
            Fragment fragment = new DefaultFragment();
            Bundle bundle = new Bundle();
            bundle.putString("title", title[position]);
            Log.d("cj5785", "getItem: " + title[position]);
            fragment.setArguments(bundle);
            return fragment;
        }

        @Override
        public int getCount() {
            return title.length;
        }
    }
}

完成以上工作便实现了选项卡
其实现效果如下图

如果要实现Tab放在下边，只需要将TableLayout放在下面，同时修改ViewPager的高度属性，避免其跑出屏幕

1
2
android:layout_height="0dp"
android:layout_weight="1"

同时修改TableLayout的属性，使得选中下划线不那么别扭

1
app:tabIndicatorHeight="0dp"

上面的使用虽然能完成，但其过于繁琐
使用如下方法将变得简单易行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
public class MainActivity extends AppCompatActivity {
    private TabLayout tabLayout;
    private ViewPager viewPager;
    private String[] title = {
			"新闻", "科技", "读书"
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tabLayout = (TabLayout) findViewById(R.id.table_layout);
        viewPager = (ViewPager) findViewById(R.id.view_pager);
        MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager());
        viewPager.setAdapter(adapter);
        tabLayout.setupWithViewPager(viewPager);
    }

    class MyPagerAdapter extends FragmentPagerAdapter {

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

        @Override
        public CharSequence getPageTitle(int position) {
            return title[position];
        }

        @Override
        public Fragment getItem(int position) {
            Fragment fragment = new DefaultFragment();
            Bundle bundle = new Bundle();
            bundle.putString("title", title[position]);
            fragment.setArguments(bundle);
            return fragment;
        }

        @Override
        public int getCount() {
            return title.length;
        }
    }
}

既然实现位于底部，那么顺便做个微信导航栏的效果好了
自定义布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center_horizontal"
    android:layout_marginTop="3dp"
    android:layout_marginBottom="3dp">

    <ImageView
        android:id="@+id/image_view"
        android:layout_width="24dp"
        android:layout_height="24dp" />

    <TextView
        android:id="@+id/text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="3dp"
        android:textSize="10sp"/>
</LinearLayout>

总布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">


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

    <android.support.design.widget.TabLayout
        android:id="@+id/table_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabGravity="fill"
        app:tabIndicatorColor="@android:color/holo_green_light"
        app:tabIndicatorHeight="0dp"
        app:tabMode="fixed"
        android:background="@android:color/darker_gray"
        app:tabSelectedTextColor="@android:color/holo_orange_light"
        app:tabTextColor="@android:color/black" />

</LinearLayout>

调用关联

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
public class MainActivity extends AppCompatActivity {
    private TabLayout tabLayout;
    private ViewPager viewPager;
    private String[] title = {
            "微信", "通讯录", "发现","我"
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tabLayout = (TabLayout) findViewById(R.id.table_layout);
        viewPager = (ViewPager) findViewById(R.id.view_pager);
        MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager());
        viewPager.setAdapter(adapter);
        tabLayout.setupWithViewPager(viewPager);
        for (int i = 0; i < tabLayout.getTabCount(); i++) {
            Tab tab = tabLayout.getTabAt(i);
            View view = View.inflate(this, R.layout.navigation, null);
            TextView tv_name = (TextView) view.findViewById(R.id.text_view);
            ImageView iv_icon = (ImageView) view.findViewById(R.id.image_view);
            tv_name.setText(title[i]);
            switch (tv_name.getText().toString()){
                case "微信":
                    iv_icon.setImageResource(R.drawable.abr);
                    break;
                case "通讯录":
                case "我":
                    iv_icon.setImageResource(R.drawable.adn);
                    break;
                case "发现":
                    iv_icon.setImageResource(R.drawable.akg);
                    break;
            }
            tab.setCustomView(view);
        }
    }

    class MyPagerAdapter extends FragmentPagerAdapter {

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

        @Override
        public CharSequence getPageTitle(int position) {
            return title[position];
        }

        @Override
        public Fragment getItem(int position) {
            Fragment fragment = new DefaultFragment();
            Bundle bundle = new Bundle();
            bundle.putString("title", title[position]);
            Log.d("cj5785", "getItem: " + title[position]);
            fragment.setArguments(bundle);
            return fragment;
        }

        @Override
        public int getCount() {
            return title.length;
        }
    }
}

自定义的Fragment布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
public class DefaultFragment extends Fragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        TextView textView = new TextView(getContext());
        Bundle bundle = getArguments();
        String title = bundle.getString("title");
        textView.setBackgroundColor(Color.rgb(
                (int) (Math.random() * 255),
                (int) (Math.random() * 255),
                (int) (Math.random() * 255)));
        textView.setText(title);
        return textView;
    }
}

实现效果如下图

Donate comment here