首先,看下要兼容的Action bar的效果图吧.
1、想法是这块只做1个布局文件,具体页面在用的时候include进来就好。
2、分析这个通用的布局,标题要用RadioGroup去做,有几个标题就显示几个RadioButton,右边功能按钮的方法类似,只是用LinearLayout
上代码 common_header.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="43dp"
android:background="@color/green_dark" >
<Button
android:id="@+id/btn_header_left"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="@drawable/btn_back_common" />
<RadioGroup
android:id="@+id/rg_header_radioButtons"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:orientation="horizontal" >
<RadioButton
android:id="@+id/rb_header_tab0"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:button="@null"
android:gravity="center"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:textColor="@color/white"
android:visibility="gone" />
<RadioButton
android:id="@+id/rb_header_tab1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:button="@null"
android:gravity="center"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:textColor="@color/white"
android:visibility="gone" />
<RadioButton
android:id="@+id/rb_header_tab2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:button="@null"
android:gravity="center"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:textColor="@color/white"
android:visibility="gone" />
</RadioGroup>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
>
<Button
android:id="@+id/btn_header_right2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:textColor="@color/white"
android:visibility="gone"
/>
<Button
android:id="@+id/btn_header_right1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:textColor="@color/white"
android:visibility="gone" />
</LinearLayout>
</RelativeLayout>
public class CommonHeader {
/**
* 类标识.
*/
private static final String TAG = TAGBuilder.build(CommonHeader.class);
/**
* 上下文.
*/
private Context mContext;
/**
* 单选按钮容器.
*/
private RadioGroup mRadioGroup;
/**
* 左按钮.
*/
private Button mLeftBtn;
/**
* 右按钮.
*/
private Button mRightBtns[];
/**
* 右按钮id数组.
*/
private int rightIds[];
/**
* 单选按钮id数组.
*/
private int radioIds[];
/**
* 单选按钮数组.
*/
private RadioButton mTabRbs[];
/**
* tab切换的监听.
*/
private OnTabChangeListener mListener;
/**
* Activity里用的构造器.
*
* @param activity 能调findViewById的对象,这里是Activity.
*/
public CommonHeader(Activity activity) {
super();
mContext = activity;
mRadioGroup = (RadioGroup) activity
.findViewById(R.id.rg_header_radioButtons);
mLeftBtn = (Button) activity.findViewById(R.id.btn_header_left);
rightIds = new int[]{R.id.btn_header_right1, R.id.btn_header_right2};
mRightBtns = new Button[rightIds.length];
for (int i = 0; i < rightIds.length; i++) {
mRightBtns[i] = (Button) activity.findViewById(rightIds[i]);
}
radioIds = new int[]{R.id.rb_header_tab0, R.id.rb_header_tab1,
R.id.rb_header_tab2};
mTabRbs = new RadioButton[radioIds.length];
for (int i = 0; i < radioIds.length; i++) {
mTabRbs[i] = (RadioButton) activity.findViewById(radioIds[i]);
}
}
/**
* Fragment里用的构造器.
*
* @param context 上下文.
* @param view 能调findViewById的对象,这里是view.
*/
public CommonHeader(Context context, View view) {
super();
mContext = context;
mRadioGroup = (RadioGroup) view
.findViewById(R.id.rg_header_radioButtons);
mLeftBtn = (Button) view.findViewById(R.id.btn_header_left);
rightIds = new int[]{R.id.btn_header_right1, R.id.btn_header_right2};
mRightBtns = new Button[rightIds.length];
for (int i = 0; i < rightIds.length; i++) {
mRightBtns[i] = (Button) view.findViewById(rightIds[i]);
}
radioIds = new int[]{R.id.rb_header_tab0, R.id.rb_header_tab1,
R.id.rb_header_tab2};
mTabRbs = new RadioButton[radioIds.length];
for (int i = 0; i < radioIds.length; i++) {
mTabRbs[i] = (RadioButton) view.findViewById(radioIds[i]);
}
}
/**
* 设置标题<br>
* 可以设置多个标题<br>
* 多个标题间用tab隔开.
*
* @param titles 标题名称组.
*/
public void setTitle(String... titles) {
for (int i = 0; i < titles.length; i++) {
LogCat.v(TAG+titles[i]);
mTabRbs[i].setText(titles[i]);
mTabRbs[i].setVisibility(View.VISIBLE);
mTabRbs[i].setTextSize(20f);
}
}
/**
* 设置默认选择哪个tab页.
*
* @param position 第几个,默认从0开始.
*/
public void setCheckPosition(int position) {
mTabRbs[position].setChecked(true);
// mTabRbs[position].setBackgroundColor(mContext.getResources()
// .getColor(R.color.green_00B797));
}
/**
* 设置tab切换监听器.
*
* @param listener tab切换的监听器.
*/
public void setListener(OnTabChangeListener listener) {
this.mListener = listener;
mRadioGroup.setOnCheckedChangeListener(new OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
for (int i = 0; i < radioIds.length; i++) {
if (checkedId == radioIds[i]) {
mTabRbs[i].setBackgroundColor(mContext.getResources()
.getColor(R.color.green_00B797));
if (mListener != null) {
mListener.onTabChanged(i);
}
} else {
mTabRbs[i].setBackgroundColor(mContext.getResources()
.getColor(R.color.green_dark));
}
}
}
});
}
/**
* 获取左按钮.
*
* @return 左边按钮.
*/
public Button getLeftBtn() {
return mLeftBtn;
}
/**
* 设置右按钮的背景图片.
*
* @param resId 右边按钮的图标组(R.drawable里的).
*/
public void setRightBtnBackgroundResource(int... resId) {
for (int i = 0; i < resId.length; i++) {
mRightBtns[i].setBackgroundResource(resId[i]);
mRightBtns[i].setVisibility(View.VISIBLE);
}
}
/**
* 根据位置获取右按钮.
*
* @return 右边按钮.
*/
public Button getRightBtn(int position) {
if (position < mRightBtns.length)
return mRightBtns[position];
else return null;
}
/**
* 获取选中的tab是第几个<br>
* 从0开始计.
*
* @return 获取选中的位置,从0开始.
*/
public int getCheckPosition() {
int postion = -1;
for (int i = 0; i < radioIds.length; i++) {
if (mRadioGroup.getCheckedRadioButtonId() == radioIds[i]) {
postion = i;
}
}
return postion;
}
/**
* TAB切换监听.
*
* @author fengdianxun
*/
public interface OnTabChangeListener {
/**
* 当tab切换发生时.
*
* @param position 位置.
*/
void onTabChanged(int position);
}
}
4、在具体页面的xml只要include一下,如下
<include layout="@layout/common_header" />
5、具体页面java部分
CommonHeader mHeader = new CommonHeader(this);
mBackBtn = mHeader.getLeftBtn();
mHeader.setTitle("One", "Two");
mFragments = new Fragment[]{new OneFragment(),new TwoFragment()};
mHeader.setListener(new CommonHeader.OnTabChangeListener() {
@Override
public void onTabChanged(int position) {
changeFragment(mFragments[position]);
}
});
mHeader.setCheckPosition(0);
mHeader.setRightBtnBackgroundResource(R.drawable.icon1,R.drawable.icon2);
btn1 = mHeader.getRightBtn(0);
btn2 = mHeader.getRightBtn(1);
6、大致就是这个样子,我相信大家应该懂了我思路了。
Android开发交流群 QQ群号223919243 (未满)