自定义导航栏与ViewPager的结合使用
来源：互联网 发布：人人商城数据备份 编辑：程序博客网 时间：2024/06/05 12:50
- 首先在res的values文件夹下生成 attrs.xml ，drawable文件夹下生成background_tab.xml . 如下内容 :
<declare-styleable name="PagerSlidingTabStrip"> <attr name="pstsIndicatorColor" format="color"/> <attr name="pstsUnderlineColor" format="color"/> <attr name="pstsDividerColor" format="color"/> <attr name="pstsIndicatorHeight" format="dimension"/> <attr name="pstsUnderlineHeight" format="dimension"/> <attr name="pstsDividerPadding" format="dimension"/> <attr name="pstsTabPaddingLeftRight" format="dimension"/> <attr name="pstsScrollOffset" format="dimension"/> <attr name="pstsTabBackground" format="reference"/> <attr name="pstsShouldExpand" format="boolean"/> <attr name="pstsTextAllCaps" format="boolean"/> </declare-styleable><?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android" android:exitFadeDuration="@android:integer/config_shortAnimTime"> <item android:drawable="@color/background_tab_pressed" android:state_pressed="true"/> <item android:drawable="@color/background_tab_pressed" android:state_focused="true"/> <item android:drawable="@android:color/transparent"/></selector>- 下一步：自定义水平滚动类
public class CustomTab extends HorizontalScrollView { public interface IconTabProvider { public int getPageIconResId(int position); } // @formatter:off private static final int[] ATTRS = new int[]{android.R.attr.textSize, android.R.attr.textColor}; // @formatter:on private LinearLayout.LayoutParams defaultTabLayoutParams; private LinearLayout.LayoutParams expandedTabLayoutParams; private final PageListener pageListener = new PageListener(); public ViewPager.OnPageChangeListener delegatePageListener; private LinearLayout tabsContainer; private ViewPager pager; private int tabCount; private int currentPosition = 0; private int selectedPosition = 0; private float currentPositionOffset = 0f; private Paint rectPaint; private Paint dividerPaint; private int indicatorColor = 0xFF666666; private int underlineColor = 0x1A000000; private int dividerColor = 0x1A000000; private boolean shouldExpand = false; private boolean textAllCaps = true; private int scrollOffset = 52; private int indicatorHeight = 8; private int underlineHeight = 2; private int dividerPadding = 12; private int tabPadding = 24; private int dividerWidth = 1; private int tabTextSize = 12; private int tabTextColor = 0xFF666666; private int selectedTabTextColor = 0xFF666666; private Typeface tabTypeface = null; private int tabTypefaceStyle = Typeface.NORMAL; private int lastScrollX = 0; private int tabBackgroundResId = R.drawable.background_tab; private Locale locale; public CustomTab(Context context) { this(context, null); } public CustomTab(Context context, AttributeSet attrs) { this(context, attrs, 0); } @SuppressWarnings("ResourceType") public CustomTab(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); setFillViewport(true); setWillNotDraw(false); tabsContainer = new LinearLayout(context); tabsContainer.setOrientation(LinearLayout.HORIZONTAL); tabsContainer.setLayoutParams(new LayoutParams( LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)); addView(tabsContainer); DisplayMetrics dm = getResources().getDisplayMetrics(); scrollOffset = (int) TypedValue.applyDimension( TypedValue.COMPLEX_UNIT_DIP, scrollOffset, dm); indicatorHeight = (int) TypedValue.applyDimension( TypedValue.COMPLEX_UNIT_DIP, indicatorHeight, dm); underlineHeight = (int) TypedValue.applyDimension( TypedValue.COMPLEX_UNIT_DIP, underlineHeight, dm); dividerPadding = (int) TypedValue.applyDimension( TypedValue.COMPLEX_UNIT_DIP, dividerPadding, dm); tabPadding = (int) TypedValue.applyDimension( TypedValue.COMPLEX_UNIT_DIP, tabPadding, dm); dividerWidth = (int) TypedValue.applyDimension( TypedValue.COMPLEX_UNIT_DIP, dividerWidth, dm); tabTextSize = (int) TypedValue.applyDimension( TypedValue.COMPLEX_UNIT_SP, tabTextSize, dm); // get system attrs (android:textSize and android:textColor) TypedArray a = context.obtainStyledAttributes(attrs, ATTRS); tabTextSize = a.getDimensionPixelSize(0, tabTextSize); tabTextColor = a.getColor(1, tabTextColor); a.recycle(); // get custom attrs a = context.obtainStyledAttributes(attrs, R.styleable.PagerSlidingTabStrip); indicatorColor = a.getColor( R.styleable.PagerSlidingTabStrip_pstsIndicatorColor, indicatorColor); underlineColor = a.getColor( R.styleable.PagerSlidingTabStrip_pstsUnderlineColor, underlineColor); dividerColor = a .getColor(R.styleable.PagerSlidingTabStrip_pstsDividerColor, dividerColor); indicatorHeight = a.getDimensionPixelSize( R.styleable.PagerSlidingTabStrip_pstsIndicatorHeight, indicatorHeight); underlineHeight = a.getDimensionPixelSize( R.styleable.PagerSlidingTabStrip_pstsUnderlineHeight, underlineHeight); dividerPadding = a.getDimensionPixelSize( R.styleable.PagerSlidingTabStrip_pstsDividerPadding, dividerPadding); tabPadding = a.getDimensionPixelSize( R.styleable.PagerSlidingTabStrip_pstsTabPaddingLeftRight, tabPadding); tabBackgroundResId = a.getResourceId( R.styleable.PagerSlidingTabStrip_pstsTabBackground, tabBackgroundResId); shouldExpand = a .getBoolean(R.styleable.PagerSlidingTabStrip_pstsShouldExpand, shouldExpand); scrollOffset = a .getDimensionPixelSize( R.styleable.PagerSlidingTabStrip_pstsScrollOffset, scrollOffset); textAllCaps = a.getBoolean( R.styleable.PagerSlidingTabStrip_pstsTextAllCaps, textAllCaps); a.recycle(); rectPaint = new Paint(); rectPaint.setAntiAlias(true); rectPaint.setStyle(Paint.Style.FILL); dividerPaint = new Paint(); dividerPaint.setAntiAlias(true); dividerPaint.setStrokeWidth(dividerWidth); defaultTabLayoutParams = new LinearLayout.LayoutParams( LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT); expandedTabLayoutParams = new LinearLayout.LayoutParams(0, LayoutParams.MATCH_PARENT, 1.0f); if (locale == null) { locale = getResources().getConfiguration().locale; } } public void setViewPager(ViewPager pager) { this.pager = pager; if (pager.getAdapter() == null) { throw new IllegalStateException( "ViewPager does not have adapter instance."); } pager.setOnPageChangeListener(pageListener); notifyDataSetChanged(); } public void setOnPageChangeListener(ViewPager.OnPageChangeListener listener) { this.delegatePageListener = listener; } public void notifyDataSetChanged() { tabsContainer.removeAllViews(); tabCount = pager.getAdapter().getCount(); for (int i = 0; i < tabCount; i++) { if (pager.getAdapter() instanceof IconTabProvider) { addIconTab(i, ((IconTabProvider) pager.getAdapter()) .getPageIconResId(i)); } else { addTextTab(i, pager.getAdapter().getPageTitle(i).toString()); } } updateTabStyles(); getViewTreeObserver().addOnGlobalLayoutListener( new ViewTreeObserver.OnGlobalLayoutListener() { @Override public void onGlobalLayout() { getViewTreeObserver() .removeGlobalOnLayoutListener(this); currentPosition = pager.getCurrentItem(); scrollToChild(currentPosition, 0); } }); } private void addTextTab(final int position, String title) { TextView tab = new TextView(getContext()); tab.setText(title); tab.setGravity(Gravity.CENTER); tab.setSingleLine(); addTab(position, tab); } private void addIconTab(final int position, int resId) { ImageButton tab = new ImageButton(getContext()); tab.setImageResource(resId); addTab(position, tab); } private void addTab(final int position, View tab) { tab.setFocusable(true); tab.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { pager.setCurrentItem(position); } }); tab.setPadding(tabPadding, 0, tabPadding, 0); tabsContainer .addView(tab, position, shouldExpand ? expandedTabLayoutParams : defaultTabLayoutParams); } private void updateTabStyles() { for (int i = 0; i < tabCount; i++) { View v = tabsContainer.getChildAt(i); v.setBackgroundResource(tabBackgroundResId); if (v instanceof TextView) { TextView tab = (TextView) v; tab.setTextSize(TypedValue.COMPLEX_UNIT_PX, tabTextSize); tab.setTypeface(tabTypeface, tabTypefaceStyle); tab.setTextColor(tabTextColor); // setAllCaps() is only available from API 14, so the upper case // is made manually if we are on a // pre-ICS-build if (textAllCaps) { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.ICE_CREAM_SANDWICH) { tab.setAllCaps(true); } else { tab.setText(tab.getText().toString() .toUpperCase(locale)); } } if (i == selectedPosition) { tab.setTextColor(selectedTabTextColor); } } } } private void scrollToChild(int position, int offset) { if (tabCount == 0) { return; } int newScrollX = tabsContainer.getChildAt(position).getLeft() + offset; if (position > 0 || offset > 0) { newScrollX -= scrollOffset; } if (newScrollX != lastScrollX) { lastScrollX = newScrollX; scrollTo(newScrollX, 0); } } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); if (isInEditMode() || tabCount == 0) { return; } final int height = getHeight(); // draw underline rectPaint.setColor(underlineColor); canvas.drawRect(0, height - underlineHeight, tabsContainer.getWidth(), height, rectPaint); // draw indicator line rectPaint.setColor(indicatorColor); // default: line below current tab View currentTab = tabsContainer.getChildAt(currentPosition); float lineLeft = currentTab.getLeft(); float lineRight = currentTab.getRight(); // if there is an offset, start interpolating left and right coordinates // between current and next tab if (currentPositionOffset > 0f && currentPosition < tabCount - 1) { View nextTab = tabsContainer.getChildAt(currentPosition + 1); final float nextTabLeft = nextTab.getLeft(); final float nextTabRight = nextTab.getRight(); lineLeft = (currentPositionOffset * nextTabLeft + (1f - currentPositionOffset) * lineLeft); lineRight = (currentPositionOffset * nextTabRight + (1f - currentPositionOffset) * lineRight); } canvas.drawRect(lineLeft, height - indicatorHeight, lineRight, height, rectPaint); // draw divider dividerPaint.setColor(dividerColor); for (int i = 0; i < tabCount - 1; i++) { View tab = tabsContainer.getChildAt(i); canvas.drawLine(tab.getRight(), dividerPadding, tab.getRight(), height - dividerPadding, dividerPaint); } } private class PageListener implements ViewPager.OnPageChangeListener { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { currentPosition = position; currentPositionOffset = positionOffset; scrollToChild(position, (int) (positionOffset * tabsContainer .getChildAt(position).getWidth())); invalidate(); if (delegatePageListener != null) { delegatePageListener.onPageScrolled(position, positionOffset, positionOffsetPixels); } } @Override public void onPageScrollStateChanged(int state) { if (state == ViewPager.SCROLL_STATE_IDLE) { scrollToChild(pager.getCurrentItem(), 0); } if (delegatePageListener != null) { delegatePageListener.onPageScrollStateChanged(state); } } @Override public void onPageSelected(int position) { selectedPosition = position; updateTabStyles(); if (delegatePageListener != null) { delegatePageListener.onPageSelected(position); } } } public void setIndicatorColor(int indicatorColor) { this.indicatorColor = indicatorColor; invalidate(); } public void setIndicatorColorResource(int resId) { this.indicatorColor = getResources().getColor(resId); invalidate(); } public int getIndicatorColor() { return this.indicatorColor; } public void setIndicatorHeight(int indicatorLineHeightPx) { this.indicatorHeight = indicatorLineHeightPx; invalidate(); } public int getIndicatorHeight() { return indicatorHeight; } public void setUnderlineColor(int underlineColor) { this.underlineColor = underlineColor; invalidate(); } public void setUnderlineColorResource(int resId) { this.underlineColor = getResources().getColor(resId); invalidate(); } public int getUnderlineColor() { return underlineColor; } public void setDividerColor(int dividerColor) { this.dividerColor = dividerColor; invalidate(); } public void setDividerColorResource(int resId) { this.dividerColor = getResources().getColor(resId); invalidate(); } public int getDividerColor() { return dividerColor; } public void setUnderlineHeight(int underlineHeightPx) { this.underlineHeight = underlineHeightPx; invalidate(); } public int getUnderlineHeight() { return underlineHeight; } public void setDividerPadding(int dividerPaddingPx) { this.dividerPadding = dividerPaddingPx; invalidate(); } public int getDividerPadding() { return dividerPadding; } public void setScrollOffset(int scrollOffsetPx) { this.scrollOffset = scrollOffsetPx; invalidate(); } public int getScrollOffset() { return scrollOffset; } public void setShouldExpand(boolean shouldExpand) { this.shouldExpand = shouldExpand; notifyDataSetChanged(); } public boolean getShouldExpand() { return shouldExpand; } public boolean isTextAllCaps() { return textAllCaps; } public void setAllCaps(boolean textAllCaps) { this.textAllCaps = textAllCaps; } public void setTextSize(int textSizePx) { this.tabTextSize = textSizePx; updateTabStyles(); } public int getTextSize() { return tabTextSize; } public void setTextColor(int textColor) { this.tabTextColor = textColor; updateTabStyles(); } public void setTextColorResource(int resId) { this.tabTextColor = getResources().getColor(resId); updateTabStyles(); } public int getTextColor() { return tabTextColor; } public void setSelectedTextColor(int textColor) { this.selectedTabTextColor = textColor; updateTabStyles(); } public void setSelectedTextColorResource(int resId) { this.selectedTabTextColor = getResources().getColor(resId); updateTabStyles(); } public int getSelectedTextColor() { return selectedTabTextColor; } public void setTypeface(Typeface typeface, int style) { this.tabTypeface = typeface; this.tabTypefaceStyle = style; updateTabStyles(); } public void setTabBackground(int resId) { this.tabBackgroundResId = resId; updateTabStyles(); } public int getTabBackground() { return tabBackgroundResId; } public void setTabPaddingLeftRight(int paddingPx) { this.tabPadding = paddingPx; updateTabStyles(); } public int getTabPaddingLeftRight() { return tabPadding; } @Override public void onRestoreInstanceState(Parcelable state) { SavedState savedState = (SavedState) state; super.onRestoreInstanceState(savedState.getSuperState()); currentPosition = savedState.currentPosition; requestLayout(); } @Override public Parcelable onSaveInstanceState() { Parcelable superState = super.onSaveInstanceState(); SavedState savedState = new SavedState(superState); savedState.currentPosition = currentPosition; return savedState; } static class SavedState extends BaseSavedState { int currentPosition; public SavedState(Parcelable superState) { super(superState); } private SavedState(Parcel in) { super(in); currentPosition = in.readInt(); } @Override public void writeToParcel(Parcel dest, int flags) { super.writeToParcel(dest, flags); dest.writeInt(currentPosition); } public static final Parcelable.Creator<SavedState> CREATOR = new Parcelable.Creator<SavedState>() { @Override public SavedState createFromParcel(Parcel in) { return new SavedState(in); } @Override public SavedState[] newArray(int size) { return new SavedState[size]; } }; }}- 接下来就是在索要联动的主布局中引用了—-如下
<?xml version="1.0" encoding="utf-8"?><RelativeLayout 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" > <RelativeLayout android:id="@+id/title" android:layout_width="match_parent" android:layout_height="55dp" android:background="@color/white" android:gravity="center_vertical"> <include layout="@layout/back_image"/> <TextView android:id="@+id/tv_titel" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="你好" android:textColor="@color/shenblack" android:textSize="@dimen/textsize_normal18" /> </RelativeLayout> <View android:id="@+id/yu_view1" android:layout_width="match_parent" android:layout_height="1px" android:layout_below="@+id/title" android:background="@color/line_view"/> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@+id/yu_view1" android:background="@color/zhu_backguang"> <com.xxx. ...CustomTab android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="45dp" /> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@+id/tabs" /> </RelativeLayout></RelativeLayout>- 最后在Activity中实现逻辑—如下
public class YuActivity extends BaseFragmentActivity { private CustomTab tabs; private ViewPager viewpager; private DisplayMetrics dm; private FragmentManager fm; private FragmentPagerAdapter adapter; private YuAllFragment allFragment; private List<String> timeList; private String threeTime; private String fourTime; private String sixTime; private String fiveTime; private String sevenTime; List<String> mList = new ArrayList<String>(); /**l * 返回的监听 */ public void back(View view) { finish(); } @Override protected int getContentViewId() { return R.layout.activity_yuyue; } @Override protected void findView() { tabs = (CustomTab) findViewById(R.id.tabs);// 自定义的滚动导航对象 viewpager = (ViewPager) findViewById(R.id.viewpager);// 下面联动的viewpages+fragment } @Override protected void initView() { //请求数据，显示标题时间 Map<String, String> maps = new HashMap<String, String>(); maps .put("btoken", SmartQuePref.getStoken()); maps .put("type", "88"); HttpUtils.getInstance(this).post(Constants.YU , maps , new ObjectCallBack<YuBean>() { @Override public void OnSucess(YuyueRefuseBean obj) { if (obj.getStatus() == 200) { RefuseBean refuseData = obj.getData(); timeList = refuseData.getTimeData(); refresh(timeList); } else if (obj.getStatus() == 400) { Log.i("失效的信息", obj.getInfo()); } }); } //显示日期和初始化标题 private void refresh(List<String> timeList) { threeTime = timeList.get(2); fourTime = timeList.get(3); fiveTime = timeList.get(4); sixTime = timeList.get(5); sevenTime = timeList.get(6); mList.add("全部"); mList.add("未接受"); mList.add("今天"); mList.add("明天"); mList.add(threeTime); mList.add(fourTime); mList.add(fiveTime); mList.add(sixTime); mList.add(sevenTime); /** * 获取当前屏幕的密度 */ dm = getResources().getDisplayMetrics(); // 得到fragment的管理者 fm = getSupportFragmentManager(); // 给viewpage送fragment adapter = new FragmentPagerAdapter(fm) { // 此方法是给滚动条设置显示一些标题的 @Override public CharSequence getPageTitle(int position) { return mList.get(position); } @Override public int getCount() { return mList.size();// 上面有几个字段 } @Override public Fragment getItem(int position) { //通过下标切换不同的fragment页面 switch (position) { case 0://全部 if(allFragment ==null){ allFragment = new YuAllFragment(); } return allFragment; case 1://5 fiveFragment = new YuFiveFragment(); return fiveFragment; .... 以此类推 default: return null; } } }; viewpager.setAdapter(adapter);// 送数据 viewpager.setOffscreenPageLimit(0); yuyuetabs.setViewPager(viewpager);// 导航和fragmentt联动的效果(一定要在viewpager设配数据之后) setTabsValue();// 给tabs设置一些属性的方法 } /** * 对CustomTab的各项属性进行赋值。 */ private void setTabsValue() { // 设置Tab是自动填充满屏幕的 yuyuetabs.setShouldExpand(true); // 设置Tab的分割线是透明的 yuyuetabs.setDividerColor(Color.TRANSPARENT); // 设置Tab底部线的高度 yuyuetabs.setUnderlineHeight((int) TypedValue.applyDimension( TypedValue.COMPLEX_UNIT_DIP, 1, dm)); // 设置Tab Indicator的高度 yuyuetabs.setIndicatorHeight((int) TypedValue.applyDimension( TypedValue.COMPLEX_UNIT_DIP, 2, dm)); // 设置Tab标题文字的大小 yuyuetabs.setTextSize((int) TypedValue.applyDimension( TypedValue.COMPLEX_UNIT_SP, 14, dm)); // 设置Tab Indicator的颜色 yuyuetabs.setIndicatorColor(Color.parseColor("#12c8cf")); // 设置选中Tab文字的颜色 (这是我自定义的一个方法) yuyuetabs.setSelectedTextColor(Color.parseColor("#12c8cf")); // 取消点击Tab时的背景色 yuyuetabs.setTabBackground(0); }} 0 0
- 自定义导航栏与ViewPager的结合使用
- 普通结合导航栏与Viewpager的使用
- Tablayout和Viewpager的结合使用，实现导航的效果
- ViewPager与Fragment结合的简单使用
- Tablayout与ViewPager的结合使用
- ViewPager与ActionBar结合实现导航
- ActionBar与ViewPager结合实现“书签导航”
- 对viewpager与自定义组件bottombar结合的深入理解
- ActionBar与ViewPager结合使用
- ViewPager与Fragment结合使用
- listview与viewpager结合使用
- 自定义顶端顶部导航栏（可配合ViewPager使用）
- ViewPager 与 ListActivity的结合
- fragment与viewPager的结合
- viewpager与碎片的结合
- tablayout与viewpager的结合
- TabLayou 与viewpager的结合
- 开源PagerSlidingTabStrip的使用Tab与ViewPager的完美结合
- linux mount命令的用法详细解析（转）
- 对于linux下system()函数的深度理解(整理)
- maven打包排除指定文件（jar包）
- Mac android studio集成 Android studio+VirtualBox+Genymotion
- VirtualBox虚拟机的网卡地址重复导致的问题
- 自定义导航栏与ViewPager的结合使用
- 追着嘟嘟学c#系列基础第四篇-----c#类和对象【蓝鸥出品】
- Find the median of two sorted arrays(找到两个排好序的数组的中位数）
- Android修改APP版本号
- RedPackage
- 【NOIP模拟】Map
- 更改tabblwView的cell的线的颜色 以及 可以单独加载某个行的数据
- 图解SQL的各种连接join[转]
- 检查Linux服务器性能的10条命令
