ViewPager+自定义导航条实现导航效果
效果说明:
- 自定义导航条;
- 导航条固定位置,选项卡按比例显示;
- 选项卡下方有一个指示器,指示当前页面的位置。
参考代码
自定义的选项卡布局:
TabsView.java
package com.noonecode.viewpagertabsdemo;
import android.animation.ObjectAnimator;
import android.content.Context;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.TextView;
/**
* 一个简单的Tabs选项卡视图
*
* @author noonecode
*
*/
public class TabsView extends LinearLayout {
private int mSelectedColor = 0xffff0000;// 选中的字体颜色
private int mNotSelectedColor = ((mSelectedColor >>> 25) << 24) | (mSelectedColor & 0x00ffffff);// 未选中的字体颜色
private int mIndicatorColor = 0xff0000ff;// 指示器的颜色
private LinearLayout mTabsContainer;// 放置tab的容器
private View mIndicator, mBottomLine;// 指示器和底部横线
private OnTabsItemClickListener listener;
public TabsView(Context context) {
this(context, null);
}
public TabsView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public TabsView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
setOrientation(VERTICAL);
// 初始化容器
mTabsContainer = new LinearLayout(getContext());
mTabsContainer.setOrientation(HORIZONTAL);
mTabsContainer.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT));
addView(mTabsContainer);
// 初始化指示器
mIndicator = new View(getContext());
mIndicator.setBackgroundColor(mIndicatorColor);
mIndicator.setLayoutParams(new LayoutParams(300, 8));// 先任意设置宽度
addView(mIndicato