这是在Fragment中写viewpager,在这个Fragment中嵌入三个Fragment,用viewpager实现在这个Fragment中三个Fragment的滑动替换。在写viewpager之前看过很多网上的资料,csdn和github上都有很多关于viewpager的文章写得都很好,我将他们的方法与自己的程序综合了一下,写成了这个Fragment中的viewpager。
界面实现效果图:
1.首先这个Fragment的程序:LoginFragment.java
public class LoginFragment extends Fragment {
Resources resources;
private ViewPager mPager;
private ArrayList<Fragment> fragmentsList;
private ImageView ivBottomLine;
private TextView tvTab1, tvTab2, tvTab3;
private int currIndex = 0;
private int bottomLineWidth;
private int offset = 0;
private int position_one;
private int position_two;
public final static int num = 3;
Fragment login1;
Fragment login2;
Fragment login3;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// TODO Auto-generated method stub
View view = inflater.inflate(R.layout.fragment_login, container, false);
this.resources = getResources();
mPager = (ViewPager) view.findViewById(R.id.vPager);
login1 = new LoginFragment1();
login2 = new LoginFragment2();
login3 = new LoginFragment3();
tvTab1 = (TextView) view.findViewById(R.id.tv_tab_1);
tvTab2 = (TextView) view.findViewById(R.id.tv_tab_2);
tvTab3 = (TextView) view.findViewById(R.id.tv_tab_3);
initWidth(view);
initTextView(view);
initViewPager(view);
TranslateAnimation animation = new TranslateAnimation(offset,
position_two, 0, 0);
animation.setFillAfter(true);
animation.setDuration(30);
ivBottomLine.startAnimation(animation);
return view;
}
public void initTextView(View parentView) {
// TODO Auto-generated method stub
tvTab1.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
mPager.setCurrentItem(0);
}
});
tvTab2.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
mPager.setCurrentItem(1);
}
});
tvTab3.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
mPager.setCurrentItem(2);
}
});
}
private void initViewPager(View parentView) {
fragmentsList = new ArrayList<Fragment>();
fragmentsList.add(login1);
fragmentsList.add(login2);
fragmentsList.add(login3);
mPager.setAdapter(new MyFragmentPagerAdapter(getChildFragmentManager(),
fragmentsList));
mPager.setOnPageChangeListener(new MyOnPageChangeListener());
mPager.setCurrentItem(2);
}
private void initWidth(View parentView) {
ivBottomLine = (ImageView) parentView.findViewById(R.id.iv_bottom_line);
bottomLineWidth = ivBottomLine.getLayoutParams().width;
DisplayMetrics dm = new DisplayMetrics();
getActivity().getWindowManager().getDefaultDisplay().getMetrics(dm);
int screenW = dm.widthPixels;
offset = (int) ((screenW / num - bottomLineWidth) / 2);
int avg = (int) (screenW / num);
position_one = avg + offset - 8;
position_two = 2 * avg + offset - 18;
}
public class MyOnPageChangeListener implements OnPageChangeListener {
@Override
public void onPageSelected(int arg0) {
Animation animation = null;
switch (arg0) {
case 0:
if (currIndex == 1) {
animation = new TranslateAnimation(position_one, offset, 0,
0);
}
if (currIndex == 2) {
animation = new TranslateAnimation(position_two, offset, 0,
0);
}
break;
case 1:
if (currIndex == 0) {
animation = new TranslateAnimation(offset, position_one, 0,
0);
}
if (currIndex == 2) {
animation = new TranslateAnimation(position_two,
position_one, 0, 0);
}
break;
case 2:
if (currIndex == 1) {
animation = new TranslateAnimation(position_one,
position_two, 0, 0);
}
if (currIndex == 0) {
animation = new TranslateAnimation(offset, position_two, 0,
0);
}
break;
default:
break;
}
currIndex = arg0;
animation.setFillAfter(true);
animation.setDuration(30);
ivBottomLine.startAnimation(animation);
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
}
}
这个Fragment的布局:fragment_login.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#d0d0d0"
android:orientation="vertical" >
<LinearLayout
android:id="@+id/ll_top_viewer"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#CC0000"
android:orientation="horizontal" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="7"
android:gravity="center"
android:text="我"
android:textColor="#ffffff"
android:textSize="24sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"
android:background="#ffffff"
android:orientation="horizontal" >
<ImageView
android:id="@+id/img_myview"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:src="@drawable/myview" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:orientation="vertical">
<TextView
android:id="@+id/tv_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:textColor="#000000"
android:textSize="20sp" />
<TextView
android:id="@+id/tv_email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:textColor="#000000"
android:textSize="13sp" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center" >
<LinearLayout
android:id="@+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="45dp"
android:background="#ffffff"
android:gravity="center"
android:paddingTop="10dp" >
<TextView
android:id="@+id/tv_tab_1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1.0"
android:gravity="center"
android:text="我发表的"
android:textColor="#000000"
android:textSize="18sp" />
<ImageView android:layout_width="1dp"
android:layout_height="20dp"
android:layout_gravity="center"
android:src="@drawable/dividegrey"/>
<TextView
android:id="@+id/tv_tab_2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1.0"
android:gravity="center"
android:text="关于软件"
android:textColor="#000000"
android:textSize="18sp" />
<ImageView android:layout_width="1dp"
android:layout_height="20dp"
android:layout_gravity="center"
android:src="@drawable/dividegrey"/>
<TextView
android:id="@+id/tv_tab_3"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1.0"
android:gravity="center"
android:text="登录软件"
android:textColor="#000000"
android:textSize="18sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:orientation="vertical"
android:paddingBottom="3dp" >
<ImageView
android:id="@+id/iv_bottom_line"
android:layout_width="100dp"
android:layout_height="2dp"
android:scaleType="matrix"
android:src="@drawable/below" />
</LinearLayout>
</LinearLayout>
<!-- android:scaleType="matrix" -->
<android.support.v4.view.ViewPager
android:id="@+id/vPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_gravity="center"
android:layout_weight="1.0"
android:background="#ffffff"
android:flipInterval="30"
android:persistentDrawingCache="animation" />
</LinearLayout>
2.这格Fragment中viewpager切换的又有三个Fragment,这仨个Fragment中的方法需要自己写,在这里我的例子用来特别说明在这三个的其中一个Fragment的点击事件使界面滑动到另一个Fragment,
①viewpager的”登陆软件“界面LoginFragment3.java的程序(在里面通过点击登录按钮,界面滑动到”我发表的“界面LoginFragment1.java)
public class LoginFragment3 extends Fragment {
// 声明登录和注册按钮控件对象
private Button btn_login;
private Activity activity;
public LoginFragment3() {
}
@Override
public void onAttach(Activity activity) {
super.onAttach(activity);
this.activity = activity;
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View v = inflater.inflate(R.layout.in_no, container, false);
// 获取控件对象
// 获取登录按钮控件对象
btn_login = (Button) v.findViewById(R.id.btn_login);
return v;
}
@Override
public void onActivityCreated(Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
// 登录按钮的操作
btn_login.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// ☆解决viewPager中Fragment之间的跳转
ViewPager vg = (ViewPager) getParentFragment().getActivity()
.findViewById(R.id.vPager);
vg.setCurrentItem(0);
}
});
}
}
LoginFragment3的布局文件:in_no.xml
<LinearLayout 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:orientation="vertical" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_marginTop="30dp"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_gravity="center"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:orientation="horizontal" >
<FrameLayout
android:layout_width="220dp"
android:layout_height="wrap_content"
android:background="@drawable/log_btn1">
<EditText
android:id="@+id/login_user"
android:layout_width="220dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="5dp"
android:background="@android:color/transparent"
android:textCursorDrawable="@null"
android:gravity="left"
android:textColor="#000000"
android:textSize="18sp" />
</FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/log_btn2">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="账号"
android:textSize="20sp"
android:textStyle="bold"
android:textColor="#000000" />
</FrameLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_gravity="center"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="10dp" >
<FrameLayout
android:layout_width="220dp"
android:layout_height="wrap_content"
android:background="@drawable/log_btn1">
<EditText
android:id="@+id/login_pass"
android:layout_width="220dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="5dp"
android:background="@android:color/transparent"
android:textCursorDrawable="@null"
android:gravity="left"
android:textColor="#000000"
android:textSize="18sp" />
</FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/log_btn2">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="密码"
android:textSize="20sp"
android:textStyle="bold"
android:textColor="#000000" />
</FrameLayout>
</LinearLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="10dp">
<Button
android:id="@+id/btn_login"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="@drawable/lg_btn"/>
<TextView
android:layout_width="match_parent"
android:layout_height="40dp"
android:text="登 录"
android:gravity="center"
android:textColor="#ffffff"
android:textStyle="bold"
android:textSize="16sp"/>
</FrameLayout>
<LinearLayout
android:layout_marginTop="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center|left"
android:layout_marginLeft="10dp"
android:gravity="center"
android:textSize="12sp"
android:text="非会员请点击" />
<TextView
android:id="@+id/tv_reg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center|left"
android:layout_marginLeft="5dp"
android:gravity="center"
android:text="注册"
android:textColor="#00CCCC"
android:textSize="15sp" />
</LinearLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>
②LoginFragment1.java的程序
public class LoginFragment1 extends Fragment {
private TextView tv_none;
private Activity activity;
@Override
public void onAttach(Activity activity) {
super.onAttach(activity);
this.activity = activity;
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// TODO Auto-generated method stub
return inflater.inflate(R.layout.my_show_none, container, false);
}
}
LoginFragment1的布局文件:my_show_none.xml
<LinearLayout 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">
<TextView
android:layout_marginLeft="10dp"
android:layout_marginTop="20dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="未登录,请登录后查看"
android:gravity="center"
android:textColor="#000000"
android:textStyle="bold"/>
</LinearLayout>
③LoginFragment2.java的程序
public class LoginFragment2 extends Fragment {
private Activity activity;
@Override
public void onAttach(Activity activity) {
super.onAttach(activity);
this.activity = activity;
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// TODO Auto-generated method stub
View v = inflater.inflate(R.layout.about_soft, container, false);
return v;
}
}
LoginFragment2的布局文件:about_soft.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="330dp"
android:orientation="vertical" >
</LinearLayout>