android开发步步为营之53:viewpager+fragment构造可左右滑动标签页效果

可滑动的标签页是很多应用的用来做外面框架的，比如微信，微博等等，我这里实现的效果是下面是主标签页，然后中间一个的标签页里面又可以继续左右滑动，等于是标签页内部再嵌套标签页，用到的组件主要有：用于滑动效果的viewpager,以及用于实现每个tab页功能的fragment，先看看效果图：



第一步：设计页面activity_learn_fragment.xml

<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"
>

<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />

<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/layout_tab"
android:layout_alignParentBottom="true"
android:orientation="horizontal" >

<TextView
android:id="@+id/tv_earn"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_weight="1"
android:background="#996699"
android:gravity="center"
android:text="Earn"
android:textColor="#222222" />

<TextView
android:id="@+id/tv_withdraw"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_weight="1"
android:background="#999999"
android:gravity="center"
android:text="Withdraw"
android:textColor="#222222" />

<TextView
android:id="@+id/tv_me"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_weight="1"
android:background="#999999"
android:gravity="center"
android:text="Me"
android:textColor="#222222" />
</LinearLayout>

</RelativeLayout>

第二步：编写Activity，FragmentTestActivity.java

/**
*
*/
package com.figo.study;

import java.util.ArrayList;

import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.Log;
import android.view.View;
import android.view.Window;
import android.widget.TextView;

import com.figo.study.adapter.TabFragmentPagerAdapter;
import com.figo.study.fragment.EarnFragment;
import com.figo.study.fragment.ExampleFragment;
import com.figo.study.fragment.MeFragment;
import com.figo.study.fragment.WithdrawFragment;

/**
* @author figo
*
*/
public class FragmentTestActivity extends FragmentActivity {
private TextView tv_earn, tv_withdraw, tv_me;
private ArrayList<Fragment> fragmentsList;
private ViewPager vp;
private int currIndex;

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_learn_fragment);
initViews();
initViewPager();

}

private void initViews() {
tv_earn = (TextView) findViewById(R.id.tv_earn);
tv_withdraw = (TextView) findViewById(R.id.tv_withdraw);
tv_me = (TextView) findViewById(R.id.tv_me);

tv_earn.setOnClickListener(new TabOnClickListener(0));
tv_withdraw.setOnClickListener(new TabOnClickListener(1));
tv_me.setOnClickListener(new TabOnClickListener(2));

}

private void initViewPager() {
try {
vp = (ViewPager) findViewById(R.id.viewPager);
fragmentsList = new ArrayList<Fragment>();
Bundle bundle = new Bundle();
Fragment meFragment = MeFragment.newInstance(
FragmentTestActivity.this, bundle);
Fragment earnFragment = EarnFragment.newInstance(
FragmentTestActivity.this, bundle);
Fragment withdrawFragment = WithdrawFragment.newInstance(
FragmentTestActivity.this, bundle);

fragmentsList.add(earnFragment);
fragmentsList.add(withdrawFragment);
fragmentsList.add(meFragment);

vp.setAdapter(new TabFragmentPagerAdapter(
getSupportFragmentManager(), fragmentsList));
vp.setCurrentItem(0);
vp.setOnPageChangeListener(new MyOnPageChangeListener());
} catch (Exception e) {
Log.e("initViewPager", "initViewPager", e);
}

}

public class TabOnClickListener implements View.OnClickListener {
private int index = 0;

public TabOnClickListener(int i) {
index = i;
}

@Override
public void onClick(View v) {
vp.setCurrentItem(index);
}
};

public class MyOnPageChangeListener implements OnPageChangeListener {

@Override
public void onPageSelected(int arg0) {

switch (arg0) {
case 0:
tv_earn.setTextColor(Color.BLUE);
tv_withdraw.setTextColor(Color.BLACK);
tv_me.setTextColor(Color.BLACK);
tv_earn.setBackgroundColor(0xFF996699);
tv_withdraw.setBackgroundColor(0xFF999999);
tv_me.setBackgroundColor(0xFF999999);

break;
case 1:
tv_earn.setTextColor(Color.BLACK);
tv_withdraw.setTextColor(Color.BLUE);
tv_me.setTextColor(Color.BLACK);
tv_earn.setBackgroundColor(0xFF999999);
tv_withdraw.setBackgroundColor(0xFF996699);
tv_me.setBackgroundColor(0xFF999999);
break;
case 2:
tv_earn.setTextColor(Color.BLACK);
tv_withdraw.setTextColor(Color.BLACK);
tv_me.setTextColor(Color.BLUE);
tv_earn.setBackgroundColor(0xFF999999);
tv_withdraw.setBackgroundColor(0xFF999999);
tv_me.setBackgroundColor(0xFF996699);
break;

}
currIndex = arg0;

}

@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}

@Override
public void onPageScrollStateChanged(int arg0) {
}
}
}

第三步：编写各个标签页的fragment

1、MeFragment.java

/**
*
*/
package com.figo.study.fragment;

import com.figo.study.R;
import com.figo.study.R.id;
import com.figo.study.R.layout;

import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;

