在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="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
style="@style/MyToolbar"
app:popupTheme="@style/AppTheme.PopupOverlay"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true">
<TextView
style="@style/MytoolbarTitle"
android:text="聊天"
android:id="@+id/tb_title"/>
<ImageButton
style="@style/MytoolbarButton"
android:id="@+id/tb_bt"
android:src="@drawable/iab_popup_ic_retry_pressed"
android:onClick="refresh"/>
</android.support.v7.widget.Toolbar>
</LinearLayout>
<LinearLayout
android:id="@+id/menu_top"
android:layout_width="match_parent"
android:layout_height="55dp"
android:background="@color/mytoolbarcolor"
android:gravity="center"
android:layout_alignParentStart="true">
<LinearLayout
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center">
<ImageView
android:id="@+id/friend_realtime_info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/transparent"
android:src="@drawable/gnb_chats_bg"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="1">
<ImageView
android:id="@+id/friend_name_group_list"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/transparent"
android:src="@drawable/gnb_friends_bg" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="@+id/line_layout"
android:layout_width="match_parent"
android:layout_height="3dp"
android:background="@color/mytoolbarcolor">
<ImageView
android:id="@+id/tabline"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="@color/white" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/gray">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#e9e8e8"/>
</LinearLayout>
</LinearLayout>
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