android通过fragment+viewpager实现多页面侧滑效果

深碍√TFBOYSˉ_ 2022-05-29 05:20 173阅读 0赞

github源代码：[点击打开链接][Link 1]

CSDN下载：[点击打开链接][Link 2]

文件格局

![Image 1][]

效果：

![Image 1][]

先新建3分fragment页：

页面1

public class Fragment1 extends Fragment{
        @Nullable
        @Override
        public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
            View view =inflater.inflate(R.layout.fragment1,null);
            return view;
        }
    }

页面2

public class Fragment2 extends Fragment{
        @Nullable
        @Override
        public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
            View view =inflater.inflate(R.layout.fragment2,null);
            return view;
        }
    }

页面3

public class Fragment3 extends Fragment{
        @Nullable
        @Override
        public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
            View view =inflater.inflate(R.layout.fragment3,null);
            return view;
        }
    }

activity\_main布局：

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        >
    
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="5dp"
            android:background="@color/colorPrimaryDark"
            android:orientation="horizontal">
    
            <Button
                android:id="@+id/button_save"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_centerVertical="true"
                android:layout_marginBottom="5dp"
                android:background="@null"
                android:textColor="@android:color/background_light" />
    
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:text="Fragment+viewpager应用"
                android:textColor="@android:color/background_light"
                android:textSize="20sp" />
    
            <Button
                android:id="@+id/button_cancel"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_centerInParent="true"
                android:layout_marginBottom="5dp"
                android:background="@null"
                android:textColor="@android:color/background_light" />
        </RelativeLayout>
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
    
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:orientation="vertical">
    
                <TextView
                    android:id="@+id/tv_f1"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:text="TextView"
                    android:textSize="20sp" />
    
                <TextView
                    android:id="@+id/tab_1"
                    android:layout_width="match_parent"
                    android:layout_height="3dp"
                    android:background="@android:color/holo_blue_dark"
                    android:text="TextView" />
            </LinearLayout>
    
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:orientation="vertical">
    
                <TextView
                    android:id="@+id/tv_f2"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:textSize="20sp"
                    android:text="TextView" />
    
                <TextView
                    android:id="@+id/tab_2"
                    android:layout_width="match_parent"
                    android:layout_height="3dp"
                    android:background="@color/background_tab_pressed"
                    android:text="TextView" />
            </LinearLayout>
    
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:orientation="vertical">
    
                <TextView
                    android:id="@+id/tv_f3"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:textSize="20sp"
                    android:text="TextView" />
    
                <TextView
                    android:id="@+id/tab_3"
                    android:layout_width="match_parent"
                    android:layout_height="3dp"
                    android:background="@color/background_tab_pressed"
                    android:text="TextView" />
            </LinearLayout>
    
        </LinearLayout>
    
        <android.support.v4.view.ViewPager
            android:id="@+id/viewPager"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
    
    </LinearLayout>

以上布局代码效果：

![Image 1][]

MainActivity：

public class MainActivity extends AppCompatActivity {
    
        private Fragment[] views;
        private ViewPager viewPager;
        private TextView tv_f1,tv_f2,tv_f3,tv_tab1,tv_tab2,tv_tab3;
    
        @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            getSupportActionBar().hide();
            init();
            viewPager.setAdapter(new Adapter(getSupportFragmentManager()));
            setStatusBarColor(this, ContextCompat.getColor(this, R.color.colorPrimaryDark));
        }
    
        private void init() {
            final TextView tv_fragment[]={(TextView) findViewById(R.id.tv_f1),(TextView) findViewById(R.id.tv_f2),(TextView) findViewById(R.id.tv_f3)};
            final TextView tv_tab[]={(TextView) findViewById(R.id.tab_1),(TextView) findViewById(R.id.tab_2),(TextView) findViewById(R.id.tab_3)};
            initTab();
    
            viewPager= (ViewPager) findViewById(R.id.viewPager);
            //监听viewpager的状态：滑动、被选中页、滑动状态改变
            viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
                @Override
                public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    
                }
    
                @Override
                public void onPageSelected(int position) {
                    ClearTab();
                    tv_fragment[position].setTextColor(getResources().getColor(R.color.tab_color_select));
                    tv_tab[position].setBackgroundColor(getResources().getColor(R.color.tab_color_select));
                }
    
                @Override
                public void onPageScrollStateChanged(int state) {
    
                }
            });
            views=new Fragment[3];
            views[0]= new Fragment1();
            views[1]= new Fragment2();
            views[2]= new Fragment3();
        }
    
        class Adapter extends FragmentPagerAdapter{
            public Adapter(FragmentManager fm) {
                super(fm);
            }
            @Override
            public Fragment getItem(int position) {
                //返回对应的fragment对象
                return views[position];
            }
            @Override
            public int getCount() {
                return views.length;
            }
        }
        //对tab标签初始化
        public void initTab(){
            String tab_name[]={"页面一","页面二","页面三"};
    
            tv_f1= (TextView) findViewById(R.id.tv_f1);
            tv_f2= (TextView) findViewById(R.id.tv_f2);
            tv_f3= (TextView) findViewById(R.id.tv_f3);
    
            tv_f1.setText(tab_name[0]);
            tv_f2.setText(tab_name[1]);
            tv_f3.setText(tab_name[2]);
    
            tv_tab1= (TextView) findViewById(R.id.tab_1);
            tv_tab2= (TextView) findViewById(R.id.tab_2);
            tv_tab3= (TextView) findViewById(R.id.tab_3);
        }
        //在页面滑动后会改变顶部的标签颜色，那就需要先将标签颜色都改为未选中的样式，再对被选中的页面标签设置选中样式
        public void ClearTab(){
            tv_tab1.setBackgroundColor(getResources().getColor(R.color.tab_color_normal));
            tv_tab2.setBackgroundColor(getResources().getColor(R.color.tab_color_normal));
            tv_tab3.setBackgroundColor(getResources().getColor(R.color.tab_color_normal));
            tv_f1.setTextColor(getResources().getColor(R.color.f_color_normal));
            tv_f2.setTextColor(getResources().getColor(R.color.f_color_normal));
            tv_f3.setTextColor(getResources().getColor(R.color.f_color_normal));
        }
    
        @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
        static void setStatusBarColor(Activity activity, int statusColor) {
            Window window = activity.getWindow();
            //取消状态栏透明
            window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            //添加Flag把状态栏设为可绘制模式
            window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
            //设置状态栏颜色
            window.setStatusBarColor(statusColor);
            //设置系统状态栏处于可见状态
            window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_VISIBLE);
            //让view不根据系统窗口来调整自己的布局
            ViewGroup mContentView = (ViewGroup) window.findViewById(Window.ID_ANDROID_CONTENT);
            View mChildView = mContentView.getChildAt(0);
            if (mChildView != null) {
                ViewCompat.setFitsSystemWindows(mChildView, false);
                ViewCompat.requestApplyInsets(mChildView);
            }
        }
    }

colors.xml:

<?xml version="1.0" encoding="utf-8"?>
    <resources>
        <color name="colorPrimary">#3F51B5</color>
        <color name="colorPrimaryDark">#303F9F</color>
        <color name="colorAccent">#FF4081</color>
        <color name="tab_color_select">#FF0099CC</color>
        <color name="tab_color_normal">#FFFFFF</color>
        <color name="f_color_normal">#8A000000</color>
    
    
    </resources>

[Link 1]: https://github.com/blackleexu/Viewpager_Fragment.git
[Link 2]: https://download.csdn.net/download/blank__box/10292872
[Image 1]: