ViewPager+TabLayout

开发工具：Android Studio1.4

步骤：

效果预览

1. 自定义ListView适配器MyAdapter与其关联的子布局content.xml

content.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"><TextView
        android:id="@+id/tv"android:layout_width="match_parent"android:layout_height="100dp" /></LinearLayout>

MyAdapter

package com.app.listViewAdapter;import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.TextView;import java.util.List;/*** Created by Administrator on 2016/4/28.*/
public class MyAdapter extends ArrayAdapter<String> {private int resourceId;public MyAdapter(Context context, int resource, List<String> objects) {super(context, resource, objects);resourceId = resource;}@Overridepublic View getView(int position, View convertView, ViewGroup parent) {String content = getItem(position);View view;ViewHolder viewHolder;if(convertView == null){view = LayoutInflater.from(getContext()).inflate(resourceId,null);viewHolder = new ViewHolder();viewHolder.tv = (TextView) view.findViewById(R.id.tv);view.setTag(viewHolder);}else{view = convertView;viewHolder = (ViewHolder) view.getTag();}viewHolder.tv.setText(content);return  view;}class ViewHolder{TextView tv;}}

2. 定义了四个碎片Fragment1、Fragment2、Fragment3、Fragment4

fragment1.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><ListView
        android:id="@+id/wei_xin"android:layout_width="match_parent"android:layout_height="match_parent"></ListView></LinearLayout>

Fragment1


package com.app.fragment;import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ListView;import com.app.listViewAdapter.MyAdapter;import java.util.ArrayList;
import java.util.List;/*** Created by Administrator on 2016/4/28.*/
public class Fragment1 extends Fragment {private ListView listView;private MyAdapter adapter;private List<String> item;public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {View view = inflater.inflate(R.layout.fragment1,container,false);initListView(view);return  view;}private void initListView(View view) {listView = (ListView) view.findViewById(R.id.wei_xin);item = new ArrayList<>();item.add("1");item.add("2");item.add("3");item.add("4");item.add("5");item.add("6");item.add("7");item.add("8");adapter = new MyAdapter(getContext(),R.layout.content,item);listView.setAdapter(adapter);}
}

fragment2.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><ListView
        android:id="@+id/contact"android:layout_width="match_parent"android:layout_height="match_parent"></ListView></LinearLayout>

Fragment2

package com.app.fragment;import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ListView;import com.app.listViewAdapter.MyAdapter;import java.util.ArrayList;
import java.util.List;/*** Created by Administrator on 2016/4/28.*/
public class Fragment2 extends Fragment {private ListView listView;private MyAdapter adapter;private List<String> item;public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {View view = inflater.inflate(R.layout.fragment2,container,false);initListView(view);return  view;}private void initListView(View view) {listView = (ListView) view.findViewById(R.id.contact);item = new ArrayList<>();item.add("1");item.add("2");item.add("3");item.add("4");item.add("5");item.add("6");item.add("7");item.add("8");adapter = new MyAdapter(getContext(),R.layout.content,item);listView.setAdapter(adapter);}
}

fragment3.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><ListView
        android:id="@+id/found"android:layout_width="match_parent"android:layout_height="match_parent"></ListView></LinearLayout>

Fragment3

package com.app.fragment;import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ListView;import com.app.listViewAdapter.MyAdapter;import java.util.ArrayList;
import java.util.List;/*** Created by Administrator on 2016/4/28.*/
public class Fragment3 extends Fragment {private ListView listView;private MyAdapter adapter;private List<String> item;public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {View view = inflater.inflate(R.layout.fragment3,container,false);initListView(view);return  view;}private void initListView(View view) {listView = (ListView) view.findViewById(R.id.found);item = new ArrayList<>();item.add("1");item.add("2");item.add("3");item.add("4");item.add("5");item.add("6");item.add("7");item.add("8");adapter = new MyAdapter(getContext(),R.layout.content,item);listView.setAdapter(adapter);}
}

fragment4.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><ListView
        android:id="@+id/me"android:layout_width="match_parent"android:layout_height="match_parent"></ListView></LinearLayout>

Fragment4

package com.app.fragment;import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ListView;import com.app.listViewAdapter.MyAdapter;import java.util.ArrayList;
import java.util.List;/*** Created by Administrator on 2016/4/28.*/
public class Fragment4 extends Fragment {private ListView listView;private MyAdapter adapter;private List<String> item;public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {View view = inflater.inflate(R.layout.fragment4,container,false);initListView(view);return  view;}private void initListView(View view) {listView = (ListView) view.findViewById(R.id.me);item = new ArrayList<>();item.add("1");item.add("2");item.add("3");item.add("4");item.add("5");item.add("6");item.add("7");item.add("8");adapter = new MyAdapter(getContext(),R.layout.content,item);listView.setAdapter(adapter);}
}

3. 在主布局activity_main.xml中引入了ViewPager、TabLayout控件

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"xmlns:app="http://schemas.android.com/apk/res-auto"android:orientation="vertical"><android.support.v4.view.ViewPagerandroid:id="@+id/view_pager"android:layout_weight="1"android:layout_width="match_parent"android:layout_height="0dp"></android.support.v4.view.ViewPager><android.support.design.widget.TabLayoutandroid:id="@+id/tab_layout"android:layout_width="match_parent"android:layout_height="50dp"app:tabIndicatorColor="#000000"app:tabMode="fixed"app:tabIndicatorHeight="0dp"></android.support.design.widget.TabLayout></LinearLayout>

