ViewPager+Fragment再探:和TAB滑动条一起三者结合

时间:2022-11-24 14:25:24

Fragment前篇:

《Android Fragment初探:静态Fragment组成Activity》

ViewPager前篇:

《Android ViewPager初探:让页面滑动起来》

《Android ViewPager再探:增加滑动指示条》

这篇算是对之前学习写下的3篇博客知识总结吧~

程序的总体结构如下:

ViewPager+Fragment再探:和TAB滑动条一起三者结合

(其中listview.xml为测试项,可忽略)

其中,layout1对应Fragment1,以此类推;layout1中有listview,layout2和layout3只有根布局LinearLayout,区别是背景颜色。

layout1.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:background="#ffffff"
android:orientation="vertical" > <ListView
android:id="@+id/lv"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>

activity_main.xml和《Android ViewPager再探:增加滑动指示条》 一文中一样,下面是代码:

 <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=".MainActivity"> <LinearLayout
android:id="@+id/ll_tab"
android:layout_width="match_parent"
android:layout_height="45dp"
android:background="#FFFFFF" > <TextView
android:id="@+id/tv_first"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="First"
android:textSize="20sp" /> <TextView
android:id="@+id/tv_second"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="Second"
android:textSize="20sp" /> <TextView
android:id="@+id/tv_third"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="Third"
android:textSize="20sp" />
</LinearLayout> <ImageView
android:id="@+id/cursor"
android:layout_below="@id/ll_tab"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="matrix"
android:src="@mipmap/slidebar"
android:contentDescription="slidebar"/> <android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_below="@id/cursor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:flipInterval="30"
android:persistentDrawingCache="animation" /> </RelativeLayout>

再来看布局的实现部分:

因为layout2和layout3里没什么东西,所以以Fragment1为例:

 package com.example.fragmentviewpager.fragmentviewpager;

 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.ArrayAdapter;
import android.widget.ListView; import java.util.ArrayList;
import java.util.List; /**
* Created by LT on 2015/7/29.
*/
public class Fragment1 extends Fragment { private ListView listView; public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// TODO Auto-generated method stub
View view= inflater.inflate(R.layout.layout1, container, false);
listView = (ListView)view.findViewById(R.id.lv);
ArrayAdapter<String> arrayAdapter = new ArrayAdapter<String>(getActivity(),
android.R.layout.simple_list_item_1,getData());
listView.setAdapter(arrayAdapter); return view;
} private List<String> getData(){
List<String> data = new ArrayList<String>();
for(int i = 0;i <20;i++) {
data.add(i+"");
}
return data;
}
}

此处给layout1里的listview添加了20项,名字分别是1——20,用的适配器是ArrayAdapter。

考虑到有三个fragment存在(Fragment1,Fragment2,Fragment3),为了方便viewpager管理,我们自定义一个适配器,继承自FragmentPagerAdapter:

FPAdapter.java:

 package com.example.fragmentviewpager.fragmentviewpager;

 import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter; import java.util.List; /**
* Created by LT on 2015/7/29.
*/
public class FPAdapter extends FragmentPagerAdapter {
private List<Fragment> pFragment; public FPAdapter(FragmentManager fragmentManager,List<Fragment> fragments){
super(fragmentManager);
this.pFragment = fragments;
} @Override
public Fragment getItem(int arg0){
return pFragment.get(arg0);
} @Override
public int getCount(){
return pFragment.size();
}
}

FragmentPagerAdapter只需要重写

public Fragment getItem(int arg0)

public int getCount()

这两个函数即可。

与之对应的适配器初始化和设定代码如下:

 //构造适配器
fragments=new ArrayList<Fragment>();
fragments.add(new Fragment1());
fragments.add(new Fragment2());
fragments.add(new Fragment3());
FPAdapter adapter = new FPAdapter(getSupportFragmentManager(), fragments); //设定适配器
vp = (ViewPager)findViewById(R.id.viewpager);
vp.setAdapter(adapter);

