Fragment+ViewPager 实现仿微信页面

效果图：

实现代码：

外形资源：

选择器：

[html]  view plain  copy

1. <strong><span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?>  
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
3.     <item android:state_checked="true" android:drawable="@drawable/et_shape"></item>  
4.     <item android:state_checked="false" android:drawable="@drawable/et_shape2"></item>  
5. </selector></span></strong>  

背景：

[html]  view plain  copy

1. <strong><span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?>  
2. <shape xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:shape="rectangle"  
4.     >  
5.     <solid android:color="#c4f4ee"></solid>  
6. </shape></span></strong>  

[html]  view plain  copy

1. <strong><span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?>  
2. <shape xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:shape="rectangle"  
4.     >  
5.     <solid android:color="#fcfefc"></solid>  
6. </shape></span></strong>  

xml：

[html]  view plain  copy

1. <strong><span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout  
3.     xmlns:android="http://schemas.android.com/apk/res/android"  
4.     xmlns:app="http://schemas.android.com/apk/res-auto"  
5.     xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"  
6.     android:layout_height="match_parent" tools:context="zking.com.myapplication.MainActivity"  
7.     android:orientation="vertical"  
8.     >  
9.   
10.     <android.support.v4.view.ViewPager  
11.         android:layout_width="match_parent"  
12.         android:layout_height="0dp"  
13.         android:layout_weight="1"  
14.         android:id="@+id/vp_main_page"  
15.         ></android.support.v4.view.ViewPager>  
16.   
17.     <RadioGroup  
18.         android:layout_width="match_parent"  
19.         android:layout_height="wrap_content"  
20.         android:orientation="horizontal"  
21.         android:id="@+id/rg_main_rg"  
22.         >  
23.         <RadioButton  
24.             android:layout_width="0dp"  
25.             android:layout_height="wrap_content"  
26.             android:text="微信"  
27.             android:layout_weight="1"  
28.             android:button="@null"  
29.             android:drawableTop="@drawable/icon_user"  
30.             android:gravity="center"  
31.             android:background="@drawable/et_select"  
32.             android:id="@+id/rb_main_rb1"  
33.             />  
34.         <RadioButton  
35.             android:layout_width="0dp"  
36.             android:layout_height="wrap_content"  
37.             android:text="通讯录"  
38.             android:button="@null"  
39.             android:layout_weight="1"  
40.             android:drawableTop="@drawable/icon_user"  
41.             android:gravity="center"  
42.             android:background="@drawable/et_select"  
43.             android:id="@+id/rb_main_rb2"  
44.             />  
45.         <RadioButton  
46.             android:layout_width="0dp"  
47.             android:layout_height="wrap_content"  
48.             android:text="发现"  
49.             android:button="@null"  
50.             android:layout_weight="1"  
51.             android:drawableTop="@drawable/icon_user"  
52.             android:gravity="center"  
53.             android:background="@drawable/et_select"  
54.             android:id="@+id/rb_main_rb3"  
55.             />  
56.         <RadioButton  
57.             android:layout_width="0dp"  
58.             android:layout_height="wrap_content"  
59.             android:text="我的"  
60.             android:button="@null"  
61.             android:layout_weight="1"  
62.             android:drawableTop="@drawable/icon_user"  
63.             android:gravity="center"  
64.             android:background="@drawable/et_select"  
65.             android:id="@+id/rb_main_rb4"  
66.             />  
67.   
68.     </RadioGroup>  
69.   
70. </LinearLayout></span></strong>  

碎片布局：

[html]  view plain  copy

1. <strong><span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:orientation="vertical" android:layout_width="match_parent"  
4.     android:layout_height="match_parent">  
5.   
6.     <TextView  
7.         android:layout_width="match_parent"  
8.         android:layout_height="wrap_content"  
9.         android:text="这是通讯录界面"  
10.         android:textSize="30sp"  
11.         android:background="#660000ff"  
12.         />  
13.   
14. </LinearLayout></span></strong>  

 
 

  
  

   
   

    
    [html] 
    
    view plain
    
     copy
    
    

    
     
   
   
  
  
  
  
<strong><span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?>  
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:orientation="vertical" android:layout_width="match_parent"  
    android:layout_height="match_parent">  
  
    <TextView  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        android:text="这是发现界面"  
        android:textSize="30sp"  
        android:background="#6600ff00"  
        />  
  
</LinearLayout></span></strong>  
 
 


 
 

  
  

   
   

    
    [html] 
    
    view plain
    
     copy
    
    

    
     
   
   
  
  
  
  
<strong><span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?>  
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:orientation="vertical" android:layout_width="match_parent"  
    android:layout_height="match_parent">  
  
    <TextView  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        android:text="这是我的界面"  
        android:textSize="30sp"  
        android:background="#6600ffff"  
        />  
  
</LinearLayout></span></strong>  
 
 


 
 

  
  

   
   

    
    [html] 
    
    view plain
    
     copy
    
    

    
     
   
   
  
  
  
  
