Android新闻类导航栏

一个新闻导航栏，可以自定义文字颜色、选中文字和未选中文字大小、文字间距、拖拽效果等效果。

---

一、先上效果图（A、B）

二、GitHub

代码地址，欢迎指正 https://github.com/MNXP/FlexTitle

三、A的使用

1）A的引用

<com.xp.different.ViewPagerTitleandroid:id="@+id/pager_title"flexTitle:background_content_color="@android:color/white"flexTitle:line_start_color="@android:color/holo_red_dark"flexTitle:line_end_color="@android:color/holo_blue_light"flexTitle:line_height="5dp"flexTitle:line_bottom_margins="10dp"flexTitle:item_top_margins="10dp"flexTitle:item_bottom_margins="8dp"flexTitle:item_margins="40dp"flexTitle:selected_text_Size="16sp"flexTitle:default_text_size="14sp"flexTitle:selected_text_color="@android:color/holo_orange_dark"flexTitle:title_center="false"flexTitle:line_drag="true"flexTitle:line_margins="5dp"android:layout_width="match_parent"android:layout_height="wrap_content"/> 复制代码

2）A的自定义

<declare-styleable name="FlexTitle"><attr name="default_text_size" format="dimension" /> <attr name="selected_text_Size" format="dimension" />//选中文字大小<attr name="default_text_color" format="color" />//未选择文字颜色<attr name="selected_text_color" format="color" />//选择文字颜色<attr name="background_content_color" format="color" />//背景颜色<attr name="line_start_color" format="color" />//线 起始颜色<attr name="line_end_color" format="color" />//线 终止颜色<attr name="line_margins" format="dimension" />//线的间距<attr name="item_margins" format="dimension" />//item间距<attr name="item_top_margins" format="dimension" />//据上高度<attr name="item_bottom_margins" format="dimension" />//距下高度<attr name="line_bottom_margins" format="dimension" />//线 距下高度<attr name="line_height" format="dimension" />// 线的高度<attr name="title_center" format="boolean" />//文字是否左右均留空隙<attr name="line_drag" format="boolean" />//线是否有拖拽效果</declare-styleable> 复制代码

3）A的实现

