自定义底部工具栏及顶部工具栏和Fragment配合使用demo

yo8237233

浏览: 62758 次
来自: 深圳

最近访客更多访客>>

wwwbjj1988

xiangshouxiyang

qhlwyc

h3lp

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

android

android fragment 自定义底部工具栏自定义顶部工具栏

    首先简单的介绍下fragment，fragment是android3.0新增的概念，其中文意思是碎片，它与activity非常相似，用来在一个activity中描述一些行为或一部分用户界面。使用锁个fragment可以再一个单独的activity中建立多个UI面板，也可以在多个activity中重用fragment，一个fragment必须被嵌入到一个activity中，它的生命周期直接受其所宿主的activity的生命周期的影响。
    首先创建一个fragment，要创建一个fragment，必须创建一个fragment的子类，或者继承自另外一个已经存在的Fragment的子类，并重写相应的方法。
    编写Fragment的xml文件和类文件，这里我写了四个，贴出来其中两个代码，其他的copy就行。

fragment_main.xml

<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" >

	<TextView 
	    android:layout_height="wrap_content"
	    android:layout_width="wrap_content"
	    android:gravity="center"
	    android:text="主页面"
	    />

</RelativeLayout>

MainFragment.java

public class MainFragment extends Fragment{
	
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		View view = inflater.inflate(R.layout.fragment_main, container,false);
		return view;
	}
	
	@Override
	public void onActivityCreated(Bundle savedInstanceState) {
		super.onActivityCreated(savedInstanceState);
	}

}

fragment_grxx.xml

<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" >
    
    <com.qyh.view.TitleView 
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

	<TextView 
	    android:layout_height="wrap_content"
	    android:layout_width="wrap_content"
	    android:gravity="center"
	    android:text="个人信息"
	    />

</RelativeLayout>

GrxxFragment.java

public class GrxxFragment extends Fragment{
	private TitleView titleView;
	private FragmentActivity mActivity;
	private View mParent;
	
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		View view = inflater.inflate(R.layout.fragment_grxx, container,false);
		return view;
	}
	
	@Override
	public void onActivityCreated(Bundle savedInstanceState) {
		super.onActivityCreated(savedInstanceState);
		mActivity = getActivity();
		mParent = getView();
		titleView = (TitleView) mActivity.findViewById(R.id.title);
		titleView.setTitle("个人信息");
		titleView.setBackButton(new TitleView.OnBackButtonClickListener() {
			@Override
			public void onClick(View button) {
				getFragmentManager().beginTransaction()
				.hide(com.qyh.main.MainActivity.mFragments[1])
				.show(com.qyh.main.MainActivity.mFragments[0]).commit();
				FragmentIndicator.setIndicator(0);
			}
		});
	}

}

自定义底部工具栏
FragmentIndicator.java

public class FragmentIndicator extends LinearLayout implements OnClickListener {

	private static String TAG = "FragmentIndicator";
	private int mDefaultIndicator = 0;// 默认位置
	private static int mCurIndicator;// 当前位置
	private static View[] mIndicators;
	private OnIndicateListener mOnIndicateListener;

	private static final String TAG_ICON_0 = "icon_tag_0";
	private static final String TAG_ICON_1 = "icon_tag_1";
	private static final String TAG_ICON_2 = "icon_tag_2";
	private static final String TAG_ICON_3 = "icon_tag_3";

	private FragmentIndicator(Context context) {
		super(context);
	}

	public FragmentIndicator(Context context, AttributeSet attrs) {
		super(context, attrs);
		mCurIndicator = mDefaultIndicator;
		setOrientation(LinearLayout.HORIZONTAL);
		initView();
	}

	private View createIndicator(int iconResID, int stringResID,
			int stringColor, String iconTag, String textTag) {
		LinearLayout view = new LinearLayout(getContext());

		view.setOrientation(LinearLayout.HORIZONTAL);
		view.setLayoutParams(new LinearLayout.LayoutParams(
				LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT,1));
		view.setGravity(Gravity.CENTER);

		ImageView iconView = new ImageView(getContext());
		iconView.setTag(iconTag);
		iconView.setLayoutParams(new LinearLayout.LayoutParams(
				LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT, 1));
		iconView.setImageResource(iconResID);
		view.addView(iconView);
		return view;
	}

