自定义导航栏HorizontalScrollView+RadioGroup实现

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>