仿照微信的界面,即ViewPager+Fragment的结合使用

主布局文件:

android:drawableTop="@drawable/weixin_bg"用的是状态选择器,所以要写4个状态选择器,图片的
<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"
    tools:context=".MainActivity" >

    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    </android.support.v4.view.ViewPager>

    <RadioGroup
        android:id="@+id/rg"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal" >

        <!-- android:button="@null"    表示去掉RadioButton中的圈圈 -->

        <RadioButton
            android:id="@+id/rb_weixin"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:drawableTop="@drawable/weixin_bg"
            android:gravity="center_vertical"
            android:text="微信"
            android:textSize="16sp" />

        <RadioButton
            android:id="@+id/rb_contact"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:drawableTop="@drawable/contact_bg"
            android:gravity="center_vertical"
            android:text="通讯"
            android:textSize="16sp" />

        <RadioButton
            android:id="@+id/rb_found"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:drawableTop="@drawable/found_bg"
            android:gravity="center_vertical"
            android:text="发现"
            android:textSize="16sp" />

        <RadioButton
            android:id="@+id/rb_me"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:drawableTop="@drawable/me_bg"
            android:gravity="center_vertical"
            android:text="我"
            android:textSize="16sp" />
    </RadioGroup>

</RelativeLayout>

MainActivity代码:

public class MainActivity extends FragmentActivity implements OnCheckedChangeListener, OnPageChangeListener {
    private static final int WEIXIN = 0;
    private static final int CONTACT = 1;
    private static final int FOUND= 2;
    private static final int ME= 3;
    private ViewPager vp;
    /**RadioGroup*/
    private RadioGroup rg;
    //四个RadioButton
    private RadioButton rb_weixin;
    private RadioButton rb_contact;
    private RadioButton rb_found;
    private RadioButton rb_me;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        vp = (ViewPager) findViewById(R.id.vp);
        rg = (RadioGroup) findViewById(R.id.rg);
        rg.setOnCheckedChangeListener(this);
        vp.setAdapter(new MainAdapter(getSupportFragmentManager()));
        
        vp.setOnPageChangeListener(this);
        
        rb_weixin = (RadioButton) findViewById(R.id.rb_weixin);
        rb_contact = (RadioButton) findViewById(R.id.rb_contact);
        rb_found = (RadioButton) findViewById(R.id.rb_found);
        rb_me = (RadioButton) findViewById(R.id.rb_me);
        
        //一进入程序就让微信RadioButton显示为被点击状态
        rb_weixin.setChecked(true);
        
    }
    class MainAdapter extends FragmentPagerAdapter{
        List<Fragment> list=new ArrayList<Fragment>();
        private WeixinFragment weixinFragment;
        private ContactFragment contactFragment;
        private FoundFragment foundFragment;
        private MeFragment meFragment;
        
        public MainAdapter(FragmentManager fm) {
            super(fm);
            weixinFragment = new WeixinFragment();
            contactFragment = new ContactFragment();
            foundFragment = new FoundFragment();
            meFragment = new MeFragment();
            list.add(weixinFragment);
            list.add(contactFragment);
            list.add(foundFragment);
            list.add(meFragment);
            
        }

        @Override
        public Fragment getItem(int position) {
            Fragment fragment = list.get(position);
            return fragment;
        }

        @Override
        public int getCount() {
            return list.size();
        }
        
    }
    //RadioButton被点击时
    @Override
    public void onCheckedChanged(RadioGroup group, int checkedId) {
        switch (checkedId) {
        case R.id.rb_weixin:
            vp.setCurrentItem(WEIXIN);
            break;
        case R.id.rb_contact:
            vp.setCurrentItem(CONTACT);
            break;
        case R.id.rb_found:
            vp.setCurrentItem(FOUND);
            break;
        case R.id.rb_me:
            vp.setCurrentItem(ME);
            break;

        default:
            break;
        }
    }
    
    //ViewPager滑动状态改变时
    @Override
    public void onPageScrollStateChanged(int arg0) {
        System.out.println("onPageScrollStateChanged");
    }
    @Override
    public void onPageScrolled(int arg0, float arg1, int arg2) {
        System.out.println("onPageScrolled");
    }
    //当ViewPager滑动停止时
    @Override
    public void onPageSelected(int position) {
        System.out.println("onPageSelected");
        
        switch (position) {
        case WEIXIN:
            rb_weixin.setChecked(true);
            break;
        case CONTACT:
            rb_contact.setChecked(true);
            break;
        case FOUND:
            rb_found.setChecked(true);
            break;
        case ME:
            rb_me.setChecked(true);
            break;

        default:
            break;
        }
    }
}

 

这是其中一个Fragment,其它三个一模一样:

public class WeixinFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        View view = View.inflate(getActivity(), R.layout.fragment_home, null);
        return view;
    }
}

这样就完成了,这是结果图:仿照微信的界面,即ViewPager+Fragment的结合使用仿照微信的界面,即ViewPager+Fragment的结合使用

不知道为什么,底部几张图片不能完整地显示,文字也不能居中显示,有没有高手指点一二?

仿照微信的界面,即ViewPager+Fragment的结合使用

上一篇:shell和Python调用企业微信服务号进行报警


下一篇:模仿微信摇一摇功能