前言
成都創(chuàng)新互聯(lián)制作網站網頁找三站合一網站制作公司,專注于網頁設計,成都網站設計、成都做網站,網站設計,企業(yè)網站搭建,網站開發(fā),建網站業(yè)務,680元做網站,已為成百上千服務,成都創(chuàng)新互聯(lián)網站建設將一如既往的為我們的客戶提供最優(yōu)質的網站建設、網絡營銷推廣服務!
以前做的項目，導航欄基本上是在頂部或者是在底部，但是最近開發(fā)的一款app，剛開始拿到設計圖也是很懵逼的，導航欄居然是在中間，what fuck！設計圖如下：
導航欄在中間就會涉及到兩個viewpager之間的聯(lián)動，viewpager的高度適應等問題，現(xiàn)在來紀錄一下是怎么解決問題的？希望給有同樣需求的提供一定的幫助。
（一）Viewpager 高度自適應
系統(tǒng)自動viewpager 不能設置wrap_content；
自定義viewpager，注意高度的設置否則底部空白的問題
網上也會有很多相關的教程，我選擇了其中一個。具體代碼如下：
重慶分公司
重慶分公司
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)動
聯(lián)動ViewPager的意思就是當一個viewpager在滑動的時候，另外一個ViewPager也跟著滑動，而且兩者是同步的。
如果ViewPager有關于移動距離的回調接口，這事兒就好辦了，遺憾的是沒有，只有一個OnPageChangeListener，我試過在OnPageChangeListener中根據onPageScrolled(int position, float positionOffset, int positionOffsetPixels)的參數來做，但是失敗了。
沒辦法只有改造一下OnPageChangeListener，讓它可以實現(xiàn)兩個viewpager的聯(lián)動,難點在于對滑動的距離一個計算。
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"?>
activity中的配置
bodyVp.addOnPageChangeListener(new BaseLinkPageChangeListener(bodyVp, headerVp) {
@Override
public void onPageSelected(int position) {
super.onPageSelected(position);
pageScrollToTop();
bodyVp.resetHeight(position);//設置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);
}
});
大功搞成，看一下效果圖
總結
一頓亂寫，個人觀點僅供參考，如有不對的地方，請直接直出
源碼傳送門
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
