Android之仿今日头条顶部导航栏效果

随着时间的推移现在的软件要求显示的内容越来越多，所以要在小的屏幕上能够更好的显示更多的内容，首先我们会想到底部菜单栏，但是有时候像今日头条新闻客户端要显示的内容太多，而且又想在主界面全部显示出来，所以有加了顶部导航栏。

今日头条顶部导航栏区域的主要部分是一个导航菜单。导航菜单是一组标签的集合，在新闻客户端中，每个标签标示一个新闻类别，对应下面ViewPager控件的一个分页面。当用户在ViewPager区域滑动页面时，对应的导航菜单标签也会相应的被选中，选中的标签通过一个矩形红框高亮显示，红框背景中的标签文字变为白色，红框外的区域标签文字仍为灰色。当用户直接在导航菜单选中某个标签时，ViewPager会自动的切换到对应的分页面。在本文中导航菜单作为一个单独的UI控件实现，类名为CatagoryTabStrip，继承自HorizontalScrollView，这样就可以很容易的实现导航菜单的左右滑动效果以及与下面ViewPager控件的联动。

先看一下实现的效果对比：

顶部导航栏区域和ViewPager区域View层次结构

主界面布局

1. <RelativeLayout android:id="@+id/main_layout"
2. android:background="@color/activity_bg_color"
3. android:layout_width="fill_parent"
4. android:layout_height="fill_parent"
5. xmlns:android="http://schemas.android.com/apk/res/android">
6. <RelativeLayout android:id="@+id/title_bar" style="@style/main_title_bar_style">
7. <FrameLayout android:id="@+id/top_head_container"
8. android:paddingLeft="10.0dip"
9. android:paddingRight="10.0dip"
10. android:layout_width="wrap_content"
11. android:layout_height="fill_parent">
12. <ImageView android:layout_gravity="center_vertical"
13. android:id="@+id/top_head"
14. android:contentDescription="@string/app_name"
15. android:background="@drawable/bg_head"
16. android:src="@drawable/default_round_head"
17. android:padding="2.0dip"
18. android:layout_width="@dimen/head_size"
19. android:layout_height="@dimen/head_size"
20. android:scaleType="fitXY" />
21. </FrameLayout>
22. <ImageView android:gravity="center"
23. android:id="@+id/top_more"
24. android:contentDescription="@string/app_name"
25. android:layout_width="wrap_content"
26. android:layout_height="fill_parent"
27. android:layout_marginRight="12.0dip"
28. android:src="@drawable/right_drawer"
29. android:scaleType="centerInside"
30. android:layout_alignParentRight="true"
31. android:layout_centerVertical="true" />
32. <RelativeLayout android:id="@+id/title_click_layout"
33. android:paddingLeft="13.0dip"
34. android:layout_width="wrap_content"
35. android:layout_height="fill_parent"
36. android:layout_centerInParent="true">
37. <FrameLayout android:id="@+id/title_parent"
38. android:layout_width="wrap_content"
39. android:layout_height="wrap_content"
40. android:layout_centerVertical="true">
41. <ImageView android:layout_gravity="center"
42. android:id="@+id/title_recent"
43. android:contentDescription="@string/app_name"
44. android:layout_width="wrap_content"
45. android:layout_height="wrap_content"
46. android:src="@drawable/title" />
47. </FrameLayout>
48. <ImageView android:id="@+id/top_refresh"
49. android:contentDescription="@string/app_name"
50. android:padding="3.0dip"
51. android:layout_width="wrap_content"
52. android:layout_height="wrap_content"
53. android:src="@drawable/refreshicon_titlebar"
54. android:layout_toRightOf="@id/title_parent"
55. android:layout_centerVertical="true" />
56. </RelativeLayout>
57. </RelativeLayout>
58. <RelativeLayout android:id="@+id/category_layout"
59. android:background="@drawable/bg_category_bar"
60. android:layout_width="fill_parent"
61. android:layout_height="@dimen/top_category_height"
62. android:layout_below="@id/title_bar" >
63. <ImageView android:id="@+id/icon_category"
64. android:layout_width="@dimen/top_category_height"
65. android:layout_height="@dimen/top_category_height"
66. android:src="@drawable/ic_category_expand"
67. android:contentDescription="@string/app_name"
68. android:scaleType="center"
69. android:layout_alignParentRight="true"
70. android:layout_centerVertical="true" />
71. <LinearLayout android:layout_width="wrap_content"
72. android:layout_height="@dimen/top_category_height"
73. android:layout_toLeftOf="@id/icon_category"
74. android:layout_alignParentLeft="true"
75. android:layout_centerVertical="true">
76. <com.rainsong.toutiaotabdemo.CategoryTabStrip
77. android:id="@+id/category_strip"
78. android:paddingLeft="6.0dip"
79. android:paddingRight="6.0dip"
80. android:clipToPadding="false"
81. android:layout_width="wrap_content"
82. android:layout_height="@dimen/top_category_height" />
83. </LinearLayout>
84. </RelativeLayout>
85. <android.support.v4.view.ViewPager android:id="@+id/view_pager"
86. android:layout_width="fill_parent"
87. android:layout_height="fill_parent"
88. android:layout_below="@id/category_layout" />
89. </RelativeLayout>

