一個新聞導航欄，可以自定義文字顏色、選中文字和未選中文字大小、文字間距、拖拽效果等效果。

---

一、先上效果圖（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新闻类导航栏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。