android常用的导航栏 viewpagerindicator简单使用

距离上一篇文章已过去好久了，期间一直想写，但看到csdn上各种大牛的杰作，实在无法直视自己写的，但本着厚脸皮与坚持的原则，继续写！！

这篇博客将记录一下android常用的导航栏，相信大家都不陌生，好看的导航栏能带给用户良好的体现，用到的是一个优秀的第三方框架，是viewpagerindicator。

先看下效果吧，这是刚进入应用时界面

这里呢，我介绍三种导航栏样式，分别是：1.圆点型  2.文字型 3仿微信型

以上是效果图，现在不会制作gif图，凑合着看吧。。。

一.CirclePageIndicator的简单介绍

以下CirclePageIndicatorActivity的代码

public class CirclePageIndicatorActivity extends FragmentActivity {

	private ViewPager pager;
	private CirclePageIndicator indicator;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.activity_main);
		pager = (ViewPager) this.findViewById(R.id.ivHomeTop);
		pager.setAdapter(new MyAdapter(getSupportFragmentManager()));
		indicator = (CirclePageIndicator) this.findViewById(R.id.dotGuide);
		indicator.setViewPager(pager);
	}

	
	class MyAdapter extends FragmentPagerAdapter{

		public MyAdapter(FragmentManager fm) {
			super(fm);
			// TODO Auto-generated constructor stub
		}

		@Override
		public Fragment getItem(int arg0) {
			ShowFragment fragment = new ShowFragment();
			Bundle bundle = new Bundle();
			bundle.putString("index", (arg0+1)+"");
			fragment.setArguments(bundle);
			return fragment;
		}

		@Override
		public int getCount() {
			return 3;
		}
		
	}

}

其中ShowFragment，就是显示每一页，代码很多就不贴代码了。

其中布局代码是

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" xmlns:app="http://schemas.android.com/apk/res/com.example.csdn_dicator">

    <android.support.v4.view.ViewPager
        android:id="@+id/ivHomeTop"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY" >
    </android.support.v4.view.ViewPager>

    <com.viewpagerindicator.CirclePageIndicator
        android:id="@+id/dotGuide"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:fillColor="#FFBB00"
        app:pageColor="#003C9D"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="8dp" />

</RelativeLayout>

这里主要引用v4包中的viewpager和第三方框架的CirclePageIndicator,代码很简单，不作解释了。

二.类似与微信的导航栏

这是Activity中的代码

public class WeChatActivity extends FragmentActivity {

	private View title_bar_cursor,cursor_layout;
	private Context context;
	private ViewPager pager;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.activity_we_chat);
		//得到屏幕的宽度
		DisplayMetrics dm = new DisplayMetrics();
		getWindowManager().getDefaultDisplay().getMetrics(dm); 
		context = this;
		title_bar_cursor = this.findViewById(R.id.title_bar_cursor);
		cursor_layout = this.findViewById(R.id.cursor_layout);
		pager = (ViewPager) this.findViewById(R.id.view_pager);
		pager.setAdapter(new MyAdapter(getSupportFragmentManager()));
		//设置导航栏的宽度是整个屏幕的1/3
		ViewGroup.LayoutParams params = title_bar_cursor.getLayoutParams();
		params.width = dm.widthPixels / 3;
		//viewPager的事件监听
		pager.setOnPageChangeListener(new OnPageChangeListener() {
			
			@Override
			public void onPageSelected(int arg0) {
				// TODO Auto-generated method stub
				
			}
			
			@Override
			public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
				final float cursorWidth = title_bar_cursor.getWidth();
				final float offset = cursorWidth * (position + positionOffset);
				cursor_layout.scrollTo((int)-offset, 0);
				
			}
			
			@Override
			public void onPageScrollStateChanged(int arg0) {
				// TODO Auto-generated method stub
				
			}
		});
	}

	/**
	 * Viewpager适配器
	 * @author c_fei
	 *
	 */
	class MyAdapter extends FragmentPagerAdapter{

		public MyAdapter(FragmentManager fm) {
			super(fm);
			// TODO Auto-generated constructor stub
		}

		@Override
		public Fragment getItem(int arg0) {
			ShowFragment fragment = new ShowFragment();
			Bundle args = new Bundle();
			args.putString("index", ""+(arg0+1));
			fragment.setArguments(args);
			return fragment;
		}

		@Override
		public int getCount() {
			// TODO Auto-generated method stub
			return 3;
		}
		
	}

}