在Activity中CatagoryTabStrip控件与ViewPager控件的联合使用

MainActivity.java

1. package com.rainsong.toutiaotabdemo;
2. import java.util.ArrayList;
3. import java.util.List;
4. import android.os.Bundle;
5. import android.support.v4.app.Fragment;
6. import android.support.v4.app.FragmentActivity;
7. import android.support.v4.app.FragmentManager;
8. import android.support.v4.app.FragmentPagerAdapter;
9. import android.support.v4.view.ViewPager;
10. public class MainActivity extends FragmentActivity {
11. private CategoryTabStrip tabs;
12. private ViewPager pager;
13. private MyPagerAdapter adapter;
14. @Override
15. protected void onCreate(Bundle savedInstanceState) {
16. super.onCreate(savedInstanceState);
17. setContentView(R.layout.activity_main);
18. tabs = (CategoryTabStrip) findViewById(R.id.category_strip);
19. pager = (ViewPager) findViewById(R.id.view_pager);
20. adapter = new MyPagerAdapter(getSupportFragmentManager());
21. pager.setAdapter(adapter);
22. tabs.setViewPager(pager);
23. }
24. public class MyPagerAdapter extends FragmentPagerAdapter {
25. private final List<String> catalogs = new ArrayList<String>();
26. public MyPagerAdapter(FragmentManager fm) {
27. super(fm);
28. catalogs.add(getString(R.string.category_hot));
29. catalogs.add("\u672c\u5730");
30. catalogs.add(getString(R.string.category_video));
31. catalogs.add(getString(R.string.category_society));
32. catalogs.add(getString(R.string.category_entertainment));
33. catalogs.add(getString(R.string.category_tech));
34. catalogs.add(getString(R.string.category_finance));
35. catalogs.add(getString(R.string.category_military));
36. catalogs.add(getString(R.string.category_world));
37. catalogs.add(getString(R.string.category_image_ppmm));
38. catalogs.add(getString(R.string.category_health));
39. catalogs.add(getString(R.string.category_government));
40. }
41. @Override
42. public CharSequence getPageTitle(int position) {
43. return catalogs.get(position);
44. }
45. @Override
46. public int getCount() {
47. return catalogs.size();
48. }
49. @Override
50. public Fragment getItem(int position) {
51. return NewsFragment.newInstance(position);
52. }
53. }
54. }

CatagoryTabStrip控件的实现代码

CategoryTabStrip.java

