android顶部滑动导航

主界面 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#F0EFF5" > <RelativeLayout android:id="@+id/sayit_rl_tab" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginTop="5dip" android:background="#F2F2F2" > <HorizontalScrollView android:id="@+id/sayit_ScrollView" android:layout_width="match_parent" android:layout_height="40dip" android:fadingEdge="none" android:scrollbars="none" > <RelativeLayout android:id="@+id/sayit_layout" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="top" android:background="#5AB0EB" > <RadioGroup android:id="@+id/sayit_radioGroup" android:layout_width="fill_parent" android:layout_height="38dip" android:layout_alignParentTop="true" android:background="#F2F2F2" android:orientation="horizontal" > </RadioGroup> <ImageView android:id="@+id/sayit_lines" android:layout_width="1dip" android:layout_height="5dip" android:layout_alignParentBottom="true" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" android:background="#5AB2EF" android:contentDescription="@string/nav_desc" android:scaleType="matrix" /> </RelativeLayout> </HorizontalScrollView> </RelativeLayout> <android.support.v4.view.ViewPager android:id="@+id/sayit_viewPager" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_below="@id/sayit_rl_tab" android:layout_gravity="center" android:background="#ffffff" android:flipInterval="30" android:persistentDrawingCache="animation" /> </RelativeLayout> Fragment布局 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#F0EFF5" > <RelativeLayout android:id="@+id/sayit_rl_tab" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginTop="5dip" android:background="#F2F2F2" > <HorizontalScrollView android:id="@+id/sayit_ScrollView" android:layout_width="match_parent" android:layout_height="40dip" android:fadingEdge="none" android:scrollbars="none" > <RelativeLayout android:id="@+id/sayit_layout" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="top" android:background="#5AB0EB" > <RadioGroup android:id="@+id/sayit_radioGroup" android:layout_width="fill_parent" android:layout_height="38dip" android:layout_alignParentTop="true" android:background="#F2F2F2" android:orientation="horizontal" > </RadioGroup> <ImageView android:id="@+id/sayit_lines" android:layout_width="1dip" android:layout_height="5dip" android:layout_alignParentBottom="true" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" android:background="#5AB2EF" android:contentDescription="@string/nav_desc" android:scaleType="matrix" /> </RelativeLayout> </HorizontalScrollView> </RelativeLayout> <android.support.v4.view.ViewPager android:id="@+id/sayit_viewPager" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_below="@id/sayit_rl_tab" android:layout_gravity="center" android:background="#ffffff" android:flipInterval="30" android:persistentDrawingCache="animation" /> </RelativeLayout> 主代码 package com.example.text; 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.support.v4.view.ViewPager.OnPageChangeListener; import android.support.v7.app.ActionBarActivity; import android.os.Bundle; import android.util.DisplayMetrics; import android.view.LayoutInflater; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.view.View.OnClickListener; import android.view.ViewGroup.LayoutParams; import android.view.animation.LinearInterpolator; import android.view.animation.TranslateAnimation; import android.widget.HorizontalScrollView; import android.widget.ImageView; import android.widget.RadioButton; import android.widget.RadioGroup; import android.widget.TextView; import android.widget.RadioGroup.OnCheckedChangeListener; public class MainActivity extends FragmentActivity { private HorizontalScrollView scrollview; private RadioGroup radioGroup; private ImageView sayit_lines; private ViewPager viewPager; private LayoutInflater inflater; private TabFragmentPagerAdapter adapter; private int tageDistance = 0; private int initWidth; public static String[] tabTitle = {"全部", "南京", "上海", "南方", "金马甲", "福利特","江苏" }; //标题 public static final String ARGUMENTS_NAME = "arg"; protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); scrollview = (HorizontalScrollView) findViewById(R.id.sayit_ScrollView); radioGroup = (RadioGroup) findViewById(R.id.sayit_radioGroup); sayit_lines = (ImageView) findViewById(R.id.sayit_lines); viewPager = (ViewPager) findViewById(R.id.sayit_viewPager); initView(); setListener(); } private void setListener(){ viewPager.setOnPageChangeListener(new OnPageChangeListener() { public void onPageSelected(int position) { // TODO Auto-generated method stub if (radioGroup!=null && radioGroup.getChildCount()>position) { ((RadioButton)radioGroup.getChildAt(position)).performClick(); } } public void onPageScrolled(int arg0, float arg1, int arg2) { // TODO Auto-generated method stub } public void onPageScrollStateChanged(int arg0) { // TODO Authio-generated method stub } }); radioGroup.setOnCheckedChangeListener(new OnCheckedChangeListener() { @Override public void onCheckedChanged(RadioGroup group, int checkedId) { // TODO Auto-generated method stub if(radioGroup.getChildAt(checkedId)!=null){ //创建动画对象 TranslateAnimation animation = new TranslateAnimation( //起始坐标 tageDistance , //获取当前RadioButton最左边的坐标值 为最终坐标 ((RadioButton) radioGroup.getChildAt(checkedId)).getLeft(), 0f, 0f); //设置此动画的加速度曲线 变化速率恒定 animation.setInterpolator(new LinearInterpolator()); //动画事件 animation.setDuration(400); animation.setFillAfter(true); //执行位移动画 sayit_lines.startAnimation(animation); viewPager.setCurrentItem(checkedId); //ViewPager 跟随一起 切换 //记录当前 下标的距最左侧的 距离 tageDistance = ((RadioButton) radioGroup.getChildAt(checkedId)).getLeft(); //设置当标题改变时 HorizontalScrollView 移动的距离 //如果标题是第3个及大于第3个时 获取当前标题左端的x坐标值 否则 为 0 int x1=checkedId > 1 ? ((RadioButton) radioGroup.getChildAt(checkedId)).getLeft() : 0; //获取第2个标题左端的x坐标值 int x2=((RadioButton) radioGroup.getChildAt(1)).getLeft(); //计算x轴方向移动的距离 int x=x1-x2; scrollview.smoothScrollTo(x,0); } } }); } private void initView(){ DisplayMetrics dm = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics(dm); initWidth = dm.widthPixels / 3; LayoutParams params = sayit_lines.getLayoutParams(); params.width = (initWidth-20);// 初始化滑动下标的宽度 sayit_lines.setLayoutParams(params); //加载滑动下标的宽度 inflater = (LayoutInflater) this.getSystemService(LAYOUT_INFLATER_SERVICE); initNavigationHSV(); adapter = new TabFragmentPagerAdapter(getSupportFragmentManager()); viewPager.setAdapter(adapter); } private void initNavigationHSV(){ radioGroup.removeAllViews(); for(int i=0;i<tabTitle.length;i++){ //获取RadioButton RadioButton rb = (RadioButton) inflater.inflate(R.layout.fragment_item, null); rb.setId(i); rb.setText(tabTitle[i]); //设置RadioButton的长和宽 rb.setLayoutParams(new LayoutParams(initWidth,LayoutParams.MATCH_PARENT)); //将RadioButton 添加到RadioGroup中 radioGroup.addView(rb); } } public static class TabFragmentPagerAdapter extends FragmentPagerAdapter{ public TabFragmentPagerAdapter(FragmentManager fm) { super(fm); // TODO Auto-generated constructor stub } @Override public Fragment getItem(int position) { // TODO Auto-generated method stub Fragment fragment = new ItemFragment(); Bundle bundle = new Bundle(); bundle.putString(ARGUMENTS_NAME, tabTitle[position]); fragment.setArguments(bundle); return fragment; } @Override public int getCount() { // TODO Auto-generated method stub return tabTitle.length; } } } 有需要的可以下载