Android:Fragment 与 ViewPager的配合使用

自从大屏手机的引入，Fragment这个碎片化的控件的使用变得必不可少，然而我之前做了一个用fragment的app以后发现，只有点击换页这样超级不人性化而且还很落后

所以我找了一下网上的Fragment和ViewPager两者结合的代码，然而并没有，那我只好自己摸索了，最后当然是做出来了（哇咔咔！）废话不多说了，直接上代码

首先，我们需要主页面的布局如下：

（其中的图标是我从网上随意找的，大家也可以上网找）

<RelativeLayout 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"
tools:context="com.example.android_fragmenttest1.MainActivity" >

<RelativeLayout
android:id="@+id/actionbar"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#999999" >

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="这不是微信"
android:textColor="#FFFFFF"
android:textSize="22sp" />
</RelativeLayout>

<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/line"
android:layout_below="@id/actionbar"
android:orientation="vertical" >
</android.support.v4.view.ViewPager>

<ImageView
android:id="@+id/line"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_above="@+id/bottomlist"
android:background="#444444" />

<LinearLayout
android:id="@+id/bottomlist"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_alignParentBottom="true"
android:orientation="horizontal" >

<LinearLayout
android:id="@+id/llchat"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="vertical" >

<ImageView
android:id="@+id/chatting"
android:layout_width="50dp"
android:layout_height="0dp"
android:layout_gravity="center_horizontal"
android:layout_weight="4"
android:contentDescription="@string/app_name"
android:src="@drawable/chat" />

<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="center_horizontal"
android:layout_weight="1"
android:text="聊天" />
</LinearLayout>

<LinearLayout
android:id="@+id/llbook"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="vertical" >

<ImageView
android:id="@+id/book"
android:layout_width="50dp"
android:layout_height="0dp"
android:layout_gravity="center_horizontal"
android:layout_weight="4"
android:contentDescription="@string/app_name"
android:src="@drawable/contacts" />

<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="center_horizontal"
android:layout_weight="1"
android:text="通讯录" />
</LinearLayout>

<LinearLayout
android:id="@+id/llfriendship"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="vertical" >

<ImageView
android:id="@+id/friendship"
android:layout_width="50dp"
android:layout_height="0dp"
android:layout_gravity="center_horizontal"
android:layout_weight="4"
android:contentDescription="@string/app_name"
android:src="@drawable/friendship" />

<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="center_horizontal"
android:layout_weight="1"
android:text="朋友圈" />
</LinearLayout>

<LinearLayout
android:id="@+id/llsetting"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="vertical" >

<ImageView
android:id="@+id/setting"
android:layout_width="50dp"
android:layout_height="0dp"
android:layout_gravity="center_horizontal"
android:layout_weight="4"
android:contentDescription="@string/app_name"
android:src="@drawable/setting" />

<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="center_horizontal"
android:layout_weight="1"
android:text="设置" />
</LinearLayout>
</LinearLayout>

</RelativeLayout>

然后就是各个Fragment的布局了

（然而我其实比较懒，虽然写了四个布局文件，但其实区别就只有text和layout的背景颜色而已）

（所以这里就给出一个，其余的自己改改就好了）

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#788778" >

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#788778" >

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="这不是朋友圈"
android:textSize="40sp"
android:textColor="#FFFFFF" />

</RelativeLayout>

</RelativeLayout>

然后是Fragment的类了

（注意重写onCreateView这个方法就好了）

（需要注意的是导包的问题，到的是support包）

package com.example.android_fragmenttest1;

import android.support.v4.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class friendshipFragment extends Fragment {

public friendshipFragment() {
// TODO Auto-generated constructor stub
}

@Override
public void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// TODO Auto-generated method stub
View view = inflater.inflate(R.layout.fragment_friendship, null);
return view;
}

}

按照这个把其中的 R.layout.fragment_friendship 改成其他的布局的id就好了

然后重点就是MainActivity这个类了

b339

import java.util.ArrayList;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;
import android.view.ViewGroup;
import android.view.View.OnClickListener;
import android.view.Window;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.Toast;
import android.graphics.Color;
import android.os.Bundle;

