Android仿微信界面--使用FragmentPagerAdapter,viewpager实现(慕课网笔记)

来自慕课网：http://www.imooc.com/video/5904

使用FragmenPagerAdapter和viewpager实现微信界面，与http://blog.csdn.net/hnyzwtf/article/details/50296013不同的是，可以左右滑动切换聊天界面；

效果图：

 

总体设计：一个标题栏top.xml,一个底部导航栏bottom.xml，中间内容显示区域使用viewpager实现，每一个导航按钮对应一个布局文件，微信按钮对应tab01.xml,朋友对应tab02.xml,通讯录对应tab03.xml,设置对应tab04.xml，每一个布局用fragment实现分别是WeixinFragment,FrdFragment,AddressFragment,SettingFragment，通过适配器fragmentPagerAdapter将4个布局的fragment和viewpager关联起来，从而利用viewpager就可以滑动切换内容区域了。

1 布局文件设计

activity_main.xml

 

[html] view plain copy
 
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:orientation="vertical"  
  6.     >  
  7.   
  8.    <include layout="@layout/top"/>  
  9.     <android.support.v4.view.ViewPager  
  10.         android:id="@+id/id_viewpager"  
  11.         android:layout_width="match_parent"  
  12.         android:layout_height="0dp"  
  13.         android:layout_weight="1">  
  14.           
  15.     </android.support.v4.view.ViewPager>  
  16.         
  17.       
  18.    <include layout="@layout/bottom"/>  
  19.   
  20. </LinearLayout>  


其他布局和上述提到的另一篇布局一样

 

2 MainActivity

 

