TabLayout的简单使用
程序员文章站
2022-06-01 15:14:53
...
一:导入design,appcompat包
在gradle文件中引入design包,引入之后才可在布局中引入这个控件
dependencies {
.....
compile 'com.android.support:appcompat-v7:24.2.1'
compile 'com.android.support:design:24.2.1'
compile 'com.android.support:support-v4:24.2.1'
.....
}
二:布局文件
<?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/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="center"
app:tabMode="scrollable" />
<android.support.v4.view.ViewPager
android:id="@+id/vp"
android:layout_width="match_parent"
android:layout_height="match_parent"></android.support.v4.view.ViewPager>
</LinearLayout>
这里我们使用了一个纵向的线性布局,上面是一个TabLayout的导航栏,下面是一个ViewPager,TabLayout+ViewPager+Fragment来配合使用。
上面关于TabLayout的几个属性要简述一下:
app:tabIndicatorColor=”@color/colorPrimary_pink”//指示器的颜色
app:tabTextColor=”@color/colorPrimary_pink”//tab的文字颜色 app:tabSelectedTextColor=”@color/colorPrimary_pinkDark”//选中的tab的文字颜色
app:tabMode=”fixed”//scrollable:可滑动;fixed:不能滑动,平分tabLayout宽度
app:tabGravity=”center”// fill:tabs平均填充整个宽度;center:tab居中显示
三:代码实现(三步)
给ViewPager设置适配器
pager.setAdapter(adapter);让TabLayout关联ViewPager
tabLayout.setupWithViewPager(pager);TabLayout设置适配器
tabLayout.setTabsFromPagerAdapter(adapter);
完整代码如下:
public class MainActivity extends AppCompatActivity {
private String[] title = {
"头条",
"新闻",
"娱乐",
"体育",
"科技",
"美女",
"财经",
"汽车",
"房子",
"头条"
};
TabLayout tabLayout;
ViewPager pager;
private MyAdapter adapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
tabLayout = (TabLayout) findViewById(tablayout);
pager = (ViewPager) findViewById(R.id.vp);
adapter = new MyAdapter(getSupportFragmentManager());
initView();
}
/**
* 初始化布局
*/
private void initView() {
pager.setAdapter(adapter);
tabLayout.setupWithViewPager(pager);
tabLayout.setTabsFromPagerAdapter(adapter);
}
class MyAdapter extends FragmentPagerAdapter {
public MyAdapter(FragmentManager fm) {
super(fm);
}
@Override
public CharSequence getPageTitle(int position) {
return title[position];
}
@Override
public Fragment getItem(int position) {
DetailFragment fragment=new DetailFragment();
Bundle bundle=new Bundle();
bundle.putString("title",title[position]);
fragment.setArguments(bundle);
return fragment;
}
@Override
public int getCount() {
return title.length;
}
}
}
Fragment的代码如下:
public class DetailFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
TextView tv = new TextView(getContext());
Bundle bundle = getArguments();
String s = bundle.getString("title");
tv.setBackgroundColor(Color.rgb((int) (Math.random() * 255), (int) (Math.random() * 255), (int) (Math.random() * 255)));
tv.setText(s);
return tv;
}
}
实现效果如下:
上一篇: TabLayout简单的使用
下一篇: TabLayout的使用