利用TabLayout+ViewPager+Fragment实现首页侧滑

47次阅读

共计 6251 个字符,预计需要花费 16 分钟才能阅读完成。

一、简介
Viewpager 使用起来就是我们通过创建 adapter 给它填充多个 view,左右滑动时,切换不同的 view。Google 官方是建议我们使用 Fragment 来填充 ViewPager 的,这样 可以更加方便的生成每个 Page,以及管理每个 Page 的生命周期

二、引入相关依赖
implementation ‘com.android.support:design:28.0.0’

三、效果图

四、代码实现

xml
<android.support.design.widget.TabLayout
android:id=”@+id/tabLayout”
android:layout_width=”match_parent”
android:layout_height=”wrap_content” />

<android.support.v4.view.ViewPager
android:id=”@+id/viewPager”
android:layout_width=”match_parent”
android:layout_height=”match_parent” />

activity 中通过 id 来寻找控件
viewPager = findViewById(R.id.viewPager);
tabLayout = findViewById(R.id.tabLayout);

创建 ViewPager 适配器
public class PageAdapter extends FragmentPagerAdapter {
List<Fragment> fragmentList = new ArrayList<>();
List<String> titleList = new ArrayList<>();

public PageAdapter(FragmentManager fm,List<Fragment> fragmentList,List<String> titleList) {
super(fm);
this.fragmentList = fragmentList;
this.titleList = titleList;
}

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

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

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

准备相关数据(fragment,title)
private List<String> getTitleList() {
titleList.add(“Tab1”);
titleList.add(“Tab2″);
return titleList;
}
private List<Fragment> getFragmentList() {

pageModels.add(new PageModel(R.layout.examplelayout1));
pageModels.add(new PageModel(R.layout.examplelayout2));

for (int i = 0; i < pageModels.size(); i++) {
pageFragment = PageFragment.newInstance(pageModels.get(i).exampleLayoutRes);
fragmentList.add(pageFragment);
}
return fragmentList;
}

class PageModel {
@LayoutRes
int exampleLayoutRes;

public PageModel(@LayoutRes int exampleLayoutRes) {
this.exampleLayoutRes = exampleLayoutRes;
}
}

设置 viewPager 适配器
viewPager.setAdapter(new PageAdapter(getSupportFragmentManager(), getFragmentList(), getTitleList()));

设置 tab 标题
如果不设置此项,tab 将无法显示
tabLayout.setupWithViewPager(viewPager);

五、附上源码
布局相关:
activity_main
<?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”
tools:context=”.MainActivity”>

<android.support.design.widget.TabLayout
android:id=”@+id/tabLayout”
android:layout_width=”match_parent”
android:layout_height=”wrap_content” />

<android.support.v4.view.ViewPager
android:id=”@+id/viewPager”
android:layout_width=”match_parent”
android:layout_height=”match_parent” />

</android.support.constraint.ConstraintLayout>

fragment_page
<?xml version=”1.0″ encoding=”utf-8″?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
xmlns:tools=”http://schemas.android.com/tools”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:orientation=”vertical”
tools:context=”.fragment.PageFragment”>

<ViewStub
android:id=”@+id/exampleViewStub”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:inflatedId=”@+id/inflated” />

</LinearLayout>

examplelayout1
<?xml version=”1.0″ encoding=”utf-8″?>
<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:layout_width=”match_parent”
android:layout_height=”match_parent”>

<TextView
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:gravity=”center”
android:text=”View1″ />

</RelativeLayout>

examplelayout2
<?xml version=”1.0″ encoding=”utf-8″?>
<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:layout_width=”match_parent”
android:layout_height=”match_parent”>

<TextView
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:gravity=”center”
android:text=”View2″ />

</RelativeLayout>

功能代码
MainActivity

public class MainActivity extends AppCompatActivity {
ViewPager viewPager;
TabLayout tabLayout;
List<String> titleList = new ArrayList<>();
List<Fragment> fragmentList = new ArrayList<>();
List<PageModel> pageModels = new ArrayList<>();
PageFragment pageFragment;

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

doBisness();
}

private void doBisness() {
viewPager = findViewById(R.id.viewPager);
tabLayout = findViewById(R.id.tabLayout);
viewPager.setAdapter(new PageAdapter(getSupportFragmentManager(), getFragmentList(), getTitleList()));

tabLayout.setupWithViewPager(viewPager);
}

private List<String> getTitleList() {
titleList.add(“Tab1”);
titleList.add(“Tab2”);
return titleList;
}

private List<Fragment> getFragmentList() {

pageModels.add(new PageModel(R.layout.examplelayout1));
pageModels.add(new PageModel(R.layout.examplelayout2));

for (int i = 0; i < pageModels.size(); i++) {
pageFragment = PageFragment.newInstance(pageModels.get(i).exampleLayoutRes);
fragmentList.add(pageFragment);
}
return fragmentList;
}

class PageModel {
@LayoutRes
int exampleLayoutRes;

public PageModel(@LayoutRes int exampleLayoutRes) {
this.exampleLayoutRes = exampleLayoutRes;
}
}
}