/**
* @author figo
*
*/
public class MeFragment extends android.support.v4.app.Fragment {

static Context mContext;
Bundle meBundle;
public static MeFragment newInstance(Context context,Bundle bundle) {
mContext=context;
MeFragment newFragment = new MeFragment();
newFragment.setArguments(bundle);
return newFragment;

}
@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_me, container, false);
TextView tv_me = (TextView) view.findViewById(R.id.tv_me);
tv_me.setText("天生我材必有用！");
Button btn_me = (Button) view.findViewById(R.id.btn_me);
btn_me.setOnClickListener(new OnClickListener() {

@Override
public void onClick(View v) {
// TODO Auto-generated method stub
//					getArguments()
Toast.makeText(mContext, "earn more money!", Toast.LENGTH_LONG).show();
}
});
return view;

}

}

2、EarnFragment.java

/**
*
*/
package com.figo.study.fragment;

import com.figo.study.R;
import com.figo.study.R.id;
import com.figo.study.R.layout;

import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;

/**
* @author figo
*
*/
public class EarnFragment extends android.support.v4.app.Fragment {

static Context mContext;
Bundle meBundle;
public static EarnFragment newInstance(Context context,Bundle bundle) {
mContext=context;
EarnFragment newFragment = new EarnFragment();
newFragment.setArguments(bundle);
return newFragment;

}
@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_earn, container, false);
TextView tv_me = (TextView) view.findViewById(R.id.tv_earn);
tv_me.setText("赚钱是上层建筑的基础！");
Button btn_earn = (Button) view.findViewById(R.id.btn_earn);
btn_earn.setOnClickListener(new OnClickListener() {

@Override
public void onClick(View v) {
// TODO Auto-generated method stub
//					getArguments()
Toast.makeText(mContext, "earn more money!", Toast.LENGTH_LONG).show();
}
});
return view;

}

}

3、WithdrawFragment .java

/**
*
*/
package com.figo.study.fragment;

import java.util.ArrayList;
import java.util.List;

import com.figo.study.R;
import com.figo.study.R.id;
import com.figo.study.R.layout;
import com.figo.study.adapter.ViewPagerAdapter;

import android.content.Context;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.TranslateAnimation;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;

/**
* @author figo
*
*/
public class WithdrawFragment extends android.support.v4.app.Fragment {

static Context mContext;
Bundle meBundle;
private List<View> lists = new ArrayList<View>();
private TextView tv_goods;
private TextView tv_card;
private TextView tv_lottery;
int white = Color.WHITE;
int blue = Color.BLUE;
ViewPager viewPager;

public static WithdrawFragment newInstance(Context context, Bundle bundle) {
mContext = context;
WithdrawFragment newFragment = new WithdrawFragment();
newFragment.setArguments(bundle);
return newFragment;

}

@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_withdraw, container,
false);
initViewPager(view);
// TextView tv_me = (TextView) view.findViewById(R.id.tv_withdraw);
// tv_me.setText("人生要学会享受！");
// Button btn_withdraw = (Button) view.findViewById(R.id.btn_withdraw);
// btn_withdraw.setOnClickListener(new OnClickListener() {
//
// @Override
// public void onClick(View v) {
// // TODO Auto-generated method stub
// // getArguments()
// Toast.makeText(mContext, "earn more money!",
// Toast.LENGTH_LONG).show();
// }
// });

return view;

}

private void initViewPager(View view) {
lists.add(getActivity().getLayoutInflater().inflate(R.layout.layout1,
null));
lists.add(getActivity().getLayoutInflater().inflate(R.layout.layout2,
null));
lists.add(getActivity().getLayoutInflater().inflate(R.layout.layout3,
null));
tv_goods = (TextView) view.findViewById(R.id.tv_goods);
tv_card = (TextView) view.findViewById(R.id.tv_card);
tv_lottery = (TextView) view.findViewById(R.id.tv_lottery);

ViewPagerAdapter myAdapter = new ViewPagerAdapter(lists);

viewPager = (ViewPager) view.findViewById(R.id.vpType);
viewPager.setAdapter(myAdapter);
viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

@Override
public void onPageSelected(int arg0) { // 当滑动式，顶部的imageView是通过animation缓慢的滑动
// TODO Auto-generated method stub
switch (arg0) {
case 0:
// textView1.setBackgroundColor(0x3A6A00);
// textView2.setBackgroundColor(0x999999);
// textView3.setBackgroundColor(0x999999);
tv_goods.setBackgroundColor(0xFF996699);
tv_card.setBackgroundColor(0xFF999999);
tv_lottery.setBackgroundColor(0xFF999999);
tv_goods.setTextColor(blue);
tv_card.setTextColor(white);
tv_lottery.setTextColor(white);

break;
case 1:
tv_goods.setBackgroundColor(0xFF999999);
tv_card.setBackgroundColor(0xFF996699);
tv_lottery.setBackgroundColor(0xFF999999);
tv_goods.setTextColor(white);
tv_card.setTextColor(blue);
tv_lottery.setTextColor(white);

break;
case 2:
tv_goods.setBackgroundColor(0xFF999999);
tv_card.setBackgroundColor(0xFF999999);
tv_lottery.setBackgroundColor(0xFF996699);
tv_goods.setTextColor(white);
tv_card.setTextColor(white);
tv_lottery.setTextColor(blue);

}

}

@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
// TODO Auto-generated method stub

}

@Override
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub

}
});

tv_goods.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
viewPager.setCurrentItem(0);
}
});

tv_card.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
viewPager.setCurrentItem(1);
}
});

tv_lottery.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
viewPager.setCurrentItem(2);
}
});
}

}