导航栏联动效果（ HorizontalScrollView+ViewPager）

来源：互联网发布：淘宝盗版软件举报编辑：程序博客网时间：2024/06/05 15:48

依然直接上效果图

这里写图片描述

当导航栏有多个选项，超出了手机屏幕的宽度，我们需要一个导航栏和下面内容联动的效果。上面两个图对比可以看出，当滑动到第四页时，整个导航栏都往左移动了。

导航栏在initGroup()动态生成，注意联动效果的控制，其他都很简单，直接上代码。

IndexActivity类全部代码

/** *  Created by charmingfst on 2016/8/26. *  HorizontalScrollView和ViewPager联动效果 * 上面为HorizontalScrollView,下面为ViewPager管理的fragment */public class IndexActivity extends FragmentActivity{    private ImageView mImageView;    private float mCurrentCheckedRadioLeft;//当前被选中的RadioButton距离左侧的距离    private HorizontalScrollView mHorizontalScrollView;//上面的水平滚动控件    private ViewPager mViewPager;   //下方的可横向拖动的控件    private ArrayList<TabFragment> mTabs;//用来存放下方滚动的layout(layout_1,layout_2,layout_3)    private List<Map<String, String>> titleList = new ArrayList<Map<String,String>>();    private RadioGroup myRadioGroup;    private int _id = 1000;    private LinearLayout layout,titleLayout;    private TextView textView;    private FragmentPagerAdapter mAdapter;    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        requestWindowFeature(Window.FEATURE_NO_TITLE);//去标题        setContentView(R.layout.activity_main);        initDatas();        initGroup();        setListener();        iniVariable();        mViewPager.setCurrentItem(0);    }    private void initDatas() {        Map<String, String> map = new HashMap<String, String>();        map.put("title", "新闻");        titleList.add(map);        map = new HashMap<String, String>();        map.put("title", "网页");        titleList.add(map);        map = new HashMap<String, String>();        map.put("title", "体育");        titleList.add(map);        map = new HashMap<String, String>();        map.put("title", "彩票");        titleList.add(map);        map = new HashMap<String, String>();        map.put("title", "世界杯");        titleList.add(map);        map = new HashMap<String, String>();        map.put("title", "国际");        titleList.add(map);        map = new HashMap<String, String>();        map.put("title", "娱乐");        titleList.add(map);        map = new HashMap<String, String>();        map.put("title", "军事");        titleList.add(map);        map = new HashMap<String, String>();        map.put("title", "更多");        titleList.add(map);    }    private void initGroup(){        titleLayout = (LinearLayout) findViewById(R.id.title_lay);        layout = (LinearLayout) findViewById(R.id.lay);        mImageView = (ImageView)findViewById(R.id.img1);        mHorizontalScrollView = (HorizontalScrollView)findViewById(R.id.horizontalScrollView);        mViewPager = (ViewPager)findViewById(R.id.pager);        myRadioGroup = new RadioGroup(this);        myRadioGroup.setLayoutParams( new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));        myRadioGroup.setOrientation(LinearLayout.HORIZONTAL);        layout.addView(myRadioGroup);        for (int i = 0; i <titleList.size(); i++) {            Map<String, String> map = titleList.get(i);            RadioButton radio = new RadioButton(this);            radio.setBackgroundResource(R.drawable.radiobtn_selector);            radio.setButtonDrawable(android.R.color.transparent);            LinearLayout.LayoutParams l = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.MATCH_PARENT, Gravity.CENTER);            radio.setLayoutParams(l);            radio.setGravity(Gravity.CENTER);            radio.setPadding(20, 15, 20, 15);            //radio.setPadding(left, top, right, bottom)            radio.setId(_id+i);            radio.setText(map.get("title"));            radio.setTextColor(Color.WHITE);            radio.setTag(map);            if (i == 0) {                radio.setChecked(true);                int itemWidth = (int) radio.getPaint().measureText(map.get("title"));                mImageView.setLayoutParams(new  LinearLayout.LayoutParams(itemWidth+radio.getPaddingLeft()+radio.getPaddingRight(),4));            }            myRadioGroup.addView(radio);        }        myRadioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {            @Override            public void onCheckedChanged(RadioGroup group, int checkedId) {                //Map<String, Object> map = (Map<String, Object>) group.getChildAt(checkedId).getTag();                int radioButtonId = group.getCheckedRadioButtonId();                //根据ID获取RadioButton的实例                RadioButton rb = (RadioButton)findViewById(radioButtonId);                Map<String, Object> selectMap = (Map<String, Object>) rb.getTag();                AnimationSet animationSet = new AnimationSet(true);                TranslateAnimation translateAnimation;                translateAnimation = new TranslateAnimation(mCurrentCheckedRadioLeft, rb.getLeft(), 0f, 0f);                animationSet.addAnimation(translateAnimation);                animationSet.setFillBefore(true);                animationSet.setFillAfter(true);                animationSet.setDuration(300);                mImageView.startAnimation(animationSet);//开始上面蓝色横条图片的动画切换                mViewPager.setCurrentItem(radioButtonId - _id, false);//让下方ViewPager跟随上面的HorizontalScrollView切换                mCurrentCheckedRadioLeft = rb.getLeft();//更新当前蓝色横条距离左边的距离                //System.out.println("dis1:"+mCurrentCheckedRadioLeft);                //System.out.println("dis2:"+( (int)mCurrentCheckedRadioLeft - (int) getResources().getDimension(R.dimen.rdo2))); R.dimen.rdo2=>100dp                mHorizontalScrollView.smoothScrollTo((int) mCurrentCheckedRadioLeft - (int) getResources().getDimension(R.dimen.rdo2), 0);                //根据标题长度设置下标mImageView的长度                mImageView.setLayoutParams(new  LinearLayout.LayoutParams(rb.getRight()-rb.getLeft(),4));            }        });    }    private void iniVariable() {        mTabs = new ArrayList<TabFragment>();        for (int i = 0; i < titleList.size(); i++) {            TabFragment tab = new TabFragment();            Bundle bundle = new Bundle();            bundle.putString("id", i+"");            tab.setArguments(bundle);            mTabs.add(tab);        }        mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {            @Override            public Fragment getItem(int i) {                return mTabs.get(i);            }            @Override            public int getCount() {                return mTabs.size();            }        };        mViewPager.setAdapter(mAdapter);//设置ViewPager的适配器    }    private void setListener() {        // TODO Auto-generated method stub        mViewPager.setOnPageChangeListener(new MyPagerOnPageChangeListener());    }    /**     * ViewPager的PageChangeListener(页面改变的监听器)     */    private class MyPagerOnPageChangeListener implements ViewPager.OnPageChangeListener {        @Override        public void onPageScrollStateChanged(int arg0) {            // TODO Auto-generated method stub        }        @Override        public void onPageScrolled(int arg0, float arg1, int arg2) {            // TODO Auto-generated method stub        }        /**         * 滑动ViewPager的时候,让上方的HorizontalScrollView自动切换         */        @Override        public void onPageSelected(int position) {            // TODO Auto-generated method stub            RadioButton radioButton = (RadioButton) findViewById(_id+position);            radioButton.performClick();        }    }}

布局文件activity_main.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:orientation="vertical" >    <LinearLayout        android:id="@+id/linearLayout01"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:orientation="vertical" >        <HorizontalScrollView            android:id="@+id/horizontalScrollView"            android:layout_width="fill_parent"            android:layout_height="wrap_content"            android:background="#555555"            android:fadingEdge="@null"            android:scrollbars="none"             >            <LinearLayout                android:id="@+id/title_lay"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:orientation="vertical"                android:layout_gravity="center_vertical"                 >                <LinearLayout                    android:id="@+id/lay"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:orientation="horizontal"                     >                </LinearLayout>                <ImageView                    android:id="@+id/img1"                    android:layout_width="0dp"                    android:layout_height="4dp"                    android:background="#33b5e5"                     android:layout_gravity="bottom"                   />            </LinearLayout>        </HorizontalScrollView>        <android.support.v4.view.ViewPager            android:id="@+id/pager"            android:layout_width="fill_parent"            android:layout_height="wrap_content"            android:layout_weight="1" >        </android.support.v4.view.ViewPager>    </LinearLayout></LinearLayout>

0 1