android 微信底部渐变 仿微信底部导航栏BottomNavigation渐变色

-video-to-gif.gif

不说废话了，直接上代码：

自定义View

/**

*

* author : Harvey

* time : /06/14

* desc :navigation icon自定义view，可以通过设置透明度实现类似微信效果

*

*/

public class NavigationIconView extends View {

private Paint mPaint;

private Paint textPaint;

private Bitmap selectedBitmap;

private Bitmap unselectedBitmap;

private Rect textRect;

private int unSelectColor;

private int selectColor;

private String tabText;

private int alphaValue = 0;

private boolean selected;

private int mWidth;

private int textWidth;

private float iconPadding;//默认icon和文字间距10

private ArgbEvaluator mColorEvaluator;

private int textColor;

public NavigationIconView(Context context) {

super(context);

}

public NavigationIconView(Context context, AttributeSet attrs) {

super(context, attrs);

init(context, attrs);

}

public NavigationIconView(Context context, AttributeSet attrs, int defStyleAttr, Paint mPaint) {

super(context, attrs, defStyleAttr);

init(context, attrs);

}

public final void init(Context context, AttributeSet attrs) {

TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.NavigationIconView);

int selectImg = typedArray.getResourceId(R.styleable.NavigationIconView_tab_select_img, android.R.drawable.ic_menu_add);

int unSelectImg = typedArray.getResourceId(R.styleable.NavigationIconView_tab_unSelect_img, android.R.drawable.ic_menu_add);

selectColor = typedArray.getColor(R.styleable.NavigationIconView_tab_select_text_color, Color.BLACK);

unSelectColor = typedArray.getColor(R.styleable.NavigationIconView_tab_unSelect_text_color, Color.BLACK);

tabText = typedArray.getString(R.styleable.NavigationIconView_tab_text);

float tabTextSize = typedArray.getDimension(R.styleable.NavigationIconView_tab_textSize, 14f);

iconPadding = typedArray.getDimension(R.styleable.NavigationIconView_img_padding, 18f);

selected = typedArray.getBoolean(R.styleable.NavigationIconView_selected, false);

typedArray.recycle();

unselectedBitmap = createBitmap(unSelectImg);

selectedBitmap = createBitmap(selectImg);

mPaint = new Paint();

mPaint.setAntiAlias(true);

textPaint = new Paint();

textPaint.setTextSize(tabTextSize);

textPaint.setAntiAlias(true);

//获得绘制文本的宽和高

textRect = new Rect();

mPaint.getTextBounds(tabText, 0, tabText.length(), textRect);

mColorEvaluator = new ArgbEvaluator();

if (selected) {

textColor = selectColor;

alphaValue = 255;

} else {

textColor = unSelectColor;

alphaValue = 0;

}

textWidth = getTextWidth(textPaint,tabText);

}

private Bitmap createBitmap(int resId) {

return decodeResource(getResources(), resId);

}

private Bitmap decodeResource(Resources resources, int id) {

BitmapFactory.Options options = new BitmapFactory.Options();

TypedValue value = new TypedValue();

getResources().openRawResource(id, value);

options.inTargetDensity = value.density;//float scale = targetDensity / (float)density;//缩放比例

return BitmapFactory.decodeResource(resources, id, options);

}

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

super.onMeasure(widthMeasureSpec, heightMeasureSpec);

int widthSize = MeasureSpec.getSize(widthMeasureSpec);

int heightSize = MeasureSpec.getSize(heightMeasureSpec);

mWidth = Math.max(unselectedBitmap.getWidth(), textWidth);

int mHeight = unselectedBitmap.getHeight() + textRect.height() + (int) iconPadding;

if (getLayoutParams().width == ViewGroup.LayoutParams.WRAP_CONTENT

&& getLayoutParams().height == ViewGroup.LayoutParams.WRAP_CONTENT) {

setMeasuredDimension(mWidth, mHeight);

} else if (getLayoutParams().width == ViewGroup.LayoutParams.WRAP_CONTENT) {

setMeasuredDimension(mWidth, heightSize);

} else if (getLayoutParams().height == ViewGroup.LayoutParams.WRAP_CONTENT) {

setMeasuredDimension(widthSize, mHeight);

}

}

@Override

protected void onDraw(Canvas canvas) {

mPaint.setAlpha(255 - alphaValue);

canvas.drawBitmap(unselectedBitmap, getWidth() / 2 - unselectedBitmap.getWidth() / 2, 0, mPaint); //开始在画板上画原图

mPaint.setAlpha(alphaValue);

canvas.drawBitmap(selectedBitmap, getWidth() / 2 - unselectedBitmap.getWidth() / 2, 0, mPaint);

//绘制文字

textPaint.setColor(textColor);

canvas.drawText(tabText, getWidth() / 2 - textWidth / 2, unselectedBitmap.getHeight() + textRect.height() / 2 + (int) iconPadding, textPaint);

}

/**

* 当滑动的时候来调用此方法渐变

*

* @param percent =1选中 =0不选中

*/

