ViewPager+Fragment（滑動+點選）
阿新 • • 發佈：2018-12-26
在viewpager內包含了多個fragment，也就是我們說的滑動的頁面，這裡我只用了兩個頁面的滑動，借用一張大神的介面分析圖。
一、佈局檔案
1、main_common_layout.xml 這是一個頂部選單欄
<?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"
android:layout_width 2、myfragment_activiyt.xml 是MyFragmentActivity的佈局檔案
<?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:fitsSystemWindows="true"
android:orientation="vertical">
<include layout="@layout/main_common_layout"/>
<android.support.v4.view.ViewPager
android:id="@+id/main_fragment_vp"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
3、兩個Fragment內容一樣，就一個TextView
<?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:id="@+id/msg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white" />
</LinearLayout>二、Java程式碼
1、MFragmentActivity.java
package com.example.administrator.wechat.activity;
import android.content.ActivityNotFoundException;
...
import butterknife.Bind;
import butterknife.ButterKnife;
public class MyFragmentActivity extends Netcheck_Activity {
@Bind(R.id.tb_title)
TextView tb_title;
@Bind(R.id.tb_bt)
ImageButton tb_button;
@Bind(R.id.friend_realtime_info)
ImageView friend_realtime_info;
@Bind(R.id.friend_name_group_list)
ImageView friend_name_group_list;
@Bind(R.id.tabline)
ImageView tabline;
@Bind(R.id.main_fragment_vp)
ViewPager viewPager;// 宣告一個viewpager物件
private List<Fragment> frag_list;// 宣告一個list集合存放Fragment（資料來源）
private int tabLineLength;// 1/3螢幕寬
private int currentPage = 0;// 初始化當前頁為0（第一頁）
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.myfragment_activity);
ButterKnife.bind(this); //註解，用的是ButterKnife包
// 初始化滑動條1/2
initTabLine();
// 初始化介面
initView();
//單擊事件
initListener();
}
private void initTabLine() {
// 得到顯示屏寬度（網上一堆方法，這裡我是直接呼叫的） ,tabline為1/2螢幕寬度
tabLineLength = MyApplication.screenWidth / 2;
// 控制元件引數
ViewGroup.LayoutParams lp = tabline.getLayoutParams();
lp.width = tabLineLength;
tabline.setLayoutParams(lp);
}
//單擊事件監聽
private void initListener(){
//再加按鈕，只需要add,並改initTabLine中的數字即可
list_imgview = new ArrayList<>();
list_imgview.add(friend_realtime_info);
list_imgview.add(friend_name_group_list);
for (int i= 0;i< list_imgview.size();i++){
final int finalI = i;
list_imgview.get(i).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
viewPager.setCurrentItem(finalI);
}
});
}
}
private void initView() {
// 設定資料來源
MainFragment fragment1 = new MainFragment();
FriendGroupFragment fragment2 = new FriendGroupFragment();
// 例項化物件
frag_list = new ArrayList<Fragment>();
frag_list.add(fragment1);
frag_list.add(fragment2);
// 設定介面卡
FragmentPagerAdapter adapter = new FragmentPagerAdapter(
getSupportFragmentManager()) {
@Override
public int getCount() {
return frag_list.size();
}
@Override
public Fragment getItem(int arg0) {
return frag_list.get(arg0);
}
};
// 繫結介面卡
viewPager.setAdapter(adapter);
viewPager.setCurrentItem(0);
// 設定滑動監聽
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageSelected(int position) {
// 當頁面被選擇時，先講2個imageview的圖示初始化
friend_realtime_info.setImageResource(R.drawable.gnb_ic_chats_normal);
friend_name_group_list.setImageResource(R.drawable.gnb_ic_friends_normal);
// 再改變當前選擇頁（position）對應的圖示和textview
switch (position) {
case 0:
friend_realtime_info.setImageResource(R.drawable.gnb_ic_chats_selected);
tb_title.setText("聊天");
break;
case 1:
friend_name_group_list.setImageResource(R.drawable.gnb_ic_friends_selected);
tb_title.setText("好友");
break;
}
currentPage = position;
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
//arg0在第一頁到第二頁的過程中curentPage=0，arg0=0，最後到達第二頁curentPage=1，arg=1，中間過程全為0
// arg1是個偏移值
// 取得該控制元件的例項
LinearLayout.LayoutParams ll = (android.widget.LinearLayout.LayoutParams) tabline
.getLayoutParams();
if (currentPage == 0 && arg0 == 0) { // 0->1移動(第一頁到第二頁)
tabline.setLayoutParams(ll);
}
@Override
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub
}
});
}
}
2、fragment1.java （第二個省略）
public class FriendGroupFragment extends Fragment {
private TextView tview;
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.friendgroup,container,false);
tview= view.findViewById(R.id.tv);
tview.setText("這是第一個");
return view;
}
}
三、需要注意的問題
1、由於xml我是直接複製的，導致在兩個fragment的佈局檔案以及選單欄檔案main_common_layout.xml中有這麼一條語句：
android:fitsSystemWindows="true"
這句話直接導致我的viewpager與上面的選單欄中間隔了一段空白距離，找了好久原來是它的問題。fitsSystemWindows如果為true，就會呼叫view的padding屬性來給SystemWindow留出空間。
2、其他錯誤
報錯：*Attempt to invoke virtual method ‘boolean java.lang.String.
equals(java.lang.Object)’ on a null object reference*
原因： xml檔案中View寫成了view