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

时间：2022-01-27 22:03:09

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

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

先看一下实现的效果对比：
Android之仿今日头条顶部导航栏效果
顶部导航栏区域和ViewPager区域View层次结构
Android之仿今日头条顶部导航栏效果

主界面布局

  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

相关文章