效果图:
MainActivity中
package com.example.viewpagertest4;
import android.app.Activity;
import android.graphics.Color;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;
import java.util.ArrayList;
import java.util.List;
/**
* viewPager结合Fragment
* 实现既能点击又能滑动的选项卡,仿微信
* 这里要继承的FragmentActivity
*/
public class MainActivity extends FragmentActivity {
// viewPager
private ViewPager viewPager;
private TextView tvPage1;
private TextView tvPage2;
private TextView tvPage3;
private TextView tvPage4;
// 存放下面4个textView的list
private List<TextView>tvList;
// 存放fragment的list
private List<Fragment>fragmentList;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
myOnclick();
}
private void initView(){
tvPage1 = (TextView)findViewById(R.id.tvPage1);
tvPage2 = (TextView)findViewById(R.id.tvPage2);
tvPage3 = (TextView)findViewById(R.id.tvPage3);
tvPage4 = (TextView)findViewById(R.id.tvPage4);
tvList=new ArrayList<>();
tvList.add(tvPage1);
tvList.add(tvPage2);
tvList.add(tvPage3);
tvList.add(tvPage4);
fragmentList=new ArrayList<>();
Fragment01 fragment01=new Fragment01();
Fragment02 fragment02=new Fragment02();
Fragment03 fragment03=new Fragment03();
Fragment04 fragment04=new Fragment04();
fragmentList.add(fragment01);
fragmentList.add(fragment02);
fragmentList.add(fragment03);
fragmentList.add(fragment04);
// 初始化viewPager
viewPager = (ViewPager)findViewById(R.id.viewPager);
// 绑定适配器
MyPagerAdapter myPagerAdapter =new MyPagerAdapter(getSupportFragmentManager(), fragmentList);
viewPager.setAdapter(myPagerAdapter);
}
private void myOnclick() {
// 监听事件
viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
// 这个方法会在屏幕滚动过程中不断被调用。
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
// 当前选择的页面
@Override
public void onPageSelected(int position) {
switch (position) {
case 0:
for (TextView textView : tvList) {
textView.setTextColor(Color.parseColor("#CCCCCC"));
}
tvPage1.setTextColor(Color.parseColor("#FF3399"));
break;
case 1:
for (TextView textView : tvList) {
textView.setTextColor(Color.parseColor("#CCCCCC"));
}
tvPage2.setTextColor(Color.parseColor("#FF3399"));
break;
case 2:
for (TextView textView : tvList) {
textView.setTextColor(Color.parseColor("#CCCCCC"));
}
tvPage3.setTextColor(Color.parseColor("#FF3399"));
break;
case 3:
for (TextView textView : tvList) {
textView.setTextColor(Color.parseColor("#CCCCCC"));
}
tvPage4.setTextColor(Color.parseColor("#FF3399"));
break;
}
}
// 这个方法在手指操作屏幕的时候发生变化。有三个值:0(END),1(PRESS) , 2(UP) 。
@Override
public void onPageScrollStateChanged(int state) {
}
});
// page1点击事件
tvPage1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// 滑到第一页
viewPager.setCurrentItem(0);
}
});
// page2点击事件
tvPage2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// 滑到第二页
viewPager.setCurrentItem(1);
}
});
// tvPage3点击事件
tvPage3.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// 滑到第三页
viewPager.setCurrentItem(2);
}
});
// tvPage4点击事件
tvPage4.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// 滑到第四页
viewPager.setCurrentItem(3);
}
});
}
// 绑定Fragment的适配器
class MyPagerAdapter extends FragmentPagerAdapter {
private List<Fragment> fragments;
public MyPagerAdapter(FragmentManager fm, List<Fragment> fragments) {
super(fm);
this.fragments = fragments;
}
@Override
public Fragment getItem(int i) {
return fragments.get(i);
}
@Override
public int getCount() {
return fragments.size();
}
}
}
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
tools:context="com.example.viewpagertest4.MainActivity">
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#FF66FF"
android:layout_marginBottom="50dp"
>
</android.support.v4.view.ViewPager>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal"
android:layout_alignParentBottom="true"
>
<TextView
android:id="@+id/tvPage1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="page1"
android:textSize="16sp"
android:gravity="center"
android:textColor="#FF3399"
/>
<TextView
android:id="@+id/tvPage2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="page2"
android:textSize="16sp"
android:gravity="center"
/>
<TextView
android:id="@+id/tvPage3"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="page3"
android:textSize="16sp"
android:gravity="center"
/>
<TextView
android:id="@+id/tvPage4"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="page4"
android:textSize="16sp"
android:gravity="center"
/>
</LinearLayout>
</RelativeLayout>
创建4个fragment,这里这些一个
Fragment01
package com.example.viewpagertest4;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
/**
* A simple {@link Fragment} subclass.
*/
public class Fragment01 extends Fragment {
public Fragment01() {
// Required empty public constructor
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_fragment01, container, false);
}
}
fragment_fragment01.xml
<FrameLayout 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"
tools:context="com.example.viewpagertest4.Fragment01">
<!-- TODO: Update blank fragment layout -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="第一页" />
</FrameLayout>
源码下载
ViewPadeDemo----viewpagertest4