转载请说明出处：http://www.sunhome.org.cn
我发现现在的移动开发界面都被iOS主导了，UI动不动设计出来的东西都是ios的风格，对于一个做Android的程序员来说甚是苦恼啊，为了适应这种环境和氛围，今天我们来自定义一个TabBar，这个是移动开发很常用的一个组件。
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- TabBarItem -->
<declare-styleable name="TabBarItem">
<attr name="checked_item" format="boolean"></attr>
<attr name="nomal_icon" format="reference"></attr>
<attr name="check_icon" format="reference"></attr>
<attr name="text" format="string"></attr>
<attr name="text_size" format="dimension"></attr>
<attr name="nomal_color" format="color"></attr>
<attr name="check_color" format="color"></attr>
</declare-styleable>
</resources>定义界面xml文件<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:hyman="http://schemas.android.com/apk/res/com.xxx.xx"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/app_base_nomal_background_color"
android:orientation="vertical" >
<FrameLayout
android:id="@+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"/>
<View
android:layout_width="match_parent"
android:layout_height="1px"
android:background="@color/color_app_base_7"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dip"
android:background="@color/main_bottom_tab_bg_color"
android:orientation="horizontal">
<com.xxx.xx.view.TabBarItem
android:id="@+id/id_indicator_one"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
hyman:checked_item="true"
hyman:nomal_icon="@drawable/tab_bar_home_normal"
hyman:check_icon="@drawable/tab_bar_home_current"
hyman:text="@string/activity_main_tab1_title"
hyman:text_size="@dimen/app_nomal_text_size"
hyman:nomal_color="@color/color_app_base_2"
hyman:check_color="@color/color_app_base_1"/>
<com.xxx.xx.view.TabBarItem
android:id="@+id/id_indicator_two"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
hyman:checked_item="false"
hyman:nomal_icon="@drawable/tab_bar_market_normal"
hyman:check_icon="@drawable/tab_bar_market_current"
hyman:text="@string/activity_main_tab2_title"
hyman:text_size="@dimen/app_nomal_text_size"
hyman:nomal_color="@color/color_app_base_2"
hyman:check_color="@color/color_app_base_1"/>
<com.xxx.xx.view.TabBarItem
android:id="@+id/id_indicator_three"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
hyman:checked_item="false"
hyman:nomal_icon="@drawable/tab_bar_market_normal"
hyman:check_icon="@drawable/tab_bar_market_current"
hyman:text="@string/activity_main_tab3_title"
hyman:text_size="@dimen/app_nomal_text_size"
hyman:nomal_color="@color/color_app_base_2"
hyman:check_color="@color/color_app_base_1"/>
<com.xxx.xx.view.TabBarItem
android:id="@+id/id_indicator_four"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
hyman:checked_item="false"
hyman:nomal_icon="@drawable/tab_bar_basket_normal"
hyman:check_icon="@drawable/tab_bar_basket_current"
hyman:text="@string/activity_main_tab4_title"
hyman:text_size="@dimen/app_nomal_text_size"
hyman:nomal_color="@color/color_app_base_2"
hyman:check_color="@color/color_app_base_1"/>
<com.xxx.xx.view.TabBarItem
android:id="@+id/id_indicator_five"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
hyman:checked_item="false"
hyman:nomal_icon="@drawable/tab_bar_personal_normal"
hyman:check_icon="@drawable/tab_bar_personal_current"
hyman:text="@string/activity_main_tab5_title"
hyman:text_size="@dimen/app_nomal_text_size"
hyman:nomal_color="@color/color_app_base_2"
hyman:check_color="@color/color_app_base_1"/>
</LinearLayout>
</LinearLayout>自定义TabBarItem
package com.guozha.buy.view;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.drawable.BitmapDrawable;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.Gravity;
import android.widget.ImageView;
import android.widget.ImageView.ScaleType;
import android.widget.LinearLayout;
import android.widget.TextView;
import com.guozha.buy.R;
import com.guozha.buy.util.DimenUtil;
import com.guozha.buy.util.LogUtil;
/**
* TabBar的按钮控件
* @author PeggyTong
*
*/
public class TabBarItem extends LinearLayout{
private static final int ICON_HEIGHT = 32;
private boolean isChoosed;
private String mTextContent;
private int mTextSize;
private int mTextNomalColor;
private int mTextCheckColor;
private Bitmap mNomalIcon;
private Bitmap mCheckIcon;
private ImageView mBtnImage;
private TextView mBtnText;
public TabBarItem(Context context) {
this(context, null);
}
public TabBarItem(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public TabBarItem(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initTabBarItem(context, attrs);
}
/**
* 初始化
* @param context
* @param attrs
*/
private void initTabBarItem(Context context, AttributeSet attrs) {
initTabItem(context, attrs); //获取尺寸
addChilds(context); //添加子view
changeCheckedStatus(); //根据状态显示当前view
}
/**
* 添加子控件
* @param context
*/
private void addChilds(Context context) {
setOrientation(LinearLayout.VERTICAL);
setGravity(Gravity.CENTER);
mBtnImage = new ImageView(context);
mBtnImage.setScaleType(ScaleType.CENTER_INSIDE);
mBtnImage.setLayoutParams(
new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, DimenUtil.dp2px(context, ICON_HEIGHT)));
mBtnText = new TextView(context);
LogUtil.e("mTextSize = " + mTextSize);
mBtnText.setText(mTextContent);
mBtnText.setTextSize(TypedValue.COMPLEX_UNIT_PX, mTextSize);
mBtnText.setLayoutParams(
new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
addView(mBtnImage);
addView(mBtnText);
}
/**
* 改变当前显示状态
*/
private void changeCheckedStatus() {
if(isChoosed){
mBtnImage.setImageBitmap(mCheckIcon);
mBtnText.setTextColor(mTextCheckColor);
}else{
mBtnImage.setImageBitmap(mNomalIcon);
mBtnText.setTextColor(mTextNomalColor);
}
}
/**
* 设置为选中状态
*/
public void setCheckedItem(){
isChoosed = true;
changeCheckedStatus();
}
/**
* 设置为未选中状态
*/
public void setDisCheckedItem(){
isChoosed = false;
changeCheckedStatus();
}
/**
* 初始配置的数据
* @param context
* @param attrs
*/
private void initTabItem(Context context, AttributeSet attrs){
TypedArray typeArr = context.obtainStyledAttributes(attrs, R.styleable.TabBarItem);
int count = typeArr.getIndexCount();
for(int i = 0; i < count; i++){
int attr = typeArr.getIndex(i);
switch(attr){
case R.styleable.TabBarItem_checked_item:
isChoosed = typeArr.getBoolean(attr, false);
break;
case R.styleable.TabBarItem_text:
mTextContent = typeArr.getString(attr);
break;
case R.styleable.TabBarItem_text_size:
mTextSize = (int) typeArr.getDimension(attr, TypedValue.applyDimension
(TypedValue.COMPLEX_UNIT_SP, 12, getResources().getDisplayMetrics()));
break;
case R.styleable.TabBarItem_nomal_color:
mTextNomalColor = typeArr.getColor(attr, getResources().getColor(R.color.color_app_base_2));
break;
case R.styleable.TabBarItem_check_color:
mTextCheckColor = typeArr.getColor(attr, getResources().getColor(R.color.color_app_base_1));
break;
case R.styleable.TabBarItem_nomal_icon:
mNomalIcon = ((BitmapDrawable)typeArr.getDrawable(attr)).getBitmap();
break;
case R.styleable.TabBarItem_check_icon:
mCheckIcon = ((BitmapDrawable)typeArr.getDrawable(attr)).getBitmap();
break;
}
}
typeArr.recycle();
}
}
如果是多个Tab切换，可以使用Fragment添加初始界面的Fragment
//添加一个fragment getSupportFragmentManager().beginTransaction() .add(R.id.fragment_container, mFragments.get(0)).commit();替换Fragment
getSupportFragmentManager().beginTransaction() .replace(R.id.fragment_container, mFragments.get(mCurrentItem)) .addToBackStack(null).commit();