您好,登錄后才能下訂單哦!
前言
以前做的項(xiàng)目,導(dǎo)航欄基本上是在頂部或者是在底部,但是最近開發(fā)的一款app,剛開始拿到設(shè)計(jì)圖也是很懵逼的,導(dǎo)航欄居然是在中間,what fuck!設(shè)計(jì)圖如下:
導(dǎo)航欄在中間就會(huì)涉及到兩個(gè)viewpager之間的聯(lián)動(dòng),viewpager的高度適應(yīng)等問題,現(xiàn)在來紀(jì)錄一下是怎么解決問題的?希望給有同樣需求的提供一定的幫助。
(一)Viewpager 高度自適應(yīng)
系統(tǒng)自動(dòng)viewpager 不能設(shè)置wrap_content;
自定義viewpager,注意高度的設(shè)置否則底部空白的問題
網(wǎng)上也會(huì)有很多相關(guān)的教程,我選擇了其中一個(gè)。具體代碼如下:
public class WrapContentHeightViewPager extends ViewPager { private int current; private int height = 0; private boolean scrollble = true; public WrapContentHeightViewPager(Context context) { super(context); } public WrapContentHeightViewPager(Context context, AttributeSet attrs) { super(context, attrs); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { if (getChildCount() > current) { View child = getChildAt(current); child.measure(widthMeasureSpec, MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED)); int h = child.getMeasuredHeight(); height = h; } heightMeasureSpec = MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY); super.onMeasure(widthMeasureSpec, heightMeasureSpec); } public void resetHeight(int current) { this.current = current; if (getChildCount() > current) { LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) getLayoutParams(); if (layoutParams == null) { layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, height); } else { layoutParams.height = height; } setLayoutParams(layoutParams); } } @Override public boolean onTouchEvent(MotionEvent ev) { if (!scrollble) { return true; } return super.onTouchEvent(ev); } @Override public boolean onInterceptTouchEvent(MotionEvent ev) { return scrollble && super.onInterceptTouchEvent(ev); } public boolean isScrollble() { return scrollble; } public void setScrollble(boolean scrollble) { this.scrollble = scrollble; } }
(二)Viewpager 的聯(lián)動(dòng)
聯(lián)動(dòng)ViewPager的意思就是當(dāng)一個(gè)viewpager在滑動(dòng)的時(shí)候,另外一個(gè)ViewPager也跟著滑動(dòng),而且兩者是同步的。
如果ViewPager有關(guān)于移動(dòng)距離的回調(diào)接口,這事兒就好辦了,遺憾的是沒有,只有一個(gè)OnPageChangeListener,我試過在OnPageChangeListener中根據(jù)onPageScrolled(int position, float positionOffset, int positionOffsetPixels)的參數(shù)來做,但是失敗了。
沒辦法只有改造一下OnPageChangeListener,讓它可以實(shí)現(xiàn)兩個(gè)viewpager的聯(lián)動(dòng),難點(diǎn)在于對滑動(dòng)的距離一個(gè)計(jì)算。
public class BaseLinkPageChangeListener implements ViewPager.OnPageChangeListener { private ViewPager linkViewPager; private ViewPager selfViewPager; private int pos; public BaseLinkPageChangeListener(ViewPager selfViewPager, ViewPager linkViewPager) { this.linkViewPager = linkViewPager; this.selfViewPager = selfViewPager; } @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { int marginX = ((selfViewPager.getWidth() + selfViewPager.getPageMargin()) * position + positionOffsetPixels) * (linkViewPager.getWidth() + linkViewPager.getPageMargin()) / ( selfViewPager.getWidth() + selfViewPager.getPageMargin()); if (linkViewPager.getScrollX() != marginX) { linkViewPager.scrollTo(marginX, 0); } } @Override public void onPageSelected(int position) { this.pos = position; } @Override public void onPageScrollStateChanged(int state) { if (state == ViewPager.SCROLL_STATE_IDLE) { linkViewPager.setCurrentItem(pos); } } }
(三)使用方法
xml布局
<?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.NestedScrollView 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"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <cn.yznu.gdmapoperate.ui.widget.WrapContentHeightViewPager android:id="@+id/body_vp" android:layout_width="match_parent" android:layout_height="wrap_content" /> <com.flyco.tablayout.SlidingTabLayout android:id="@+id/tabLayout" android:layout_width="match_parent" android:layout_height="40dp" android:layout_centerHorizontal="true" android:layout_gravity="center_horizontal" android:background="@color/colorPrimaryDark" android:paddingBottom="10dp" app:tl_indicator_color="#000" app:tl_indicator_margin_top="10dp" app:tl_indicator_width_equal_title="true" app:tl_tab_space_equal="true" app:tl_textSelectColor="#f00" app:tl_textUnselectColor="#fff" app:tl_textsize="17sp" /> <cn.yznu.gdmapoperate.ui.widget.WrapContentHeightViewPager android:id="@+id/header_vp" android:layout_width="match_parent" android:layout_height="wrap_content" /> </LinearLayout> </android.support.v4.widget.NestedScrollView>
activity中的配置
bodyVp.addOnPageChangeListener(new BaseLinkPageChangeListener(bodyVp, headerVp) { @Override public void onPageSelected(int position) { super.onPageSelected(position); pageScrollToTop(); bodyVp.resetHeight(position);//設(shè)置viewpager高度 headerVp.resetHeight(position); } }); headerVp.addOnPageChangeListener(new BaseLinkPageChangeListener(headerVp, bodyVp) { @Override public void onPageSelected(int position) { super.onPageSelected(position); tabLayout.onPageSelected(position); } @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { super.onPageScrolled(position, positionOffset, positionOffsetPixels); tabLayout.onPageScrolled(position, positionOffset, positionOffsetPixels); bodyVp.resetHeight(position); headerVp.resetHeight(position); } });
大功搞成,看一下效果圖
總結(jié)
一頓亂寫,個(gè)人觀點(diǎn)僅供參考,如有不對的地方,請直接直出
源碼傳送門
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。