仿腾讯视频android客户端上方的标题栏
来源:互联网 发布:淘宝加盟网店 编辑:程序博客网 时间:2024/05/07 04:40
如图,上方的导航栏是不是很酷,首先它本身是可以滑动的,然后右侧有一个可以查看所有Tab的按钮,然后他和下方的ViewPager还是联动的,可以通过点击它切换ViewPager,并且ViewPager滑动,它也会随着改变,还有指示条。如果要实现这个效果怎么办?
当然,完全可以自己定义实现,但是有太多的细节需要去考虑到,还得手动调整指示条的位置,这还不是问题,问题是滑动到头怎么办,而且需求要求Tab项不确定,指示条长度就不一样,滑动范围也不确定,不过还是可以实现的。但是想想就觉得代码太冗余了...
于是我想,可不可以用ViewPager就能实现?
上方的Tab用PagerTabStrip去实现,但是一想,不行啊,右侧的查看更多怎么办?后来一想,我可以用FrameLayout来实现,因为ViewPager和PagerTabStrip是一体的,所以我把整个ViewPager先放入FrameLayout里,然后在右上角摞上一个ImageView就可以实现效果了!联动和效果都有了。
可是,问题又出现了,PagerTabStrip的tab之间的距离他封装的有一个最小的距离,而且无法修改,所以他的setTextSpacing方法只能调整的越来越大,却不能比他设置的最小值还小,所以我就...
所以这条路就走不通了。
我记得我之前实现过可以让标题栏收缩在屏幕之中显示的,然后我就回去看了笔记,果然!
不过不是只用ViewPager就能实现的,而是用TabLayout和ViewPager结合来实现的。
首先,在xml中定义TabLayout(和“查看更多”的按钮一块布好局):
<LinearLayout android:layout_width="match_parent" android:layout_height="40dp" android:orientation="horizontal"> <android.support.design.widget.TabLayout android:id="@+id/tabLayout" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:background="@color/main" app:tabTextAppearance="@style/TabStyle"> </android.support.design.widget.TabLayout> <ImageView android:id="@+id/more" android:layout_width="40dp" android:layout_height="40dp" android:background="@drawable/more_divider" android:padding="10dp" android:src="@drawable/more"/></LinearLayout>然后代码中设置:
//下面这么写如果和ViewPager一绑定就会不显示文字,因为他会先remove掉之前的所有Tab,然后new,把ViewPager的标题拿// 过来用,倘若你的ViewPager没有设置标题,则就会看不见了// //调接口获取所有咨询标题// mTitles.add("昌吉");// mTitles.add("体育");// mTitles.add("军事");// mTitles.add("历史");// mTitles.add("轻松一刻");// mTitles.add("NBA");// //给TabLayout添加标题// for (int i = 0; i < mTitles.size(); i++) {// mTabLayout.addTab(mTabLayout.newTab().setText(mTitles.get(i)));// }//使Tab可滚动mTabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);//设置指示条颜色mTabLayout.setSelectedTabIndicatorColor(Color.parseColor("#418DEB"));//设置文字颜色mTabLayout.setTabTextColors(Color.BLACK, Color.parseColor("#418DEB"));//将ViewPager和TabLayout联系起来mTabLayout.setupWithViewPager(mViewpager);这是我一开始这么写的,发现Tab的文字不见了,但是指示条还在,然后还可以正常滑动,而且不蹦。
然后我把
//将ViewPager和TabLayout联系起来mTabLayout.setupWithViewPager(mViewpager);
这一句屏蔽了,发现又能显示了!
然后就开始百度,发现了大神的解决方法->点击打开链接
原来如果你和ViewPager绑定之后,他会先remove掉之前的所有Tab,然后new出新的Tab,把ViewPager的标题拿过来用,倘若你的ViewPager没有设置标题,则就会出现看不见了文字的情况了。
所以,改成下面这样写:
//使Tab可滚动mTabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);//设置指示条颜色mTabLayout.setSelectedTabIndicatorColor(Color.parseColor("#418DEB"));//设置文字颜色mTabLayout.setTabTextColors(Color.BLACK, Color.parseColor("#418DEB"));//将ViewPager和TabLayout联系起来mTabLayout.setupWithViewPager(mViewpager);//在上一行代码“mTabLayout.setupWithViewPager(mViewpager);”之后添加TabmTitles.add("昌吉");mTitles.add("体育");mTitles.add("军事");mTitles.add("历史");mTitles.add("轻松一刻");mTitles.add("NBA");//这里的mViews一定要和mTitle长度一致(从同一个接口返回的List里取)for (int i = 0; i < mViews.size(); i++) { mTabLayout.getTabAt(i).setText(mTitles.get(i));}
也可以在xml中设置TabLayout的属性:
app:tabTextAppearance="@style/TabStyle"><!-- app:tabTextColor="@android:color/black"//设置TabLayout的tab的字体颜色 app:tabSelectedTextColor="?attr/colorAccent"//设置TabLayout的tab被选中后的字体的颜色 app:tabBackground="@android:color/white"//设置TabLayout的tab的背景色 app:tabIndicatorColor="?attr/colorAccent"//设置TabLayout的指示器的颜色 app:tabPaddingStart="12dp" app:tabPaddingEnd="12dp"//设置TabLayout的tab的内间距 app:tabMode="scrollable"//设置TabLayout是固定还是可以滚动 app:tabGravity="center"//设置TabLayout的tab在中心-->
到此,完美实现效果!
最后,提一下,ViewPager添加View,尽量不要用inflate来添加,改用在代码中new的形式添加,可以少定义好多布局,而且inflate会很耗时间!
提供一种思路:
private void initViews() { mViews = new ArrayList<>(); for (int i = 0; i < 6; i++) { //要添加的View LinearLayout pager = new LinearLayout(getActivity()); LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT); pager.setOrientation(LinearLayout.HORIZONTAL); //官方下拉刷新 final SwipeRefreshLayout refreshLayout = new SwipeRefreshLayout(getActivity()); refreshLayout.setLayoutParams(params); refreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() { @Override public void onRefresh() { refreshLayout.setRefreshing(false); } }); //刷新的时候变化的颜色 refreshLayout.setColorSchemeColors(Color.parseColor("#418DEB"), Color.BLUE, Color.BLACK); //刷新里面的ListView ListView listView = new ListView(getActivity()); listView.setLayoutParams(params); MyBaseAdapter mListViewAdapter = new MyBaseAdapter(); listView.setAdapter(mListViewAdapter); refreshLayout.addView(listView); pager.addView(refreshLayout); mViews.add(pager); }}来自我的工作项目:掌上昌吉。
- 仿腾讯视频android客户端上方的标题栏
- [Android]Android去掉上方的标题栏。
- 【Android优化】去掉屏幕上方应用程序的名称或标题栏
- android风格统一化修改上方标题栏颜色
- Android项目实战之仿腾讯新闻客户端的部分功能实现
- 腾讯视频PC客户端的初步印象
- 腾讯视频客户端
- android 仿QQ音乐建议反馈上方的提示动画效果,渐隐
- Android 高仿 频道管理----网易、今日头条、腾讯视频 (可以拖动的GridView)附源码DEMO
- Android 高仿 频道管理----网易、今日头条、腾讯视频 (可以拖动的GridView)附源码DEMO
- Android 高仿 频道管理----网易、今日头条、腾讯视频 (可以拖动的GridView)附源码DEMO
- Android 高仿 频道管理----网易、今日头条、腾讯视频 (可以拖动的GridView)附源码DEMO
- Android 高仿 频道管理----网易、今日头条、腾讯视频 (可以拖动的GridView)附源码DEMO
- Android 高仿 频道管理----网易、今日头条、腾讯视频 (可以拖动的GridView)附源码DEMO
- Android 高仿 频道管理----网易、今日头条、腾讯视频 (可以拖动的GridView)附源码DEMO
- Android 高仿 频道管理----网易、今日头条、腾讯视频 (可以拖动的GridView)附源码DEMO
- Android 高仿 频道管理----网易、今日头条、腾讯视频 (可以拖动的GridView)附源码DEMO
- Android 高仿 频道管理----网易、今日头条、腾讯视频 (可以拖动的GridView)附源码DEMO
- C++中getline()函数详细剖析
- 点评了一下学生的简历。其实对话也是一种伟大的传播。 孔子在论语中对话,《理想国》里面的对话。
- oracle和MySQL区别
- SVN学习笔记5-分支,合并,属性,补丁,锁,分支图
- Kinect for Xbox one(v2) + Ubuntu 14.04 +ROS
- 仿腾讯视频android客户端上方的标题栏
- TQ2440开发板学习纪实(1)---最简单的独立运行汇编程序
- Light OJ-----1410---Consistent Verdicts
- LeetCode笔记:257. Binary Tree Paths
- MYSQL5.7.11如何解锁?
- FAQ03566][Audio Common]通话时如何播放音乐给到对方?
- Java基础(2)
- ASP.NET MVC+EF6+Bootstrap开发框架
- phpstorm 配置自带webserver ,配置根目录