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

最新推荐文章于 2024-04-19 15:54:57 发布

志飞

最新推荐文章于 2024-04-19 15:54:57 发布

阅读量1.3k

点赞数 1

分类专栏： android开发步步为营文章标签： android viewpager fragment

本文链接：https://blog.csdn.net/figo0423/article/details/45226649

版权

android开发步步为营专栏收录该内容

135 篇文章 5 订阅

订阅专栏

可滑动的标签页是很多应用的用来做外面框架的，比如微信，微博等等，我这里实现的效果是下面是主标签页，然后中间一个的标签页里面又可以继续左右滑动，等于是标签页内部再嵌套标签页，用到的组件主要有：用于滑动效果的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);
			}
		});
	}

}

志飞

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
android开发步步为营之53:viewpager+fragment构造可左右滑动标签页效果

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

扫一扫