仿微信主页fragment

整理自己写过的代码,这个是一个最常见的fragment应用。现在大部分app的主页都zhem设计。那下面就贴上代码新手写的代码可能不规范的地方有点多,凑合看吧。

仿微信主页fragment_第1张图片

这个是我写的简易的样式demo的截图,

下面是代码

主页的布局这个是我后面改过文字的布局,文字和上面截图有点差别



    

    

    

        

        

        

        

        
    


这是主要的代码

package com.example.fragmentdemo;

import android.support.v4.app.FragmentPagerAdapter;
import android.support.v7.app.ActionBarActivity;
import android.annotation.SuppressLint;
import android.os.Bundle;
import android.widget.RadioGroup;

@SuppressLint("NewApi")
public class MainActivity extends ActionBarActivity {
	private RadioGroup radiogroup;
	private NoScrollViewPager viewpager;
	private FragmentPagerAdapter adapter;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		radiogroup = (RadioGroup) findViewById(R.id.rg_tab_menu);
		viewpager = (NoScrollViewPager) findViewById(R.id.vp_container);
		adapter = new InnerFragmentPagerAdapter(getSupportFragmentManager());
		viewpager.setAdapter(adapter);
		InnerOnCheckedChangeListener listener = new InnerOnCheckedChangeListener();
		radiogroup.setOnCheckedChangeListener(listener);
		viewpager.setOffscreenPageLimit(5);
	}

	public void onPageScrollStateChanged(int arg0) {
		// TODO Auto-generated method stub

	}

	public void onPageScrolled(int arg0, float arg1, int arg2) {
		// TODO Auto-generated method stub

	}

	public void onPageSelected(int position) {
		switch (position) {
		case 0:

			radiogroup.check(R.id.rb_tab_item_main);

			break;

		case 1:
			radiogroup.check(R.id.rb_tab_item_maid2);
			break;

		case 2:
			radiogroup.check(R.id.rb_tab_item_maid3);
			break;

		case 3:
			radiogroup.check(R.id.rb_tab_item_maid4);
			break;

		case 4:
			radiogroup.check(R.id.rb_tab_item_maid5);
			break;
		}
	}



	private class InnerOnCheckedChangeListener implements RadioGroup.OnCheckedChangeListener {

		@Override
		public void onCheckedChanged(RadioGroup group, int checkedId) {
			switch (checkedId) {
			case R.id.rb_tab_item_main:
				viewpager.setCurrentItem(0);

				break;

			case R.id.rb_tab_item_maid2:
				viewpager.setCurrentItem(1);
				break;

			case R.id.rb_tab_item_maid3:
				viewpager.setCurrentItem(2);
				break;

			case R.id.rb_tab_item_maid4:
				viewpager.setCurrentItem(3);
				break;
			case R.id.rb_tab_item_maid5:
				viewpager.setCurrentItem(4);
				break;
			}
		}
	}
}

fragment的我都没怎么添加就是一个空白的创建在那里

package com.example.fragmentdemo;


import android.support.v4.app.Fragment;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;


public class Fragment2 extends Fragment implements View.OnClickListener{
	  public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
	        View view=inflater.inflate(R.layout.activity_fragment2,null);
		return view;
	}


	@Override
	public void onClick(View v) {
		// TODO Auto-generated method stub


	}






}

下面是ViewPager的代码

package com.example.fragmentdemo;

import android.content.Context;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.MotionEvent;

public class NoScrollViewPager extends ViewPager {

    private boolean noScroll = false;

    public NoScrollViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public NoScrollViewPager(Context context) {
        super(context);
    }

    public void setNoScroll(boolean noScroll) {
        this.noScroll = noScroll;
    }

    @Override
    public void scrollTo(int x, int y) {
        super.scrollTo(x, y);
    }

    @Override
    public boolean onTouchEvent(MotionEvent arg0) {
        if (noScroll)
            return false;
        else
            return super.onTouchEvent(arg0);
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent arg0) {
        if (noScroll)
            return false;
        else
            return super.onInterceptTouchEvent(arg0);
    }

    @Override
    public void setCurrentItem(int item, boolean smoothScroll) {
        super.setCurrentItem(item, smoothScroll);
    }

    @Override
    public void setCurrentItem(int item) {
        super.setCurrentItem(item);
    }

}
还有adapter

package com.example.fragmentdemo;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

public class InnerFragmentPagerAdapter extends FragmentPagerAdapter {

	public InnerFragmentPagerAdapter(FragmentManager fm) {
		super(fm);
	}

	@Override
	public Fragment getItem(int position) {
		Fragment fragment = null;
		switch (position) {
		case 0:
			fragment = new Fragment1();
			break;

		case 1:
			fragment = new Fragment2();
			break;

		case 2:
			fragment = new Fragment3();
			break;

		case 3:
			fragment = new Fragment4();
			break;
		case 4:
			fragment = new Fragment5();
			break;
		}
		return fragment;
	}

	@Override
	public int getCount() {
		return 5;
	}

}



这样就差不多完成了,出来的效果就是上面我截图里面的样式。

仿微信主页fragment_第2张图片

还有设置图标和底部文字的代码我也都贴上

选中图片切换




    
    
    
    


选中文字变色






关闭滑动切换加一句就好了

viewpager.setNoScroll(true);



还有就是点击按钮图片的大小,由于对radiobutton不是熟悉不懂怎么在布局里面自己改大小在网上找了个代码里面改的

//设航按钮的图片大小
RadioGroup rg_tab_menu = (RadioGroup) findViewById(R.id.rg_tab_menu);
RadioButton rb_tab_item_main = (RadioButton) findViewById(R.id.rb_tab_item_main);
RadioButton rb_tab_item_service = (RadioButton) findViewById(R.id.rb_tab_item_main1);
RadioButton rb_tab_item_maid = (RadioButton) findViewById(R.id.rb_tab_item_main3);
RadioButton rb_tab_item_enjoy = (RadioButton) findViewById(R.id.rb_tab_item_main4);
RadioButton rb_tab_item_myself = (RadioButton) findViewById(R.id.rb_tab_item_main5);
Drawable drawableWeiHui = getResources().getDrawable(R.drawable.fragmant_main);
//第一0是距左右边距离,第二0是距上下边距离,第三69长度,第四宽度
drawableWeiHui.setBounds(0, 0, 60, 60);
rb_tab_item_main.setCompoundDrawables(null, drawableWeiHui, null, null);

Drawable drawableWeiHui2 = getResources().getDrawable(R.drawable.fragmant_serve);
drawableWeiHui2.setBounds(0, 0, 60, 60);
rb_tab_item_service.setCompoundDrawables(null, drawableWeiHui2, null, null);

Drawable drawableWeiHui3 = getResources().getDrawable(R.drawable.fragmant_steward);
drawableWeiHui3.setBounds(0, 0, 60, 60);
rb_tab_item_maid.setCompoundDrawables(null, drawableWeiHui3, null, null);

Drawable drawableWeiHui4 = getResources().getDrawable(R.drawable.fragmant_news);
drawableWeiHui4.setBounds(0, 0, 60, 60);
rb_tab_item_enjoy.setCompoundDrawables(null, drawableWeiHui4, null, null);

Drawable drawableWeiHui5 = getResources().getDrawable(R.drawable.fragmant_amend);
drawableWeiHui5.setBounds(0, 0, 60, 60);
rb_tab_item_myself.setCompoundDrawables(null, drawableWeiHui5, null, null);


 
  

到这里代码就都贴完了附一张完成的效果图


仿微信主页fragment_第3张图片

你可能感兴趣的:(仿微信主页fragment)