Android Fragment实践- ViewPager +Fragment实现页面滑动效果

淩亂°似流年 2023-09-27 17:13 132阅读 0赞

#### 简介： ####

Android系统中提供的ViewPager与Fragment一起使用，可以更加方便的管理每个Page的生命周期。最常用的场景是，在一个页面内，可以进行左右滑动，从而显示不同的内容。  
本篇给出一个典型的ViewPager + Fragment，来实现这种滑动。

#### 代码： ####

（1）Activity：

>     package com.test;
>     
>     import android.app.Activity;
>     import android.content.Intent;
>     import android.os.Bundle;
>     import android.support.design.widget.TabLayout;
>     import android.support.v4.app.Fragment;
>     import android.support.v4.app.FragmentManager;
>     import android.support.v4.app.FragmentTransaction;
>     import android.support.v4.view.ViewPager;
>     import android.support.v7.app.AppCompatActivity;
>     import android.view.KeyEvent;
>     import android.view.Window;
>     
>     import java.util.ArrayList;
>     import java.util.Arrays;
>     import java.util.List;
>     
>     import shu.shi.com.R;
>     import shu.shi.com.shushi.MyFragment;
>     import shu.shi.com.tools.MyLog;
>     
>     
>     public class TestFragmentActivity extends AppCompatActivity {
>     
>         private static final String TAG = "ShushiHomeActivity_bak";
>     
>         private List<Fragment> mFragmentList = new ArrayList<Fragment>();
>     
>         //adapter
>         TestAdaptor mTestAdaptor;
>     
>         //ui
>         protected TabLayout mTabs;
>     
>         protected ViewPager mViewPager;
>     
>         /function begin/
>     
>         @Override
>         public void onCreate(Bundle savedInstanceState) {
>             super.onCreate(savedInstanceState);
>             requestWindowFeature(Window.FEATURE_NO_TITLE);
>             setContentView(R.layout.test_activity_basic_main);
>             initTabs();
>     
>             //初始化frament
>             initFragment(savedInstanceState);
>             setViewPager();
>         }
>     
>         @Override
>         protected void onResume() {
>             super.onResume();
>         }
>     
>         @Override
>         protected void onDestroy() {
>             super.onDestroy();
>     
>         }
>     
>         @Override
>         protected void onSaveInstanceState(Bundle outState) {
>             super.onSaveInstanceState(outState);
>             FragmentManager manager = getSupportFragmentManager();
>     
>         }
>     
>         private void initTabs() {
>             mTabs = (TabLayout) findViewById(R.id.qa_tab);
>             mViewPager = (ViewPager)findViewById(R.id.viewpager);
>     
>             mTabs.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
>                 @Override
>                 public void onTabSelected(TabLayout.Tab tab) {
>                     int position = tab.getPosition();
>                     MyLog.i(TAG,"====mTabs.getPosition()=======" +position);
>                     if (position >= 0) {
>                         CharSequence cs = tab.getText();
>                         if (cs!=null && cs.length()>0) {
>                             String tabStr = cs.toString();
>                             MyLog.i(TAG,"====mTabs.getPosition() tabStr=======" + tabStr);
>                         }
>                     }
>                 }
>     
>                 @Override
>                 public void onTabUnselected(TabLayout.Tab tab) {
>     
>                 }
>     
>                 @Override
>                 public void onTabReselected(TabLayout.Tab tab) {
>     
>                 }
>             });
>     
>         }
>     
>     
>         ///fragment and list and scrool page /
>         /**
>          * 初始化fragment的记忆状态
>          *
>          * @param savedInstanceState
>          */
>         private void initFragment(Bundle savedInstanceState) {
>             FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
>             if (savedInstanceState != null) {
>                 for (int i = 0; i< 5; i++) {
>                     String key = "MyFragment" + i;
>                     MyFragment fragment = (MyFragment)getSupportFragmentManager().getFragment(savedInstanceState, key);
>                     mFragmentList.add(fragment);
>                 }
>     
>             } else {
>                 for (int i = 0; i< 5; i++) {
>                     MyFragment fragment = new MyFragment();
>                     mFragmentList.add(fragment);
>                 }
>             }
>     
>         }
>     
>         /**
>          * 填充ViewPager内容
>          */
>         private void setViewPager() {
>             String[] titleName = {
>                     "C",
>                     "C++",
>                     "Java",
>                     "Python",
>                     "Go"
>             };
>     
>             mTestAdaptor = new TestAdaptor(getSupportFragmentManager(), mFragmentList,Arrays.asList(titleName));
>     
>             mViewPager.setAdapter(mTestAdaptor);
>     
>             mTabs.setupWithViewPager(mViewPager);
>             mTabs.setTabTextColors(getResources().getColor(R.color.white_00cccc), getResources().getColor(R.color.white));
>         }
>     
>         /**
>          * 入口
>          *
>          * @param activity
>          */
>         public static void startAction(Activity activity) {
>             Intent intent = new Intent(activity, TestFragmentActivity.class);
>             activity.startActivity(intent);
>             activity.overridePendingTransition(R.anim.quan_fade_in,
>                     R.anim.quan_fade_out);
>         }
>     
>         exit///
>     
>     
>         @Override
>         public boolean onKeyDown(int keyCode, KeyEvent event) {
>     
>             if (keyCode == KeyEvent.KEYCODE_BACK) {
>     
>                 return true;
>             }
>             return super.onKeyDown(keyCode, event);
>         }
>     
>     }

