Android仿今日头条顶部导航栏效果的实例代码

<RelativeLayout android:id="@+id/main_layout"  android:background="@color/activity_bg_color"  android:layout_width="fill_parent"  android:layout_height="fill_parent"  xmlns:android="http://schemas.android.com/apk/res/android">  <RelativeLayout android:id="@+id/title_bar" style="@style/main_title_bar_style">  <FrameLayout android:id="@+id/top_head_container"  android:paddingLeft="10.0dip"  android:paddingRight="10.0dip"  android:layout_width="wrap_content"  android:layout_height="fill_parent">  <ImageView android:layout_gravity="center_vertical"  android:id="@+id/top_head"  android:contentDescription="@string/app_name"  android:background="@drawable/bg_head"  android:src="@drawable/default_round_head"  android:padding="2.0dip"  android:layout_width="@dimen/head_size"  android:layout_height="@dimen/head_size"  android:scaleType="fitXY" />  </FrameLayout>  <ImageView android:gravity="center"  android:id="@+id/top_more"  android:contentDescription="@string/app_name"  android:layout_width="wrap_content"  android:layout_height="fill_parent"  android:layout_marginRight="12.0dip"  android:src="@drawable/right_drawer"  android:scaleType="centerInside"  android:layout_alignParentRight="true"  android:layout_centerVertical="true" />  <RelativeLayout android:id="@+id/title_click_layout"  android:paddingLeft="13.0dip"  android:layout_width="wrap_content"  android:layout_height="fill_parent"  android:layout_centerInParent="true">  <FrameLayout android:id="@+id/title_parent"  android:layout_width="wrap_content"  android:layout_height="wrap_content"  android:layout_centerVertical="true">  <ImageView android:layout_gravity="center"  android:id="@+id/title_recent"  android:contentDescription="@string/app_name"  android:layout_width="wrap_content"  android:layout_height="wrap_content"  android:src="@drawable/title" />  </FrameLayout>  <ImageView android:id="@+id/top_refresh"  android:contentDescription="@string/app_name"  android:padding="3.0dip"  android:layout_width="wrap_content"  android:layout_height="wrap_content"  android:src="@drawable/refreshicon_titlebar"  android:layout_toRightOf="@id/title_parent"  android:layout_centerVertical="true" />  </RelativeLayout>  </RelativeLayout>  <RelativeLayout android:id="@+id/category_layout"  android:background="@drawable/bg_category_bar"  android:layout_width="fill_parent"  android:layout_height="@dimen/top_category_height"  android:layout_below="@id/title_bar" >  <ImageView android:id="@+id/icon_category"  android:layout_width="@dimen/top_category_height"  android:layout_height="@dimen/top_category_height"  android:src="@drawable/ic_category_expand"  android:contentDescription="@string/app_name"  android:scaleType="center"  android:layout_alignParentRight="true"  android:layout_centerVertical="true" />  <LinearLayout android:layout_width="wrap_content"  android:layout_height="@dimen/top_category_height"  android:layout_toLeftOf="@id/icon_category"  android:layout_alignParentLeft="true"  android:layout_centerVertical="true">  <com.rainsong.toutiaotabdemo.CategoryTabStrip  android:id="@+id/category_strip"  android:paddingLeft="6.0dip"  android:paddingRight="6.0dip"  android:clipToPadding="false"  android:layout_width="wrap_content"  android:layout_height="@dimen/top_category_height" />  </LinearLayout>  </RelativeLayout>  <android.support.v4.view.ViewPager android:id="@+id/view_pager"  android:layout_width="fill_parent"  android:layout_height="fill_parent"  android:layout_below="@id/category_layout" /> </RelativeLayout> 

package com.rainsong.toutiaotabdemo; import java.util.ArrayList; import java.util.List; import android.os.Bundle; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentActivity; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; import android.support.v4.view.ViewPager; public class MainActivity extends FragmentActivity {  private CategoryTabStrip tabs;  private ViewPager pager;  private MyPagerAdapter adapter;  @Override  protected void onCreate(Bundle savedInstanceState) {  super.onCreate(savedInstanceState);  setContentView(R.layout.activity_main);  tabs = (CategoryTabStrip) findViewById(R.id.category_strip);  pager = (ViewPager) findViewById(R.id.view_pager);  adapter = new MyPagerAdapter(getSupportFragmentManager());  pager.setAdapter(adapter);  tabs.setViewPager(pager);  }  public class MyPagerAdapter extends FragmentPagerAdapter {  private final List<String> catalogs = new ArrayList<String>();  public MyPagerAdapter(FragmentManager fm) {  super(fm);  catalogs.add(getString(R.string.category_hot));  catalogs.add("/u672c/u5730");  catalogs.add(getString(R.string.category_video));  catalogs.add(getString(R.string.category_society));  catalogs.add(getString(R.string.category_entertainment));  catalogs.add(getString(R.string.category_tech));  catalogs.add(getString(R.string.category_finance));  catalogs.add(getString(R.string.category_military));  catalogs.add(getString(R.string.category_world));  catalogs.add(getString(R.string.category_image_ppmm));  catalogs.add(getString(R.string.category_health));  catalogs.add(getString(R.string.category_government));  }  @Override  public CharSequence getPageTitle(int position) {  return catalogs.get(position);  }  @Override  public int getCount() {  return catalogs.size();  }  @Override  public Fragment getItem(int position) {  return NewsFragment.newInstance(position);  }  } } 

