안 드 로 이 드 는 오늘 의 톱 탐색 표시 줄 효 과 를 모방 한 인 스 턴 스 코드 입 니 다.

시간 이 지 날수 록 현재 의 소프트웨어 가 요구 하 는 내용 이 점점 많아 지기 때문에 작은 화면 에 더 많은 내용 을 표시 할 수 있어 야 한다.먼저 우 리 는 아래쪽 메뉴 표시 줄 을 생각 할 것 이다.그러나 가끔 은 오늘 처럼 톱뉴스 클 라 이언 트 가 표시 해 야 할 내용 이 너무 많 고 메 인 화면 에 모두 표시 하려 고 하기 때문에 상단 네 비게 이 션 표시 줄 을 추가 했다.
오늘 의 톱 네 비게 이 션 표시 줄 의 주요 부분 은 네 비게 이 션 메뉴 입 니 다.네 비게 이 션 메뉴 는 탭 의 집합 입 니 다.뉴스 클 라 이언 트 에서 각 탭 은 뉴스 유형 을 표시 하고 아래 ViewPager 컨트롤 의 페이지 에 대응 합 니 다.사용자 가 ViewPager 영역 에서 페이지 를 미 끄 러 뜨 릴 때 해당 하 는 네 비게 이 션 메뉴 탭 도 선택 되 어 있 습 니 다.선택 한 탭 은 직사각형 빨간색 상 자 를 통 해 하 이 라이트 로 표 시 됩 니 다.빨간색 상자 배경 에 있 는 탭 문 자 는 흰색 으로 변 하고 빨간색 상자 밖의 영역 탭 문 자 는 회색 으로 변 합 니 다.사용자 가 내 비게 이 션 메뉴 에서 탭 을 직접 선택 하면 ViewPager 는 자동 으로 해당 페이지 로 전 환 됩 니 다.본 논문 에서 네 비게 이 션 메뉴 는 단독 UI 컨트롤 로 이 루어 집 니 다.Catagory TabStrip 이 라 고 하 는데 Horizontal ScrollView 에서 계승 하면 네 비게 이 션 메뉴 의 좌우 미끄럼 효과 와 아래 ViewPager 컨트롤 과 의 연동 을 쉽게 실현 할 수 있 습 니 다.
먼저 실현 되 는 효과 대 비 를 살 펴 보 자.

상단 탐색 표시 줄 영역 과 ViewPager 영역 View 계층 구조

주 인터페이스 레이아웃

<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> 

Activity 에서 Catagory TabStrip 컨트롤 과 ViewPager 컨트롤 을 결합 하여 사용 합 니 다.
MainActivity.java

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); 
 } 
 } 
} 

Catagory TabStrip 컨트롤 구현 코드
CategoryTabStrip.java

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) { 
 } 
 } 
} 

전체 프로젝트 소스 코드 의 자원 다운로드TouTiaoTabDemo.
이상 은 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 참고 학습 가치 가 있 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.