Fragment 嵌套ViewPager（ViewPager里面有多个Fragment）

来源：互联网发布：用友软件合同编辑：程序博客网时间：2024/05/23 12:43

首先扯点别的：总是感觉自己学啥啥不会，吃啥啥没够。整日活在回忆和幻想之中，也是艰难啊。但是比我艰难的人多了，我算老几。（宋小宝这句话说得挺好）所以虽然艰难，还是要努力奋斗，别人或许比你更艰难，你比别人更能坚持那么你就是赢家。

今天讲得是Fragment里面使用ViewPager,ViewPager里面又有Fragment。来实现多界面切换的效果，ViewPager里面的Fragment的切换使用TabLayout来实现。先上效果图

这里写图片描述

接下来是实现的步骤
为了使用TabLayout,在你module的build.文件中加上这么一行（下面代码中的最后一行），算了，整个文件都贴出来吧

apply plugin: 'com.android.application'android {    compileSdkVersion 23    buildToolsVersion "23.0.3"    defaultConfig {        applicationId "com.dmw.tablayoutviewpagerdemo"        minSdkVersion 16        targetSdkVersion 23        versionCode 1        versionName "1.0"    }    buildTypes {        release {            minifyEnabled false            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'        }    }}dependencies {    compile fileTree(include: ['*.jar'], dir: 'libs')    testCompile 'junit:junit:4.12'    compile 'com.android.support:appcompat-v7:23.2.1'    compile 'com.android.support:design:23.2.0'}

接下来是 activity_main.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"    android:orientation="vertical">    <FrameLayout        android:id="@+id/frameLayout"        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1" />    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="horizontal">        <Button            android:id="@+id/btnLeft"            android:layout_width="0dp"            android:layout_weight="1"            android:layout_height="wrap_content"            android:text="Left"            />        <Button            android:id="@+id/btnCenter"            android:layout_width="0dp"            android:layout_weight="1"            android:layout_height="wrap_content"            android:text="center"            />        <Button            android:id="@+id/btnRight"            android:layout_width="0dp"            android:layout_weight="1"            android:layout_height="wrap_content"            android:text="right"            />    </LinearLayout></LinearLayout>

布局中有一个FrameLayout控件，用来呈现不同的Fragment，三个Button，点击的时候会更换Fragment,这里并没有对button点击的时候进行颜色处理，效果不是很好。

再看 MainActivity.java

package com.dmw.tablayoutviewpagerdemo;import android.os.Bundle;import android.support.design.widget.TabLayout;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentPagerAdapter;import android.support.v4.app.FragmentTransaction;import android.support.v4.view.ViewPager;import android.support.v7.app.AppCompatActivity;import android.view.View;import android.widget.Button;import java.util.ArrayList;import java.util.List;public class MainActivity extends AppCompatActivity implements View.OnClickListener {    Button btnLeft,btnCenter,btnRight;    Fragment fragment1,fragment2,fragment3;//进行切换的Fragment    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);//给button添加监听事件        btnLeft= (Button) findViewById(R.id.btnLeft);        btnLeft.setOnClickListener(this);        btnCenter= (Button) findViewById(R.id.btnCenter);        btnCenter.setOnClickListener(this);        btnRight= (Button) findViewById(R.id.btnRight);        btnRight.setOnClickListener(this);//让btnLeft被点击        btnLeft.performClick();    }//提供一个方法用来切换Fragment。    private void addFragmentToStack(Fragment fragment) {        FragmentTransaction ft = getSupportFragmentManager().beginTransaction();        //        ft.setCustomAnimations(android.R.anim.slide_in_left, android.R.anim.slide_in_left);        ft.replace(R.id.frameLayout, fragment);        ft.commit();    }    @Override    public void onClick(View v) {        switch (v.getId()){            case R.id.btnLeft:                if (fragment1==null){                    fragment1=new Fragment1();                }                addFragmentToStack(fragment1);                break;            case R.id.btnCenter:                if (fragment2==null){                    fragment2=new Fragment2();                }                addFragmentToStack(fragment2);                break;            case R.id.btnRight:                if (fragment3==null){                    fragment3=new Fragment3();                }                addFragmentToStack(fragment3);                break;        }    }}

* 然后是 Fragment1.java和对应的xml文件*

package com.dmw.tablayoutviewpagerdemo;import android.graphics.Color;import android.os.Bundle;import android.support.annotation.Nullable;import android.support.design.widget.TabLayout;import android.support.v4.app.Fragment;import android.support.v4.view.ViewPager;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import java.util.ArrayList;import java.util.List;/** * Created by Administrator on 2016/4/11. */public class Fragment1 extends Fragment{    protected ViewPager viewPager;    protected TabLayout tabLayout;    protected View view;    protected List<Fragment> fragmentList;    protected List<String> titleList;    @Override    public void onCreate(@Nullable Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        fragmentList = new ArrayList<>();        titleList = new ArrayList<>();        fragmentList.add(new Fragment4());        fragmentList.add(new Fragment5());        fragmentList.add(new Fragment6());        titleList.add("frag1_title1");        titleList.add("frag1_title2");        titleList.add("frag1_title3");    }    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {        view = inflater.inflate(R.layout.fragment1, container, false);        tabLayout= (TabLayout) view.findViewById(R.id.tabLayout);        tabLayout.setBackgroundColor(Color.parseColor("#ff3344"));        //设置tabLayout的属性        tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);        tabLayout.setTabMode(TabLayout.MODE_FIXED);        tabLayout.setBackgroundColor(Color.parseColor("#ffffff"));        tabLayout.setTabTextColors(Color.parseColor("#000000"), Color.parseColor("#0ddcff"));//设置tab上文字的颜色，第一个参数表示没有选中状态下的文字颜色，第二个参数表示选中后的文字颜色        tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#0ddcff"));//设置tab选中的底部的指示条的颜色        viewPager = (ViewPager) view.findViewById(R.id.fg1viewPager);//给Fragment1里面的ViewPager添加自定义的适配器。        viewPager.setAdapter(new FragmentAdapter(getChildFragmentManager(),fragmentList,titleList));        //然后让TabLayout和ViewPager关联，只需要一句话，简直也是没谁了.         tabLayout.setupWithViewPager(viewPager);        return view;    }}

自定义适配器 FragmentAdapter

package com.dmw.tablayoutviewpagerdemo;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/4/7. */public class FragmentAdapter extends FragmentPagerAdapter {    private List<Fragment> list;    private List<String> titleList;//用来存储每个Fragment的title    public FragmentAdapter(FragmentManager fm, List<Fragment> list, List<String> titleList) {        super(fm);        this.list = list;        this.titleList = titleList;    }    @Override    public Fragment getItem(int position) {        return list.get(position);    }    @Override    public int getCount() {        return list.size();    }//返回标题    @Override    public CharSequence getPageTitle(int position) {       return titleList.get(position);    }}

fragment1.xml，fragment2,fragment3的都一样就是id不同，下面就补贴代码了。

<?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"    android:orientation="vertical">    <android.support.design.widget.TabLayout        android:id="@+id/tabLayout"        android:layout_width="match_parent"        android:layout_height="wrap_content" />    <android.support.v4.view.ViewPager        android:id="@+id/fg1viewPager"        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1" /></LinearLayout>

Fragment2.java和Fragment3.java文件就不贴了，和Fragment1.java几乎一样，我在末尾会把整个demo的下载链接贴上，有兴趣的可以下载下来看看。而且我创建Fragment的方法很随意，并不是android官方推荐的创建方式。

Fragment4,Fragment5,Fragment6.java 代码也是类似，就是一个ListView,只不过listView的item的项数不一样而已。

Fragment4.java

package com.dmw.tablayoutviewpagerdemo;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.AdapterView;import android.widget.ArrayAdapter;import android.widget.ListView;import android.widget.Toast;import java.util.ArrayList;import java.util.List;/** * Created by Administrator on 2016/4/7. */public class Fragment4 extends Fragment {    private View view;    private ListView listView;    private List<String> list;    @Override    public void onCreate(@Nullable Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        list=new ArrayList<>();        for(int i=0;i<10;i++){            list.add("listview item "+i);        }    }    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {        view=inflater.inflate(R.layout.fragment_list,container,false);        listView= (ListView) view.findViewById(R.id.listView);        //给ListView设置适配器        listView.setAdapter(new ArrayAdapter<String>(getActivity(),android.R.layout.simple_list_item_1,list));//给listview设置item的点击事件        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {            @Override            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {                Toast.makeText(getActivity(),list.get(position),Toast.LENGTH_SHORT).show();            }        });        return view;    }}

上面的代码真的没什么好说的了，下面是Fragment4.java中用到的布局文件fragment_list.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"    android:orientation="vertical">    <ListView        android:id="@+id/listView"        android:layout_width="match_parent"        android:layout_height="match_parent"></ListView></LinearLayout>

最后附上整个demo的下载地址
http://download.csdn.net/detail/leilifengxingmw/9487635
眼一睁一闭，一天又过去了，上床看会小说睡觉。工资还么发，房东就开始要钱了，也是艰难。今天下午去体育场跑步。回来买饭的路上发现兜里没带钱。跟我一起的哥们只带了十块钱。然后他去吃牛肉板面了，我就去买凉菜的地方佘了6块钱的凉菜，两个馒头。现在发现自己啥都没有了，难道以后真的得靠脸吃饭？

0 0