1. package com.rainsong.toutiaotabdemo;
2. import android.content.Context;
3. import android.graphics.Canvas;
4. import android.graphics.Rect;
5. import android.graphics.drawable.Drawable;
6. import android.support.v4.view.ViewPager;
7. import android.support.v4.view.ViewPager.OnPageChangeListener;
8. import android.util.AttributeSet;
9. import android.util.DisplayMetrics;
10. import android.util.TypedValue;
11. import android.view.Gravity;
12. import android.view.LayoutInflater;
13. import android.view.View;
14. import android.view.ViewGroup;
15. import android.widget.HorizontalScrollView;
16. import android.widget.LinearLayout;
17. import android.widget.TextView;
18. public class CategoryTabStrip extends HorizontalScrollView {
19. private LayoutInflater mLayoutInflater;
20. private final PageListener pageListener = new PageListener();
21. private ViewPager pager;
22. private LinearLayout tabsContainer;
23. private int tabCount;
24. private int currentPosition = 0;
25. private float currentPositionOffset = 0f;
26. private Rect indicatorRect;
27. private LinearLayout.LayoutParams defaultTabLayoutParams;
28. private int scrollOffset = 10;
29. private int lastScrollX = 0;
30. private Drawable indicator;
31. private TextDrawable[] drawables;
32. private Drawable left_edge;
33. private Drawable right_edge;
34. public CategoryTabStrip(Context context) {
35. this(context, null);
36. }
37. public CategoryTabStrip(Context context, AttributeSet attrs) {
38. this(context, attrs, 0);
39. }
40. public CategoryTabStrip(Context context, AttributeSet attrs, int defStyle) {
41. super(context, attrs, defStyle);
42. mLayoutInflater = LayoutInflater.from(context);
43. drawables = new TextDrawable[3];
44. int i = 0;
45. while (i < drawables.length) {
46. drawables[i] = new TextDrawable(getContext());
47. i++;
48. }
49. indicatorRect = new Rect();
50. setFillViewport(true);
51. setWillNotDraw(false);
52. // 标签容器
53. tabsContainer = new LinearLayout(context);
54. tabsContainer.setOrientation(LinearLayout.HORIZONTAL);
55. tabsContainer.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
56. addView(tabsContainer);
57. DisplayMetrics dm = getResources().getDisplayMetrics();
58. scrollOffset = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, scrollOffset, dm);
59. defaultTabLayoutParams = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT);
60. // 绘制高亮区域作为滑动分页指示器
61. indicator = getResources().getDrawable(R.drawable.bg_category_indicator);
62. // 左右边界阴影效果
63. left_edge = getResources().getDrawable(R.drawable.ic_category_left_edge);
64. right_edge = getResources().getDrawable(R.drawable.ic_category_right_edge);
65. }
66. // 绑定与CategoryTabStrip控件对应的ViewPager控件，实现联动
67. public void setViewPager(ViewPager pager) {
68. this.pager = pager;
69. if (pager.getAdapter() == null) {
70. throw new IllegalStateException("ViewPager does not have adapter instance.");
71. }
72. pager.setOnPageChangeListener(pageListener);
73. notifyDataSetChanged();
74. }
75. // 当附加在ViewPager适配器上的数据发生变化时,应该调用该方法通知CategoryTabStrip刷新数据
76. public void notifyDataSetChanged() {
77. tabsContainer.removeAllViews();
78. tabCount = pager.getAdapter().getCount();
79. for (int i = 0; i < tabCount; i++) {
80. addTab(i, pager.getAdapter().getPageTitle(i).toString());
81. }
82. }
83. // 添加一个标签到导航菜单
84. private void addTab(final int position, String title) {
85. ViewGroup tab = (ViewGroup)mLayoutInflater.inflate(R.layout.category_tab, this, false);
86. TextView category_text = (TextView) tab.findViewById(R.id.category_text);
87. category_text.setText(title);
88. category_text.setGravity(Gravity.CENTER);
89. category_text.setSingleLine();
90. category_text.setFocusable(true);
91. category_text.setTextColor(getResources().getColor(R.color.category_tab_text));
92. tab.setOnClickListener(new OnClickListener() {
93. @Override
94. public void onClick(View v) {
95. pager.setCurrentItem(position);
96. }
97. });
98. tabsContainer.addView(tab, position, defaultTabLayoutParams);
99. }
100. // 计算滑动过程中矩形高亮区域的上下左右位置
101. private void calculateIndicatorRect(Rect rect) {
102. ViewGroup currentTab = (ViewGroup)tabsContainer.getChildAt(currentPosition);
103. TextView category_text = (TextView) currentTab.findViewById(R.id.category_text);
104. float left = (float) (currentTab.getLeft() + category_text.getLeft());
105. float width = ((float) category_text.getWidth()) + left;
106. if (currentPositionOffset > 0f && currentPosition < tabCount - 1) {
107. ViewGroup nextTab = (ViewGroup)tabsContainer.getChildAt(currentPosition + 1);
108. TextView next_category_text = (TextView) nextTab.findViewById(R.id.category_text);
109. float next_left = (float) (nextTab.getLeft() + next_category_text.getLeft());
110. left = left * (1.0f - currentPositionOffset) + next_left * currentPositionOffset;
111. width = width * (1.0f - currentPositionOffset) + currentPositionOffset * (((float) next_category_text.getWidth()) + next_left);
112. }
113. rect.set(((int) left) + getPaddingLeft(), getPaddingTop() + currentTab.getTop() + category_text.getTop(),
114. ((int) width) + getPaddingLeft(), currentTab.getTop() + getPaddingTop() + category_text.getTop() + category_text.getHeight());
115. }
116. // 计算滚动范围
117. private int getScrollRange() {
118. return getChildCount() > 0 ? Math.max(0, getChildAt(0).getWidth() - getWidth() + getPaddingLeft() + getPaddingRight()) : 0;
119. }
120. // CategoryTabStrip与ViewPager联动逻辑
121. private void scrollToChild(int position, int offset) {
122. if (tabCount == 0) {
123. return;
124. }
125. calculateIndicatorRect(indicatorRect);
126. int newScrollX = lastScrollX;
127. if (indicatorRect.left < getScrollX() + scrollOffset) {
128. newScrollX = indicatorRect.left - scrollOffset;
129. } else if (indicatorRect.right > getScrollX() + getWidth() - scrollOffset) {
130. newScrollX = indicatorRect.right - getWidth() + scrollOffset;
131. }
132. if (newScrollX != lastScrollX) {
133. lastScrollX = newScrollX;
134. scrollTo(newScrollX, 0);
135. }
136. }
137. // 自定义绘图
138. @Override
139. public void draw(Canvas canvas) {
140. super.draw(canvas);
141. // 绘制高亮背景矩形红框
142. calculateIndicatorRect(indicatorRect);
143. if(indicator != null) {
144. indicator.setBounds(indicatorRect);
145. indicator.draw(canvas);
146. }
147. // 绘制背景红框内标签文本
148. int i = 0;
149. while (i < tabsContainer.getChildCount()) {
150. if (i < currentPosition - 1 || i > currentPosition + 1) {
151. i++;
152. } else {
153. ViewGroup tab = (ViewGroup)tabsContainer.getChildAt(i);
154. TextView category_text = (TextView) tab.findViewById(R.id.category_text);
155. if (category_text != null) {
156. TextDrawable textDrawable = drawables[i - currentPosition + 1];
157. int save = canvas.save();
158. calculateIndicatorRect(indicatorRect);
159. canvas.clipRect(indicatorRect);
160. textDrawable.setText(category_text.getText());
161. textDrawable.setTextSize(0, category_text.getTextSize());
162. textDrawable.setTextColor(getResources().getColor(R.color.category_tab_highlight_text));
163. int left = tab.getLeft() + category_text.getLeft() + (category_text.getWidth() - textDrawable.getIntrinsicWidth()) / 2 + getPaddingLeft();
164. int top = tab.getTop() + category_text.getTop() + (category_text.getHeight() - textDrawable.getIntrinsicHeight()) / 2 + getPaddingTop();
165. textDrawable.setBounds(left, top, textDrawable.getIntrinsicWidth() + left, textDrawable.getIntrinsicHeight() + top);
166. textDrawable.draw(canvas);
167. canvas.restoreToCount(save);
168. }
169. i++;
170. }
171. }
172. // 绘制左右边界阴影效果
173. i = canvas.save();
174. int top = getScrollX();
175. int height = getHeight();
176. int width = getWidth();
177. canvas.translate((float) top, 0.0f);
178. if (left_edge == null || top <= 0) {
179. if (right_edge == null || top >= getScrollRange()) {
180. canvas.restoreToCount(i);
181. }
182. right_edge.setBounds(width - right_edge.getIntrinsicWidth(), 0, width, height);
183. right_edge.draw(canvas);
184. canvas.restoreToCount(i);
185. }
186. left_edge.setBounds(0, 0, left_edge.getIntrinsicWidth(), height);
187. left_edge.draw(canvas);
188. if (right_edge == null || top >= getScrollRange()) {
189. canvas.restoreToCount(i);
190. }
191. right_edge.setBounds(width - right_edge.getIntrinsicWidth(), 0, width, height);
192. right_edge.draw(canvas);
193. canvas.restoreToCount(i);
194. }
195. private class PageListener implements OnPageChangeListener {
196. @Override
197. public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
198. currentPosition = position;
199. currentPositionOffset = positionOffset;
200. scrollToChild(position, (int) (positionOffset * tabsContainer.getChildAt(position).getWidth()));
201. invalidate();
202. }
203. @Override
204. public void onPageScrollStateChanged(int state) {
205. if (state == ViewPager.SCROLL_STATE_IDLE) {
206. if(pager.getCurrentItem() == 0) {
207. // 滑动到最左边
208. scrollTo(0, 0);
209. } else if (pager.getCurrentItem() == tabCount - 1) {
210. // 滑动到最右边
211. scrollTo(getScrollRange(), 0);
212. } else {
213. scrollToChild(pager.getCurrentItem(), 0);
214. }
215. }
216. }
217. @Override
218. public void onPageSelected(int position) {
219. }
220. }
221. }

完整项目源代码CSDN资源下载 TouTiaoTabDemo