前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >TableLayout和Viewpager实现切换

TableLayout和Viewpager实现切换

作者头像
xiangzhihong
发布2018-02-02 17:34:41
2K1
发布2018-02-02 17:34:41
举报
文章被收录于专栏:向治洪

因为我是在之前的基础上写的,所以这个TableLayout和Viewpager实际上是写在Fragment上的。要写到Activity里其实也是一样的啦。

先看效果图,原谅我不会动态图,只能截个图啦

布局文件

app:tabIndicatorcolor意思是选中的导航条的颜色。

app:tabSelectesTextColor是选中的导航条的文字颜色。

app:tabTextColor 是没有选中的导航条文字的颜色。

代码语言:javascript
复制
<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.design.widget.TabLayout
        android:id="@+id/tab"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorColor="@color/selectTable"
        app:tabSelectedTextColor="@color/selectTable"
        app:tabTextColor="@color/black" />

    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"

        />
</LinearLayout>

java代码

代码语言:javascript
复制
import android.os.Bundle;
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 android.widget.TextView;

import com.lvyequeen.mystudysummry.R;
import com.lvyequeen.mystudysummry.adapters.FragmentVpAdapter;

import java.util.ArrayList;
import java.util.List;


public class CertificFragment extends Fragment {
    private ViewPager vp;
    private TabLayout tab;
    private List<String> tablist = new ArrayList<>();
    private List<View> views = new ArrayList<>();
    private FragmentVpAdapter fragmentVpAdapter;


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        initViews();
        initTabStr();
        View view = inflater.inflate(R.layout.fragment_certific, null);
        tab = ((TabLayout) view.findViewById(R.id.tab));
        vp = ((ViewPager) view.findViewById(R.id.vp));

        tab.setTabMode(TabLayout.MODE_FIXED);
        for (int i = 0; i < 3; i++) {
            tab.addTab(tab.newTab().setText(tablist.get(i)));
        }

        fragmentVpAdapter = new FragmentVpAdapter(views, tablist);
        vp.setAdapter(fragmentVpAdapter);

//        将tablelayout和ViewPager关联起来
        tab.setupWithViewPager(vp);
        tab.setTabsFromPagerAdapter(fragmentVpAdapter);
        return view;
    }

    /**
     * 初始化Viewpager的每个页面内容,这里为了简单,就直接new的视图
     * 如果想要不同布局的内容,就按ViewPager的使用方式就行了。
     */
    private void initViews() {
        views.clear();
        for (int i = 0; i < 3; i++) {
            TextView view = new TextView(getContext());
            view.setText(i + 1 + "个viewpager的填充界面");
            views.add(view);
        }

    }

    /**
     * 同样为了简单,标题栏的内容就这么附值了。
     */
    private void initTabStr() {
        tablist.clear();
        for (int i = 0; i < 3; i++) {
            tablist.add("标题" + (1 + i));
        }
    }
}

 适配器的代码,和平时viewpager的写法是一样的,但是多了一个方法getPageTitle();

代码语言:javascript
复制
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;

import java.util.List;


public class FragmentVpAdapter extends PagerAdapter {
//    这个是viewpager的填充视图
    private List<View> views;
//    这个是table导航条里面的内容填充
    private List<String> tabstrs;

    public FragmentVpAdapter(List<View> views, List<String> tabstrs) {
        this.views = views;
        this.tabstrs = tabstrs;
    }

    @Override
    public int getCount() {
        return views.size();
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        container.addView(views.get(position));
        return views.get(position);
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView(views.get(position));
    }

    //    这个是和tablelayout相关的
    @Override
    public CharSequence getPageTitle(int position) {
        return tabstrs.get(position);
    }
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2016-07-05 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档