ViewPager + Fragment實現滑動標籤頁

時間 2019-11-15

標籤 viewpager fragment 實現滑動標籤欄目 Android 简体版

原文原文鏈接

ViewPager 結合Fragment實現一個Activity裏包含多個可滑動的標籤頁，每一個標籤頁能夠有獨立的佈局及響應。html

activity_main.xmljava

[html] view plain copyandroid

<?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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="@+id/tv_guid1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:gravity="center"
android:text="特性1"
android:textSize="18sp"/>
<TextView
android:id="@+id/tv_guid2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:gravity="center"
android:text="特性2"
android:textSize="18sp"/>
<TextView
android:id="@+id/tv_guid3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:gravity="center"
android:text="特性3 "
android:textSize="18sp"/>
<TextView
android:id="@+id/tv_guid4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:gravity="center"
android:text="特性4"
android:textSize="18sp"/>
</LinearLayout>
<ImageView
android:id="@+id/cursor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="matrix"
android:src="@drawable/cursor"/>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:flipInterval="30"
android:persistentDrawingCache="animation"/>
</LinearLayout>

MainActivity.Javaapp

[java] view plain copyide

package com.example.viewpagernfragment;
import java.util.ArrayList;
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.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.DisplayMetrics;
import android.view.Menu;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
public class MainActivity extends FragmentActivity {
private ViewPager mPager;
private ArrayList<Fragment> fragmentList;
private ImageView image;
private TextView view1, view2, view3, view4;
private int currIndex;//當前頁卡編號
private int bmpW;//橫線圖片寬度
private int offset;//圖片移動的偏移量
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
InitTextView();
InitImage();
InitViewPager();
}
/*
* 初始化標籤名
*/
public void InitTextView(){
view1 = (TextView)findViewById(R.id.tv_guid1);
view2 = (TextView)findViewById(R.id.tv_guid2);
view3 = (TextView)findViewById(R.id.tv_guid3);
view4 = (TextView)findViewById(R.id.tv_guid4);
view1.setOnClickListener(new txListener(0));
view2.setOnClickListener(new txListener(1));
view3.setOnClickListener(new txListener(2));
view4.setOnClickListener(new txListener(3));
}
public class txListener implements View.OnClickListener{
private int index=0;
public txListener(int i) {
index =i;
}
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
mPager.setCurrentItem(index);
}
}
/*
* 初始化圖片的位移像素
*/
public void InitImage(){
image = (ImageView)findViewById(R.id.cursor);
bmpW = BitmapFactory.decodeResource(getResources(), R.drawable.cursor).getWidth();
DisplayMetrics dm = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);
int screenW = dm.widthPixels;
offset = (screenW/4 - bmpW)/2;
//imgageview設置平移，使下劃線平移到初始位置（平移一個offset）
Matrix matrix = new Matrix();
matrix.postTranslate(offset, 0);
image.setImageMatrix(matrix);
}
/*
* 初始化ViewPager
*/
public void InitViewPager(){
mPager = (ViewPager)findViewById(R.id.viewpager);
fragmentList = new ArrayList<Fragment>();
Fragment btFragment= new ButtonFragment();
Fragment secondFragment = TestFragment.newInstance("this is second fragment");
Fragment thirdFragment = TestFragment.newInstance("this is third fragment");
Fragment fourthFragment = TestFragment.newInstance("this is fourth fragment");
fragmentList.add(btFragment);
fragmentList.add(secondFragment);
fragmentList.add(thirdFragment);
fragmentList.add(fourthFragment);
//給ViewPager設置適配器
mPager.setAdapter(new MyFragmentPagerAdapter(getSupportFragmentManager(), fragmentList));
mPager.setCurrentItem(0);//設置當前顯示標籤頁爲第一頁
mPager.setOnPageChangeListener(new MyOnPageChangeListener());//頁面變化時的監聽器
}
public class MyOnPageChangeListener implements OnPageChangeListener{
private int one = offset *2 +bmpW;//兩個相鄰頁面的偏移量
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
// TODO Auto-generated method stub
}
@Override
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub
}
@Override
public void onPageSelected(int arg0) {
// TODO Auto-generated method stub
Animation animation = new TranslateAnimation(currIndex*one,arg0*one,0,0);//平移動畫
currIndex = arg0;
animation.setFillAfter(true);//動畫終止時停留在最後一幀，否則會回到沒有執行前的狀態
animation.setDuration(200);//動畫持續時間0.2秒
image.startAnimation(animation);//是用ImageView來顯示動畫的
int i = currIndex + 1;
Toast.makeText(MainActivity.this, "您選擇了第"+i+"個頁卡", Toast.LENGTH_SHORT).show();
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
}

谷歌官方認爲，ViewPager應該和Fragment一塊兒使用時，此時ViewPager的適配器是FragmentPagerAdapter，當你實現一個FragmentPagerAdapter,你必須至少覆蓋如下方法:佈局

getCount()post

getItem()動畫

若是ViewPager沒有和Fragment一塊兒，ViewPager的適配器是PagerAdapter，它是基類提供適配器來填充頁面ViewPager內部，當你實現一個PagerAdapter,你必須至少覆蓋如下方法:ui

[java] view plain copythis

package com.example.viewpagernfragment;
import java.util.ArrayList;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
public class MyFragmentPagerAdapter extends FragmentPagerAdapter{
ArrayList<Fragment> list;
public MyFragmentPagerAdapter(FragmentManager fm,ArrayList<Fragment> list) {
super(fm);
this.list = list;
}
@Override
public int getCount() {
return list.size();
}
@Override
public Fragment getItem(int arg0) {
return list.get(arg0);
}
}

[java] view plain copy

package com.example.viewpagernfragment;
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.Button;
import android.widget.Toast;
public class ButtonFragment extends Fragment{
Button myButton;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.guide_1, container, false);//關聯佈局文件
myButton = (Button)rootView.findViewById(R.id.mybutton);//根據rootView找到button
//設置按鍵監聽事件
myButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
Toast.makeText(ButtonFragment.this.getActivity(), "button is click!", Toast.LENGTH_SHORT).show();
}
});
return rootView;
}
}

[java] view plain copy

package com.example.viewpagernfragment;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
public class TestFragment extends Fragment {
private static final String TAG = "TestFragment";
private String hello;// = "hello android";
private String defaultHello = "default value";
static TestFragment newInstance(String s) {
TestFragment newFragment = new TestFragment();
Bundle bundle = new Bundle();
bundle.putString("hello", s);
newFragment.setArguments(bundle);
//bundle還能夠在每一個標籤裏傳送數據
return newFragment;
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {
Log.d(TAG, "TestFragment-----onCreateView");
Bundle args = getArguments();
hello = args != null ? args.getString("hello") : defaultHello;
View view = inflater.inflate(R.layout.guide_2, container, false);
TextView viewhello = (TextView) view.findViewById(R.id.tv);
viewhello.setText(hello);
return view;
}
}