ViewPager横向滑动实现页卡的方法

殷皮皮

于 2019-01-08 15:10:18 发布

阅读量557

点赞数 1

分类专栏： ViewPager滑动文章标签： ViewPager横向滑动实现页卡的方法

本文链接：https://blog.youkuaiyun.com/yinqiuping/article/details/86077256

版权

ViewPager滑动专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了如何在Android应用中使用ViewPager与TabLayout组件实现页面切换效果，包括创建Fragment类、自定义适配器以及主页面布局的设置，是Android开发者不可错过的实践指南。

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

主页面

package com.list.viewpager;
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 android.widget.TableLayout;
import com.list.viewpager.adapter.MyAdapter;
import com.list.viewpager.frag.Frag1;
import com.list.viewpager.frag.Frag2;
import com.list.viewpager.frag.Frag3;
import com.list.viewpager.frag.Frag4;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
    private TabLayout tab;
    private ViewPager viewpager;
    private List<String> tabs = new ArrayList<>();
    private List<Fragment> fragments = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //初始化控件
        tab = findViewById(R.id.tab);
        viewpager = findViewById(R.id.viewpager);
        //头部切换滑动
        //头部的页卡数据
        tabs.add("tab1");
        tabs.add("tab2");
        tabs.add("tab3");
        tabs.add("tab4");
        //设置样式
        tab.setTabMode(TabLayout.MODE_FIXED);//默认样式
        //添加数据
        tab.addTab(tab.newTab().setText(tabs.get(0)));
        tab.addTab(tab.newTab().setText(tabs.get(1)));
        tab.addTab(tab.newTab().setText(tabs.get(2)));
        tab.addTab(tab.newTab().setText(tabs.get(3)));
        //viewpager数据
        fragments.add(new Frag1());
        fragments.add(new Frag2());
        fragments.add(new Frag3());
        fragments.add(new Frag4());
        //适配器
        MyAdapter myAdapter = new MyAdapter(getSupportFragmentManager(), fragments, tabs);
        viewpager.setAdapter(myAdapter);
        //关联TabLayout和ViewPager
        tab.setupWithViewPager(viewpager);
    }
}

Fragment类–例子

package com.list.viewpager.frag;

import android.os.Bundle;
import android.support.annotation.NonNull;
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.view.ViewParent;

import com.list.viewpager.R;

public class Frag1 extends Fragment {
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.frag1, container, false);
        ViewGroup parent = (ViewGroup) view.getParent();
        if (parent != null) {
            parent.removeView(view);
        }
        return view;
    }
}

适配器

package com.list.viewpager.adapter;

import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v7.app.ActionBar;
import java.util.List;
public class MyAdapter extends FragmentPagerAdapter {
List<Fragment> fragments;
List<String> tabs;

public MyAdapter(FragmentManager fm, List<Fragment> fragments, List<String> tabs) {
    super(fm);
    this.fragments = fragments;
    this.tabs = tabs;
}

@Override
public Fragment getItem(int i) {
    return fragments.get(i);
}

@Override
public int getCount() {
    return fragments.size();
}
//展示页面

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

主页面布局

<?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=".MainActivity">

<android.support.design.widget.TabLayout
    android:id="@+id/tab"
    android:layout_width="match_parent"
    android:layout_height="50dp" />

<android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
</LinearLayout>

Fragment例子布局

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="页面1" />
</android.support.constraint.ConstraintLayout>