android viewpager+fragment做主界面(超容易理解的demo！)

笔者之前已经写过了关于viewpager的demo，但是之前是通过将Activity转化为view，然后放入viewpager实现的，具体操作中有时候还是不如fragment方便。

之前的viewpager demo的地址：http://blog.csdn.net/double2hao/article/details/50183567

 

主要实现的功能与之前的一样：（源码在文章结尾）

 

1、滑动的同时改变标题栏

2、点击标题栏的同时滑动

3、点击fragment中的button能有toast提示

 

效果：

  

 

主要实现过程：

1、设置好4个fragment，让他们关联其布局文件。

2、为viewpager设置FragmentPagerAdapter。在其中放入每个item中的fragment以及总共的item的个数。

3、为viewpgaer绑定时间监听器，设置在item变化的时候会调用的方法，也就是在滑动的时候会发生的事件。（在demo中item改变时会改变底部button中的字体的颜色）

4、为底部button实现点击事件，事实上就是在点击之后改变viewpgaer中的item，一行解决。

5、为fragment中的button设置toast的点击效果。

 

主要文件：


 

 

MainActiviy

[java] view plain copy
 
  1. package com.example.viewpager_fragment;  
  2.   
  3. import android.graphics.Color;  
  4. import android.os.Bundle;  
  5. import android.support.v4.app.Fragment;  
  6. import android.support.v4.app.FragmentActivity;  
  7. import android.support.v4.app.FragmentPagerAdapter;  
  8. import android.support.v4.view.ViewPager;  
  9. import android.view.View;  
  10. import android.widget.Button;  
  11.   
  12. public class MainActivity extends FragmentActivity  
  13.         implements View.OnClickListener {  
  14.   
  15.     private ViewPager viewPager;  
  16.     private Button one;  
  17.     private Button two;  
  18.     private Button three;  
  19.     private Button four;  
  20.   
  21.     @Override  
  22.     protected void onCreate(Bundle savedInstanceState) {  
  23.         super.onCreate(savedInstanceState);  
  24.         setContentView(R.layout.activity_main);  
  25.   
  26.         //初始化ViewPager  
  27.         InitViewPager();  
  28.         //初始化布局  
  29.         InitView();  
  30.   
  31.     }  
  32.   
  33.   
  34.     private void InitViewPager() {  
  35.         //获取ViewPager  
  36.         //创建一个FragmentPagerAdapter对象，该对象负责为ViewPager提供多个Fragment  
  37.         viewPager = (ViewPager) findViewById(R.id.pager);  
  38.         FragmentPagerAdapter pagerAdapter = new FragmentPagerAdapter(  
  39.                 getSupportFragmentManager()) {  
  40.   
  41.             //获取第position位置的Fragment  
  42.             @Override  
  43.             public Fragment getItem(int position) {  
  44.                 Fragment fragment = null;  
  45.                 switch (position) {  
  46.                     case 0:  
  47.                         fragment = new OneFragment();  
  48.                         break;  
  49.                     case 1:  
  50.                         fragment = new TwoFragment();  
  51.                         break;  
  52.                     case 2:  
  53.                         fragment = new ThreeFragment();  
  54.                         break;  
  55.                     case 3:  
  56.                         fragment = new FourFragment();  
  57.                         break;  
  58.                 }  
  59.   
  60.                 return fragment;  
  61.             }  
  62.   
  63.             //该方法的返回值i表明该Adapter总共包括多少个Fragment  
  64.             @Override  
  65.             public int getCount() {  
  66.                 return 4;  
  67.             }  
  68.   
  69.         };  
  70.         //为ViewPager组件设置FragmentPagerAdapter  
  71.         viewPager.setAdapter(pagerAdapter);  
  72.   
  73.         //为viewpager组件绑定时间监听器  
  74.         viewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {  
  75.             //当ViewPager显示的Fragment发生改变时激发该方法  
  76.             @Override  
  77.             public void onPageSelected(int position) {  
  78.                 switch (position) {  
  79.                     //如果是点击的第一个button，那么就让第一个button的字体变为蓝色  
  80.                     //其他的button的字体的颜色变为黑色  
  81.                     case 0:  
  82.                         one.setTextColor(Color.BLUE);  
  83.                         two.setTextColor(Color.BLACK);  
  84.                         three.setTextColor(Color.BLACK);  
  85.                         four.setTextColor(Color.BLACK);  
  86.                         break;  
  87.                     case 1:  
  88.                         one.setTextColor(Color.BLACK);  
  89.                         two.setTextColor(Color.BLUE);  
  90.                         three.setTextColor(Color.BLACK);  
  91.                         four.setTextColor(Color.BLACK);  
  92.                         break;  
  93.                     case 2:  
  94.                         one.setTextColor(Color.BLACK);  
  95.                         two.setTextColor(Color.BLACK);  
  96.                         three.setTextColor(Color.BLUE);  
  97.                         four.setTextColor(Color.BLACK);  
  98.                         break;  
  99.                     case 3:  
  100.                         one.setTextColor(Color.BLACK);  
  101.                         two.setTextColor(Color.BLACK);  
  102.                         three.setTextColor(Color.BLACK);  
  103.                         four.setTextColor(Color.BLUE);  
  104.                         break;  
  105.                 }  
  106.                 super.onPageSelected(position);  
  107.             }  
  108.         });  
  109.     }  
  110.   
  111.     private void InitView() {  
  112.         one = (Button) findViewById(R.id.bt_one);  
  113.         two = (Button) findViewById(R.id.bt_two);  
  114.         three = (Button) findViewById(R.id.bt_three);  
  115.         four = (Button) findViewById(R.id.bt_four);  
  116.   
  117.         //设置点击监听  
  118.         one.setOnClickListener(this);  
  119.         two.setOnClickListener(this);  
  120.         three.setOnClickListener(this);  
  121.         four.setOnClickListener(this);  
  122.   
  123.         //将button中字体的颜色先按照点击第一个button的效果初始化  
  124.         one.setTextColor(Color.BLUE);  
  125.         two.setTextColor(Color.BLACK);  
  126.         three.setTextColor(Color.BLACK);  
  127.         four.setTextColor(Color.BLACK);  
  128.     }  
  129.   
  130.     //点击主界面上面的button后，将viewpager中的fragment跳转到对应的item  
  131.     @Override  
  132.     public void onClick(View v) {  
  133.         switch (v.getId()) {  
  134.             case R.id.bt_one:  
  135.                 viewPager.setCurrentItem(0);  
  136.                 break;  
  137.             case R.id.bt_two:  
  138.                 viewPager.setCurrentItem(1);  
  139.                 break;  
  140.             case R.id.bt_three:  
  141.                 viewPager.setCurrentItem(2);  
  142.                 break;  
  143.             case R.id.bt_four:  
  144.                 viewPager.setCurrentItem(3);  
  145.                 break;  
  146.         }  
  147.     }  
  148.   
  149.   
  150. }  

 

 

 

