天天看點
傳回

android viewpager和fragment相結合，實作菜單的滑動效果

ViewPager是SDK自帶的可以控制界面滑動一個控件。現在可以上效果圖給大家看看。

android viewpager和fragment相結合，實作菜單的滑動效果
android viewpager和fragment相結合，實作菜單的滑動效果

效果就是如上圖一樣，可以左右滑動下面菜單欄可以改變顔色和微信有點相似。

  1 布局的介紹

<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:background="@color/yinbaise"
    android:orientation="vertical"
    tools:context=".HomePageMenu" >

    <android.support.v4.view.ViewPager
        android:id="@+id/vp_content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.40"
        android:background="#ffffff" >
    </android.support.v4.view.ViewPager>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/DarkGoldenrod1"
        >

        <TextView
            android:id="@+id/functionone"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="首頁"
            android:textSize="25dp"
            android:textColor="@color/black" />

        <TextView
            android:id="@+id/functiontow"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:textSize="25dp"
            android:text="功能1"
            android:textColor="@color/black" />

        <TextView
            android:id="@+id/functionthree"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="功能2"
            android:textSize="25dp"
            android:textColor="@color/black" />

        <TextView
            android:id="@+id/functionfour"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:textSize="25dp"
            android:text="功能3"
            android:textColor="@color/black" />
    </LinearLayout>

</LinearLayout>

這布局就很簡單了，一眼就可以看清楚， 不過需要注意的是在布局中添加ViewPage的時候，在eclipse中并沒又找到，可能是我版本的問題或者是其他願意，我是直接手打或者複制進布局中就可以了。

2 四個功能菜單對應了4個fragment和4個布局檔案

fragment的布局檔案簡單這裡就不給代碼了，隻是給出fragment中添加布局檔案的相關代碼，如下：

package com.menu.showfrag;

import com.example.viewpagedemo.R;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;


public class FunctionOne extends Fragment {

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		View view = View.inflate(getActivity(), R.layout.function1, null);
		return view;

	}

}

這裡的ViewPager滑動切換的是fragment，這樣就可以在fragment中去寫相關的邏輯代碼，邏輯很清楚友善。

3  mainactivity的布局已經給出現在來看，它的代碼：

package com.example.viewpagedemo;

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

import com.menu.showfrag.FunctionFour;
import com.menu.showfrag.FunctionOne;
import com.menu.showfrag.FunctionThree;
import com.menu.showfrag.FunctionTow;

import android.os.Bundle;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.TextView;

@SuppressLint("ResourceAsColor")
public class MainActivity extends FragmentActivity implements OnClickListener {
	// tyy 四個功能按鈕
	TextView function_one, function_tow, function_three, function_four;
	// tyy viewpager
	ViewPager viewpager;

	// tyy fragment 數組儲存fragment
	List<Fragment> fm_list;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		function_one = (TextView) findViewById(R.id.functionone);
		function_tow = (TextView) findViewById(R.id.functiontow);
		function_three = (TextView) findViewById(R.id.functionthree);
		function_four = (TextView) findViewById(R.id.functionfour);

		viewpager = (ViewPager) findViewById(R.id.vp_content);
		fm_list = new ArrayList<Fragment>();
		fm_list.add(new FunctionOne());
		fm_list.add(new FunctionTow());
		fm_list.add(new FunctionThree());
		fm_list.add(new FunctionFour());
		function_one.setOnClickListener(this);
		function_tow.setOnClickListener(this);
		function_three.setOnClickListener(this);
		function_four.setOnClickListener(this);
		viewpager.setAdapter(new MenuApaper(getSupportFragmentManager()));
		viewpager.setCurrentItem(0);// tyy 預設顯示第一個
		function_one.setBackgroundResource(R.color.Orange);
		// tyy 給viewpager添加監聽事件
		viewpager.setOnPageChangeListener(new OnPageChangeListener() {

			@Override
			public void onPageSelected(int arg0) {
				selectColor(arg0);
		
			}

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

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

	@SuppressLint("ResourceAsColor")
	@Override
	public void onClick(View v) {
		// TODO Auto-generated method stub
		switch (v.getId()) {
		case R.id.functionone:
			viewpager.setCurrentItem(0);
			break;
		case R.id.functiontow:
			viewpager.setCurrentItem(1);
			break;
		case R.id.functionthree:
			viewpager.setCurrentItem(2);
			break;
		case R.id.functionfour:
			viewpager.setCurrentItem(3);
			break;

		default:
			break;
		}
	}

	/**
	 * tyy 改變底部菜單顔色
	 * 
	 * @param i是fragment的index
	 */
	private void selectColor(int i) {
		// TODO Auto-generated method stub
		switch (i) {
		case 0:
			function_one.setBackgroundResource(R.color.Orange);
			function_tow.setBackgroundResource(R.color.DarkGoldenrod1);
			function_three.setBackgroundResource(R.color.DarkGoldenrod1);
			function_four.setBackgroundResource(R.color.DarkGoldenrod1);
			break;
		case 1:
			function_one.setBackgroundResource(R.color.DarkGoldenrod1);
			function_tow.setBackgroundResource(R.color.Orange);
			function_three.setBackgroundResource(R.color.DarkGoldenrod1);
			function_four.setBackgroundResource(R.color.DarkGoldenrod1);
			break;
		case 2:
			function_one.setBackgroundResource(R.color.DarkGoldenrod1);
			function_tow.setBackgroundResource(R.color.DarkGoldenrod1);
			function_three.setBackgroundResource(R.color.Orange);
			function_four.setBackgroundResource(R.color.DarkGoldenrod1);

			break;
		case 3:

			function_one.setBackgroundResource(R.color.DarkGoldenrod1);
			function_tow.setBackgroundResource(R.color.DarkGoldenrod1);
			function_three.setBackgroundResource(R.color.DarkGoldenrod1);
			function_four.setBackgroundResource(R.color.Orange);
			break;
		default:
			break;
		}
	}

	class MenuApaper extends FragmentPagerAdapter {

		public MenuApaper(FragmentManager fm) {
			super(fm);
		}

		@Override
		public Fragment getItem(int position) {
			// tyy 将fm_list中添加到了adapter中

			return fm_list.get(position);
		}

		@Override
		public int getCount() {
			// TODO Auto-generated method stub
			return fm_list.size();
		}
	}
}

這裡有幾點需要注意的是 

a.給ViewPager添加adapter：  viewpager.setAdapter(new MenuApaper(getSupportFragmentManager()));但是這裡的activity必須繼承FragmentActivity不然是找不到getSupportFragmentManager()這個方法的。

b.給ViewPager添加監聽事件，這樣可以來監聽滑動并且在相應的方法中處理事件。

附帶源碼：http://download.csdn.net/download/sky_918/9634600

android開發 android viewpager Fragment 仿微信 滑動效果
上一篇: 【FastDev4Android架構開發】AndroidAnnnotations注入架構介紹和Android Studios基本配置(七)
下一篇: Android 項目開發架構

繼續閱讀