package com.rainsong.toutiaotabdemo; import android.content.Context; import android.graphics.Canvas; import android.graphics.Rect; import android.graphics.drawable.Drawable; import android.support.v4.view.ViewPager; import android.support.v4.view.ViewPager.OnPageChangeListener; import android.util.AttributeSet; import android.util.DisplayMetrics; import android.util.TypedValue; import android.view.Gravity; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.HorizontalScrollView; import android.widget.LinearLayout; import android.widget.TextView; public class CategoryTabStrip extends HorizontalScrollView {  private LayoutInflater mLayoutInflater;  private final PageListener pageListener = new PageListener();  private ViewPager pager;  private LinearLayout tabsContainer;  private int tabCount;  private int currentPosition = 0;  private float currentPositionOffset = 0f;  private Rect indicatorRect;  private LinearLayout.LayoutParams defaultTabLayoutParams;  private int scrollOffset = 10;  private int lastScrollX = 0;  private Drawable indicator;  private TextDrawable[] drawables;  private Drawable left_edge;  private Drawable right_edge;  public CategoryTabStrip(Context context) {  this(context, null);  }  public CategoryTabStrip(Context context, AttributeSet attrs) {  this(context, attrs, 0);  }  public CategoryTabStrip(Context context, AttributeSet attrs, int defStyle) {  super(context, attrs, defStyle);  mLayoutInflater = LayoutInflater.from(context);  drawables = new TextDrawable[3];  int i = 0;  while (i < drawables.length) {  drawables[i] = new TextDrawable(getContext());  i++;  }  indicatorRect = new Rect();  setFillViewport(true);  setWillNotDraw(false);  // 标签容器  tabsContainer = new LinearLayout(context);  tabsContainer.setOrientation(LinearLayout.HORIZONTAL);  tabsContainer.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));  addView(tabsContainer);  DisplayMetrics dm = getResources().getDisplayMetrics();  scrollOffset = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, scrollOffset, dm);  defaultTabLayoutParams = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT);  // 绘制高亮区域作为滑动分页指示器  indicator = getResources().getDrawable(R.drawable.bg_category_indicator);  // 左右边界阴影效果  left_edge = getResources().getDrawable(R.drawable.ic_category_left_edge);  right_edge = getResources().getDrawable(R.drawable.ic_category_right_edge);  }  // 绑定与CategoryTabStrip控件对应的ViewPager控件，实现联动  public void setViewPager(ViewPager pager) {  this.pager = pager;  if (pager.getAdapter() == null) {  throw new IllegalStateException("ViewPager does not have adapter instance.");  }  pager.setOnPageChangeListener(pageListener);  notifyDataSetChanged();  }  // 当附加在ViewPager适配器上的数据发生变化时,应该调用该方法通知CategoryTabStrip刷新数据  public void notifyDataSetChanged() {  tabsContainer.removeAllViews();  tabCount = pager.getAdapter().getCount();  for (int i = 0; i < tabCount; i++) {  addTab(i, pager.getAdapter().getPageTitle(i).toString());  }  }  // 添加一个标签到导航菜单  private void addTab(final int position, String title) {  ViewGroup tab = (ViewGroup)mLayoutInflater.inflate(R.layout.category_tab, this, false);  TextView category_text = (TextView) tab.findViewById(R.id.category_text);  category_text.setText(title);  category_text.setGravity(Gravity.CENTER);  category_text.setSingleLine();  category_text.setFocusable(true);  category_text.setTextColor(getResources().getColor(R.color.category_tab_text));  tab.setOnClickListener(new OnClickListener() {  @Override  public void onClick(View v) {  pager.setCurrentItem(position);  }  });  tabsContainer.addView(tab, position, defaultTabLayoutParams);  }  // 计算滑动过程中矩形高亮区域的上下左右位置  private void calculateIndicatorRect(Rect rect) {  ViewGroup currentTab = (ViewGroup)tabsContainer.getChildAt(currentPosition);  TextView category_text = (TextView) currentTab.findViewById(R.id.category_text);  float left = (float) (currentTab.getLeft() + category_text.getLeft());  float width = ((float) category_text.getWidth()) + left;  if (currentPositionOffset > 0f && currentPosition < tabCount - 1) {  ViewGroup nextTab = (ViewGroup)tabsContainer.getChildAt(currentPosition + 1);  TextView next_category_text = (TextView) nextTab.findViewById(R.id.category_text);  float next_left = (float) (nextTab.getLeft() + next_category_text.getLeft());  left = left * (1.0f - currentPositionOffset) + next_left * currentPositionOffset;  width = width * (1.0f - currentPositionOffset) + currentPositionOffset * (((float) next_category_text.getWidth()) + next_left);  }  rect.set(((int) left) + getPaddingLeft(), getPaddingTop() + currentTab.getTop() + category_text.getTop(),  ((int) width) + getPaddingLeft(), currentTab.getTop() + getPaddingTop() + category_text.getTop() + category_text.getHeight());  }  // 计算滚动范围  private int getScrollRange() {  return getChildCount() > 0 ? Math.max(0, getChildAt(0).getWidth() - getWidth() + getPaddingLeft() + getPaddingRight()) : 0;  }  // CategoryTabStrip与ViewPager联动逻辑  private void scrollToChild(int position, int offset) {  if (tabCount == 0) {  return;  }  calculateIndicatorRect(indicatorRect);  int newScrollX = lastScrollX;  if (indicatorRect.left < getScrollX() + scrollOffset) {  newScrollX = indicatorRect.left - scrollOffset;  } else if (indicatorRect.right > getScrollX() + getWidth() - scrollOffset) {  newScrollX = indicatorRect.right - getWidth() + scrollOffset;  }  if (newScrollX != lastScrollX) {  lastScrollX = newScrollX;  scrollTo(newScrollX, 0);  }  }  // 自定义绘图  @Override  public void draw(Canvas canvas) {  super.draw(canvas);  // 绘制高亮背景矩形红框  calculateIndicatorRect(indicatorRect);  if(indicator != null) {  indicator.setBounds(indicatorRect);  indicator.draw(canvas);  }  // 绘制背景红框内标签文本  int i = 0;  while (i < tabsContainer.getChildCount()) {  if (i < currentPosition - 1 || i > currentPosition + 1) {  i++;  } else {  ViewGroup tab = (ViewGroup)tabsContainer.getChildAt(i);  TextView category_text = (TextView) tab.findViewById(R.id.category_text);  if (category_text != null) {  TextDrawable textDrawable = drawables[i - currentPosition + 1];  int save = canvas.save();  calculateIndicatorRect(indicatorRect);  canvas.clipRect(indicatorRect);  textDrawable.setText(category_text.getText());  textDrawable.setTextSize(0, category_text.getTextSize());  textDrawable.setTextColor(getResources().getColor(R.color.category_tab_highlight_text));  int left = tab.getLeft() + category_text.getLeft() + (category_text.getWidth() - textDrawable.getIntrinsicWidth()) / 2 + getPaddingLeft();  int top = tab.getTop() + category_text.getTop() + (category_text.getHeight() - textDrawable.getIntrinsicHeight()) / 2 + getPaddingTop();  textDrawable.setBounds(left, top, textDrawable.getIntrinsicWidth() + left, textDrawable.getIntrinsicHeight() + top);  textDrawable.draw(canvas);  canvas.restoreToCount(save);  }  i++;  }  }  // 绘制左右边界阴影效果  i = canvas.save();  int top = getScrollX();  int height = getHeight();  int width = getWidth();  canvas.translate((float) top, 0.0f);  if (left_edge == null || top <= 0) {  if (right_edge == null || top >= getScrollRange()) {  canvas.restoreToCount(i);  }  right_edge.setBounds(width - right_edge.getIntrinsicWidth(), 0, width, height);  right_edge.draw(canvas);  canvas.restoreToCount(i);  }  left_edge.setBounds(0, 0, left_edge.getIntrinsicWidth(), height);  left_edge.draw(canvas);  if (right_edge == null || top >= getScrollRange()) {  canvas.restoreToCount(i);  }  right_edge.setBounds(width - right_edge.getIntrinsicWidth(), 0, width, height);  right_edge.draw(canvas);  canvas.restoreToCount(i);  }  private class PageListener implements OnPageChangeListener {  @Override  public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {  currentPosition = position;  currentPositionOffset = positionOffset;  scrollToChild(position, (int) (positionOffset * tabsContainer.getChildAt(position).getWidth()));  invalidate();  }  @Override  public void onPageScrollStateChanged(int state) {  if (state == ViewPager.SCROLL_STATE_IDLE) {  if(pager.getCurrentItem() == 0) {  // 滑动到最左边  scrollTo(0, 0);  } else if (pager.getCurrentItem() == tabCount - 1) {  // 滑动到最右边  scrollTo(getScrollRange(), 0);  } else {  scrollToChild(pager.getCurrentItem(), 0);  }  }  }  @Override  public void onPageSelected(int position) {  }  } }