Android新闻类导航栏

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

---

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

二、GitHub

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

三、A的使用

1）A的引用

   <com.xp.different.ViewPagerTitle
        android: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.ShadowTab
        android: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）

---

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