4. 完成MainActivity，注意继承FragmentActivity

MainActivity

package com.app;import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;import com.app.fragment.Fragment1;
import com.app.fragment.Fragment2;
import com.app.fragment.Fragment3;
import com.app.fragment.Fragment4;
import com.example.ww.R;public class MainActivity extends FragmentActivity {private ViewPager viewPager;private TabLayout tabLayout;private TabLayout.Tab tabOne;private TabLayout.Tab tabTwo;private TabLayout.Tab tabThree;private TabLayout.Tab tabFour;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initView();initEvent();}private void initView() {viewPager = (ViewPager) findViewById(R.id.view_pager);tabLayout = (TabLayout) findViewById(R.id.tab_layout);viewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {String[] mTitles = {"微信", "通信录", "发现", "我"};@Overridepublic Fragment getItem(int position) {switch (position) {case 0:return new Fragment1();case 1:return new Fragment2();case 2:return new Fragment3();default:return new Fragment4();}}@Overridepublic int getCount() {return mTitles.length;}@Overridepublic CharSequence getPageTitle(int position) {return mTitles[position];}});tabLayout.setupWithViewPager(viewPager);}private void initEvent() {tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {@Overridepublic void onTabSelected(TabLayout.Tab tab) {if(tab == tabLayout.getTabAt(0)){tab.setIcon(android.R.drawable.btn_star_big_on);viewPager.setCurrentItem(0);}else if(tab == tabLayout.getTabAt(1)){tab.setIcon(android.R.drawable.btn_star_big_on);viewPager.setCurrentItem(1);}else if(tab == tabLayout.getTabAt(2)){tab.setIcon(android.R.drawable.btn_star_big_on);viewPager.setCurrentItem(2);}else if(tab == tabLayout.getTabAt(3)){tab.setIcon(android.R.drawable.btn_star_big_on);viewPager.setCurrentItem(3);}}@Overridepublic void onTabUnselected(TabLayout.Tab tab) {tab.setIcon(android.R.drawable.btn_star_big_off);}@Overridepublic void onTabReselected(TabLayout.Tab tab) {}});tabOne = tabLayout.getTabAt(0);tabTwo = tabLayout.getTabAt(1);tabThree = tabLayout.getTabAt(2);tabFour = tabLayout.getTabAt(3);tabOne.setIcon(android.R.drawable.btn_star_big_off);tabTwo.setIcon(android.R.drawable.btn_star_big_off);tabThree.setIcon(android.R.drawable.btn_star_big_off);tabFour.setIcon(android.R.drawable.btn_star_big_off);}}

ViewPager+TabLayout相关推荐

ViewPager,TabLayout,Fragment实现tabs滑动
工作半年了,准备在新的一年开始写点博客,记录自己的成长,如果能给别人一些参考就更好了. Demo实现: 前段时间公司的项目遇到了使用 ViewPager,TabLayout 和 Fragment实现一 ...
android tab 切换动画,Android之ViewPager+TabLayout组合实现导航条切换效果（微信和QQ底部多标签切换）...
前言之前在另外一篇中用Fragment和button实现了点击切换Fragment的效果,比较简陋.这次改用ViewPager+TabLayout 实现联动的效果. 实现效果 ViewPager 多 ...
Android自定义控件之RecyclerView打造万能ViewPager TabLayout(仿今日头条Tab滑动、Tab多布局、indicator蠕动、自定义indicator、文字颜色渐变)
文章目录 GitHub:https://github.com/AnJiaoDe/TabLayoutNiubility 该轮子特异功能如下: 使用方法注意:该轮子适用于androidx中的ViewPa ...
ViewPager+TabLayout+Fragment刷新Fragment中的数据
1.ViewPager与TabLayout的初始化: 1 private void initData() { 2 mTabFragmentAdapter = new TabFragmentFirstA ...
ViewPager + TabLayout + Fragment + MediaPlayer的使用
效果图在gradle里导包 implementation 'com.android.support:design:28.0.0' activity_main <?xml version=&q ...
android Viewpager+TabLayout+Fragment遇到的问题记录
1.使用官方的TabLayout的时候遇到了一些问题,现在记录一下. 问题一: 底部下划线的宽度修改,官方是没有这个方法可以修改下划线的宽度的,只能使用反射来解决这个问题了. 解决方案如下,调用此方法 ...
TabLayout和ViewPager
这里就说下tablayout+viewpager的实现方式:tablayout是android5.0推出来的一个MaterialDesign风格的控件,是专门用来实现tab栏效果的:功能强大,使用方便 ...
Android TabLayout定制CustomView与ViewPager交互双向联动
Android TabLayout定制CustomView与ViewPager交互双向联动我之前写了一些关于Android Material Design TabLayout的文章, (1)& ...
ViewPager、Fragment和TabLayout实现切页效果
文章目录 ViewPager.Fragment和TabLayout实现切页效果 ViewPager.Fragment和TabLayout实现切页效果不会上传动图,心里哭唧唧.但是是完整代码!新建一个 ...