项目中会经常用到滑动的导航栏,例如今日头条中,对于的条目可以先隐藏,滑动后会显示出来。TabLayout的控件以实现类似效果。刚好最近做项目中使用到过,便趁着空闲时间整理下,方便自己以后用到就可以直接拿来使用了。
添加引用:注意必须和v7包版本一致
implementation 'com.android.support:appcompat-v7:26.1.0' implementation 'com.android.support:design:26.1.0'创建布局文件:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="com.example.tab.MainActivity"
android:orientation="vertical">
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#FFF2F2F2"/>
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="40dp"
app:tabIndicatorColor="#FF108DE8"
app:tabPadding="10dp"
app:tabMode="scrollable"
app:tabTextColor="#FFAEAEAE"
app:tabSelectedTextColor="#FF108DE8"
android:id="@+id/tabLayout"
android:background="#FFFDFDFE"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp">
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
注意tablayout控件几条属性:
app:tabTextColor="#FFAEAEAE" //默认文字颜色
app:tabSelectedTextColor="#FF108DE8" //选择后文字颜色
app:tabIndicatorColor="#FF108DE8" //下方滚动条颜色且改控件有两种模式,一种是一般模式
app:tabMode="fixed"
一种是滚动模式
app:tabMode="scrollable"
我们选择滚动模式,这样会有滑动过程中的显示隐藏效果
主要代码如下:
public class MainActivity extends AppCompatActivity {
private TabLayout tablayout;
ViewPager viewpager;
FragmentManager manager;
private FragmentTransaction transtion;
private ArrayList<String> titles;
private List<Fragment> list;
private MyFragmentPageAdapter adapter;
/**
* fragment
*/
FragmentOne fragmentOne;
FragmentTwo fragmentTwo;
FragmentThree fragmentThree;
FragmentFour fragmentFour;
FragmentFive fragmentFive;
FragmentSix fragmentSix;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
tablayout= (TabLayout) findViewById(R.id.tabLayout);
viewpager= (ViewPager) findViewById(R.id.viewpager);
initData();//初始化数据
setListener();//点击监听
}
private void setListener() {
}
private void initData() {
//将各个标题装在titles里面
titles = new ArrayList<String>();
titles.add("全部");
titles.add("华语");
titles.add("欧美");
titles.add("日韩");
titles.add("清新");
titles.add("其他");
//将两个Fragment装进集合中
list = new ArrayList<Fragment>();
fragmentOne = new FragmentOne();
fragmentTwo = new FragmentTwo();
fragmentThree=new FragmentThree();
fragmentFour=new FragmentFour();
fragmentFive=new FragmentFive();
fragmentSix=new FragmentSix();
list.add(fragmentOne);
list.add(fragmentTwo);
list.add(fragmentThree);
list.add(fragmentFour);
list.add(fragmentFive);
list.add(fragmentSix);
//使用manager和transtion提交事务后为viewpager设置一个适配器
manager = getSupportFragmentManager();
adapter = new MyFragmentPageAdapter(manager);
transtion = manager.beginTransaction();
transtion.commit();
viewpager.setAdapter(adapter);
// tablayout.addTab可以将标题添加进Tab里面,true表示默认选中
tablayout.addTab(tablayout.newTab().setText(titles.get(0)), true);
tablayout.addTab(tablayout.newTab().setText(titles.get(1)), false);
tablayout.addTab(tablayout.newTab().setText(titles.get(2)), false);
tablayout.addTab(tablayout.newTab().setText(titles.get(3)), false);
tablayout.addTab(tablayout.newTab().setText(titles.get(4)), false);
tablayout.addTab(tablayout.newTab().setText(titles.get(5)), false);
//这两个方法是将Tablayout和Viewpager联合起来
tablayout.setupWithViewPager(viewpager);
//tablayout.setTabsFromPagerAdapter(adapter);
}
private class MyFragmentPageAdapter extends FragmentPagerAdapter {
public MyFragmentPageAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
return list.get(position);
}
@Override
public int getCount() {
return list.size();
}
@Override
public CharSequence getPageTitle(int position) {
return titles.get(position);
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
super.destroyItem(container, position, object);
}
}
}
这样就能实现效果
demo地址:http://download.csdn.net/download/fugang1230/10222327