一个新闻导航栏，可以自定义文字颜色、选中文字和未选中文字大小、文字间距、拖拽效果等效果。
一、先上效果图
二、GitHub
代码地址，欢迎指正https://github.com/MNXP/FlexTitle
三、A的使用
1）A的引用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <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的自定义
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <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的实现
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
| 根据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的引用
1
2
3
4
5
6
7
8
9
| <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的自定义
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <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的实现
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| 根据位置绘制文字和线
//画正常的文字内容
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）
|
参考仿微博导航条
初次尝试，海涵。如有意见和建议，及时沟通。