效果图
概要:很多时候我们都有遇到左右切换tab页面的场景,本文主要用到android.support.design.widget.TabLayout、android.support.v4.view.ViewPager、android.support.v4.app.Fragment都是系统自带的兼容性控件没有多少技术难点。
一个Activity一个Fragment一个Adapter两个布局文件
本例步骤:
1、添加布局文件
MainActivity的布局activity_main.xml
<?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"
tools:context="com.hb.tablayoutdemo.MainActivity">
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:tabGravity="fill"
app:tabMode="scrollable"
app:tabSelectedTextColor="#FF4081" />
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:text="text1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
2、MainActivity类
package com.hb.tablayoutdemo;
import android.os.Bundle;
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 com.hb.tablayoutdemo.adapter.MyPagerAdapter;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity implements TabLayout.OnTabSelectedListener {
private TabLayout tabLayout;
private ViewPager viewPager;
private List<String> datas = new ArrayList<>();
private List<Fragment> fragments = new ArrayList<>();
private MyPagerAdapter adapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
findViews();
initDatas();
initViews();
}
private void initDatas() {
datas.add("test1");
datas.add("test2");
datas.add("test3");
datas.add("test4");
datas.add("test5");
}
private void findViews() {
tabLayout = findViewById(R.id.tabLayout);
viewPager = findViewById(R.id.viewPager);
}
private void initViews() {
//循环注入标签
for (String tab : datas) {
tabLayout.addTab(tabLayout.newTab().setText(tab));
}
//设置TabLayout点击事件
for (int i = 0; i < 5; i++) {
fragments.add(DataFragment.newInstance(i));
}
tabLayout.addOnTabSelectedListener(this);
adapter = new MyPagerAdapter(getSupportFragmentManager(), datas, fragments);
viewPager.setAdapter(adapter);
tabLayout.setupWithViewPager(viewPager);
}
@Override
public void onTabSelected(TabLayout.Tab tab) {
viewPager.setCurrentItem(tab.getPosition());
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
}
package com.hb.tablayoutdemo;
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;
/**
* Created by Administrator on 2017/12/28.
*/
public class DataFragment extends Fragment {
public static final String ARGS_PAGE = "args_page";
private int mPage;
private TextView textView;
public static DataFragment newInstance(int page) {
Bundle args = new Bundle();
args.putInt(ARGS_PAGE, page);
DataFragment fragment = new DataFragment();
fragment.setArguments(args);
return fragment;
}
@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mPage = getArguments().getInt(ARGS_PAGE);
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.layput_data_fragment, container, false);
textView = rootView.findViewById(R.id.textView);
textView.setText("第"+mPage+"页");
return rootView;
}
}
4、ViewPager适配器
package com.hb.tablayoutdemo.adapter;
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;
/**
* Created by Administrator on 2017/12/28.
*/
public class MyPagerAdapter extends FragmentPagerAdapter {
List<String> list;
List<Fragment> fragments = new ArrayList<>();
public MyPagerAdapter(FragmentManager fm, List<String> list, List<Fragment> fragments) {
super(fm);
this.list = list;
this.fragments = fragments;
}
@Override
public Fragment getItem(int position) {
return fragments.get(position);
}
@Override
public CharSequence getPageTitle(int position) {
return list.get(position);
}
@Override
public int getCount() {
return fragments != null ? fragments.size() : 0;
}
}
有什么问题尽可留言。