«

Android自定义TabBar

时间:2024-3-2 17:44     作者:韩俊     分类: Android


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

标签: android

热门推荐