高级UI-TableLayout
TableLayout选项卡，用于需要使用选项卡的场景，一般是用于切换Fragment，现在的主流做法一般是TableLayout+ViewPager+Fragment，综合实现选项卡的操作
由于TableLayout位于support-design里面，故在使用前要导入依赖
implementation 'com.android.support:design:25.4.0'
准备测试布局
app:tabIndicatorColor：选中下划线颜色
app:tabTextColor：标签颜色
app:tabSelectedTextColor：选中颜色
app:tabMode：标签模式，有scrollable和fixed两种
app:tabGravity：位置选择，一般会配合tabMode使用
<?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，用来做显示
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;
}
}
使用
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的高度属性，避免其跑出屏幕
android:layout_height="0dp"
android:layout_weight="1"
同时修改TableLayout的属性，使得选中下划线不那么别扭
app:tabIndicatorHeight="0dp"
上面的使用虽然能完成，但其过于繁琐
使用如下方法将变得简单易行
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;
}
}
}
既然实现位于底部，那么顺便做个微信导航栏的效果好了
自定义布局
<?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>
总布局
<?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>
调用关联
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布局
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;
}
}
实现效果如下图
