TabLayout,ViewPager,Fragment实现联动
首先看一下效果图:
热门 和附近可以随意的切换,当然也可以滑动
导包 :
compile 'com.android.support:design:26.0.0-alpha1
首先看一下xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_height="match_parent"> <!----> <android.support.design.widget.TabLayout android:id="@+id/tab" android:layout_weight="1" android:layout_height="wrap_content" android:layout_width="match_parent" app:tabSelectedTextColor="#fff000" app:tabTextColor="#000000" app:tabIndicatorHeight="0dp" app:tabMode="fixed" /> <android.support.v4.view.ViewPager android:id="@+id/vp" android:layout_weight="1" android:layout_height="match_parent" android:layout_width="match_parent"/> </LinearLayout>然后想要实现联动效果还要写一个适配器
import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentStatePagerAdapter; import com.example.dell.quarter.view.fragment.VideoHotFragment; import com.example.dell.quarter.view.fragment.VideoNearbyFragment; /** * Created by dell on 2017/10/19. * * 实现tablayout 和 viewpage 联动的Adapter * 聂 */ public class VideoAdapter extends FragmentStatePagerAdapter { int nNumOfTabs; public VideoAdapter(FragmentManager fm, int nNumOfTabs) { super(fm); this.nNumOfTabs=nNumOfTabs; } @Override public Fragment getItem(int position) { //赋值 switch(position) { case 0: VideoHotFragment tab1=new VideoHotFragment(); return tab1; case 1: VideoNearbyFragment tab2=new VideoNearbyFragment(); return tab2; } return null; } @Override public int getCount() { return nNumOfTabs; } }
最后就是Activity了
import android.os.Build; import android.os.Bundle; import android.support.annotation.Nullable; import android.support.annotation.RequiresApi; import android.support.design.widget.TabLayout; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; import android.support.v4.view.ViewPager; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import com.example.dell.quarter.R; import com.example.dell.quarter.view.adapter.Find_tab_Adapter; import com.example.dell.quarter.view.adapter.VideoAdapter; import java.util.ArrayList; import java.util.List; /** * Created by dell on 2017/10/17. * 视频类 * 作者:聂 */ public class VideoFragment extends FatherFragment{ private TabLayout tabLayout; private ViewPager vp; private List<Fragment> arr=new ArrayList<>(); List<String> list=new ArrayList<>(); //找ID @RequiresApi(api = Build.VERSION_CODES.GINGERBREAD) @Override protected void initView(View view) { //初始化数据 tabLayout = view.findViewById(R.id.tab); vp = view.findViewById(R.id.vp); tabLayout.addTab(tabLayout.newTab().setText("热门")); tabLayout.addTab(tabLayout.newTab().setText("附近")); tabLayout.setTabGravity(TabLayout.GRAVITY_FILL); //tablayout联动viewpage VideoAdapter adapter=new VideoAdapter(getActivity().getSupportFragmentManager(), tabLayout.getTabCount()); vp.setAdapter(adapter); vp.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout)); tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { @Override public void onTabSelected(TabLayout.Tab tab) { vp.setCurrentItem(tab.getPosition()); } @Override public void onTabUnselected(TabLayout.Tab tab) { } @Override public void onTabReselected(TabLayout.Tab tab) { } }); } //new数据 @Override void inDate() { } @Override int inLayout() { return R.layout.videofragment_item; } }
这里我写的
FatherFragment,只是把重复的数据给抽取出来,
其实我们可以直接继承Fragment,然后把初始化的一系列数据直接写到
onCreateView里面
下面是
FatherFragment类
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; /** * 类描述: * 姓名 :聂 */ public abstract class FatherFragment extends Fragment { @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { int i = inLayout(); View view =View.inflate(getActivity(),i,null); //查找控件id initView(view); inDate(); return view; } //找到布局内的id protected abstract void initView(View view); //执行操作 abstract void inDate(); //传入布局:R.layout.xxxxx abstract int inLayout(); }