根据titleCenter和lineDrag来判断线的起始点和终点绘制 if (titleCenter) {if (lineDrag) {if (lastPosition > position) {for (int i = 0; i < position; i++) {leftAll = leftAll + getDefaultWidth(i);}for (int i = 0; i < lastPosition; i++) {rightAll = rightAll + getDefaultWidth(i);}left = leftAll + (position * 2 + 1) * dis + positionOffset * (getDefaultWidth(position) + 2 * dis) + lineMargins;right = rightAll + (lastPosition * 2 + 1) * dis + getDefaultWidth(lastPosition) + lineMargins;dynamicLine.updateView(left, right);} else {if (positionOffset > 0.5f) {positionOffset = 0.5f;}for (int i = 0; i < position; i++) {leftAll = leftAll + getDefaultWidth(i);}for (int i = 0; i <= position; i++) {rightAll = rightAll + getDefaultWidth(i);}left = leftAll + (position * 2 + 1) * dis + lineMargins;right = rightAll + (position * 2 + 1) * dis + lineMargins + positionOffset * 2 * (getDefaultWidth(position + 1) + 2 * dis);dynamicLine.updateView(left, right);}} else {if (lastPosition > position) {for (int i = 0; i < position; i++) {leftAll = leftAll + getDefaultWidth(i);}for (int i = 0; i < lastPosition; i++) {rightAll = rightAll + getDefaultWidth(i);}left = leftAll + (position + positionOffset) * 2 * dis + dis + lineMargins + positionOffset * (lastWidth - lastDis);right = rightAll + (position + positionOffset) * 2 * dis + dis + lineMargins + positionOffset * lastWidth;dynamicLine.updateView(left, right);} else {for (int i = 0; i < position; i++) {leftAll = leftAll + getDefaultWidth(i);}for (int i = 0; i <= position; i++) {rightAll = rightAll + getDefaultWidth(i);}left = dis + leftAll + position * 2 * dis + lineMargins + positionOffset * 2 * dis + positionOffset * (lastWidth - lastDis);right = dis + rightAll + position * 2 * dis + lineMargins + positionOffset * 2 * dis + positionOffset * lastWidth;dynamicLine.updateView(left, right);}}} else {if (lineDrag) {if (lastPosition > position) {for (int i = 0; i < position; i++) {leftAll = leftAll + getDefaultWidth(i);}for (int i = 0; i < lastPosition; i++) {rightAll = rightAll + getDefaultWidth(i);}left = leftAll + (position + 1) * dis + positionOffset * (getDefaultWidth(position) + dis) + lineMargins;right = rightAll + (lastPosition + 1) * dis + getDefaultWidth(lastPosition) + lineMargins;dynamicLine.updateView(left, right);} else {if (positionOffset > 0.5f) {positionOffset = 0.5f;}for (int i = 0; i < position; i++) {leftAll = leftAll + getDefaultWidth(i);}for (int i = 0; i <= position; i++) {rightAll = rightAll + getDefaultWidth(i);}left = leftAll + (position + 1) * dis + lineMargins;right = rightAll + (position + 1) * dis + lineMargins + positionOffset * 2 * (getDefaultWidth(position + 1) + dis);dynamicLine.updateView(left, right);}} else {if (lastPosition > position) {for (int i = 0; i < position; i++) {leftAll = leftAll + getDefaultWidth(i);}for (int i = 0; i < lastPosition; i++) {rightAll = rightAll + getDefaultWidth(i);}left = leftAll + (position + positionOffset) * dis + dis + lineMargins + positionOffset * (lastWidth - lastDis);right = rightAll + (position + positionOffset) * dis + dis + lineMargins + positionOffset * lastWidth;dynamicLine.updateView(left, right);} else {for (int i = 0; i < position; i++) {leftAll = leftAll + getDefaultWidth(i);}for (int i = 0; i <= position; i++) {rightAll = rightAll + getDefaultWidth(i);}left = dis + leftAll + position * dis + lineMargins + positionOffset * dis + positionOffset * (lastWidth - lastDis);right = dis + rightAll + position * dis + lineMargins + positionOffset * dis + positionOffset * lastWidth;dynamicLine.updateView(left, right);}}} 通过判断，进行不同的逻辑处理（代码位置com.xp.different.MyOnPageChangeListener） 复制代码

四、B的使用

这种是借鉴的，如有侵犯，请联系，会及时删除

1）B的引用

<com.xp.shadow.ShadowTabandroid:id="@+id/indicator"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="#11000000"flexTitle:item_padding="15dp"flexTitle:text_size="16sp"flexTitle:default_color="#000000"flexTitle:changed_color="#ff0000"/> 复制代码

2）B的自定义

<declare-styleable name="ShadowTab"><attr name="text_size"/><attr name="default_color"/><attr name="changed_color"/><attr name="item_padding_l" format="dimension"/><attr name="item_padding_r" format="dimension"/><attr name="item_padding_t" format="dimension"/><attr name="item_padding_b" format="dimension"/><attr name="item_padding" format="dimension"/><attr name="line_start_colors" format="color" />//线 起始颜色<attr name="line_end_colors" format="color" />//线 终止颜色<attr name="line_heights" format="dimension" />// 线的高度<attr name="line_bottom_margin" format="dimension" />//线 距下高度</declare-styleable> 复制代码

3）B的实现

根据位置绘制文字和线//画正常的文字内容paint.setTextSize(textSize);Paint.FontMetrics fontMetrics = paint.getFontMetrics();canvas.save();paint.setColor(defaultColor);canvas.drawText(text, textLeft, textBottom - fontMetrics.descent, paint);canvas.restore();//画渐变部分的文字canvas.save();paint.setColor(changeColor);canvas.clipRect(startX, 0, endX, getMeasuredHeight());canvas.drawText(text, textLeft, textBottom - fontMetrics.descent, paint);canvas.restore(); （代码位置com.xp.shadow.ShadowTextView） 复制代码

---

初次尝试，海涵。如有意见和建议，及时沟通。

转载于:https://juejin.im/post/5a952633f265da4e8700f709

总结

以上是生活随笔为你收集整理的Android新闻类导航栏的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。