Android 自定义TabHost

ps:我们平时在项目中经常用到TabHost作为引导页,实现的方法太多了,这里介绍使用比较多的一种吧

1.使用xml方法搭建

这里说明在底部的情况的时候的搭建过程

<?xml version="1.0" encoding="utf-8"?>
<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="com.example.cxj.tabhost.MainActivity">

    <RadioGroup
        android:id="@+id/act_main_rg"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="#EEEEEE"
        android:orientation="horizontal">


        <RadioButton
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:button="@null"
            android:gravity="center"
            android:drawableTop="@drawable/radiobutton_home_bg"
            android:text="首页" />

        <RadioButton
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:button="@null"
            android:drawableTop="@drawable/radiobutton_demo_bg"
            android:text="测试" />


        <RadioButton
            android:layout_weight="1"
            android:layout_width="0dp"
            android:gravity="center"
            android:layout_height="wrap_content"
            android:button="@null"
            android:drawableTop="@drawable/radiobutton_my_bg"
            android:text="我的" />

    </RadioGroup>

</RelativeLayout>

上面的xml文件就是我们演示的那种效果了,但是相信都应该看得懂,代码复制到你的项目中就可以使用,点击之后显示选中的状态是利用选择器selector做的

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="false" android:drawable="@mipmap/demo_nor"></item>
    <item android:state_checked="true" android:drawable="@mipmap/demo_selected"></item>
</selector>

我举例了一个选择器的用法,其他两个就不贴出了,都是类似的

public class MainActivity extends Activity {

    private RadioGroup rg = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        rg = (RadioGroup) findViewById(R.id.act_main_rg);
        rg.clearCheck();
        rg.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                int radioButtonId = group.getCheckedRadioButtonId();
                //根据ID获取RadioButton的实例
                RadioButton rb = (RadioButton)MainActivity.this.findViewById(radioButtonId);
                Toast.makeText(MainActivity.this, rb.getText(), Toast.LENGTH_SHORT).show();
            }
        });
    }

}

在Activity中监听选中的是哪一个,然后对应你的项目中你就可以加载对应的模块了,比如让ViewPager滑动到指定的模块,或者替换Activity中的Fragment,显示对应的功能模块

这就看你自己去书写了

2.使用自定义控件的形式

/**
 * Created by cxj on 2016/4/25.
 * 一个自定义的TabHost
 */
public class MTabHost extends RadioGroup {

    /**
     * 文字在图片的上面
     */
    public static final int TOP_TEXTPOSITION = 0;

    /**
     * 文字在图片的下面
     */
    public static final int BOTTOM_TEXTPOSITION = 1;

    /**
     * 文字在图片的左边
     */
    public static final int LEFT_TEXTPOSITION = 2;

    /**
     * 文字在图片的右边
     */
    public static final int RIGHT_TEXTPOSITION = 3;

    /**
     * 默认文字是在图片上面的
     */
    private int textPosition = TOP_TEXTPOSITION;

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

    public MTabHost(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    //===================== 共有方法 start ==========================================

    /**
     * @param norImageRid
     * @param selectedImageRid
     * @param text
     */
    public void addTab(int norImageRid, int selectedImageRid, String text) {
        //创建单选按钮
        RadioButton rb = new RadioButton(getContext());
        //取消圆点
        rb.setButtonDrawable(null);
        //设置内容居中
        rb.setGravity(Gravity.CENTER);
        //声明布局参数对象
        RadioGroup.LayoutParams lp;
        StateListDrawable drawable = new StateListDrawable();
        //添加默认的item
        drawable.addState(new int[]{-android.R.attr.state_checked},
                new BitmapDrawable(getResources(), BitmapFactory.decodeResource(getResources(), norImageRid)));
        //添加选择后的item
        drawable.addState(new int[]{android.R.attr.state_checked},
                new BitmapDrawable(getResources(), BitmapFactory.decodeResource(getResources(), selectedImageRid)));
        //设置大小
        drawable.setBounds(0, 0, drawable.getMinimumWidth(), drawable.getMinimumHeight());
        //获取组建的朝向
        int orientation = getOrientation();
        //如果是水平的
        if (orientation == LinearLayout.HORIZONTAL) {
            //水平的时候创建一个高度填充,但是宽度平分的布局参数
            lp = new RadioGroup.LayoutParams(0, ViewGroup.LayoutParams.MATCH_PARENT, 1);
            //判断文字是不是在图片下面
            if (textPosition == BOTTOM_TEXTPOSITION) {
                rb.setCompoundDrawables(null, drawable, null, null);
            } else { //文字再图片上面
                rb.setCompoundDrawables(null, null, null, drawable);
            }
        } else { //否则就是竖直的
            //竖直的时候创建一个宽度填充,但是高度平分的布局参数
            lp = new RadioGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 0, 1);
            //判断文字是不是在图片右边
            if (textPosition == RIGHT_TEXTPOSITION) {
                rb.setCompoundDrawables(drawable, null, null, null);
            } else { //文字在图片左边
                rb.setCompoundDrawables(null, null, drawable, null);
            }
        }
        //设置布局参数
        rb.setLayoutParams(lp);
        //设置文本
        rb.setText(text);
        //添加到组中
        this.addView(rb);
        //请求重新布局
        requestLayout();
    }

    /**
     * 设置文字的方位
     * 在方法{@link MTabHost#addTab(int, int, String)}之前调用
     * <p/>
     * {@link MTabHost#TOP_TEXTPOSITION}
     * {@link MTabHost#BOTTOM_TEXTPOSITION}
     * {@link MTabHost#LEFT_TEXTPOSITION}
     * {@link MTabHost#RIGHT_TEXTPOSITION}
     *
     * @param textPosition
     */
    public void setTextPosition(int textPosition) {
        this.textPosition = textPosition;
    }

    //===================== 共有方法 end ==========================================

}

注释写的不能再详细了,其实也就是xml的搭建过程翻译成对应的代码,其实明显自定义的控件的形式比较麻烦,但是封装好了之后就比较简便了

使用方法

第一步:xml中声明

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tabhost="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.cxj.gitinit.MainActivity">

    <xiaojinzi.view.tabHost.MTabHost
        android:layout_alignParentBottom="true"
        android:id="@+id/th"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#CCCCCC"
        android:orientation="horizontal"></xiaojinzi.view.tabHost.MTabHost>

</RelativeLayout>

第二步:加上选项卡

public class MainActivity extends AppCompatActivity {

    private MTabHost mTabHost = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.act_main);

        mTabHost = (MTabHost) findViewById(R.id.th);
        //设置文字的位置,在addTab方法之前调用,否则无效
        mTabHost.setTextPosition(MTabHost.BOTTOM_TEXTPOSITION);

        mTabHost.addTab(R.mipmap.home_nor, R.mipmap.home_selected, "首页");
        mTabHost.addTab(R.mipmap.demo_nor, R.mipmap.demo_selected, "测试");
        mTabHost.addTab(R.mipmap.my_nor, R.mipmap.my_selected, "我的");


    }
}

源码我上传到github上了

xml搭建的过程的源码:https://github.com/xiaojinzi123/xiaojinzi-openSource-other/tree/master/TabHost

自定义控件的源码:https://github.com/xiaojinzi123/xiaojinzi-openSource-view/tree/master/xiaojinzi/view/tabHost