Android之导航栏效果

导航菜单是一组标签的集合，在新闻客户端中，每个标签标示一个新闻类别，对应下面ViewPager控件的一个分页面。当用户在ViewPager区域滑动页面时，对应的导航菜单标签也会相应的被选中，红框背景中的标签文字变为红色（未选中为黑色）。当用户直接在导航菜单选中某个标签时，ViewPager会自动的切换到对应的分页面。在本文中导航菜单作为一个单独的UI控件实现，类名为PagerSlidingTabStrip，继承自HorizontalScrollView，这样就可以很容易的实现导航菜单的左右滑动效果以及与下面ViewPager控件的联动。 

1.效果图

2.布局代码

main.xml<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<com.astuetz.PagerSlidingTabStrip
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="48dip"
android:background="#ffffff" />
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/tabs"
tools:context=".MainActivity" />
</RelativeLayout>

Mainactivity代码编写

/*
* Copyright (C) 2016 Andreas Stuetz <andreas.stuetz@gmail.com>
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

package com.icss.viewpagerdemos;

import java.util.ArrayList;
import java.util.List;

import android.graphics.Color;
import android.graphics.drawable.ColorDrawable;
import android.graphics.drawable.Drawable;
import android.graphics.drawable.LayerDrawable;
import android.graphics.drawable.TransitionDrawable;
import android.os.Build;
import android.os.Bundle;
import android.os.Handler;
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;
import android.util.TypedValue;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.Window;

import com.astuetz.PagerSlidingTabStrip;

public class MainActivity extends FragmentActivity {

private final Handler handler = new Handler();

private PagerSlidingTabStrip tabs;
private ViewPager pager;
private MyPagerAdapter adapter;
private Drawable oldBackground = null;
private int currentColor = 0xFF666666;
List<Fragment> list=new ArrayList<Fragment>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.main);
fragment();
tabs = (PagerSlidingTabStrip) findViewById(R.id.tabs);
pager = (ViewPager) findViewById(R.id.pager);
adapter = new MyPagerAdapter(getSupportFragmentManager());
pager.setAdapter(adapter);
final int pageMargin = (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP, 4, getResources()
.getDisplayMetrics());
pager.setPageMargin(pageMargin);
tabs.setViewPager(pager);
}
public class MyPagerAdapter extends FragmentPagerAdapter {

private final String[] TITLES = { "导航", "视频", "图片", "动漫", "娱乐", "新闻",
"美女", "头条"};
public MyPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public CharSequence getPageTitle(int position) {
return TITLES[position];
}
@Override
public int getCount() {
return TITLES.length;
}

@Override
public Fragment getItem(int position) {
return list.get(position);
}

}
//导航栏的布局
public void fragment(){
list.add(new fragment());
list.add(new fragment_two());
list.add(new fragment_trhee());
list.add(new fragment_four());
list.add(new fragment_five());
list.add(new fragment_six());
list.add(new fragment_seven());
list.add(new fragment_eight());
}
}

自定义的PagerSlidingTabStrip 继承HorizontalScrollView实现导航菜单的左右滑动效果以及与下面ViewPager控件的联动。 

还有attrs.xml创建在values目录下

xml编写<?xml version="1.0" encoding="utf-8"?>
<resources>

<declare-styleable name="PagerSlidingTabStrip">
<attr name="pstsIndicatorColor" format="color" />
<attr name="pstsUnderlineColor" format="color" />
<attr name="pstsDividerColor" format="color" />
<attr name="pstsIndicatorHeight" format="dimension" />
<attr name="pstsUnderlineHeight" format="dimension" />
<attr name="pstsDividerPadding" format="dimension" />
<attr name="pstsTabPaddingLeftRight" format="dimension" />
<attr name="pstsScrollOffset" format="dimension" />
<attr name="pstsTabBackground" format="reference" />
<attr name="pstsShouldExpand" format="boolean" />
<attr name="pstsTextAllCaps" format="boolean" />
</declare-styleable>

</resources>