ViewPager与底部导航栏的搭配使用

ViewPager与底部导航栏的搭配使用

关于我

方法一：ViewPager与底部导航栏的搭配使用

方法二：FrameLayout与底部导航栏的搭配使用（底部导航栏使用了第三方依赖库）

可滑动、可点击切换界面

activity_home.xml

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:orientation="horizontal" >

      <--四个button-->
      
            <Button
                android:id="@+id/btn_shouye"
                android:layout_width="@dimen/x80"
                android:layout_height="@dimen/x33"
                android:layout_gravity="center_vertical"
                android:background="@drawable/weiketang_shouye_topbar_bg_item_select"
                android:text="@string/app_tab_1"
                android:textColor="@android:color/white"
                android:textSize="@dimen/android_text_size_24" />

        </LinearLayout>


    <androidx.viewpager.widget.ViewPager
        android:id="@+id/fl_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:flipInterval="30"
        android:layout_above="@id/tab"
        android:layout_below="@id/ly_home_top"
        android:persistentDrawingCache="animation" />

Main_activity.java
声明变量：

	private List<Fragment> mFragment = new ArrayList<Fragment>();
	private ArrayList<Button> buttons;
	//四个button
	private Button btn_shouye;
	private Button btn_kecheng;
	private Button btn_lishijilv;
	private Button btn_mycollection;
	private static ViewPager mPager;// 页卡内容

初始化
InitView

	private void InitPage() {
		// TODO Auto-generated method stub
		mPager = (ViewPager) findViewById(R.id.vPager);

		mFragment.add(new MainActivity_App_Tab_1());//界面一
		mFragment.add(new MainActivity_App_Tab_2());//界面二
		mFragment.add(new MainActivity_App_Tab_3());界面三
		mFragment.add(new MainActivity_App_Tab_4());//界面四

		mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {

			@Override
			public int getCount() {
				return mFragment.size();
			}

			@Override
			public Fragment getItem(int position) {
				return mFragment.get(position);
			}
		};
		mPager.setAdapter(mAdapter);
		mPager.setOffscreenPageLimit(3);
		mPager.setOnPageChangeListener(new OnPageChangeListener() {

			@Override
			public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
				// positionOffset的值为： 0 --> 1
				// if (positionOffset > 0) {
				// GradientTab left = mTabs.get(position);
				// GradientTab right = mTabs.get(position + 1);
				// left.updateTabAlpha(1 - positionOffset);
				// right.updateTabAlpha(positionOffset);
				// }
			}

			@Override
			public void onPageSelected(int position) {
				for (int i = 0; i < 4; i++) {
					if (i == position) {
						buttons.get(i).setBackgroundResource(
								R.drawable.weiketang_shouye_topbar_bg_item_select);
					} else {
						buttons.get(i).setBackgroundColor(Color.parseColor("#00000000"));
					}
				}
			}

			@Override
			public void onPageScrollStateChanged(int state) {
			}
		});
	}

Initui //获取button实例

private void InitUI() {
		// TODO Auto-generated method stub
		buttons = new ArrayList<Button>();
		btn_shouye = (Button) findViewById(R.id.btn_shouye);
		buttons.add(btn_shouye);
		btn_kecheng = (Button) findViewById(R.id.btn_kecheng);
		buttons.add(btn_kecheng);
		btn_lishijilv = (Button) findViewById(R.id.btn_lishijilv);
		buttons.add(btn_lishijilv);
		btn_mycollection = (Button) findViewById(R.id.btn_mycollection);
		buttons.add(btn_mycollection);
		btn_shouye.setOnClickListener(new MyOnClickListener(0));
		btn_kecheng.setOnClickListener(new MyOnClickListener(1));
		btn_lishijilv.setOnClickListener(new MyOnClickListener(2));
		btn_mycollection.setOnClickListener(new MyOnClickListener(3));
	}