转载请说明出处: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();