public final void changePage(float percent, boolean isNext) {

if (isNext) {

textColor = (int) mColorEvaluator.evaluate(percent, unSelectColor, selectColor);//下一tab的颜色值

alphaValue = (int) (255 * percent);

} else {

textColor = (int) mColorEvaluator.evaluate(percent, selectColor, unSelectColor);//当前tab的颜色值

alphaValue = (int) (255 * (1 - percent));

}

invalidate();

}

private int getTextWidth(Paint paint, String str) {

int iRet = 0;

if (str != null && str.length() > 0) {

int len = str.length();

float[] widths = new float[len];

paint.getTextWidths(str, widths);

for (int j = 0; j < len; j++) {

iRet += (int) Math.ceil(widths[j]);

}

}

return iRet;

}

}

此处要说明一下，不知为何

textRect = new Rect();

mPaint.getTextBounds(tabText, 0, tabText.length(), textRect);

这种方式得到的文字宽度不对。。。只好换了方法。请路过的大神指导一下~

attr文件定义

布局文件

xmlns:app="/apk/res-auto"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

android:id="@+id/viewPager"

android:layout_width="match_parent"

android:layout_height="0dp"

android:layout_weight="1" />

android:id="@+id/navigation_lay"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="#ffffff"

android:orientation="horizontal"

android:paddingBottom="6dp"

android:paddingTop="6dp">

android:id="@+id/requirement_iv"

android:layout_width="0dp"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:layout_weight="1"

app:img_padding="@dimen/dp10"

app:selected="true"

app:tab_select_img="@drawable/tab_requirement_select"

app:tab_select_text_color="@color/title_color"

app:tab_text="需求反馈"

app:tab_textSize="@dimen/sp_12"

app:tab_unSelect_img="@drawable/tab_requirement_unselect"

app:tab_unSelect_text_color="@color/light_gray" />

android:id="@+id/equip_state_iv"

android:layout_width="0dp"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:layout_weight="1"

app:img_padding="@dimen/dp10"

app:tab_select_img="@drawable/tab_state_select"

app:tab_select_text_color="@color/title_color"

app:tab_text="设备状态"

app:tab_textSize="@dimen/sp_12"

app:tab_unSelect_img="@drawable/tab_state_unselect"

app:tab_unSelect_text_color="@color/light_gray" />

android:id="@+id/equip_manage_iv"

android:layout_width="0dp"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:layout_weight="1"

app:img_padding="@dimen/dp10"

app:tab_select_img="@drawable/tab_equip_manage_selected"

app:tab_select_text_color="@color/title_color"

app:tab_text="设备管理"

app:tab_textSize="@dimen/sp_12"

app:tab_unSelect_img="@drawable/tab_equip_manage_unselected"

app:tab_unSelect_text_color="@color/light_gray" />

Activity部分代码：

public void initView() {

mFragments.add(requirementFragment);

mFragments.add(equipmentStateFragment);

mFragments.add(equipmentManageFragment);

FragmentAdapter adapter = new FragmentAdapter(getSupportFragmentManager(), mFragments);// 初始化adapter

viewPager.setAdapter(adapter); // 设置adapter

viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {

@Override

public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

// 当前总的偏移量

float currentPositionOffsetSum = position + positionOffset;

// 上次滑动的总偏移量大于此次滑动的总偏移量，页面从右向左进入(手指从右向左滑动)

boolean rightToLeft = mLastPositionOffsetSum <= currentPositionOffsetSum;

if (currentPositionOffsetSum == mLastPositionOffsetSum) return;

int enterPosition;

int leavePosition;

float percent;

if (rightToLeft) { // 从右向左滑

enterPosition = (positionOffset == 0.0f) ? position : position + 1;

leavePosition = enterPosition - 1;

percent = (positionOffset == 0.0f) ? 1.0f : positionOffset;

} else { // 从左向右滑

enterPosition = position;

leavePosition = position + 1;

percent = 1 - positionOffset;

}

switchTab(enterPosition, leavePosition, percent);

mLastPositionOffsetSum = currentPositionOffsetSum;

}

@Override

public void onPageSelected(int position) {

}

@Override

public void onPageScrollStateChanged(int state) {

}

});

}

private void switchTab(int enterPosition, int leavePosition, float percent) {

switch (leavePosition) {

case 0:

requirementIv.changePage(percent, false);

equipStateIv.changePage(percent, true);

equipManageIv.changePage(1, false);

break;

case 1:

switch (enterPosition) {

case 0:

equipStateIv.changePage(percent,false);

requirementIv.changePage(percent,true);

equipManageIv.changePage(1,false);

break;

case 2:

equipStateIv.changePage(percent,false);

equipManageIv.changePage(percent,true);

requirementIv.changePage(1,false);

break;

}

break;

case 2:

equipManageIv.changePage(percent,false);

equipStateIv.changePage(percent,true);

requirementIv.changePage(1,false);

break;

}

}

完。