Android教程網
設為首頁|加入收藏
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> 關於Android編程 >> android開發步步為營之53:viewpager+fragment構造可左右滑動標簽頁效果

android開發步步為營之53:viewpager+fragment構造可左右滑動標簽頁效果

編輯：關於Android編程

可滑動的標簽頁是很多應用的用來做外面框架的，比如微信，微博等等，我這裡實現的效果是下面是主標簽頁，然後中間一個的標簽頁裡面又可以繼續左右滑動，等於是標簽頁內部再嵌套標簽頁，用到的組件主要有：用於滑動效果的viewpager,以及用於實現每個tab頁功能的fragment，先看看效果圖：

\

第一步：設計頁面activity_learn_fragment.xml

 

 

 

 

第二步：編寫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 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();
			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 lists = new ArrayList();
	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. 下一頁:
關於Android編程
Android編程入門Android技術基礎Android資訊關於Android編程Android開發Android開發環境Android開發實例
相關文章
熱門文章
Android實現圖片上傳功能 小米2S技巧-小米2S兩種快捷截屏方法 Android 累計未讀通知的數量 android導入第三方jar包報錯 如何正確導入jar包 華為EMUI 5.0新系統怎麼樣 EMUI 5.0新系統什麼時候發布 AMS分析--基於深入理解android（3）
android - UI知識

前言對ios和android使用同一套ios的交互設計這種做法不置可否，
Android 網絡連接判斷並進行相關處理

獲取網絡信息需要在AndroidManifest.xml文件中加入相應的
Android曲線圖

效果如下圖：1. MainActivity.javapackage co
Android官方文檔之Calendar Provider

Calendar Provider是一個用於提供用戶標記在日歷上事件的數
閱讀排行版
Copyright © Android教程網 All Rights Reserved