1.主界面
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;
import android.util.DisplayMetrics;
import android.view.LayoutInflater;
import android.view.ViewGroup;
import android.view.animation.LinearInterpolator;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.RelativeLayout;
public class MainActivity extends FragmentActivity {
public static final String ARG = "arg";
private RelativeLayout relativeLayout;
private MyHorizontalScrollView horizontalScrollView;
private RadioGroup radioGroup;
private ImageView line;
private ImageView imageView_left;
private ImageView imageView_right;
private ViewPager mViewPager;
private int indicator_Width;
public static String[] titles = {"选项1", "选项2", "选项3", "选项4", "选项5", "选项6"}; //标题
private LayoutInflater mInflater;
private TabFragmentPagerAdapter mAdapter;
private int currentIndicatorLeft = 0;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main_daohang);
findViewById();
initView();
setListener();
}
private void findViewById() {
//包裹左右,RadioGroup,下划线的大布局
relativeLayout = (RelativeLayout) findViewById(R.id.rl_nav);
horizontalScrollView = (MyHorizontalScrollView) findViewById(R.id.mHsv);
radioGroup = (RadioGroup) findViewById(R.id.radio_group);
line = (ImageView) findViewById(R.id.line);
imageView_left = (ImageView) findViewById(R.id.iv_left);
imageView_right = (ImageView) findViewById(R.id.iv_right);
mViewPager = (ViewPager) findViewById(R.id.view_Pager);
}
private void initView() {
DisplayMetrics dm = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);
indicator_Width = dm.widthPixels / 4;//屏幕1/4的宽度
ViewGroup.LayoutParams line_Params = line.getLayoutParams();
line_Params.width = indicator_Width;// 初始化标题下滑线的宽
line.setLayoutParams(line_Params);
horizontalScrollView.setSomeParam(relativeLayout, imageView_left, imageView_right, this);//初始化horizontalScrollView
//获取布局填充器
mInflater = (LayoutInflater) this.getSystemService(LAYOUT_INFLATER_SERVICE);
//另一种方式获取
//LayoutInflater mInflater = LayoutInflater.from(this);
initRadioGroup();
mAdapter = new TabFragmentPagerAdapter(getSupportFragmentManager());
mViewPager.setAdapter(mAdapter);
}
private void setListener() {
//ViewPager联动RadioGroup
mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageSelected(int position) {
if (radioGroup != null && radioGroup.getChildCount() > position) {
((RadioButton) radioGroup.getChildAt(position)).performClick();
}
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
});
//RadioGroup联动ViewPager
radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
if (radioGroup.getChildAt(checkedId) != null) {
TranslateAnimation animation = new TranslateAnimation(currentIndicatorLeft,
((RadioButton) radioGroup.getChildAt(checkedId)).getLeft(), 0f, 0f);
animation.setInterpolator(new LinearInterpolator());
animation.setDuration(100);
animation.setFillAfter(true);
//执行位移动画
line.startAnimation(animation);
mViewPager.setCurrentItem(checkedId); //ViewPager 跟随一起 切换
//记录当前 下标的距最左侧的 距离
currentIndicatorLeft = ((RadioButton) radioGroup.getChildAt(checkedId)).getLeft();
horizontalScrollView.smoothScrollTo(
(checkedId > 1 ? ((RadioButton) radioGroup.getChildAt(checkedId)).getLeft() : 0) - ((RadioButton) radioGroup.getChildAt(2)).getLeft(), 0);
}
}
});
}
private void initRadioGroup() {
radioGroup.removeAllViews();
for (int i = 0; i < titles.length; i++) {
RadioButton radioButton = (RadioButton) mInflater.inflate(R.layout.radiogroup_item, null);
radioButton.setId(i);
radioButton.setText(titles[i]);
radioButton.setLayoutParams(new RadioGroup.LayoutParams(indicator_Width,
RadioGroup.LayoutParams.MATCH_PARENT));//显示导航栏标题的宽度为屏幕得1/4,高填充RadioGroup
radioGroup.addView(radioButton);
}
}
// @Override
// public boolean onCreateOptionsMenu(Menu menu) {
// getMenuInflater().inflate(R.menu.main, menu);
// return true;
// }
public static class TabFragmentPagerAdapter extends FragmentPagerAdapter {
public TabFragmentPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
Fragment fragment = null;
switch (position) {
case 0:
fragment = new Fragment1();
break;
default:
fragment = new Fragment2();
Bundle bundle = new Bundle();
bundle.putString(ARG, titles[position]);
fragment.setArguments(bundle);
break;
}
return fragment;
}
@Override
public int getCount() {
return titles.length;
}
}
}
2 自定义HorizontalScrollView
import android.app.Activity;
import android.content.Context;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.View;
import android.widget.HorizontalScrollView;
import android.widget.ImageView;
public class MyHorizontalScrollView extends HorizontalScrollView {
private View view;
private ImageView leftImage;
private ImageView rightImage;
private int windowWitdh = 0;
private Activity mContext;
public void setSomeParam(View view, ImageView leftImage,
ImageView rightImage, Activity context) {
this.mContext = context;
this.view = view;
this.leftImage = leftImage;
this.rightImage = rightImage;
DisplayMetrics dm = new DisplayMetrics();
//获取手机屏幕的宽度
this.mContext.getWindowManager().getDefaultDisplay().getMetrics(dm);
windowWitdh = dm.widthPixels;
}
public MyHorizontalScrollView(Context context) {
super(context);
// TODO Auto-generated constructor stub
}
public MyHorizontalScrollView(Context context, AttributeSet attrs) {
super(context, attrs);
// TODO Auto-generated constructor stub
}
// 显示和隐藏左右两边的箭头
public void showAndHideArrow() {
if (!mContext.isFinishing() && view != null) {
this.measure(0, 0);
if (windowWitdh >= this.getMeasuredWidth()) {
leftImage.setVisibility(View.GONE);
rightImage.setVisibility(View.GONE);
} else {
if (this.getLeft() == 0) {
leftImage.setVisibility(View.GONE);
rightImage.setVisibility(View.VISIBLE);
} else if (this.getRight() == this.getMeasuredWidth()
- windowWitdh) {
leftImage.setVisibility(View.VISIBLE);
rightImage.setVisibility(View.GONE);
} else {
leftImage.setVisibility(View.VISIBLE);
rightImage.setVisibility(View.VISIBLE);
}
}
}
}
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
super.onScrollChanged(l, t, oldl, oldt);
if (!mContext.isFinishing() && view != null && rightImage != null
&& leftImage != null) {
if (view.getWidth() <= windowWitdh) {
leftImage.setVisibility(View.GONE);
rightImage.setVisibility(View.GONE);
} else {
if (l == 0) {
leftImage.setVisibility(View.GONE);
rightImage.setVisibility(View.VISIBLE);
} else if (view.getWidth() - l == windowWitdh) {
leftImage.setVisibility(View.VISIBLE);
rightImage.setVisibility(View.GONE);
} else {
leftImage.setVisibility(View.VISIBLE);
rightImage.setVisibility(View.VISIBLE);
}
}
}
}
}
3 创建Fragment
Fragment1
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class Fragment1 extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.fragment_1, container, false);
return rootView;
}
@Override
public void onActivityCreated(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onActivityCreated(savedInstanceState);
}
}
Fragment2
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
public class Fragment2 extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup viewGroup,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_2, viewGroup, false);
TextView textView = (TextView) view.findViewById(R.id.textview);
Bundle bundle = getArguments();
textView.setText(bundle.getString(MainActivity.ARG, ""));
return view;
}
@Override
public void onActivityCreated(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onActivityCreated(savedInstanceState);
}
}
布局文件
activity_main_daohang.xml
<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"
tools:context=".MainActivity">
<!--<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#f00"
android:text="导航"
android:textColor="#fff"
android:textSize="16sp" />
-->
<RelativeLayout
android:id="@+id/rl_tab"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#F2F2F2">
<com.example.gaoshou.daohangdemo.MyHorizontalScrollView
android:id="@+id/mHsv"
android:layout_width="fill_parent"
android:layout_height="46dip"
android:fadingEdge="none"
android:scrollbars="none">
<RelativeLayout
android:id="@+id/rl_nav"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="top">
<RadioGroup
android:id="@+id/radio_group"
android:layout_width="fill_parent"
android:layout_height="45dip"
android:layout_alignParentTop="true"
android:background="#F2F2F2"
android:orientation="horizontal"></RadioGroup>
<!--导航栏下划线-->
<ImageView
android:id="@+id/line"
android:layout_width="1dip"
android:layout_height="3dip"
android:layout_alignParentBottom="true"
android:background="#f00"
android:contentDescription="下划线"
android:scaleType="matrix" />
</RelativeLayout>
</com.example.gaoshou.daohangdemo.MyHorizontalScrollView>
<ImageView
android:id="@+id/iv_left"
android:layout_width="15dp"
android:layout_height="36dp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:contentDescription="@string/nav_desc"
android:paddingBottom="1dip"
android:src="@drawable/left"
android:visibility="gone"></ImageView>
<ImageView
android:id="@+id/iv_right"
android:layout_width="15dp"
android:layout_height="36dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:contentDescription="@string/nav_desc"
android:paddingBottom="1dip"
android:src="@drawable/right"
android:visibility="visible"></ImageView>
</RelativeLayout>
<android.support.v4.view.ViewPager
android:id="@+id/view_Pager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_below="@id/rl_tab"
android:layout_gravity="center"
android:background="#ffffff"
android:flipInterval="30"
android:persistentDrawingCache="animation" />
</RelativeLayout>
radiogroup_item.xml
<?xml version="1.0" encoding="utf-8"?>
<RadioButton xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="0dip"
android:layout_height="fill_parent"
android:background="#F2F2F2"
android:button="@null"
android:checked="true"
android:gravity="center"
android:textSize="15sp" />
fragment_1.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_gravity="center"
android:layout_marginTop="30dp"
android:text="选项1"
android:textSize="20sp" />
</LinearLayout>
fragment_2.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="@+id/textview"
android:layout_marginTop="30dp"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_gravity="center"
android:textSize="20sp"
/>
</LinearLayout>
strings.xml
<resources>
<string name="app_name">导航栏</string>
<string name="nav_desc" />
</resources>