<strong><span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?>  
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:orientation="vertical" android:layout_width="match_parent"  
    android:layout_height="match_parent">  
  
    <TextView  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        android:text="这是微信界面（聊天历史）"  
        android:textSize="30sp"  
        android:background="#66ff0000"  
        />  
  
</LinearLayout></span></strong>  
 
 

java：

 
 

  
  

   
   

    
    [html] 
    
    view plain
    
     copy
    
    

    
     
   
   
  
  
  
  
<strong><span style="font-size:18px;">public class ContactsFragment extends Fragment{  
  
    @Nullable  
    @Override  
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {  
        return inflater.inflate(R.layout.fragment_contacts,null);  
    }  
}  
</span></strong>  
 
 
  
  

   
   

    
    

     
     [html] 
     
     view plain
     
      copy
     
     

     
      
    
    
   
   
   
   
<strong><span style="font-size:18px;">public class FindFragment extends Fragment{  
  
    @Nullable  
    @Override  
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {  
        return inflater.inflate(R.layout.fragment_find,null);  
    }  
}</span></strong>  
  
  


  
  

   
   

    
    

     
     [html] 
     
     view plain
     
      copy
     
     

     
      
    
    
   
   
   
   
<strong><span style="font-size:18px;">public class MyFragment extends Fragment{  
  
    @Nullable  
    @Override  
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {  
        return inflater.inflate(R.layout.fragment_my,null);  
    }  
}</span></strong>  
  
  


  
  

   
   

    
    

     
     [html] 
     
     view plain
     
      copy
     
     

     
      
    
    
   
   
   
   
<strong><span style="font-size:18px;">public class WeiXinFragment extends Fragment{  
  
    @Nullable  
    @Override  
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {  
        return inflater.inflate(R.layout.fragment_weixin,null);  
    }  
}</span></strong>  
  
  


  
  

   
   

    
    

     
     [html] 
     
     view plain
     
      copy
     
     

     
      
    
    
   
   
   
   
<strong><span style="font-size:18px;">public class MainActivity extends AppCompatActivity {  
  
    private ViewPager vp_main_page;  
    private List<Fragment> fragments=new ArrayList<>();  
    private int[] id={R.id.rb_main_rb1,R.id.rb_main_rb2,R.id.rb_main_rb3,R.id.rb_main_rb4};  
    private RadioGroup rg_main_rg;  
  
    @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.activity_main);  
  
        //获取控件：ViewPage  
        vp_main_page = (ViewPager) findViewById(R.id.vp_main_page);  
        ContactsFragment contactsFragment=new ContactsFragment();  
        FindFragment findFragment=new FindFragment();  
        MyFragment myFragment=new MyFragment();  
        WeiXinFragment weiXinFragment=new WeiXinFragment();  
        fragments.add(weiXinFragment);  
        fragments.add(contactsFragment);  
        fragments.add(findFragment);  
        fragments.add(myFragment);  
        vp_main_page.setAdapter(new MyAdpadter(getSupportFragmentManager()));  
        //获取单选组  
        rg_main_rg = (RadioGroup) findViewById(R.id.rg_main_rg);  
        rg_main_rg.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {  
            @Override  
            public void onCheckedChanged(RadioGroup group, @IdRes int checkedId) {  
//                Toast.makeText(MainActivity.this, ""+group.getCheckedRadioButtonId(), Toast.LENGTH_SHORT).show();  
//                vp_main_page.setCurrentItem(checkedId-1);  
                if (checkedId==id[0]){  
                    vp_main_page.setCurrentItem(0);  
                }else if (checkedId==id[1]){  
                    vp_main_page.setCurrentItem(1);  
                }else if (checkedId==id[2]){  
                    vp_main_page.setCurrentItem(2);  
                }else if (checkedId==id[3]){  
                    vp_main_page.setCurrentItem(3);  
                }  
            }  
        });  
        rg_main_rg.check(id[0]);  
        vp_main_page.setCurrentItem(0);  
        vp_main_page.getCurrentItem();  
  
       //ViewPager控件的滑动监听  
        vp_main_page.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {  
            @Override  
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {  
  
            }  
  
            @Override  
            public void onPageSelected(int position) {  
  
            }  
  
            @Override  
            public void onPageScrollStateChanged(int state) {//此方法是在状态改变的时候调用  
                //state==0  代表什么都没做  
                //state==1  代表正在滑动  
                //state==2  代表滑动完毕  
                if (state==2){  
                    rg_main_rg.check(id[vp_main_page.getCurrentItem()]);  
                }  
            }  
        });  
    }  
  
    class MyAdpadter extends FragmentPagerAdapter{  
        public MyAdpadter(FragmentManager fm) {  
            super(fm);  
        }  
  
        @Override  
        public Fragment getItem(int position) {  
            return fragments.get(position);  
        }  
  
        @Override  
        public int getCount() {  
            return fragments.size();  
        }  
    }  
  
}</span></strong>