導航欄和ViewPager和Fragment
阿新 • • 發佈:2019-01-22
最近專案有用到很多基礎的東西,所以記錄下來以作總結,再者就是為了各位有 需要的朋友,可以參考下來。
實現的效果就是上面有一個導航欄,是三個Button按鈕組成,導航欄和ViewPager是相互繫結的
首先設定佈局檔案,
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context="com.viewpagefragment.MainActivity"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <Button android:id="@+id/bt1" android:textColor="#f00" android:text="頁卡1" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <Button android:id="@+id/bt2" android:text="頁卡2" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <Button android:id="@+id/bt3" android:text="頁卡3" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout> <android.support.v4.view.ViewPager android:id="@+id/vp" android:layout_width="match_parent" android:layout_height="match_parent"> </android.support.v4.view.ViewPager> </LinearLayout>
2.佈局檔案之後就是設定ViewPager中要包含的Fragment
fragment1
這裡我就暫時先拿一個fragment舉例,其他的複製就行,記得要更改佈局檔案 R.layout.fragment1
public class Fragment1 extends Fragment { @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment1, container, false); return view; } }
<?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"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="頁面1" /> </LinearLayout>
我這裡的需求是三個fragment頁面,所以說fragment頁面完成之後就要做ViewPager的適配將fragment新增進去
public class MyFragmentAdapter extends FragmentPagerAdapter {
public MyFragmentAdapter(FragmentManager fm) {
super(fm);
}
/**
* Return the Fragment associated with a specified position.
*
* @param position 根據得到的position進行判斷,如果是0就顯示Fragment1的頁面,一次累計
*/
@Override
public Fragment getItem(int position) {
Fragment fragment=null;
switch (position){
case 0:
fragment=new Fragment1();
break;
case 1:
fragment=new Fragment2();
break;
case 2:
fragment=new Fragment3();
break;
}
return fragment;
}
/**
* Return the number of views available.
*顯示fragment頁面的個數
*/
@Override
public int getCount() {
return 3;
}
}
在Mainactivity中呼叫就是
public class MainActivity extends FragmentActivity implements View.OnClickListener {
/**
* 頁卡1
*/
private Button mBt1;
/**
* 頁卡2
*/
private Button mBt2;
/**
* 頁卡3
*/
private Button mBt3;
private ViewPager mVp;
private ArrayList<Button> btList;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//拿到控制元件id
initView();
//ViewPager適配
initData();
}
private void initData() {
//拿到ViewPager介面卡的類
MyFragmentAdapter myFragmentAdapter = new MyFragmentAdapter(getSupportFragmentManager());
//ViewPager適配
mVp.setAdapter(myFragmentAdapter);
mVp.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
//通過ViewPager的這個方法判斷導航欄中Button按鈕顯示的狀態,
@Override
public void onPageSelected(int position) {
for (int i=0;i<btList.size();i++){
if (i==position){
btList.get(i).setTextColor(Color.RED);
}else {
btList.get(i).setTextColor(Color.BLACK);
}
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
private void initView() {
mBt1 = (Button) findViewById(R.id.bt1);
mBt1.setOnClickListener(this);
mBt2 = (Button) findViewById(R.id.bt2);
mBt2.setOnClickListener(this);
mBt3 = (Button) findViewById(R.id.bt3);
mBt3.setOnClickListener(this);
mVp = (ViewPager) findViewById(R.id.vp);
//建立存放控制元件的集合,我這裡是Button型別的,之後將導航欄上的控制元件新增進去
btList = new ArrayList<>();
btList.add(mBt1);
btList.add(mBt2);
btList.add(mBt3);
}
//根據Button按鈕的點選事件來判斷顯示ViewPager中的那個頁面
@Override
public void onClick(View v) {
switch (v.getId()) {
default:
break;
case R.id.bt1:
mVp.setCurrentItem(0);
break;
case R.id.bt2:
mVp.setCurrentItem(1);
break;
case R.id.bt3:
mVp.setCurrentItem(2);
break;
}
}