和上一篇《Android ViewPager再探:增加滑动指示条》的代码相结合,最终的MainActivity如下:

 package com.example.fragmentviewpager.fragmentviewpager;

 import android.graphics.BitmapFactory;
import android.graphics.Matrix;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.util.DisplayMetrics;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.TextView; import java.util.ArrayList;
import java.util.List; public class MainActivity extends FragmentActivity {
private TextView first,second,third; /*滑动条相关定义*/
private ImageView cursor;
private int bmp_width = 0;//游标宽度
private int offset = 0;//游标图片偏移量
private int number = 0;//当前页面编号
private ViewPager vp;
private List<Fragment> fragments; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); //TAB初始化
first = (TextView)findViewById(R.id.tv_first);
second = (TextView)findViewById(R.id.tv_second);
third = (TextView)findViewById(R.id.tv_third); //构造适配器
fragments=new ArrayList<Fragment>();
fragments.add(new Fragment1());
fragments.add(new Fragment2());
fragments.add(new Fragment3());
FPAdapter adapter = new FPAdapter(getSupportFragmentManager(), fragments); //初始化指示器位置
initCursorPos(); //设定适配器
vp = (ViewPager)findViewById(R.id.viewpager);
vp.setAdapter(adapter); vp.setCurrentItem(0);//设置当前页
vp.setOnPageChangeListener(new NewPageChangeListener());//监听页面改变 /*Tab页面监听*/
first.setOnClickListener(new TabOnClickListener(0));
second.setOnClickListener(new TabOnClickListener(1));
third.setOnClickListener(new TabOnClickListener(2));
} //初始化指示器位置
public void initCursorPos() {
// 初始化动画
cursor = (ImageView) findViewById(R.id.cursor);
bmp_width = BitmapFactory.decodeResource(getResources(), R.mipmap.slidebar)
.getWidth();// 获取图片宽度 DisplayMetrics dm = new DisplayMetrics();//初始化DisplayMetrics对象
getWindowManager().getDefaultDisplay().getMetrics(dm);//将当前窗口信息放入DisplayMetrics类中
int s_width = dm.widthPixels;// 获取分辨率宽度 offset = (s_width / fragments.size() - bmp_width) / 2;// 计算偏移量(保证滑动条在该tab下正中间) Matrix matrix = new Matrix();
matrix.postTranslate(offset, 0);
cursor.setImageMatrix(matrix);// 设置动画初始位置
} //页面改变监听器
public class NewPageChangeListener implements ViewPager.OnPageChangeListener { int one = offset * 2 + bmp_width;// 页卡1 -> 页卡2 偏移量
int two = one * 2;// 页卡1 -> 页卡3 偏移量 @Override
public void onPageSelected(int arg0) {
Animation animation = null;
switch (arg0) {
case 0:
if (number == 1) {
animation = new TranslateAnimation(one, 0, 0, 0);
} else if (number == 2) {
animation = new TranslateAnimation(two, 0, 0, 0);
}
break;
case 1:
if (number == 0) {
animation = new TranslateAnimation(offset, one, 0, 0);
} else if (number == 2) {
animation = new TranslateAnimation(two, one, 0, 0);
}
break;
case 2:
if (number == 0) {
animation = new TranslateAnimation(offset, two, 0, 0);
} else if (number == 1) {
animation = new TranslateAnimation(one, two, 0, 0);
}
break;
}
number = arg0;
animation.setFillAfter(true);// True:图片停在动画结束位置
animation.setDuration(300);
cursor.startAnimation(animation);
} @Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
} @Override
public void onPageScrollStateChanged(int arg0) {
}
} /*Tab页面点击监听*/
public class TabOnClickListener implements View.OnClickListener{
private int num = 0; public TabOnClickListener(int index){
num = index;
} @Override
public void onClick(View v){
vp.setCurrentItem(num);
}
} }