android 底部滑动导航实现方式-ViewPager

android 底部滑动导航实现方式-ViewPager

---

版权声明：

本文为博主学习整理原创文章，如有不正之处请多多指教。

欢迎评论关注！谢谢！！！

未经博主允许不得转载。https://blog.csdn.net/qq_42595261/article/details/85015031

---

效果图：

布局源代码如下：

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:orientation="vertical"
    tools:context="com.example.xcl.text.MainActivity">
    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorAccent">
    </android.support.v4.view.ViewPager>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal"
        android:alpha="0.5"
        android:gravity="center"
        android:background="#000">
        <FrameLayout
            android:id="@+id/indicator1"
            android:layout_width="20dp"
            android:layout_height="5dp"
            android:layout_margin="2dp"
            android:background="#fff"></FrameLayout>
        <FrameLayout
            android:id="@+id/indicator2"
            android:layout_width="20dp"
            android:layout_marginLeft="5dp"
            android:layout_margin="2dp"
            android:layout_height="5dp"
            android:background="#fff"></FrameLayout>
        <FrameLayout
            android:id="@+id/indicator3"
            android:layout_width="20dp"
            android:layout_marginLeft="5dp"
            android:layout_margin="2dp"
            android:layout_height="5dp"
            android:background="#fff"></FrameLayout>

    </LinearLayout>


</RelativeLayout>

定义三个布局文件（代码如下），滑动的时候分别加载三个布局：

 

把三个布局文件和底部的滑动条连接起来（java代码如下）：

package com.example.xcl.text;

import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.FrameLayout;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    private ViewPager viewPager;
    private View view1,view2,view3;
    private ArrayList<View> viewList;
    //引导页下面的三个移动光标
    private FrameLayout indicator3;
    private FrameLayout indicator1;
    private FrameLayout indicator2;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();

    }
    private void initView(){
        //加载viewPager
        viewPager = (ViewPager) findViewById(R.id.viewPager);
        //加载三个布局文件，首先定义LayoutInflater
        LayoutInflater inflater = getLayoutInflater();
        view1 = inflater.inflate(R.layout.one,null);
        view2 = inflater.inflate(R.layout.two,null);
        view3 = inflater.inflate(R.layout.three,null);
        //找到移动光标控件
        indicator1 = (FrameLayout) findViewById(R.id.indicator1);
        indicator2 = (FrameLayout) findViewById(R.id.indicator2);
        indicator3 = (FrameLayout) findViewById(R.id.indicator3);
        // 将要分页显示的View装入数组中
        viewList = new ArrayList<View>();
        viewList.add(view1);
        viewList.add(view2);
        viewList.add(view3);

        //新建一个PagerAdapter的适配器
        PagerAdapter pagerAdapter = new PagerAdapter() {
            @Override
            public int getCount() {
                return viewList.size();
            }

            @Override
            public boolean isViewFromObject(View view, Object object) {
                return view == object;
            }

            /**
             * 此方法需要被覆盖，不然会报异常
             * @param container
             * @param position
             * @param object
             */
            @Override
            public void destroyItem(ViewGroup container, int position, Object object) {
                container.removeView(viewList.get(position));
            }

            /**
             * 此方法需要被覆盖，不然会报异常
             * @param container
             * @param position
             * @return
             */
            @Override
            public Object instantiateItem(ViewGroup container, int position) {
                container.addView(viewList.get(position));
                return viewList.get(position);
            }
        };

        //给viewPager设置适配器
        viewPager.setAdapter(pagerAdapter);
        viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                //把移动光标开始的时候设置为黑色
                indicator1.setBackgroundColor(getResources().getColor(R.color.black));
                indicator2.setBackgroundColor(getResources().getColor(R.color.black));
                indicator3.setBackgroundColor(getResources().getColor(R.color.black));
                switch (position) {
                    case 0:
                        //当移动光标滑动到的时候设置为白色
                        indicator1.setBackgroundColor(getResources().getColor(R.color.white));
                        break;
                    case 1:
                        indicator2.setBackgroundColor(getResources().getColor(R.color.white));
                        break;
                    case 2:
                        indicator3.setBackgroundColor(getResources().getColor(R.color.white));
                        break;
                }

            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }
}

 

 

---

 

希望能帮助到您，如有不正之处请多多指教。欢迎评论关注！谢谢！！！

 

---