仿微信主頁fragment

2019-11-09 16:21:02

字體：大中小

來源：轉載

供稿：網友

整理自己寫過的代碼，這個是一個最常見的fragment應用?，F在大部分app的主頁都zhem設計。那下面就貼上代碼新手寫的代碼可能不規范的地方有點多，湊合看吧。

這個是我寫的簡易的樣式demo的截圖，

下面是代碼

主頁的布局這個是我后面改過文字的布局，文字和上面截圖有點差別

<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"    android:paddingBottom="@dimen/activity_vertical_margin"    android:paddingLeft="@dimen/activity_horizontal_margin"    android:paddingRight="@dimen/activity_horizontal_margin"    android:paddingTop="@dimen/activity_vertical_margin"    tools:context="com.example.fragmentdemo.MainActivity" >    <com.example.fragmentdemo.NoScrollViewPager        android:id="@+id/vp_container"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_above="@+id/rg_tab_menu"        android:layout_alignParentTop="true" />    <View        android:layout_width="match_parent"        android:layout_height="1dip"        android:layout_above="@+id/rg_tab_menu"        android:background="#cdcdcd" />    <RadioGroup        android:id="@+id/rg_tab_menu"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:background="#fff"        android:orientation="horizontal" >        <RadioButton            android:id="@+id/rb_tab_item_main"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:button="@null"            android:checked="true"            android:drawablePadding="2dp"            android:gravity="center"            android:paddingBottom="3dp"            android:paddingTop="8dp"            android:text="主頁"            android:textSize="12sp"            tools:text="主頁" />        <RadioButton            android:id="@+id/rb_tab_item_maid2"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:button="@null"            android:drawablePadding="2dp"            android:gravity="center"            android:paddingBottom="3dp"            android:paddingTop="8dp"            android:text="主頁2"            android:textSize="12sp" />        <RadioButton            android:id="@+id/rb_tab_item_maid3"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:button="@null"            android:drawablePadding="2dp"            android:gravity="center"            android:paddingBottom="3dp"            android:paddingTop="8dp"            android:text="主頁3"            android:textSize="12sp" />        <RadioButton            android:id="@+id/rb_tab_item_maid4"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:button="@null"            android:drawablePadding="2dp"            android:gravity="center"            android:paddingBottom="3dp"            android:paddingTop="8dp"            android:text="主頁4"            android:textSize="12sp" />        <RadioButton            android:id="@+id/rb_tab_item_maid5"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:button="@null"            android:drawablePadding="2dp"            android:gravity="center"            android:paddingBottom="3dp"            android:paddingTop="8dp"            android:text="主頁5"            android:textSize="12sp" />    </RadioGroup></RelativeLayout>這是主要的代碼
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;	}}
這樣就差不多完成了，出來的效果就是上面我截圖里面的樣式。
還有設置圖標和底部文字的代碼我也都貼上
選中圖片切換
<?xml version="1.0" encoding="utf-8"?><selector    xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_checked="false" android:drawable="@mipmap/main"/>    <item android:state_checked="true"  android:drawable="@mipmap/fangzi"/>    <item android:state_selected="true"  android:drawable="@mipmap/fangzi"/>    <item android:state_pressed="true"  android:drawable="@mipmap/fangzi"/></selector>選中文字變色
<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:state_checked="true" android:color="@color/colorAccent"/><!-- not selected --><item android:state_checked="false" android:color="@color/grey1"/></selector>關閉滑動切換加一句就好了
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);
到這里代碼就都貼完了附一張完成的效果圖