[java] view plain copy
 
  1. package com.example.imooc_tab03;  
  2.   
  3. import java.util.ArrayList;  
  4. import java.util.List;  
  5.   
  6. import android.app.Activity;  
  7. import android.os.Bundle;  
  8. import android.support.v4.app.Fragment;  
  9. import android.support.v4.app.FragmentActivity;  
  10. import android.support.v4.app.FragmentPagerAdapter;  
  11. import android.support.v4.view.ViewPager;  
  12. import android.support.v4.view.ViewPager.OnPageChangeListener;  
  13. import android.view.Menu;  
  14. import android.view.MenuItem;  
  15. import android.view.View;  
  16. import android.view.View.OnClickListener;  
  17. import android.view.Window;  
  18. import android.widget.ImageButton;  
  19. import android.widget.LinearLayout;  
  20.   
  21. public class MainActivity extends FragmentActivity implements OnClickListener {  
  22.     private ViewPager viewpager;  
  23.     private FragmentPagerAdapter mAdapter;//Fragment适配器，viewpager的适配器  
  24.     private List<Fragment> mFragments;//适配器的数据源  
  25.       
  26.     private LinearLayout mTabWeixin;  
  27.     private LinearLayout mTabFrd;  
  28.     private LinearLayout mTabAddress;  
  29.     private LinearLayout mTabSetting;  
  30.       
  31.     private ImageButton mImgWeixin;  
  32.     private ImageButton mImgFrd;  
  33.     private ImageButton mImgAddress;  
  34.     private ImageButton mImgSetting;  
  35.       
  36.     private Fragment mTab01;  
  37.     private Fragment mTab02;  
  38.     private Fragment mTab03;  
  39.     private Fragment mTab04;  
  40.   
  41.     @Override  
  42.     protected void onCreate(Bundle savedInstanceState) {  
  43.         super.onCreate(savedInstanceState);  
  44.         requestWindowFeature(Window.FEATURE_NO_TITLE);  
  45.         setContentView(R.layout.activity_main);  
  46.         initView();  
  47.         initEvent();  
  48.         setSelect(0);  
  49.     }  
  50.   
  51.     private void initEvent() {  
  52.         mTabWeixin.setOnClickListener(this);  
  53.         mTabFrd.setOnClickListener(this);  
  54.         mTabAddress.setOnClickListener(this);  
  55.         mTabSetting.setOnClickListener(this);  
  56.           
  57.     }  
  58.   
  59.     private void initView() {  
  60.         viewpager = (ViewPager) findViewById(R.id.id_viewpager);  
  61.         mTabWeixin = (LinearLayout) findViewById(R.id.id_tab_weixin);  
  62.         mTabFrd = (LinearLayout) findViewById(R.id.id_tab_frd);  
  63.         mTabAddress = (LinearLayout) findViewById(R.id.id_tab_address);  
  64.         mTabSetting = (LinearLayout) findViewById(R.id.id_tab_setting);  
  65.         mImgWeixin = (ImageButton)findViewById(R.id.id_tab_weixin_img);  
  66.         mImgFrd = (ImageButton)findViewById(R.id.id_tab_frd_img);  
  67.         mImgAddress = (ImageButton)findViewById(R.id.id_tab_address_img);  
  68.         mImgSetting = (ImageButton)findViewById(R.id.id_tab_setting_img);  
  69.           
  70.         mFragments = new ArrayList<Fragment>();//初始化数据源  
  71.         mTab01 = new WeixinFragment();  
  72.         mTab02 = new FrdFragment();  
  73.         mTab03 = new AddressFragment();  
  74.         mTab04 = new SettingFragment();  
  75.         //将4个fragment添加到数据源中  
  76.         mFragments.add(mTab01);  
  77.         mFragments.add(mTab02);  
  78.         mFragments.add(mTab03);  
  79.         mFragments.add(mTab04);  
  80.         //初始化适配器  
  81.         mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {  
  82.               
  83.             @Override  
  84.             public int getCount() {  
  85.                 // TODO Auto-generated method stub  
  86.                 return mFragments.size();  
  87.             }  
  88.               
  89.             @Override  
  90.             public Fragment getItem(int arg0) {  
  91.                 // TODO Auto-generated method stub  
  92.                 return mFragments.get(arg0);//通过位置返回不同的fragment  
  93.             }  
  94.         };  
  95.         /* 
  96.          * Android中可变的控件，比如ViewPager，listview,gridview，一个控件对应一个适配器，一个适配器对应一系列的数据源 
  97.          * 数据源一般都是一个list 
  98.          *  
  99.          * */  
  100.         viewpager.setAdapter(mAdapter);//为viewpager设置一个适配器  
  101.         //实现当viewpager滑动时（滑动页面改变）底部的导航按钮同步改变  
  102.         viewpager.setOnPageChangeListener(new OnPageChangeListener() {  
  103.               
  104.             @Override  
  105.             public void onPageSelected(int arg0) {  
  106.                 int currentItem = viewpager.getCurrentItem();  
  107.                 setTab(currentItem);  
  108.             }  
  109.               
  110.             @Override  
  111.             public void onPageScrolled(int arg0, float arg1, int arg2) {  
  112.                 // TODO Auto-generated method stub  
  113.                   
  114.             }  
  115.               
  116.             @Override  
  117.             public void onPageScrollStateChanged(int arg0) {  
  118.                 // TODO Auto-generated method stub  
  119.                   
  120.             }  
  121.         });  
  122.     }  
  123.   
  124.     @Override  
  125.     public boolean onCreateOptionsMenu(Menu menu) {  
  126.         // Inflate the menu; this adds items to the action bar if it is present.  
  127.         getMenuInflater().inflate(R.menu.main, menu);  
  128.         return true;  
  129.     }  
  130.   
  131.     @Override  
  132.     public boolean onOptionsItemSelected(MenuItem item) {  
  133.         // Handle action bar item clicks here. The action bar will  
  134.         // automatically handle clicks on the Home/Up button, so long  
  135.         // as you specify a parent activity in AndroidManifest.xml.  
  136.         int id = item.getItemId();  
  137.         if (id == R.id.action_settings) {  
  138.             return true;  
  139.         }  
  140.         return super.onOptionsItemSelected(item);  
  141.     }  
  142.   
  143.     @Override  
  144.     public void onClick(View v) {  
  145.           
  146.         switch (v.getId()) {  
  147.         case R.id.id_tab_weixin:  
  148.             setSelect(0);  
  149.             break;  
  150.         case R.id.id_tab_frd:  
  151.             setSelect(1);         
  152.             break;  
  153.         case R.id.id_tab_address:  
  154.             setSelect(2);  
  155.             break;  
  156.         case R.id.id_tab_setting:  
  157.             setSelect(3);  
  158.             break;  
  159.   
  160.         default:  
  161.             break;  
  162.         }  
  163.           
  164.     }  
  165.     /* 
  166.      * 将图片设置为亮色的；切换显示内容的fragment 
  167.      * */  
  168.     private void setSelect(int i) {  
  169.         setTab(i);//alt + shift + m可以提取选择的代码为方法  
  170.         viewpager.setCurrentItem(i);  
  171.     }  
  172.   
  173.     private void setTab(int i) {  
  174.         resetImg();  
  175.         switch (i) {  
  176.         case 0:  
  177.             mImgWeixin.setImageResource(R.drawable.tab_weixin_pressed);  
  178.             break;  
  179.         case 1:  
  180.             mImgFrd.setImageResource(R.drawable.tab_find_frd_pressed);        
  181.             break;  
  182.         case 2:  
  183.             mImgAddress.setImageResource(R.drawable.tab_address_pressed);  
  184.             break;  
  185.         case 3:  
  186.             mImgSetting.setImageResource(R.drawable.tab_settings_pressed);  
  187.             break;  
  188.   
  189.         default:  
  190.             break;  
  191.         }  
  192.     }  
  193.   
  194.     private void resetImg() {  
  195.         mImgWeixin.setImageResource(R.drawable.tab_weixin_normal);  
  196.         mImgFrd.setImageResource(R.drawable.tab_find_frd_normal);  
  197.         mImgAddress.setImageResource(R.drawable.tab_address_normal);  
  198.         mImgSetting.setImageResource(R.drawable.tab_settings_normal);  
  199.     }  
  200. }  

源代码在这里：http://download.csdn.net/detail/hnyzwtf/9359371

posted @ 2016-11-28 18:53  天涯海角路  阅读(167)  评论(0)    收藏  举报