	private void initView() {
		mIndicators = new View[4];
		mIndicators[0] = createIndicator(R.drawable.main_home, 0, 0, TAG_ICON_0,
				null);
		mIndicators[0].setBackgroundResource(R.drawable.indic_select);
		mIndicators[0].setTag(Integer.valueOf(0));
		mIndicators[0].setOnClickListener(this);
		addView(mIndicators[0]);

		mIndicators[1] = createIndicator(R.drawable.main_user, 0, 0, TAG_ICON_1,
				null);
		mIndicators[1].setBackgroundResource(Color.alpha(0));
		mIndicators[1].setTag(Integer.valueOf(1));
		mIndicators[1].setOnClickListener(this);
		addView(mIndicators[1]);

		mIndicators[2] = createIndicator(R.drawable.main_set, 0, 0, TAG_ICON_2,
				null);
		mIndicators[2].setBackgroundResource(Color.alpha(0));
		mIndicators[2].setTag(Integer.valueOf(2));
		mIndicators[2].setOnClickListener(this);
		addView(mIndicators[2]);

		mIndicators[3] = createIndicator(R.drawable.main_more, 0, 0,
				TAG_ICON_3, null);
		mIndicators[3].setBackgroundResource(Color.alpha(0));
		mIndicators[3].setTag(Integer.valueOf(3));
		mIndicators[3].setOnClickListener(this);

		addView(mIndicators[3]);
	}

	public static void setIndicator(int which) {
		// 以前状态
		mIndicators[mCurIndicator].setBackgroundColor(Color.alpha(0));
		ImageView prevIcon;
		switch (mCurIndicator) {
		case 0:
			prevIcon = (ImageView) mIndicators[mCurIndicator]
					.findViewWithTag(TAG_ICON_0);
			prevIcon.setImageResource(R.drawable.main_home);
			break;
		case 1:
			prevIcon = (ImageView) mIndicators[mCurIndicator]
					.findViewWithTag(TAG_ICON_1);
			prevIcon.setImageResource(R.drawable.main_user);
			break;
		case 2:
			prevIcon = (ImageView) mIndicators[mCurIndicator]
					.findViewWithTag(TAG_ICON_2);
			prevIcon.setImageResource(R.drawable.main_set);
			break;
		case 3:
			prevIcon = (ImageView) mIndicators[mCurIndicator]
					.findViewWithTag(TAG_ICON_3);
			prevIcon.setImageResource(R.drawable.main_more);
			break;
		default:
			break;
		}
		Log.i(TAG, "setIndicator:mCurIndicator=" + mCurIndicator);
		// 更新当前状态
		mIndicators[which].setBackgroundResource(R.drawable.indic_select);
		ImageView currIcon;
		switch (which) {
		case 0:
			currIcon = (ImageView) mIndicators[which]
					.findViewWithTag(TAG_ICON_0);
			currIcon.setImageResource(R.drawable.main_home_hover);// 选中后的图片
			break;
		case 1:
			currIcon = (ImageView) mIndicators[which]
					.findViewWithTag(TAG_ICON_1);
			currIcon.setImageResource(R.drawable.main_user_hover);
			break;
		case 2:
			currIcon = (ImageView) mIndicators[which]
					.findViewWithTag(TAG_ICON_2);
			currIcon.setImageResource(R.drawable.main_set_hover);
			break;
		case 3:
			currIcon = (ImageView) mIndicators[which]
					.findViewWithTag(TAG_ICON_3);
			currIcon.setImageResource(R.drawable.main_more_hover);
			break;
		default:
			break;
		}
		mCurIndicator = which;
	}

	public interface OnIndicateListener {
		public void onIndicate(View v, int which);
	}

	public void setOnIndicateListener(OnIndicateListener listener) {
		mOnIndicateListener = listener;
	}

	@Override
	public void onClick(View v) {
		if (mOnIndicateListener != null) {
			int tag = (Integer) v.getTag();
			switch (tag) {
			case 0:
				if (mCurIndicator != 0) {
					mOnIndicateListener.onIndicate(v, 0);
					setIndicator(0);
				}
				break;
			case 1:
				if (mCurIndicator != 1) {
					mOnIndicateListener.onIndicate(v, 1);
					setIndicator(1);
				}
				break;
			case 2:
				if (mCurIndicator != 2) {
					mOnIndicateListener.onIndicate(v, 2);
					setIndicator(2);
				}
				break;
			case 3:
				if (mCurIndicator != 3) {
					mOnIndicateListener.onIndicate(v, 3);
					setIndicator(3);
				}
				break;
			default:
				break;
			}

		}

	}

}

自定义顶部工具栏
title_view.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="48dip"
    android:background="#18222E" >

    <ImageButton
        android:id="@+id/ib_back"
        android:layout_width="48dp"
        android:layout_height="match_parent"
        android:src="@drawable/ic_titleback" 
        />

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:text="个人信息"/>
    
    <ImageButton
        android:id="@+id/ib_handle"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="right"
        android:layout_marginRight="12dp"
        android:visibility="gone"/>

</FrameLayout>

TitleView.java

/**
 * 功能描述：自定义顶部工具栏
 */
public class TitleView extends FrameLayout implements View.OnClickListener {
	public OnBackButtonClickListener mOnBackButtonClickListener;
	public OnHandleButtonClickListener mHandleButtonClickListener;
	private TextView mTitle;
	private ImageButton mBackButton;
	private ImageButton ib_handle;

