Android中TabLayout+ViewPager实现tab和页面联动效果
作者:天鬼 时间:2022-02-23 22:41:49
TabLayout+ViewPager实现tab和页面联动效果
xml中:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.TabLayout
android:id="@+id/toolbar_tl_tab"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
app:layout_scrollFlags="scroll"
app:tabIndicatorColor="@android:color/holo_green_light"
app:tabSelectedTextColor="@android:color/holo_green_light" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#f0f0f0" />
<android.support.v4.view.ViewPager
android:id="@+id/vp_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
代码中使用:
public class MainActivity extends AppCompatActivity {
private TabLayout toolbar_tl_tab;
private ViewPager vp_container;
private String[] titles = {"标题1", "标题2", "标题3", "标题4"};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
init();
}
private void init() {
toolbar_tl_tab = (TabLayout) findViewById(R.id.toolbar_tl_tab);
vp_container = (ViewPager) findViewById(R.id.vp_container);
toolbar_tl_tab.setupWithViewPager(vp_container);
toolbar_tl_tab.setTabMode(TabLayout.MODE_SCROLLABLE);
vp_container.setAdapter(new FragmentStatePagerAdapter(getSupportFragmentManager()) {
@Override
public Fragment getItem(int position) {
return new PageFragment();
}
@Override
public CharSequence getPageTitle(int position) {
return titles[position];
}
@Override
public int getCount() {
return titles.length;
}
});
}
}
碎片:PageFragment
public class PageFragment extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_page, null);
return view;
}
}
碎片xml:fragment_page.xml
<?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">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="页面" />
</LinearLayout>
注意:
1、模式相关
使用滚动模式,特点是超过屏幕可以滚动显示:
toolbar_tl_tab.setTabMode(TabLayout.MODE_SCROLLABLE);
使用屏幕等分模式,特点是显示tab的宽度是屏幕等分后的宽度:
toolbar_tl_tab.setTabMode(TabLayout.MODE_FIXED);
来源:http://www.jianshu.com/p/34fa25843db7?utm_source=tuicool&utm_medium=referral#
标签:android,tab
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
C#微信公众号开发 微信事件交互
2023-04-22 21:18:31
![](https://img.aspxhome.com/file/2023/7/91247_0s.png)
IDEA实用好用插件推荐及使用方法教程详解(必看)
2021-07-15 19:10:44
![](https://img.aspxhome.com/file/2023/1/62041_0s.jpg)
基于request获取访问者真实IP代码示例
2023-02-15 02:45:13
Android 模仿QQ侧滑删除ListView功能示例
2023-10-27 21:03:43
java map中相同的key保存多个value值方式
2022-12-12 20:05:45
ReentrantLock源码详解--条件锁
2023-01-01 15:36:22
![](https://img.aspxhome.com/file/2023/8/69108_0s.png)
android播放器实现歌词显示功能
2021-10-27 13:44:37
java 反射机制详解及实例代码
2023-01-31 10:26:08
Flutter Widgets MediaQuery控件屏幕信息适配
2023-06-29 04:48:21
![](https://img.aspxhome.com/file/2023/2/120092_0s.jpg)
Java并发编程示例(一):线程的创建和执行
2022-01-24 16:43:49
详解C#获取特定进程CPU和内存使用率
2022-06-23 03:06:42
java编程abstract类和方法详解
2023-12-15 06:08:46
使用Gradle做Java代码质量检查的方法示例
2021-08-10 00:45:06
![](https://img.aspxhome.com/file/2023/5/84225_0s.jpg)
Android仿qq顶部消息栏效果
2021-10-28 13:52:57
![](https://img.aspxhome.com/file/2023/1/103901_0s.jpg)
基于私钥加密公钥解密的RSA算法C#实现方法
2022-12-01 07:52:37
C# 根据字符串生成二维码的实例代码
2023-09-16 09:06:50
![](https://img.aspxhome.com/file/2023/4/79084_0s.png)
SpringBoot中使用Filter和Interceptor的示例代码
2022-06-28 17:20:04
![](https://img.aspxhome.com/file/2023/6/76496_0s.jpg)
springboot如何重定向外部网页
2022-11-12 05:19:19
c# HttpWebRequest通过代理服务器抓取网页内容应用介绍
2023-04-04 20:10:35
新闻列表的分页查询java代码实现
2022-02-24 19:46:25