说明：

mFragmentList是一个List，用于保存要操作的Fragment对象；

mTestAdaptor是一个适配器，用于和mFragmentList进行绑定，从而可以动态调整Fragment的个数；

mViewPager是ViewPager对象，在布局文件中有定义，然后通过findViewById进行初始化：

> mViewPager = (ViewPager)findViewById(R.id.viewpager);  
>

mViewPager通过调用它的setAdapter进行适配器的设置；

TabLayout mTabs： 有几个fragment，就需要定义几个TabLayout对象，用于标题的显示；

（2）frameng：

package shu.shi.com.shushi;
    
    import android.content.Context;
    import android.os.Bundle;
    import android.support.annotation.Nullable;
    import android.support.v4.app.Fragment;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.TextView;
    
    import shu.shi.com.R;
    
    public class MyFragment extends Fragment {
        private static final String TAG = "MyFragment";
    
        private View convertView;
        private TextView mTextView;
    
        @Override
        public void onAttach(Context context) {
            super.onAttach(context);
        }
    
        @Override
        public void onCreate(@Nullable Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
        }
    
        @Nullable
        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
            if (convertView == null) {
                convertView = inflater.inflate(R.layout.fragment_mytest, container, false);
                mTextView = convertView.findViewById(R.id.fragment_textview);
            }
            return convertView;
        }
    
        @Override
        public void onDetach() {
            super.onDetach();
        }
    
    }

说明：

在Fragment中，通过mTextView来显示当前Fragment的文本内容；

Fragment通过convertView.findViewById来获取控件对象；

Fragment有自己的生命周期；

（2）Actiivty对应的布局文件：

<?xml version="1.0" encoding="utf-8"?>
    <android.support.design.widget.CoordinatorLayout 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.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            style="@style/Theme.AppCompat.Light"
            app:elevation="0dp">
    
            <android.support.v7.widget.Toolbar
                android:id="@+id/basic_toolbar"
                android:layout_width="match_parent"
    
                android:layout_height="?attr/actionBarSize"
                android:background="@color/transparent"
    
                app:layout_scrollFlags="scroll|enterAlways"
                app:popupTheme="@style/AppTheme.PopupOverlay"
                android:visibility="gone"
                />
    
            <android.support.design.widget.TabLayout
                android:id="@+id/qa_tab"
    
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:tabBackground="?attr/colorPrimaryDark"
                app:tabIndicatorColor="@color/orage"
                />
    
    
        </android.support.design.widget.AppBarLayout>
    
        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">
        </android.support.v4.view.ViewPager>
    
    
    </android.support.design.widget.CoordinatorLayout>

说明：

Activity中，包含TabLayout，ViewPager等的声明。

（4）fragment所在的布局文件：

<?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="wrap_content"
        android:orientation="horizontal"
        >
        <LinearLayout
            android:layout_marginTop="10dp"
            android:id="@+id/linearLayout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            >
            <TextView
                android:id="@+id/fragment_textview"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="my fragment"
                android:visibility="visible"
                >
            </TextView>
        </LinearLayout>
    
    
    </LinearLayout>

说明：

Fragment中，TextView是显示的内容。

（5）Adapter：用于适配fragment。

package com.test;
    
    import android.support.v4.app.Fragment;
    import android.support.v4.app.FragmentManager;
    import android.support.v4.app.FragmentPagerAdapter;
    
    import java.util.ArrayList;
    import java.util.List;
    
    import shu.shi.com.scquan.utils.CollectionUtils;
    
    /**
     * Created by admin on 2017/11/30.
     */
    
    public class TestAdaptor extends FragmentPagerAdapter {
        protected List<Fragment> fragmentList = new ArrayList<Fragment>();
        protected List<String> mTitles;
    
        public TestAdaptor(FragmentManager manager, List<Fragment> listFrg, List<String> mTitles) {
            super(manager);
            this.fragmentList = listFrg;
            this.mTitles = mTitles;
        }
    
        public TestAdaptor(FragmentManager manager, List<Fragment> fragmentList) {
            super(manager);
            this.fragmentList = fragmentList;
        }
    
        @Override
        public CharSequence getPageTitle(int position) {
            return !CollectionUtils.isNullOrEmpty(mTitles) ? mTitles.get(position) : "";
        }
    
        @Override
        public Fragment getItem(int position) {
            return fragmentList.get(position);
        }
    
        @Override
        public int getCount() {
            return fragmentList.size();
        }
    
        protected void setListFragment(List<Fragment> listFrg,List<String> titles) {
            fragmentList = listFrg;
            mTitles = titles;
        }
    }

说明：

TestAdaptor集成自FragmentPagerAdapter，用于和fragment的联动。

总结：使用viewpager+fragment，可以实现强大的页面滑动效果。

--------------------