android viewpager+fragment做主界面(超容易理解的demo！) · 【Android 應用】護眼提醒

筆者之前已經寫過了關于viewpager的demo，但是之前是通過將Activity轉化為view，然后放入viewpager實現的，具體操作中有時候還是不如fragment方便。之前的viewpager demo的地址：[http://blog.csdn.net/double2hao/article/details/50183567](http://blog.csdn.net/double2hao/article/details/50183567) 主要實現的功能與之前的一樣：**（源碼在文章結尾）** 1、滑動的同時改變標題欄 2、點擊標題欄的同時滑動 3、點擊fragment中的button能有toast提示效果： ![](https://box.kancloud.cn/2016-03-01_56d551f087a18.jpg) ??![](https://box.kancloud.cn/2016-03-01_56d551f09b90b.jpg) 主要實現過程： 1、設置好4個fragment，讓他們關聯其布局文件。 2、為viewpager設置FragmentPagerAdapter。在其中放入每個item中的fragment以及總共的item的個數。 3、為viewpgaer綁定時間監聽器，設置在item變化的時候會調用的方法，也就是在滑動的時候會發生的事件。（在demo中item改變時會改變底部button中的字體的顏色） 4、為底部button實現點擊事件，事實上就是在點擊之后改變viewpgaer中的item，一行解決。 5、為fragment中的button設置toast的點擊效果。 **主要文件：** ![](https://box.kancloud.cn/2016-03-01_56d551f0b2eb9.jpg) **MainActiviy** ~~~ package com.example.viewpager_fragment; 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.FragmentPagerAdapter; import android.support.v4.view.ViewPager; import android.view.View; import android.widget.Button; public class MainActivity extends FragmentActivity implements View.OnClickListener { private ViewPager viewPager; private Button one; private Button two; private Button three; private Button four; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //初始化ViewPager InitViewPager(); //初始化布局 InitView(); } private void InitViewPager() { //獲取ViewPager //創建一個FragmentPagerAdapter對象，該對象負責為ViewPager提供多個Fragment viewPager = (ViewPager) findViewById(R.id.pager); FragmentPagerAdapter pagerAdapter = new FragmentPagerAdapter( getSupportFragmentManager()) { //獲取第position位置的Fragment @Override public Fragment getItem(int position) { Fragment fragment = null; switch (position) { case 0: fragment = new OneFragment(); break; case 1: fragment = new TwoFragment(); break; case 2: fragment = new ThreeFragment(); break; case 3: fragment = new FourFragment(); break; } return fragment; } //該方法的返回值i表明該Adapter總共包括多少個Fragment @Override public int getCount() { return 4; } }; //為ViewPager組件設置FragmentPagerAdapter viewPager.setAdapter(pagerAdapter); //為viewpager組件綁定時間監聽器 viewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() { //當ViewPager顯示的Fragment發生改變時激發該方法 @Override public void onPageSelected(int position) { switch (position) { //如果是點擊的第一個button，那么就讓第一個button的字體變為藍色 //其他的button的字體的顏色變為黑色 case 0: one.setTextColor(Color.BLUE); two.setTextColor(Color.BLACK); three.setTextColor(Color.BLACK); four.setTextColor(Color.BLACK); break; case 1: one.setTextColor(Color.BLACK); two.setTextColor(Color.BLUE); three.setTextColor(Color.BLACK); four.setTextColor(Color.BLACK); break; case 2: one.setTextColor(Color.BLACK); two.setTextColor(Color.BLACK); three.setTextColor(Color.BLUE); four.setTextColor(Color.BLACK); break; case 3: one.setTextColor(Color.BLACK); two.setTextColor(Color.BLACK); three.setTextColor(Color.BLACK); four.setTextColor(Color.BLUE); break; } super.onPageSelected(position); } }); } private void InitView() { one = (Button) findViewById(R.id.bt_one); two = (Button) findViewById(R.id.bt_two); three = (Button) findViewById(R.id.bt_three); four = (Button) findViewById(R.id.bt_four); //設置點擊監聽 one.setOnClickListener(this); two.setOnClickListener(this); three.setOnClickListener(this); four.setOnClickListener(this); //將button中字體的顏色先按照點擊第一個button的效果初始化 one.setTextColor(Color.BLUE); two.setTextColor(Color.BLACK); three.setTextColor(Color.BLACK); four.setTextColor(Color.BLACK); } //點擊主界面上面的button后，將viewpager中的fragment跳轉到對應的item @Override public void onClick(View v) { switch (v.getId()) { case R.id.bt_one: viewPager.setCurrentItem(0); break; case R.id.bt_two: viewPager.setCurrentItem(1); break; case R.id.bt_three: viewPager.setCurrentItem(2); break; case R.id.bt_four: viewPager.setCurrentItem(3); break; } } } ~~~ OneFragment:（由于4個fragment的布局都一樣，在此就只放上第一個了） ~~~ package com.example.viewpager_fragment; /** * Created by 佳佳 on 2015/12/31. */ import android.os.Bundle; import android.support.annotation.Nullable; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.Button; import android.widget.Toast; public class OneFragment extends Fragment { @Override public void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); } @Override @Nullable public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.one, container, false);//關聯布局文件 //設置在OneFragment中的點擊效果 Button bt_frg_one = (Button) rootView.findViewById(R.id.bt_frg_one); bt_frg_one.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Toast.makeText(getActivity().getApplicationContext(), "這是第一頁按鈕的點擊效果", Toast.LENGTH_SHORT).show(); } }); return rootView; } @Override public void onActivityCreated(@Nullable Bundle savedInstanceState) { super.onActivityCreated(savedInstanceState); } } ~~~ **activity_main:** **** ~~~ <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v4.view.ViewPager android:id="@+id/pager" android:layout_width="match_parent" android:layout_height="match_parent"></android.support.v4.view.ViewPager> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true"> <Button android:id="@+id/bt_one" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="one" android:textSize="20sp" /> <Button android:id="@+id/bt_two" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="two" android:textSize="20sp" /> <Button android:id="@+id/bt_three" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="three" android:textSize="20sp" /> <Button android:id="@+id/bt_four" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="four" android:textSize="20sp" /> </LinearLayout> </RelativeLayout> ~~~ **one:** **** ~~~ <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <Button android:id="@+id/bt_frg_one" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="one" android:textSize="30dp" /> </LinearLayout> ~~~ 最后附上源碼地址：[http://download.csdn.net/detail/double2hao/9387550](http://download.csdn.net/detail/double2hao/9387550)