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);
			}
		});
	}

}
时间： 2024-10-22 05:32:41

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

Android 开发第三弹：自定义左右菜单（滑动动画+蒙版效果）

下面的截图--哎,因为1080P在Windows 10上虽然适配了,但大部分软件并没有跟上,比如某个录制GIF的软件,所以这里有一定的偏移导致画面不完整,但效果大概就是这么一个效果了. MainUI.java 首先需要这么一个类,在这里一些UI的滑动呀之类的都会定义.首先吧,定义好这些变量,当然了,实际开发过程中肯定需要哪一个就添加上哪一个的. private Context context; // 上下文 private FrameLayout leftMenu; // 左边部分 privat

android控件篇：ViewPager+Fragment+GridView的使用（与AndroidQuery框架结合）

最近看了一个AndroidQuery的框架,里面的Demo,有个界面,让博主很喜欢.左右滑动十分顺畅,手感很好,于是拿来和大家分享一下.先看一下效果图: 从图中可以看出,上面的布局是一个Layout里面嵌套有个ViewPager,ViewPager中包含着Fragment,Fragment的布局文件包含了一个简单的GridView,GridView的Item布局很简单,就是一个100*100大小的图片.好啦,先说这么多,然后咱们看代码吧. 最外层Activity的布局文件 <?xml versi

android项目剖解之ViewPager+Fragment 实现tabhost效果

项目中需要用到底栏导航栏,滑动或者点击会切换上面的视图,如图: 这个效果使用Viewpager+Fragmen实现是主流方案,加入你之前对fragment不太了解,可以先看android之Fragment(官网资料翻译) 整个文件如下: 好了废话少说,先上布局文件:main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://sche

22.Android 十分方便的滑动标签页

22.Android 十分方便的滑动标签页 Android 十分方便的滑动标签页 前言 EasySlidingTabs属性 EasySlidingTabs布局 FragmentPagerAdapter EasySlidingTabs设置Tab背景 Github传送门 效果图 前言 其实滑动标签页是很常见的,网上搜也是一大堆.但是好用.简单.少bug.可扩展的库实在不多.很多想在做滑动标签页的时候也是经常想到各种不靠谱的库,虽然不难,但是容易坑自己. 原三星底层App大神JiangEcho提供技术

android开发步步为营之71:CoordinatorLayout+AppBarLayout+RecyclerView+ViewPager打造可上下左右滑动的App主框架

在看过很多app之后,你会发现现在很多的app的主框架是可以上下左右滑动,左右滑动,我们自然会想到用viewpager,但是上下可以滑动,而且顶部广告或者背景划上去之后,还需要保留tab标签用什么来实现?查阅过很多资料,最终发现sdk里面android support v7有CoordinatorLayout+AppBarLayout+RecyclerView,两个组件组合可以支持上下滑动效果,另外CoordinatorLayout+AppBarLayout+NestedScrollView也可

Android Viewpager+Fragment实现滑动标签页

ViewPager 结合Fragment实现一个Activity里包含多个可滑动的标签页,每个标签页可以有独立的布局及响应. 主页布局 1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width="mat

Android UI设计框架[1]: ViewPager+Fragment实现底部图标文字的导航栏(IconTabPageIndicator)

版权声明: 本文参考“Android开发技巧——实现底部图标文字的导航栏”一文,地址为:http://blog.csdn.net/maosidiaoxian/article/details/38864679 基础知识: 1) Fragment是在Android 3.0(API 11)版本引入的,如果使用的是3.0之前的系统,需要先导入android-support-v4的jar包才能使用Fragment功能. 实现思路: 1) 先定义两个接口: IconPagerAdapter public i

Android ：ViewPager+Fragment 实现顶部导航滑动效果

我还不会gif 所以连图表动态 可以滑动的 仔细看底下有滑动条的这是寒假做的一个APP的基本框架 将真啊 虽然效果都做出来了可是学长给了源码啊 所以最近做第二遍!!希望每一个控件都可以实现啊 下面是viewpager+fragment的效果 同样我们先写布局文件 思路就是一个Viewpager适配了五个fragment 底下的选择框是RadioGroup 里面有五个radiobutton activity_main里面就是由这些部分组成的的 代码如下 activity_main: <Linear

android开发步步为营之34：四大组件之ContentProvider

ContentProvider,从字面意义上理解,内容提供者,这个类目的就是一个桥梁的作用,让一个应用的数据(SQLiteDatabase, SharedPreferences,Xml,Txt等数据),通过ContentProvider可以让其他的应用访问. 理论知识 (一).ContentProvider简介 当应用继承ContentProvider类,并重写该类用于提供数据和存储数据的方法,就可以向其他应用共享其数据.虽然使用其他方法也可以对外共享数据,但数据访问方式会因数据存储的方式而不同