工作内容:
1.ViewPager、Fragment、TabLayout三者联合使用
学习分享:
一、ViewPager、Fragment、TabLayout联合使用步骤:
1.在activity.xml中添加ViewPager和TabLayout组件【使用v4包中的】
2.写适配器FragmentPagerAdapter(适合数据较小时使用【原因:即使fragment销毁其中的内容依然存在内存中】,大量数据时使用FragmentStatePagerAdapter),之后调用可以使Fragment填充ViewPager的Item
3.TabLayout.setupWithViewPager(ViewPager) 将标题栏和ViewPager关联起来
【注意:Fragment中含有ViewPager,ViewPager中放置的是Fragment——即:Fragment嵌套Fragment。在切换时可以产生错误(数据加载不出)——处理方法:在ViewPager的FragmentViewPagerAdapter中传入的FragmentManager,使用getChildFragmentManager获得】
activity.xml文件:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".FragmentTestActivity"> <!-- tablayout 存放标题栏 --> <android.support.design.widget.TabLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/tablayout" app:tabIndicatorColor="@color/orange" app:tabSelectedTextColor="@color/orange" app:tabTextColor="@color/deepskyblue" app:tabGravity="fill" app:tabMode="fixed" android:fillViewport="false" > </android.support.design.widget.TabLayout> <android.support.v4.view.ViewPager android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1" android:id="@+id/viewpager" > </android.support.v4.view.ViewPager> <!-- 春夏秋冬四个TextView --> <include android:layout_width="match_parent" android:layout_height="wrap_content" layout="@layout/layout_fragtest_bottonline"/> </LinearLayout>fragment.xml文件
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/spring" android:id="@+id/iv_spring" /> </LinearLayout>Fragment.class文件
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.ImageView; import android.widget.Toast; /** * Created by Administrator on 2016/9/1. */ public class Fragment_spring extends Fragment { @Nullable @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { return inflater.inflate(R.layout.frag_spring,container,false); } @Override public void onViewCreated(View view, @Nullable Bundle savedInstanceState) { super.onViewCreated(view, savedInstanceState); ImageView imageView = (ImageView)view.findViewById(R.id.iv_spring); imageView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Toast.makeText(getActivity(), "春天来了", Toast.LENGTH_SHORT).show(); } }); } }FragmentPagerAdapter.class文件;
import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; import java.util.List; /** * Created by Administrator on 2016/9/3. */ public class FragPagerAdapter extends FragmentPagerAdapter { private List<Fragment> fragments; private List<String> titles; /** * 构造函数(关联fragments,viewpager,title) * @param fm 碎片管理者 * @param fragments 碎片集合 * @param titles 标题集合 */ public FragPagerAdapter(FragmentManager fm,List<Fragment> fragments,List<String> titles) { super(fm); this.fragments = fragments; this.titles = titles; } @Override public Fragment getItem(int position) { return fragments.get(position); } @Override public int getCount() { return fragments.size(); } //获取当前的标题 @Override public CharSequence getPageTitle(int position) { return titles.get(position); } }activity.class文件:
import android.support.design.widget.TabLayout; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import com.plane.people.planebattle.adapter.FragPagerAdapter; import java.util.ArrayList; import java.util.List; public class FragmentTestActivity extends AppCompatActivity implements View.OnClickListener{ private ViewPager viewPager; private TabLayout tabLayout; private FragPagerAdapter fragPagerAdapter; //适配器 private List<Fragment> fragments; //存放碎片Fragment private List<String> titles; //存放标题 private FragmentManager fm; private int [] tvIDs = {R.id.tv_sp,R.id.tv_su,R.id.tv_au,R.id.tv_wi};//TextView的id数组 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_frag_test); initListener(); initData(); } /** * 1.初始化viewPager和tabLayout * 2.添加点击事件 */ private void initListener() { viewPager = (ViewPager)findViewById(R.id.viewpager); tabLayout = (TabLayout)findViewById(R.id.tablayout); for (int i = 0; i < tvIDs.length; i++) { findViewById(tvIDs[i]).setOnClickListener(this); } } //初始化数据 private void initData() { /** * (引入包为android.app时可以使用getFragmentManager()获取FragmentManager) * 使用getSupportFragmentManager()获取 FragmentManager 需要当前Activity继承FragmentActivity * 或其子类(AppCompatActivity是其子类) * 【引入import android.support.v4.app.类名,需使用使用getSupportFragmentManager()】 * 1.初始化fragments,titles,fm * 2.添加数据 * 3.设置ViewPager的适配器 */ fragments = new ArrayList<>(); titles = new ArrayList<>(); fm = getSupportFragmentManager(); fragments.add(new Fragment_spring()); fragments.add(new Fragment_summer()); fragments.add(new Fragment_autumn()); fragments.add(new Fragment_winter()); titles.add("春"); titles.add("夏"); titles.add("秋"); titles.add("冬"); fragPagerAdapter = new FragPagerAdapter(fm,fragments,titles); viewPager.setAdapter(fragPagerAdapter); tabLayout.setupWithViewPager(viewPager);//标题栏TabLayout关联ViewPager } /** * 实现点击几个TextView显示对应的ViewPager页 * @param v */ @Override public void onClick(View v) { switch (v.getId()){ case R.id.tv_sp: viewPager.setCurrentItem(0); break; case R.id.tv_su: viewPager.setCurrentItem(1); break; case R.id.tv_au: viewPager.setCurrentItem(2); break; case R.id.tv_wi: viewPager.setCurrentItem(3); break; } } }实现效果:
上方是标题栏(点击可以使中间的页面跳转到相应的页面)
中间是viewpager(可以左右滑动,滑动后标题栏选中的标题跟着改变)
下边是include引入的4个textview(点击使viewpager滑动到对应页面)