Android自学笔记-微信界面的实现

Radiobutton+ViewPager+Fragment实现微信类的界面（底栏+左右滑动）

    1.首先是主布局

两个Fragment是顶栏和底栏，fragment的name是对应的继承了 Fragment的类名，在这些类中界面内容处理，Fragment与Activity类似。

中间是 ViewPager， 主要内容会加进ViewPager里，根据左右滑动实现显示哪一个页面。

在底栏中加上4个RadioButton，可以点击来切换内容。

主布局文件

<pre name="code" class="html"><RelativeLayout  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">

    <fragment
        android:name="com.zjl.friendlocationmap.BottomFragment"
       android:layout_alignParentBottom="true"
        android:id="@+id/bottom_fragment"
        android:layout_width="fill_parent"
        android:layout_height="53dp"
     />
    <fragment
      android:layout_alignParentTop="true"
        android:id="@+id/top_fragment"
        android:name="com.zjl.friendlocationmap.TopFragment"
        android:layout_width="fill_parent"
        android:layout_height="45dp"
     />
      <android.support.v4.view.ViewPager
         android:id="@+id/viewPager"
         android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_above="@id/bottom_fragment"
        android:layout_below="@id/top_fragment"
          />

    
</RelativeLayout >

底栏布局

<pre name="code" class="html"><?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
     android:background="@drawable/content_bg">
      <RadioGroup
        android:id="@+id/tab_menu"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="horizontal" >
        <RadioButton
            android:id="@+id/msgButton"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_gravity="bottom|start"
            android:layout_weight="1"
            android:button="@null"
            
            android:gravity="center_horizontal|bottom"
            android:paddingTop="2dp"
            android:text="消息"
            android:textSize="6pt"
            android:drawableTop="@drawable/bottom_msg"
            android:textColor="@drawable/bottom_text_color"
            />
   
        <RadioButton
            android:id="@+id/friendButton"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_gravity="bottom"
            android:layout_weight="1"
            android:button="@null"
            android:drawableTop="@drawable/bottom_friend"
            android:textColor="@drawable/bottom_text_color"
            android:gravity="center_horizontal|bottom"
            android:paddingTop="2dp"
            android:text="通讯录"
            android:textSize="6pt"
            android:checked="true"
            />

 
        <RadioButton
            android:id="@+id/mapButton"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_gravity="bottom"
            android:layout_weight="1"
            android:button="@null"
            android:drawableTop="@drawable/bottom_friend_state"
             android:textColor="@drawable/bottom_text_color"
            android:gravity="center_horizontal|bottom"
            android:paddingTop="2dp"
            android:text="发现"
            android:textSize="6pt"
            />
        <RadioButton
            android:id="@+id/myInfo"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_gravity="bottom"
            android:layout_weight="1"
            android:button="@null"
            android:drawableTop="@drawable/bottom_myinfo"
            android:textColor="@drawable/bottom_text_color"
            android:gravity="center_horizontal|bottom"
            android:paddingTop="2dp"
            android:text="我"
            android:textSize="6pt"
            />
    </RadioGroup>
          <TextView 
             android:id="@+id/notice_count_text" 
             android:layout_width="wrap_content"
             android:layout_height="wrap_content" 
             android:layout_alignParentTop="true"  
             android:background="@drawable/unread_count_bg" 
             android:layout_marginLeft="56dip"
             android:gravity="center" 
             android:text="0"
             android:textSize="10dip"
             android:layout_marginTop="1dp"
             android:textStyle="bold"
             android:visibility="visible" />  
		 
</RelativeLayout>

顶栏类似，此处省略

</pre><pre name="code" class="java">2.主Activity，主Activity要继承 FragmentActivity

在这个类中首先对没个Fragment进行实例化，通过实现FragmentPagerAdapter适配器，<span style="font-family: Arial, Helvetica, sans-serif;">将</span><span style="font-family: Arial, Helvetica, sans-serif;">Fragment</span><span style="font-family: Arial, Helvetica, sans-serif;">加到ViewPager中</span>

<span style="font-family:Arial, Helvetica, sans-serif;">适配器代码：</span><pre name="code" class="java">//ViewPager适配器
	public class MyViewPagerAdapter extends FragmentPagerAdapter{
		 private List<Fragment> mFragments;
		public MyViewPagerAdapter(android.support.v4.app.FragmentManager fm) {
			super(fm);
			// TODO Auto-generated constructor stub
		}
		 public MyViewPagerAdapter(android.support.v4.app.FragmentManager fm,List<Fragment> fragments) {  
		        super(fm);  
		        // TODO Auto-generated constructor stub  
		        mFragments=fragments;  
		 }		
		@Override  
	    public Fragment getItem(int arg0) {  
	        // TODO Auto-generated method stub  
	        return mFragments.get(arg0);  
	    }  
	  
	    @Override  
	    public int getCount() {  
	        // TODO Auto-generated method stub  
	        return mFragments.size();  
	    }  

	}

}

添加Fragment内容到Viewpager：

<pre name="code" class="java">//构造适配器  
        List<Fragment> fragments=new ArrayList<Fragment>();  
        fragments.add(new FriendFragment());  
        fragments.add(new MapFragment());   
        viewPagerAdapter = new MyViewPagerAdapter(getSupportFragmentManager(), fragments);  
          
        //设定适配器  
        ViewPager vp = (ViewPager)findViewById(R.id.viewPager);  
        vp.setAdapter(viewPagerAdapter);  

上面已经实现左右滑动实现界面切换

</pre><pre name="code" class="java">

3.有时还需要在页面切换时同时改变其他项目，如切换标题栏文字，或选中当前底栏，这可以在ViewPager的OnPageChangeListener

监听事件中做处理。主要是onPageSelected事件，参数是page的NO号，就是添加的顺序，从零开始

<pre name="code" class="java">vp.setOnPageChangeListener(new OnPageChangeListener() {
			
			@Override
			public void onPageSelected(int arg0) {
				 switch (arg0) {  
	                case 0://相应处理
	                	RadioButton rb0 = (RadioButton) findViewById(R.id.friendButton);
	                	rb0.setChecked(true);
	                	break;
	                case 1:<span style="font-family: Arial, Helvetica, sans-serif;">//相应处理</span>

	                	RadioButton rb1 = (RadioButton) findViewById(R.id.mapButton);
	                	rb1.setChecked(true);
	                	break;
				 }
				
			}