OneFragment:（由于4个fragment的布局都一样，在此就只放上第一个了）

 

[java] view plain copy
 
  1. package com.example.viewpager_fragment;  
  2.   
  3. /** 
  4.  * Created by 佳佳 on 2015/12/31. 
  5.  */  
  6.   
  7. import android.os.Bundle;  
  8. import android.support.annotation.Nullable;  
  9. import android.support.v4.app.Fragment;  
  10. import android.view.LayoutInflater;  
  11. import android.view.View;  
  12. import android.view.ViewGroup;  
  13. import android.widget.Button;  
  14. import android.widget.Toast;  
  15.   
  16. public class OneFragment extends Fragment {  
  17.   
  18.     @Override  
  19.     public void onCreate(@Nullable Bundle savedInstanceState) {  
  20.         super.onCreate(savedInstanceState);  
  21.   
  22.     }  
  23.   
  24.     @Override  
  25.     @Nullable  
  26.     public View onCreateView(LayoutInflater inflater,  
  27.                              @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {  
  28.         View rootView = inflater.inflate(R.layout.one, container, false);//关联布局文件  
  29.   
  30.         //设置在OneFragment中的点击效果  
  31.         Button bt_frg_one = (Button) rootView.findViewById(R.id.bt_frg_one);  
  32.         bt_frg_one.setOnClickListener(new View.OnClickListener() {  
  33.             @Override  
  34.             public void onClick(View v) {  
  35.                 Toast.makeText(getActivity().getApplicationContext(), "这是第一页按钮的点击效果", Toast.LENGTH_SHORT).show();  
  36.             }  
  37.         });  
  38.         return rootView;  
  39.     }  
  40.   
  41.     @Override  
  42.     public void onActivityCreated(@Nullable Bundle savedInstanceState) {  
  43.         super.onActivityCreated(savedInstanceState);  
  44.     }  
  45. }  



 

activity_main:

 

[html] view plain copy
 
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent">  
  5.   
  6.     <android.support.v4.view.ViewPager  
  7.         android:id="@+id/pager"  
  8.         android:layout_width="match_parent"  
  9.         android:layout_height="match_parent"></android.support.v4.view.ViewPager>  
  10.   
  11.     <LinearLayout  
  12.         android:layout_width="match_parent"  
  13.         android:layout_height="wrap_content"  
  14.         android:layout_alignParentBottom="true">  
  15.   
  16.         <Button  
  17.             android:id="@+id/bt_one"  
  18.             android:layout_width="0dp"  
  19.             android:layout_height="wrap_content"  
  20.             android:layout_weight="1"  
  21.             android:text="one"  
  22.             android:textSize="20sp" />  
  23.   
  24.         <Button  
  25.             android:id="@+id/bt_two"  
  26.             android:layout_width="0dp"  
  27.             android:layout_height="wrap_content"  
  28.             android:layout_weight="1"  
  29.             android:text="two"  
  30.             android:textSize="20sp" />  
  31.   
  32.         <Button  
  33.             android:id="@+id/bt_three"  
  34.             android:layout_width="0dp"  
  35.             android:layout_height="wrap_content"  
  36.             android:layout_weight="1"  
  37.             android:text="three"  
  38.             android:textSize="20sp" />  
  39.   
  40.         <Button  
  41.             android:id="@+id/bt_four"  
  42.             android:layout_width="0dp"  
  43.             android:layout_height="wrap_content"  
  44.             android:layout_weight="1"  
  45.             android:text="four"  
  46.             android:textSize="20sp" />  
  47.   
  48.     </LinearLayout>  
  49. </RelativeLayout>  



 

one:

 

[html] view plain copy
 
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:orientation="vertical">  
  6.   
  7.     <Button  
  8.         android:id="@+id/bt_frg_one"  
  9.         android:layout_width="wrap_content"  
  10.         android:layout_height="wrap_content"  
  11.         android:text="one"  
  12.         android:textSize="30dp" />  
  13. </LinearLayout>  



 

 

最后附上源码地址：http://download.csdn.net/detail/double2hao/9387550

posted @ 2017-03-22 10:21  天涯海角路  阅读(308)  评论(0)    收藏  举报