首先添加FlycoTabLayout依赖库
项目代码如下:
工具类ViewFindUtils,用于初始化控件
public class ViewFindUtils
{
/**
* ViewHolder简洁写法,避免适配器中重复定义ViewHolder,减少代码量 用法:
*
* <pre>
* if (convertView == null)
* {
* convertView = View.inflate(context, R.layout.ad_demo, null);
* }
* TextView tv_demo = ViewHolderUtils.get(convertView, R.id.tv_demo);
* ImageView iv_demo = ViewHolderUtils.get(convertView, R.id.iv_demo);
* </pre>
*/
public static <T extends View> T hold(View view, int id)
{
SparseArray<View> viewHolder = (SparseArray<View>) view.getTag();
if (viewHolder == null)
{
viewHolder = new SparseArray<View>();
view.setTag(viewHolder);
}
View childView = viewHolder.get(id);
if (childView == null)
{
childView = view.findViewById(id);
viewHolder.put(id, childView);
}
return (T) childView;
}
/**
* 替代findviewById方法
*/
public static <T extends View> T find(View view, int id)
{
return (T) view.findViewById(id);
}
}
主界面布局xml
<?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"
xmlns:tl="http://schemas.android.com/tools"
android:orientation="vertical"
>
<com.flyco.tablayout.SlidingTabLayout
android:id="@+id/sliding"
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="#ffffff"
app:tl_divider_color="#1A000000"
app:tl_divider_padding="13dp"
app:tl_divider_width="1dp"
app:tl_indicator_color="#000000"
app:tl_indicator_height="1.5dp"
app:tl_indicator_width_equal_title="true"
app:tl_tab_padding="22dp"
app:tl_tab_space_equal="true"
app:tl_textSelectColor="#000000"
app:tl_textUnselectColor="#66000000"
app:tl_underline_color="#ffffff"
app:tl_underline_height="1dp"/>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
主界面代码
public class MainActivity extends AppCompatActivity implements OnTabSelectListener {
//ViewPager 的界面集合
private ArrayList<Fragment> mFragments = new ArrayList<>();
//标题按钮集合
private final String[] mTitles = {"相册", "其他"};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
private void initView() {
mFragments.add(FristFragment.getInstance(mTitles[0]));
mFragments.add(SencondFragment.getInstance(mTitles[1]));
View decorView = getWindow().getDecorView();
ViewPager vp = ViewFindUtils.find(decorView, R.id.viewpager);
vp.setAdapter(new MyPagerAdapter(getSupportFragmentManager()));
SlidingTabLayout sliding = ViewFindUtils.find(decorView, R.id.sliding);
sliding.setViewPager(vp);
sliding.setOnTabSelectListener(this);
//设置显示的界面和按钮
// vp.setCurrentItem(1);
// sliding.showDot(1);
//设置消息气泡
// sliding.showMsg(3, 5);
// sliding.setMsgMargin(3, 0, 10);
// MsgView rtv_2_3 = sliding.getMsgView(3);
// if (rtv_2_3 != null) {
// rtv_2_3.setBackgroundColor(Color.parseColor("#6D8FB0"));
// }
//
// sliding.showMsg(5, 5);
// sliding.setMsgMargin(5, 0, 10);
}
//标题按钮点击
@Override
public void onTabSelect(int position) {
}
//标题按钮以显示再次点击
@Override
public void onTabReselect(int position) {
}
//ViewPager 适配器
private class MyPagerAdapter extends FragmentPagerAdapter {
public MyPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public int getCount() {
return mFragments.size();
}
@Override
public CharSequence getPageTitle(int position) {
return mTitles[position];
}
@Override
public Fragment getItem(int position) {
return mFragments.get(position);
}
}
}
FristFragment代码
SencondFragment代码一样
public class FristFragment extends Fragment {
private String mTitle;
//获取参数显示于界面
public static FristFragment getInstance(String title) {
FristFragment sf = new FristFragment();
sf.mTitle = title;
return sf;
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View v = inflater.inflate(R.layout.activity_frist_fragment, null);
TextView card_title_tv = (TextView) v.findViewById(R.id.text);
card_title_tv.setText(mTitle);
return v;
}
}
布局文件xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tl="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center"
>
<TextView
android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
SlidingTabLayout属性列表
tl_indicator_color color 设置显示器颜色
tl_indicator_height dimension 设置显示器高度
tl_indicator_width dimension 设置显示器固定宽度
tl_indicator_margin_left dimension 设置显示器margin,当indicator_width大于0,无效
tl_indicator_margin_top dimension 设置显示器margin,当indicator_width大于0,无效
tl_indicator_margin_right dimension 设置显示器margin,当indicator_width大于0,无效
tl_indicator_margin_bottom dimension 设置显示器margin,当indicator_width大于0,无效
tl_indicator_corner_radius dimension 设置显示器圆角弧度
tl_indicator_gravity enum 设置显示器上方(TOP)还是下方(BOTTOM),只对常规显示器有用
tl_indicator_style enum 设置显示器为常规(NORMAL)或三角形(TRIANGLE)或背景色块(BLOCK)
tl_underline_color color 设置下划线颜色
tl_underline_height dimension 设置下划线高度
tl_underline_gravity enum 设置下划线上方(TOP)还是下方(BOTTOM)
tl_divider_color color 设置分割线颜色
tl_divider_width dimension 设置分割线宽度
tl_divider_padding dimension 设置分割线的paddingTop和paddingBottom
tl_tab_padding dimension 设置tab的paddingLeft和paddingRight
tl_tab_space_equal boolean 设置tab大小等分
tl_tab_width dimension 设置tab固定大小
tl_textsize dimension 设置字体大小
tl_textSelectColor color 设置字体选中颜色
tl_textUnselectColor color 设置字体未选中颜色
tl_textBold boolean 设置字体加粗
tl_iconWidth dimension 设置icon宽度(仅支持CommonTabLayout)
tl_iconHeight dimension 设置icon高度(仅支持CommonTabLayout)
tl_iconVisible boolean 设置icon是否可见(仅支持CommonTabLayout)
tl_iconGravity enum 设置icon显示位置,对应Gravity中常量值,左上右下(仅支持CommonTabLayout)
tl_iconMargin dimension 设置icon与文字间距(仅支持CommonTabLayout)
tl_indicator_anim_enable boolean 设置显示器支持动画(only for CommonTabLayout)
tl_indicator_anim_duration integer 设置显示器动画时间(only for CommonTabLayout)
tl_indicator_bounce_enable boolean 设置显示器支持动画回弹效果(only for CommonTabLayout)
tl_indicator_width_equal_title boolean 设置显示器与标题一样长(only for SlidingTabLayout)