PageFragment
public class PageFragment extends Fragment {

@LayoutRes
int exampleLayoutRes;

/**
* Use this factory method to create a new instance of
* this fragment using the provided parameters.
*/
public static PageFragment newInstance(@LayoutRes int exampleLayoutRes) {
PageFragment fragment = new PageFragment();
Bundle args = new Bundle();
args.putInt(“exampleLayoutRes”, exampleLayoutRes);
fragment.setArguments(args);
return fragment;
}

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
if (getArguments() != null) {
exampleLayoutRes = getArguments().getInt(“exampleLayoutRes”);
}
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_page, container, false);
ViewStub exampleStub = view.findViewById(R.id.exampleViewStub);
exampleStub.setLayoutResource(exampleLayoutRes);
exampleStub.inflate();
return view;
}

}

PageAdapter
public class PageAdapter extends FragmentPagerAdapter {

List<Fragment> fragmentList = new ArrayList<>();
List<String> titleList = new ArrayList<>();

public PageAdapter(FragmentManager fm,List<Fragment> fragmentList,List<String> titleList) {
super(fm);
this.fragmentList = fragmentList;
this.titleList = titleList;
}

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

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

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

六、项目 github 地址
https://github.com/fr1014/vie…

正文完
 0

利用TabLayout+ViewPager+Fragment实现首页侧滑

47次阅读

共计 6251 个字符,预计需要花费 16 分钟才能阅读完成。

一、简介
Viewpager 使用起来就是我们通过创建 adapter 给它填充多个 view,左右滑动时,切换不同的 view。Google 官方是建议我们使用 Fragment 来填充 ViewPager 的,这样 可以更加方便的生成每个 Page,以及管理每个 Page 的生命周期

二、引入相关依赖
implementation ‘com.android.support:design:28.0.0’

三、效果图

四、代码实现

xml
<android.support.design.widget.TabLayout
android:id=”@+id/tabLayout”
android:layout_width=”match_parent”
android:layout_height=”wrap_content” />

<android.support.v4.view.ViewPager
android:id=”@+id/viewPager”
android:layout_width=”match_parent”
android:layout_height=”match_parent” />

activity 中通过 id 来寻找控件
viewPager = findViewById(R.id.viewPager);
tabLayout = findViewById(R.id.tabLayout);

创建 ViewPager 适配器
public class PageAdapter extends FragmentPagerAdapter {
List<Fragment> fragmentList = new ArrayList<>();
List<String> titleList = new ArrayList<>();

public PageAdapter(FragmentManager fm,List<Fragment> fragmentList,List<String> titleList) {
super(fm);
this.fragmentList = fragmentList;
this.titleList = titleList;
}

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

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

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

准备相关数据(fragment,title)
private List<String> getTitleList() {
titleList.add(“Tab1”);
titleList.add(“Tab2″);
return titleList;
}
private List<Fragment> getFragmentList() {

pageModels.add(new PageModel(R.layout.examplelayout1));
pageModels.add(new PageModel(R.layout.examplelayout2));

for (int i = 0; i < pageModels.size(); i++) {
pageFragment = PageFragment.newInstance(pageModels.get(i).exampleLayoutRes);
fragmentList.add(pageFragment);
}
return fragmentList;
}

class PageModel {
@LayoutRes
int exampleLayoutRes;

public PageModel(@LayoutRes int exampleLayoutRes) {
this.exampleLayoutRes = exampleLayoutRes;
}
}

设置 viewPager 适配器
viewPager.setAdapter(new PageAdapter(getSupportFragmentManager(), getFragmentList(), getTitleList()));

设置 tab 标题
如果不设置此项,tab 将无法显示
tabLayout.setupWithViewPager(viewPager);

五、附上源码
布局相关:
activity_main
<?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”
tools:context=”.MainActivity”>

<android.support.design.widget.TabLayout
android:id=”@+id/tabLayout”
android:layout_width=”match_parent”
android:layout_height=”wrap_content” />

<android.support.v4.view.ViewPager
android:id=”@+id/viewPager”
android:layout_width=”match_parent”
android:layout_height=”match_parent” />

</android.support.constraint.ConstraintLayout>

fragment_page
<?xml version=”1.0″ encoding=”utf-8″?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
xmlns:tools=”http://schemas.android.com/tools”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:orientation=”vertical”
tools:context=”.fragment.PageFragment”>

<ViewStub
android:id=”@+id/exampleViewStub”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:inflatedId=”@+id/inflated” />

</LinearLayout>

examplelayout1
<?xml version=”1.0″ encoding=”utf-8″?>
<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:layout_width=”match_parent”
android:layout_height=”match_parent”>

<TextView
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:gravity=”center”
android:text=”View1″ />

</RelativeLayout>

examplelayout2
<?xml version=”1.0″ encoding=”utf-8″?>
<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:layout_width=”match_parent”
android:layout_height=”match_parent”>

<TextView
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:gravity=”center”
android:text=”View2″ />

</RelativeLayout>

功能代码
MainActivity

public class MainActivity extends AppCompatActivity {
ViewPager viewPager;
TabLayout tabLayout;
List<String> titleList = new ArrayList<>();
List<Fragment> fragmentList = new ArrayList<>();
List<PageModel> pageModels = new ArrayList<>();
PageFragment pageFragment;

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

doBisness();
}

private void doBisness() {
viewPager = findViewById(R.id.viewPager);
tabLayout = findViewById(R.id.tabLayout);
viewPager.setAdapter(new PageAdapter(getSupportFragmentManager(), getFragmentList(), getTitleList()));

tabLayout.setupWithViewPager(viewPager);
}

private List<String> getTitleList() {
titleList.add(“Tab1”);
titleList.add(“Tab2”);
return titleList;
}

private List<Fragment> getFragmentList() {

pageModels.add(new PageModel(R.layout.examplelayout1));
pageModels.add(new PageModel(R.layout.examplelayout2));

for (int i = 0; i < pageModels.size(); i++) {
pageFragment = PageFragment.newInstance(pageModels.get(i).exampleLayoutRes);
fragmentList.add(pageFragment);
}
return fragmentList;
}

class PageModel {
@LayoutRes
int exampleLayoutRes;

public PageModel(@LayoutRes int exampleLayoutRes) {
this.exampleLayoutRes = exampleLayoutRes;
}
}
}

PageFragment
public class PageFragment extends Fragment {

@LayoutRes
int exampleLayoutRes;

/**
* Use this factory method to create a new instance of
* this fragment using the provided parameters.
*/
public static PageFragment newInstance(@LayoutRes int exampleLayoutRes) {
PageFragment fragment = new PageFragment();
Bundle args = new Bundle();
args.putInt(“exampleLayoutRes”, exampleLayoutRes);
fragment.setArguments(args);
return fragment;
}

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
if (getArguments() != null) {
exampleLayoutRes = getArguments().getInt(“exampleLayoutRes”);
}
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_page, container, false);
ViewStub exampleStub = view.findViewById(R.id.exampleViewStub);
exampleStub.setLayoutResource(exampleLayoutRes);
exampleStub.inflate();
return view;
}

}

PageAdapter
public class PageAdapter extends FragmentPagerAdapter {

List<Fragment> fragmentList = new ArrayList<>();
List<String> titleList = new ArrayList<>();

public PageAdapter(FragmentManager fm,List<Fragment> fragmentList,List<String> titleList) {
super(fm);
this.fragmentList = fragmentList;
this.titleList = titleList;
}

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

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

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

六、项目 github 地址
https://github.com/fr1014/vie…

正文完
 0