VerticalViewPager与VertialTabLayout的结合使用

前言

在开发中,我们常常需要ViewPager结合Fragment一起使用.我们可以使用三方开源的PagerSlidingTabStrip去实现,或者viewpagerindicator。现在我们可以使用Design support library库的TabLayout去实现了。

TabLayout+ViewPager+Fragment成为了实现如下效果的标配
(效果图来自 暴风体育Android APP)


这里写图片描述

不过这不是重点,重点是我们要实现的下图所示效果:垂直的TabLayout以及垂直的ViewPager,并完成二者的联动:


这里写图片描述

下面这张是我分享的Demo示意图:


这里写图片描述

问题

这里不对相关代码做过多说明,使用的Github上造好的轮子,然后根据自己的业务需求做的相关改动,因为时间比较紧,这里聊聊期间碰到的困难

  • 方案调研过程中,第一套方案采用的VerticalViewPager继承自ViewPager,通过将Event的横向和纵向坐标进行交换完成ViewPager的垂直效果,但是会出现滑动冲突,即配合嵌套有RecyclerView或者ListView的Fragment会出现向下滑动不灵敏的问题,指定时间内解决效果不理想,用户体验不好 ,暂时放弃、
  • 第二套解决方案使用的VerticalViewPager继承自ViewGroup,按照作者的说明(Small library allowing you to have a VerticalViewPager. It’s just a copy paste from the v19 ViewPager available in the support lib, where I changed all the left/right into top/bottom and X into Y.),同时代码解决了(VerticalViewPager scroll doesnt work when listview is used inside one of the fragment)的问题,结合VerticalTabLayout完美使用
  • 通过VerticalTabLayout的OnTabSelectedListener与VerticalViewPager的OnPageChangeListener完成二者之间的联动,通过VerticalViewPager的PageTransformer完成垂直ViewPager的自定义切换效果
  • VerticalTabLayout和VerticalViewPager通过线性布局水平放置,使用layout_weight进行比例分割,注意layout_width设置为0,否则可能导致右边VerticalViewPager中嵌套的数据显示不居中的问题
  • 期间设置Fragment时碰到一个没有解决的问题(Fragment with ViewPager setCustomAnimations not working),有知识的大大望不吝赐教
  • 还有就是业务逻辑 接口设计方面的问题,我觉得如果有相关竞品,相对成熟的可以作为参考(反编译APK查看布局代码,抓包查看相关接口和请求机制),为我们提供一种思路,然后基于我们自己的需求取其精华弃其糟粕

源码下载

CSDN下载地址
GitHub地址

参考链接

VerticalTabLayout
VerticalViewPager
android design library提供的TabLayout的用法

发布了97 篇原创文章 · 获赞 87 · 访问量 32万+
展开阅读全文

Android 的 Tablayout 与 ViewPager 配合使用的问题

11-10

今天在尝试 Tablayout 与 ViewPager结合使用,结果遇到下面问题。 当我滑动到如图所示的位置时(由Tab2 向Tab 3 过度,恰好Tab3 的颜色改变时): ![图片说明](https://img-ask.csdn.net/upload/201511/10/1447145557_735064.png) 此时,松开,就会发生下面的情况:![图片说明](https://img-ask.csdn.net/upload/201511/10/1447145670_781139.png) Tab3 的颜色改变,但是 指示器和 下面的ViewPager 都属于 Tab2 。 希望有朋友帮忙解答一下。 代码简单,只贴出主要代码了。 布局文件XML ``` <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" android:orientation="vertical" tools:context=".MainActivityFragment"> <android.support.design.widget.TabLayout android:id="@+id/tabLayout" style="@style/MyTabLayout" android:layout_width="match_parent" android:layout_height="48dp" android:background="@android:color/black" /> <android.support.v4.view.ViewPager android:id="@+id/viewPager" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout> ``` 主界面的代码 (Fragment),ViewPager的代码就不贴了,如果有需要 可以再贴。 ``` public class MainActivityFragment extends Fragment { private TabLayout mTabLayout; private ViewPager mViewPager; private SimpleAdapter mAdapter; private List<ViewPagerFragment> mFragmentList; String[] mTitleArray = {"Tab 1", "Tab 2", "Tab 3", "Tab 4"}; public MainActivityFragment() { } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_main, container, false); mTabLayout = (TabLayout) view.findViewById(R.id.tabLayout); mViewPager = (ViewPager) view.findViewById(viewPager); int size = mTitleArray.length; mFragmentList = new ArrayList<>(); for (int index = 0; index < size; index++) { ViewPagerFragment frag1 = new ViewPagerFragment(); frag1.setTitle("Title " + (index + 1)); mFragmentList.add(frag1); } if (mTitleArray.length > 4) { mTabLayout.setTabMode(TabLayout.MODE_SCROLLABLE); } else { mTabLayout.setTabMode(TabLayout.MODE_FIXED); } mAdapter = new SimpleAdapter(getChildFragmentManager()); mAdapter.setFragmentList(mFragmentList); mAdapter.setTitleArray(mTitleArray); mViewPager.setAdapter(mAdapter); mViewPager.setCurrentItem(0); mTabLayout.setupWithViewPager(mViewPager); mTabLayout.setTabsFromPagerAdapter(mAdapter); return view; } class SimpleAdapter extends FragmentStatePagerAdapter { private List<ViewPagerFragment> mList; private String[] mArray; public SimpleAdapter(FragmentManager fm) { super(fm); } public void setFragmentList(List<ViewPagerFragment> list) { mList = list; } public void setTitleArray(String[] array) { mArray = array; } @Override public Fragment getItem(int position) { return mList.get(position); } @Override public CharSequence getPageTitle(int position) { return mArray[position]; } @Override public int getCount() { return mList.size(); } } } ``` 问答

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览