ViewPager+Fragment的使用（頁卡式切換下方帶滾動條）
阿新 • • 發佈：2019-01-23
ViewPager+Fragment的用法在android開發中比較常見，最近剛好要實現這個功能，寫個筆記記錄下來，以供參考。
1.activity_main.xml
activity_main.xml檔案中包含了3個TextView頁面標籤，分別代表著3個不同的頁面，下面有個ImageView標籤是能在每個標籤下滑動的滾動條。
2.MainActivity.java<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="40dp" android:orientation="horizontal" > <TextView android:id="@+id/tv_message" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_weight="1.0" android:gravity="center" android:text="訊息" android:textSize="18sp" /> <TextView android:id="@+id/tv_contact" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_weight="1.0" android:gravity="center" android:text="聯絡人" android:textSize="18sp" /> <TextView android:id="@+id/tv_dynimic" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_weight="1.0" android:gravity="center" android:text="動態" android:textSize="18sp" /> </LinearLayout> <ImageView android:id="@+id/cursor" android:layout_width="wrap_content" android:layout_height="1dp" android:scaleType="fitXY" android:src="@drawable/ic_blue_bg_i" /> <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是主程式部分。
3.MyFragmentPagerAdapter.javapackage com.example.viewpagerfragmenttest; import java.util.ArrayList; import android.graphics.BitmapFactory; import android.graphics.Color; 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.View; import android.view.animation.Animation; import android.view.animation.TranslateAnimation; import android.widget.ImageView; import android.widget.LinearLayout; import android.widget.TextView; /** * 程式的主Activity * @author xielip 2015-9-21 * */ public class MainActivity extends FragmentActivity { private ViewPager mPager; private ImageView mTabLineIv; private TextView tvMessage, tvCantact, tvDinamic; private ArrayList<Fragment> fragmentList; private int currIndex;// 當前選項卡編號 private int bmpW;// 選項卡下方指示器的寬度 private int screenWidth; // 螢幕的寬度 private int offset;// 圖片移動的偏移量 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); InitTextView(); InitImage(); initTabLineWidth(); InitViewPager(); } public void InitTextView() { tvMessage = (TextView) findViewById(R.id.tv_message); tvCantact = (TextView) findViewById(R.id.tv_contact); tvDinamic = (TextView) findViewById(R.id.tv_dynimic); // 為3個選項卡繫結監聽事件，引數就代表哪個選項卡 tvMessage.setOnClickListener(new tvOnclickListener(0)); tvCantact.setOnClickListener(new tvOnclickListener(1)); tvDinamic.setOnClickListener(new tvOnclickListener(2)); } /** * 選項卡的點選事件,tab切換 * @author xieli * */ public class tvOnclickListener implements View.OnClickListener { private int index = 0; public tvOnclickListener(int i) { index = i; } @Override public void onClick(View v) { // 設定viewpager當前的頁面 mPager.setCurrentItem(index); } } /** * 初始化圖片的位移畫素,例如：有3個tab，頁面就滑動總共3個位置 */ public void InitImage() { mTabLineIv = (ImageView) findViewById(R.id.cursor); bmpW = BitmapFactory.decodeResource(getResources(), R.drawable.ic_blue_bg_i).getWidth(); DisplayMetrics dm = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics(dm); int screenW = dm.widthPixels; offset = (screenW / 3 - bmpW) / 2; // 3，代表有3個選項卡，滑動時，下方指示器一共有3個位置 // imgageview設定平移，使下劃線平移到初始位置（平移一個offset） Matrix matrix = new Matrix(); matrix.postTranslate(offset, 0); mTabLineIv.setImageMatrix(matrix); } /** * 設定滑動條的寬度為螢幕的1/3(根據Tab的個數而定) */ private void initTabLineWidth() { DisplayMetrics dpMetrics = new DisplayMetrics(); getWindow().getWindowManager().getDefaultDisplay().getMetrics(dpMetrics); screenWidth = dpMetrics.widthPixels; LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) mTabLineIv.getLayoutParams(); lp.width = screenWidth / 3; mTabLineIv.setLayoutParams(lp); } /** * 初始化ViewPager */ @SuppressWarnings("deprecation") public void InitViewPager() { mPager = (ViewPager) findViewById(R.id.viewpager); fragmentList = new ArrayList<Fragment>(); Fragment messageFragment = new MessageFragment(); Fragment contactFragment = new ContactFragment(); Fragment dynamicFragment = new DynamicFragment(); // Fragment secondFragment = TestFragment.newInstance("this is second fragment"); // Fragment thirdFragment = TestFragment.newInstance("this is third fragment"); fragmentList.add(messageFragment); fragmentList.add(contactFragment); fragmentList.add(dynamicFragment); // 給ViewPager設定介面卡 mPager.setAdapter(new MyFragmentPagerAdapter(getSupportFragmentManager(), fragmentList)); mPager.setCurrentItem(0);// 設定當前顯示標籤頁為第一頁 mPager.setOnPageChangeListener(new MyOnPageChangeListener());// 頁面變化時的監聽器 } /** * viewpager滑動時的監聽器 * @author xieli * */ 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 position) { Animation animation = new TranslateAnimation(currIndex * one, position * one, 0, 0);// 平移動畫 currIndex = position; animation.setFillAfter(true);// 動畫終止時停留在最後一幀，不然會回到沒有執行前的狀態 animation.setDuration(200);// 動畫持續時間0.2秒 mTabLineIv.startAnimation(animation);// 是用ImageView來顯示動畫的 // int i = currIndex + 1; reSetTextViewColor(); switch (position) { case 0: break; case 1: break; case 2: break; default: break; } } } public void reSetTextViewColor(){ tvMessage.setTextColor(Color.BLACK); tvCantact.setTextColor(Color.BLACK); tvDinamic.setTextColor(Color.BLACK); } }
例項化Fragment的介面卡。
4.MessageFragment.javapackage com.example.viewpagerfragmenttest; import java.util.ArrayList; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentStatePagerAdapter; public class MyFragmentPagerAdapter extends FragmentStatePagerAdapter { 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 position) { return list.get(position); } }
3個Fragment頁面中的一個，其他2個Fragment程式碼一樣。
package com.example.viewpagerfragmenttest;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class MessageFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.fragment_message, container, false);
return rootView;
}
}
5.fragment_message.xml
MessageFragment 的檢視。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="訊息" />
</RelativeLayout>總體來說，使用起來還是比較簡單的，開發中也很常見。
原始碼連線：http://download.csdn.net/detail/u011387921/9140217