tabLayout实现活动的效果

本文介绍如何在Android应用中结合ViewPager与TabLayout实现平滑的滑动切换效果,并展示了具体的XML布局及Java代码实现细节。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

实际开发中,ViewPager经常结合Fragment来使用,然后再使用三方开源的PagerSlidingTabStrip去实现类似选项卡滑动效果。我之前那个APP的首页就是这样搭建的。 

如果我们想要实现tabLayout也滑动的效果,那么只需要设置:

//下面这行可以设置tab可以滑动的效果
        mTabs.setTabMode(TabLayout.MODE_SCROLLABLE);

就可以实现:

主XML文件如下:

<android.support.design.widget.TabLayout
    android:id="@+id/square_tabs"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:background="@color/white"
    app:tabBackground="@android:color/transparent"
    app:tabIndicatorColor="@color/tabIndicatorColor"
    app:tabSelectedTextColor="@color/colorViewPager"
    app:tabTextColor="@color/search_tab_gray"
    app:tabIndicatorHeight="2dp" />
<com.choicelean.superwinner.component.ToggleViewPager
    android:layout_marginTop="10dp"
    android:id="@+id/square_viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
</com.choicelean.superwinner.component.ToggleViewPager>


下面的是项目源代码中主界面的,采用工厂设计模式实现不同的Fragment在ViewPager中滑动。


public class SquareActivity extends BaseFragmentActivity implements View.OnClickListener {

    public static final String SQUARE_KEY = "order_type";
    public static final int SQUARE_ALL = 0;
    public static final int SQUARE_HOT = 1;
    public static final int SQUARE_RECOMMEND = 2;
    public static final int SQUARE_YUER = 3;
    public static final int SQUARE_BABY = 4;
    public static final int SQUARE_HEALTH = 5;
    public static final int SQUARE_LIFE = 6;
    private ImageView squareBack;

    private SquareActivity.SquareAdapter adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_square);

        initView();
        setCurrentItem(getIntent().getIntExtra(SQUARE_KEY, SQUARE_ALL));
    }



    private ArrayList<String> title = new ArrayList<>();
    private TabLayout mTabs;
    private ToggleViewPager fragPager;




    public void setCurrentItem(int position) {
        fragPager.setCurrentItem(position, false);
    }

    @Override
    protected void onDestroy() {
        FragmentFactory.clearSquareFragment();
        super.onDestroy();
    }

    private void initView() {
        squareBack=findViewById(R.id.square_back);
        mTabs =findViewById(R.id.square_tabs);
        fragPager = findViewById(R.id.square_viewpager);
        title.add("热门");
        title.add("推荐");
        title.add("育儿");
        title.add("晒娃");
        title.add("健康");
        title.add("生活");
        for (int i = 0; i < title.size(); i++) {
            mTabs.addTab(mTabs.newTab().setText(title.get(i)));
        }
        adapter = new SquareActivity.SquareAdapter(getSupportFragmentManager());
        fragPager.setAdapter(adapter);
        fragPager.setOffscreenPageLimit(4);
        fragPager.setCanScroll(true);
        ViewUtils.reflex(mTabs, false);
        mTabs.setupWithViewPager(fragPager);
        //下面这行可以设置tab可以滑动的效果
        mTabs.setTabMode(TabLayout.MODE_SCROLLABLE);
        squareBack.setOnClickListener(this);
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.square_back:
                finish();
                overridePendingTransition(R.anim.close_x_enter, R.anim.close_x_exit);
                break;
            default:
                break;
        }
    }

    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_BACK) {
            finish();
            overridePendingTransition(R.anim.close_x_enter, R.anim.close_x_exit);
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }

    private class SquareAdapter extends FragmentPagerAdapter {

        public SquareAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            return FragmentFactory.createSquareFragment(position);
        }

        @Override
        public int getCount() {
            return 6;
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return title.get(position);
        }
    }

    /**
     * 由全部、已收货、待评价页面更新数据
     */
    public void sureGet() {
        for (int i = 0; i < adapter.getCount(); i++) {
            ((SquareBaseFragment) adapter.getItem(i)).sureGet();
        }
    }
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值