其中布局文件中的代码是

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

   <LinearLayout 
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:orientation="horizontal"
       >
       <TextView 
           android:layout_width="0dp"
           android:layout_weight="1"
           android:gravity="center_horizontal"
           android:layout_height="wrap_content"
           android:text="聊天"
           />
       
        <TextView 
           android:layout_width="0dp"
           android:layout_weight="1"
           android:gravity="center_horizontal"
           android:layout_height="wrap_content"
           android:text="动态"
           />
         <TextView 
           android:layout_width="0dp"
           android:layout_weight="1"
           android:gravity="center_horizontal"
           android:layout_height="wrap_content"
           android:text="空间"
           />
   </LinearLayout>

   <LinearLayout 
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:id="@+id/cursor_layout"
       android:orientation="horizontal"
       >
       
        <View
         android:id="@+id/title_bar_cursor"
         android:layout_width="200dp"
         android:layout_height="2dp"
         android:background="#797697" />
       
   </LinearLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
   
   
   
   
</LinearLayout>

使用这种方法做导航栏好处是不需要引用第三方jar包，但是扩展性差点，还有一个好处就是能自定义布局，能按照我们的意愿完成想要的复杂布局。

三.TabPageIndicatorActivity的简单使用

说是简单使用，其实一点都不简单，这里面最复杂的就是修改style样式了，老样子Activity的代码是

public class TabPageIndicatorActivity extends FragmentActivity {

	private Context context;
	private ViewPager pager;
	private TabPageIndicator indicator;
	private String[] title = new String[]{"语文","数学","英语","物理","化学","生物","地理","历史","政治","体育"};
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.activity_tab_page_indicator);
		context = this;
		pager = (ViewPager) this.findViewById(R.id.ivHomeTop);
		pager.setAdapter(new MyAdapter(getSupportFragmentManager()));
		indicator = (TabPageIndicator) this.findViewById(R.id.tabGuide);
		indicator.setViewPager(pager);
		//这里做选中fragment所做的事
		indicator.setOnPageChangeListener(new OnPageChangeListener() {
				
				@Override
				public void onPageSelected(int arg0) {
				}
				
				@Override
				public void onPageScrolled(int arg0, float arg1, int arg2) {
					
				}
				
				@Override
				public void onPageScrollStateChanged(int arg0) {
					
				}
			});
	}

	/**
	 * viewpager适配器
	 * @author c_fei
	 *
	 */
	class MyAdapter extends FragmentPagerAdapter{

		public MyAdapter(FragmentManager fm) {
			super(fm);
			// TODO Auto-generated constructor stub
		}

		@Override
		public Fragment getItem(int arg0) {
		   ShowFragment fragment = new ShowFragment();
		   Bundle args = new Bundle();
		   args.putString("index", title[arg0]+"");
		   fragment.setArguments(args);
			
			return fragment;
		}

		@Override
		public int getCount() {
			// TODO Auto-generated method stub
			return title.length;
		}

		@Override
		public CharSequence getPageTitle(int position) {
			// TODO Auto-generated method stub
			return title[position];
		}
		
	}
	
}

布局是

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res/com.example.csdn_dicator"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <com.viewpagerindicator.TabPageIndicator
        android:id="@+id/tabGuide"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/base_action_bar_bg" />

    <android.support.v4.view.ViewPager
        android:id="@+id/ivHomeTop"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:scaleType="fitXY" >
    </android.support.v4.view.ViewPager>

</LinearLayout>

这个类似于圆点的那个写法，但是最只要的修改style样式了，我们在res/values下面添加如下代码

<style name="StyledIndicators" parent="@android:style/Theme.Light">
        <item name="vpiTabPageIndicatorStyle">@style/CustomTabPageIndicator</item>
    </style>

    <style name="CustomTabPageIndicator" parent="Widget.TabPageIndicator">
        <item name="android:background">@drawable/tab_indicator</item>
        <item name="android:textAppearance">@style/CustomTabPageIndicator.Text</item>
        <item name="android:textSize">14sp</item>
       <!--  <item name="android:dividerPadding">8dp</item>
        <item name="android:showDividers">middle</item> --> 
        <item name="android:paddingLeft">10dp</item>
        <item name="android:paddingRight">10dp</item>
        <item name="android:fadingEdge">horizontal</item>
        <item name="android:fadingEdgeLength">8dp</item>
    </style>

    <style name="CustomTabPageIndicator.Text" parent="android:TextAppearance.Medium">
        <item name="android:typeface">monospace</item>
        <item name="android:textColor">@drawable/selector_tabtext</item>
    </style>

然后在AndroidManifest.xml中引用

我在自己写的时候出现了一个小插曲，就是布局文件最外层如果是RelativeLayout的时候，最上面的导航栏则不能点击，换成了LinearLayout又能点击了，大家不妨试一下，不知道是不是我写的问题。

源码请点击这里