	public TitleView(Context context) {
		this(context, null);
	}

	public TitleView(Context context, AttributeSet attrs) {
		this(context, attrs, 0);
	}

	public TitleView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);

		LayoutInflater inflater = (LayoutInflater) context
				.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
		inflater.inflate(R.layout.title_view, this, true);
		mBackButton = (ImageButton) findViewById(R.id.ib_back);
		mBackButton.setOnClickListener(this);
		mTitle = (TextView) findViewById(R.id.tv_title);
		mTitle.setVisibility(View.INVISIBLE);
		ib_handle = (ImageButton) findViewById(R.id.ib_handle);
		ib_handle.setOnClickListener(this);
	}

	public interface OnBackButtonClickListener {
		public void onClick(View button);
	}

	public interface OnHandleButtonClickListener {
		public void onClick(View button);
	}

	/**
	 * 标题返回按钮
	 * 
	 * @param listener
	 */
	public void setBackButton(OnBackButtonClickListener listener) {
		mOnBackButtonClickListener = listener;
	}
	
	public void showBackBtn(){
		mBackButton.setVisibility(View.VISIBLE);
	}
	
	public void hiddenBackBtn(){
		mBackButton.setVisibility(View.GONE);
	}
	
	/**
	 * 标题操作按钮
	 * 
	 * @param listener
	 */
	public void setHandleButton(OnHandleButtonClickListener listener) {
		mHandleButtonClickListener = listener;
	}
	
	public void hiddenHandleBtn(){
		ib_handle.setVisibility(View.GONE);
	}
	
	public void showHandleBtn(int iamgeBtnID){
		ib_handle.setImageResource(iamgeBtnID);
		ib_handle.setVisibility(View.VISIBLE);
	}
//设置标题
	public void setTitle(String text) {
		mTitle.setVisibility(View.VISIBLE);
		mTitle.setText(text);
	}

	public void setTitle(int stringID) {
		mTitle.setVisibility(View.VISIBLE);
		mTitle.setText(stringID);
	}

	@Override
	public void onClick(View v) {
		switch (v.getId()) {
		case R.id.ib_back:
			if (mOnBackButtonClickListener != null) {
				mOnBackButtonClickListener.onClick(v);
			}
			break;
		case R.id.ib_handle:
			if (mHandleButtonClickListener != null) {
				mHandleButtonClickListener.onClick(v);
			}
			break;
		default:
			break;
		}
	}

}

在main.xml里面添加相关fragment和自定义底部工具栏,注意name属性

<LinearLayout 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:orientation="vertical" >

    <fragment
        android:id="@+id/fragment_main"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:name="com.qyh.fragment.MainFragment" />

    <fragment
        android:id="@+id/fragment_grxx"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:name="com.qyh.fragment.GrxxFragment" />

    <fragment
        android:id="@+id/fragment_sz"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:name="com.qyh.fragment.SzFragment" />

    <fragment
        android:id="@+id/fragment_others"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:name="com.qyh.fragment.OthersFragment" />
    
    <!--此处为自定义底部菜单栏  -->
    <com.qyh.fragment.FragmentIndicator
        android:id="@+id/indicator"
        android:layout_width="fill_parent"
        android:layout_height="48dp"
        />

</LinearLayout>

在主线程中对fragment做相关操作

public class MainActivity extends FragmentActivity {
	
	public static Fragment[] mFragments;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.activity_main);
		setFragmentIndicator(0);

	}
	
	private void setFragmentIndicator(int whichIsDefault) {
		mFragments = new Fragment[4];
		mFragments[0] = getSupportFragmentManager().findFragmentById(
				R.id.fragment_main);
		mFragments[1] = getSupportFragmentManager().findFragmentById(
				R.id.fragment_grxx);
		mFragments[2] = getSupportFragmentManager().findFragmentById(
				R.id.fragment_sz);
		mFragments[3] = getSupportFragmentManager().findFragmentById(
				R.id.fragment_others);
		getSupportFragmentManager().beginTransaction().hide(mFragments[0])
				.hide(mFragments[1]).hide(mFragments[2]).hide(mFragments[3])
				.show(mFragments[whichIsDefault]).commit();

		FragmentIndicator mIndicator = (FragmentIndicator) findViewById(R.id.indicator);
		FragmentIndicator.setIndicator(whichIsDefault);
		mIndicator.setOnIndicateListener(new OnIndicateListener() {

			@Override
			public void onIndicate(View v, int which) {
				getSupportFragmentManager().beginTransaction()
						.hide(mFragments[0]).hide(mFragments[1])
						.hide(mFragments[2]).hide(mFragments[3])
						.show(mFragments[which]).commit();
			}
		});
	}
}

运行相关效果图