Android中TabLayout与Fragment相结合
最近做了一个关于tabLayout的Demo，其中也涉及到了Fragment复用以及传值。
效果图
话不多说，直接上代码
首先需要导入TabLayout依赖
compile 'com.android.support:design:25.0.0'
网上还有另外一个版本的TabLayout的依赖，根据自己的需要选择就好
compile 'com.android.support:design:22.2.0'
主页面布局
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" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <android.support.design.widget.TabLayout android:id="@+id/mTb" android:layout_width="match_parent" android:layout_height="wrap_content" //选中时游标的颜色 app:tabIndicatorColor="@color/red" //选中时的字体颜色 app:tabSelectedTextColor="@color/red" //未选中时的字体颜色 app:tabTextColor="@color/gray"> android.support.design.widget.TabLayout> <android.support.v4.view.ViewPager android:id="@+id/mVp" android:layout_width="match_parent" android:layout_height="match_parent"> android.support.v4.view.ViewPager> LinearLayout>公用fragment布局
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:id="@+id/activity_first_fragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="test.bwie.com.viewpagerdemo.FirstFragment">
<TextView
android:textSize="40dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/first"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"/>
RelativeLayout>
适配器
import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; import java.util.List; public class MyPagerAdapter extends FragmentPagerAdapter { //添加fragment的集合 private ListmFragmentList; //添加标题的集合 private List mTilteLis; public MyPagerAdapter(FragmentManager fm, List fragmentList, List tilteLis) { super(fm); mFragmentList = fragmentList; mTilteLis = tilteLis; } @Override public Fragment getItem(int position) { return mFragmentList.get(position); } @Override public int getCount() { return mFragmentList.size(); } //获取标题 @Override public CharSequence getPageTitle(int position) { return mTilteLis.get(position); } }
MainActivity
import android.support.design.widget.TabLayout; import android.support.v4.app.Fragment; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import java.util.ArrayList; import java.util.List; public class MainActivity extends AppCompatActivity { private TabLayout mTb; private ViewPager mVp; private List公用fragmentmFragmentList; private List mTitleList; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //初始化控件 initView(); //添加标题 initTitile(); //添加fragment initFragment(); //设置适配器 mVp.setAdapter(new MyPagerAdapter(getSupportFragmentManager(), mFragmentList, mTitleList)); //将tablayout与fragment关联 mTb.setupWithViewPager(mVp); } private void initTitile() { mTitleList = new ArrayList<>(); mTitleList.add("第一页"); mTitleList.add("第二页"); mTitleList.add("第三页"); //设置tablayout模式 mTb.setTabMode(TabLayout.MODE_FIXED); //tablayout获取集合中的名称 mTb.addTab(mTb.newTab().setText(mTitleList.get(0))); mTb.addTab(mTb.newTab().setText(mTitleList.get(1))); mTb.addTab(mTb.newTab().setText(mTitleList.get(2))); } private void initFragment() { mFragmentList = new ArrayList<>(); mFragmentList.add(MyFragment.newInstance("第一个界面")); mFragmentList.add(MyFragment.newInstance("第二个界面")); mFragmentList.add(MyFragment.newInstance("第三个界面")); } private void initView() { mTb = (TabLayout) findViewById(R.id.mTb); mVp = (ViewPager) findViewById(R.id.mVp); } }
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; public class MyFragment extends Fragment{ private TextView mTv; public static MyFragment newInstance(String tag){ MyFragment myFragment = new MyFragment(); Bundle bundle = new Bundle(); bundle.putString("tag", tag); //传递参数 myFragment.setArguments(bundle); return myFragment; } @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View view = inflater.inflate(R.layout.activity_first_fragment, null); //初始化控件 mTv = (TextView) view.findViewById(R.id.first); return view; } @Override public void onActivityCreated(@Nullable Bundle savedInstanceState) { super.onActivityCreated(savedInstanceState); //获取参数 Bundle arguments = getArguments(); //改变值 mTv.setText(arguments.getString("tag")); } }
当然也可以不用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" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <android.support.design.widget.TabLayout android:id="@+id/mTb" android:layout_width="match_parent" android:layout_height="wrap_content" //选中时游标的颜色 app:tabIndicatorColor="@color/red" //选中时的字体颜色 app:tabSelectedTextColor="@color/red" //未选中时的字体颜色 app:tabTextColor="@color/gray"> android.support.design.widget.TabLayout> <android.support.v4.view.ViewPager android:id="@+id/mVp" android:layout_width="match_parent" android:layout_height="match_parent"> android.support.v4.view.ViewPager> LinearLayout>
三个fragment布局
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:id="@+id/activity_first_fragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="test.bwie.com.viewpagerdemo.FirstFragment">
<TextView
android:text="第一个界面"
android:textSize="40dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/first"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"/>
RelativeLayout>
适配器同上
MainActivity
package test.bwie.com.viewpagerdemo; import android.support.design.widget.TabLayout; import android.support.v4.app.Fragment; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import java.util.ArrayList; import java.util.List; public class MainActivity extends AppCompatActivity { private TabLayout mTb; private ViewPager mVp; private List以上，我们想要实现的效果就出来了，希望对大家有所帮助mFragmentList; private List mTitleList; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //初始化控件 initView(); //添加标题 initTitile(); //添加fragment initFragment(); //设置适配器 mVp.setAdapter(new MyPagerAdapter(getSupportFragmentManager(), mFragmentList, mTitleList)); //将tablayout与fragment关联 mTb.setupWithViewPager(mVp); } private void initTitile() { mTitleList = new ArrayList<>(); mTitleList.add("第一页"); mTitleList.add("第二页"); mTitleList.add("第三页"); //设置tablayout模式 mTb.setTabMode(TabLayout.MODE_FIXED); //tablayout获取集合中的名称 mTb.addTab(mTb.newTab().setText(mTitleList.get(0))); mTb.addTab(mTb.newTab().setText(mTitleList.get(1))); mTb.addTab(mTb.newTab().setText(mTitleList.get(2))); } private void initFragment() { mFragmentList = new ArrayList<>(); mFragmentList.add(new FirstFragment()); mFragmentList.add(new SecondFragment()); mFragmentList.add(new ThirdFragment()); } private void initView() { mTb = (TabLayout) findViewById(R.id.mTb); mVp = (ViewPager) findViewById(R.id.mVp); } }