public class MainActivity extends FragmentActivity implements OnClickListener,
OnPageChangeListener {

/** ViewPager的控件 */
private ViewPager viewpager;
/** 装载着Fragment的list对象 */
private ArrayList<Fragment> list = new ArrayList<Fragment>();
/** 装载着LinearLayout的list对象 */
private ArrayList<LinearLayout> lllist = new ArrayList<LinearLayout>();
/** 聊天的image */
private ImageView chat;
/** 聊天的book */
private ImageView book;
/** 聊天的friendship */
private ImageView friendship;
/** 聊天的setting */
private ImageView setting;
/** 用于记录上一个被改变颜色的LinearLayout */
private LinearLayout keeper = null;
/** 按键聊天所在版块 */
private LinearLayout llchat;
/** 按键通讯录所在版块 */
private LinearLayout llbook;
/** 按键朋友圈所在版块 */
private LinearLayout llfriendship;
/** 按键设置所在版块 */
private LinearLayout llsetting;
/** 颜色的代码 */
private int colorchange = Color.parseColor("#666666");
/** 颜色的代码 */
private int colorreturn = Color.parseColor("#FFFFFF");

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// 去除actionbar
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);

// 列表项的添加和viewpager的设置
listedit();

// 设置按钮背景颜色
settingBackgroundColor();

}

/** 设置按钮背景颜色 */
private void settingBackgroundColor() {
// TODO Auto-generated method stub

// 查找资源
chat = (ImageView) findViewById(R.id.chatting);
book = (ImageView) findViewById(R.id.book);
friendship = (ImageView) findViewById(R.id.friendship);
setting = (ImageView) findViewById(R.id.setting);
llchat = (LinearLayout) findViewById(R.id.llchat);
llbook = (LinearLayout) findViewById(R.id.llbook);
llfriendship = (LinearLayout) findViewById(R.id.llfriendship);
llsetting = (LinearLayout) findViewById(R.id.llsetting);

lllist.add(llchat);
lllist.add(llbook);
lllist.add(llfriendship);
lllist.add(llsetting);

// 设置按键监听
chat.setOnClickListener(this);
book.setOnClickListener(this);
friendship.setOnClickListener(this);
setting.setOnClickListener(this);
keeper = llchat;
keeper.setBackgroundColor(colorchange);

}

/** 列表项的添加和viewpager的设置 */
private void listedit() {
// TODO Auto-generated method stub

list.add(new chatFragment());
list.add(new bookFragment());
list.add(new friendshipFragment());
list.add(new settingFragment());

viewpager = (ViewPager) findViewById(R.id.viewpager);
viewpager.setAdapter(new MyAdapter(getSupportFragmentManager()));
viewpager.setOnPageChangeListener(this);

}

/** 按键被点击后的操作 */
private void clickAction(int i, LinearLayout layout) {
// TODO Auto-generated method stub.

// viewpager.getCurrentItem();
keeper.setBackgroundColor(colorreturn);
keeper = layout;
keeper.setBackgroundColor(colorchange);
viewpager.setCurrentItem(i);

}

//当滑动时底下的图标的背景色的变化
private void clickAction2(LinearLayout layout) {
// TODO Auto-generated method stub.

keeper.setBackgroundColor(colorreturn);
keeper = layout;
keeper.setBackgroundColor(colorchange);

}

//监听当相应按键被点击时所需要的相应的操作
@Override
public void onClick(View v) {
// TODO Auto-generated method stub

switch (v.getId()) {
case R.id.chatting:
clickAction(0, lllist.get(0));

break;
case R.id.book:
clickAction(1, lllist.get(1));
break;

case R.id.friendship:
clickAction(2, lllist.get(2));

break;

case R.id.setting:
clickAction(3, lllist.get(3));

break;

default:
break;
}

}

class MyAdapter extends FragmentPagerAdapter {

public MyAdapter(android.support.v4.app.FragmentManager fm) {
super(fm);
// TODO Auto-generated constructor stub
}

@Override
public Fragment getItem(int arg0) {
// TODO Auto-generated method stub
return list.get(arg0);
}

@Override
public int getCount() {
// TODO Auto-generated method stub
return list.size();
}

}

// 点击时调用
@Override
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub

}

// 滑动时调用
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {

}

@Override
public void onPageSelected(int arg0) {
// TODO Auto-generated method stub
clickAction2(lllist.get(arg0));

}

}

到这里就ok了，这里面就是ViewPager和Fragment结合以后写出来的能滑动的Fragment app了