viewpager + fragment實現滑動切換效果
阿新 • • 發佈：2018-11-04
先上一張效果圖（非動圖，但是可以實現滑動切換，點選下方按鈕，也可以進行切換）：
MainActivity之中的程式碼
public class Main2Activity extends AppCompatActivity implements View.OnClickListener{ private TextView title; private oneFragment oFragment; private twoFragment tFragment; private threeFragment thFragment; private fourFragment fFragment; private List<Fragment> mFragmentList = new ArrayList<Fragment>(); private FragmentAdapter mFragmentAdapter; private ViewPager vp; String[] titles = new String[]{"訊息", "聯絡人", "動態", "設定"}; private Button btn1,btn2,btn3,btn4; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); //去除工具欄 getSupportActionBar().hide(); setContentView(R.layout.activity_main2); initViews(); mFragmentAdapter = new FragmentAdapter(this.getSupportFragmentManager(), mFragmentList); //該方法用來設定當前顯示頁面左右兩邊各快取的頁面數。 // ViewPager的快取為4幀 vp.setOffscreenPageLimit(4); //該方法為ViewPager設定介面卡 vp.setAdapter(mFragmentAdapter); //該方法設定顯示item位置的介面。 // 初始設定ViewPager選中第一幀 vp.setCurrentItem(0); //ViewPager的監聽事件 vp.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { /*此方法在頁面被選中時呼叫*/ title.setText(titles[position]); changeTextColor(position); } @Override public void onPageScrollStateChanged(int state) { /*此方法是在狀態改變的時候呼叫，其中arg0這個引數有三種狀態（0，1，2）。 arg0 ==1的時辰默示正在滑動， arg0==2的時辰默示滑動完畢了， arg0==0的時辰默示什麼都沒做。*/ } }); } /** * 點選底部Text 動態修改ViewPager的內容 */ public void onClick(View v) { switch (v.getId()){ case R.id.bb1: vp.setCurrentItem(0,true); break; case R.id.bb2: vp.setCurrentItem(1,true); break; case R.id.bb3: vp.setCurrentItem(2,true); break; case R.id.bb4: vp.setCurrentItem(3,true); break; } } public class FragmentAdapter extends FragmentPagerAdapter { List<Fragment> fragmentList = new ArrayList<Fragment>(); public FragmentAdapter(FragmentManager fm, List<Fragment> fragmentList) { super(fm); this.fragmentList = fragmentList; } @Override public Fragment getItem(int position) { return fragmentList.get(position); } @Override public int getCount() { return fragmentList.size(); } } /** * 初始化佈局View */ private void initViews() { title = (TextView) findViewById(R.id.title); btn1 = findViewById(R.id.bb1); btn2 = findViewById(R.id.bb2); btn3 = findViewById(R.id.bb3); btn4 = findViewById(R.id.bb4); btn1.setOnClickListener(this); btn2.setOnClickListener(this); btn3.setOnClickListener(this); btn4.setOnClickListener(this); vp = (ViewPager) findViewById(R.id.mainViewPager); oFragment = new oneFragment(); tFragment = new twoFragment(); thFragment = new threeFragment(); fFragment = new fourFragment(); //給FragmentList新增資料 mFragmentList.add(oFragment); mFragmentList.add(tFragment); mFragmentList.add(thFragment); mFragmentList.add(fFragment); } /* *由ViewPager的滑動修改底部導航Text的顏色 */ private void changeTextColor(int position) { if (position == 0) { btn1.setBackgroundResource(R.drawable.xx); btn3.setBackgroundResource(R.drawable.dt1); btn2.setBackgroundResource(R.drawable.lxr1); btn4.setBackgroundResource(R.drawable.sz1); } else if (position == 1) { btn1.setBackgroundResource(R.drawable.xx1); btn3.setBackgroundResource(R.drawable.dt1); btn2.setBackgroundResource(R.drawable.lxr); btn4.setBackgroundResource(R.drawable.sz1); } else if (position == 2) { btn1.setBackgroundResource(R.drawable.xx1); btn3.setBackgroundResource(R.drawable.dt); btn2.setBackgroundResource(R.drawable.lxr1); btn4.setBackgroundResource(R.drawable.sz1); } else if (position == 3) { btn1.setBackgroundResource(R.drawable.xx1); btn3.setBackgroundResource(R.drawable.dt1); btn2.setBackgroundResource(R.drawable.lxr1); btn4.setBackgroundResource(R.drawable.sz); } } }
1.先對onCreat中的函式進行詳細解釋：
//去除工具欄
getSupportActionBar().hide();這個函式可以隱藏介面中的最上方藍色標題框！
2. 呼叫了initViews();
這個函式是對佈局檔案進行初始化的一個函式，函式體在Activity的後面，如下：
3./** * 初始化佈局View */ private void initViews() { title = (TextView) findViewById(R.id.title); btn1 = findViewById(R.id.bb1); btn2 = findViewById(R.id.bb2); btn3 = findViewById(R.id.bb3); btn4 = findViewById(R.id.bb4); btn1.setOnClickListener(this); btn2.setOnClickListener(this); btn3.setOnClickListener(this); btn4.setOnClickListener(this); vp = (ViewPager) findViewById(R.id.mainViewPager); oFragment = new oneFragment(); tFragment = new twoFragment(); thFragment = new threeFragment(); fFragment = new fourFragment(); //給FragmentList新增資料 mFragmentList.add(oFragment); mFragmentList.add(tFragment); mFragmentList.add(thFragment); mFragmentList.add(fFragment); }
mFragmentAdapter = new FragmentAdapter(this.getSupportFragmentManager(), mFragmentList);為mFragmentAdapter初始化。
this.getSupportFragmentManager()是為了獲取能管理和當前Activity有關聯的Fragment的FragmentManagervp.setOffscreenPageLimit(4);//該方法用來設定當前顯示頁面左右兩邊各快取的頁面數。 // ViewPager的快取為4幀 vp.setOffscreenPageLimit(4);
5.
//該方法為ViewPager設定介面卡
vp.setAdapter(mFragmentAdapter);6.
//該方法為ViewPager設定介面卡
vp.setAdapter(mFragmentAdapter);其實Activity裡面都是有註釋的。Activity裡面出現了4個Fragment，程式碼如下（oneFragment.class）：
public class oneFragment extends Fragment {
public oneFragment() {
// 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.layout_fragment, container, false);
}
}
layout_fragment.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" android:gravity="center"> <TextView android:id="@+id/tx1" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="我是訊息" android:textSize="40dp" android:gravity="center"/> </LinearLayout>
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"
android:orientation="vertical"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#ddd">
<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="訊息"
android:textColor="@android:color/black"
android:textSize="25sp"/>
</RelativeLayout>
<android.support.v4.view.ViewPager
android:id="@+id/mainViewPager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="@drawable/bg_rb"
android:paddingBottom="1dp" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1">
<Button
android:id="@+id/bb1"
android:layout_width="60dp"
android:layout_height="60dp"
android:background="@drawable/xx"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="訊息"
android:textSize="35sp"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1">
<Button
android:id="@+id/bb2"
android:layout_width="60dp"
android:layout_height="60dp"
android:background="@drawable/lxr1"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="聯絡人"
android:textSize="35sp"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1">
<Button
android:id="@+id/bb3"
android:layout_width="60dp"
android:layout_height="60dp"
android:background="@drawable/dt1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="動態"
android:textSize="35sp"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1">
<Button
android:id="@+id/bb4"
android:layout_width="60dp"
android:layout_height="60dp"
android:background="@drawable/sz1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="設定"
android:textSize="35sp"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>ok,最基本最核心的東西都已經貼上去了！good luck!