android 防腾讯新闻标题栏,仿腾讯视频android客户端上方的标题栏
如圖,上方的導(dǎo)航欄是不是很酷,首先它本身是可以滑動(dòng)的,然后右側(cè)有一個(gè)可以查看所有Tab的按鈕,然后他和下方的ViewPager還是聯(lián)動(dòng)的,可以通過(guò)點(diǎn)擊它切換ViewPager,并且ViewPager滑動(dòng),它也會(huì)隨著改變,還有指示條。如果要實(shí)現(xiàn)這個(gè)效果怎么辦?
當(dāng)然,完全可以自己定義實(shí)現(xiàn),但是有太多的細(xì)節(jié)需要去考慮到,還得手動(dòng)調(diào)整指示條的位置,這還不是問(wèn)題,問(wèn)題是滑動(dòng)到頭怎么辦,而且需求要求Tab項(xiàng)不確定,指示條長(zhǎng)度就不一樣,滑動(dòng)范圍也不確定,不過(guò)還是可以實(shí)現(xiàn)的。但是想想就覺(jué)得代碼太冗余了...
于是我想,可不可以用ViewPager就能實(shí)現(xiàn)?
上方的Tab用PagerTabStrip去實(shí)現(xiàn),但是一想,不行啊,右側(cè)的查看更多怎么辦?后來(lái)一想,我可以用FrameLayout來(lái)實(shí)現(xiàn),因?yàn)閂iewPager和PagerTabStrip是一體的,所以我把整個(gè)ViewPager先放入FrameLayout里,然后在右上角摞上一個(gè)ImageView就可以實(shí)現(xiàn)效果了!聯(lián)動(dòng)和效果都有了。
可是,問(wèn)題又出現(xiàn)了,PagerTabStrip的tab之間的距離他封裝的有一個(gè)最小的距離,而且無(wú)法修改,所以他的setTextSpacing方法只能調(diào)整的越來(lái)越大,卻不能比他設(shè)置的最小值還小,所以我就...
所以這條路就走不通了。
我記得我之前實(shí)現(xiàn)過(guò)可以讓標(biāo)題欄收縮在屏幕之中顯示的,然后我就回去看了筆記,果然!
不過(guò)不是只用ViewPager就能實(shí)現(xiàn)的,而是用TabLayout和ViewPager結(jié)合來(lái)實(shí)現(xiàn)的。
首先,在xml中定義TabLayout(和“查看更多”的按鈕一塊布好局):
android:layout_width="match_parent"android:layout_height="40dp"android:orientation="horizontal">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:id="@+id/more"android:layout_width="40dp"android:layout_height="40dp"android:background="@drawable/more_divider"android:padding="10dp"android:src="@drawable/more"/> 然后代碼中設(shè)置:
//下面這么寫(xiě)如果和ViewPager一綁定就會(huì)不顯示文字,因?yàn)樗麜?huì)先remove掉之前的所有Tab,然后new,把ViewPager的標(biāo)題拿//過(guò)來(lái)用,倘若你的ViewPager沒(méi)有設(shè)置標(biāo)題,則就會(huì)看不見(jiàn)了// //調(diào)接口獲取所有咨詢標(biāo)題// mTitles.add("昌吉");// mTitles.add("體育");// mTitles.add("軍事");// mTitles.add("歷史");// mTitles.add("輕松一刻");// mTitles.add("NBA");// //給TabLayout添加標(biāo)題// for (int i = 0; i < mTitles.size(); i++) {// mTabLayout.addTab(mTabLayout.newTab().setText(mTitles.get(i)));// }//使Tab可滾動(dòng)mTabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);//設(shè)置指示條顏色mTabLayout.setSelectedTabIndicatorColor(Color.parseColor("#418DEB"));//設(shè)置文字顏色mTabLayout.setTabTextColors(Color.BLACK,Color.parseColor("#418DEB"));//將ViewPager和TabLayout聯(lián)系起來(lái)mTabLayout.setupWithViewPager(mViewpager); 這是我一開(kāi)始這么寫(xiě)的,發(fā)現(xiàn)Tab的文字不見(jiàn)了,但是指示條還在,然后還可以正常滑動(dòng),而且不蹦。
然后我把
//將ViewPager和TabLayout聯(lián)系起來(lái)mTabLayout.setupWithViewPager(mViewpager);
這一句屏蔽了,發(fā)現(xiàn)又能顯示了!
然后就開(kāi)始百度,發(fā)現(xiàn)了大神的解決方法->點(diǎn)擊打開(kāi)鏈接
原來(lái)如果你和ViewPager綁定之后,他會(huì)先remove掉之前的所有Tab,然后new出新的Tab,把ViewPager的標(biāo)題拿過(guò)來(lái)用,倘若你的ViewPager沒(méi)有設(shè)置標(biāo)題,則就會(huì)出現(xiàn)看不見(jiàn)了文字的情況了。
所以,改成下面這樣寫(xiě):
//使Tab可滾動(dòng)mTabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);//設(shè)置指示條顏色mTabLayout.setSelectedTabIndicatorColor(Color.parseColor("#418DEB"));//設(shè)置文字顏色mTabLayout.setTabTextColors(Color.BLACK,Color.parseColor("#418DEB"));//將ViewPager和TabLayout聯(lián)系起來(lái)mTabLayout.setupWithViewPager(mViewpager);//在上一行代碼“mTabLayout.setupWithViewPager(mViewpager);”之后添加TabmTitles.add("昌吉");mTitles.add("體育");mTitles.add("軍事");mTitles.add("歷史");mTitles.add("輕松一刻");mTitles.add("NBA");//這里的mViews一定要和mTitle長(zhǎng)度一致(從同一個(gè)接口返回的List里取)for(inti = 0;i < mViews.size();i++) {
mTabLayout.getTabAt(i).setText(mTitles.get(i));}
也可以在xml中設(shè)置TabLayout的屬性:
app:tabTextAppearance="@style/TabStyle">
到此,完美實(shí)現(xiàn)效果!
最后,提一下,ViewPager添加View,盡量不要用inflate來(lái)添加,改用在代碼中new的形式添加,可以少定義好多布局,而且inflate會(huì)很耗時(shí)間!
提供一種思路:
private voidinitViews() {
mViews= newArrayList<>();for(inti = 0;i < 6;i++) {
//要添加的ViewLinearLayout pager = newLinearLayout(getActivity());LinearLayout.LayoutParams params = newLinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.MATCH_PARENT);pager.setOrientation(LinearLayout.HORIZONTAL);//官方下拉刷新finalSwipeRefreshLayout refreshLayout = newSwipeRefreshLayout(getActivity());refreshLayout.setLayoutParams(params);refreshLayout.setOnRefreshListener(newSwipeRefreshLayout.OnRefreshListener() {
@Overridepublic voidonRefresh() {
refreshLayout.setRefreshing(false);}
});//刷新的時(shí)候變化的顏色refreshLayout.setColorSchemeColors(Color.parseColor("#418DEB"),Color.BLUE,Color.BLACK);//刷新里面的ListViewListView listView = newListView(getActivity());listView.setLayoutParams(params);MyBaseAdapter mListViewAdapter = newMyBaseAdapter();listView.setAdapter(mListViewAdapter);refreshLayout.addView(listView);pager.addView(refreshLayout);mViews.add(pager);}
} 來(lái)自我的工作項(xiàng)目:掌上昌吉。
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯,堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)總結(jié)
以上是生活随笔為你收集整理的android 防腾讯新闻标题栏,仿腾讯视频android客户端上方的标题栏的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: android 弹窗in,Android
- 下一篇: android 视图覆盖,如何在Andr