页面布局之使用TabActivity实现底部Tabbar

最新推荐文章于 2022-01-17 13:07:34 发布

wdmxzf

最新推荐文章于 2022-01-17 13:07:34 发布

阅读量683

点赞数

本文链接：https://blog.csdn.net/wdmxzf/article/details/52968058

版权

<span style="font-family: SimHei;">页面布局</span>

Android页面布局无非就那么几种：TabHost、RelativeLayout、LinearLayout；其中TabHost是用来布局Tabbar的，RelativeLayout是相对布局，LinearLayout是线性布局，接下来咱们细说它们三个的用法。

TabHost

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <FrameLayout
            android:id="@android:id/tabcontent"<span style="font-family: Arial, Helvetica, sans-serif;">
            android:layout_width="match_parent"
            android:layout_height="0.0dip"
            android:layout_weight="1.0" />

        <TabWidget
            android:id="@android:id/tabs"<span style="font-family: Arial, Helvetica, sans-serif;">
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0.0"
            android:visibility="gone" />

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#e4e4e4" />

        <RadioGroup
            android:id="@+id/main_tab"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="#FFFFFF"
            android:gravity="center_vertical"
            android:orientation="horizontal"
            android:visibility="visible">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#FFFFFF"
                android:baselineAligned="false"
                android:gravity="bottom"
                android:orientation="horizontal">

                <FrameLayout
                    android:id="@+id/fl_tab_1"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:visibility="visible"
                    >
                    <RadioButton
                        android:id="@+id/rb_tab_1"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        style="@style/tabbar_radio"
                        />

                    <TextView
                        android:id="@+id/tv_tab_tip_1"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        style="@style/tabbar_text_tip"
                        />

                </FrameLayout>

                <FrameLayout
                    android:id="@+id/fl_tab_2"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:visibility="visible">
                    <RadioButton
                        android:id="@+id/rb_tab_2"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        style="@style/tabbar_radio"
                        />

                    <TextView
                        android:id="@+id/tv_tab_tip_2"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        style="@style/tabbar_text_tip"
                        />

                </FrameLayout>

                <FrameLayout
                    android:id="@+id/fl_tab_3"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:visibility="visible">
                    <RadioButton
                        android:id="@+id/rb_tab_3"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        style="@style/tabbar_radio"
                        />

                    <TextView
                        android:id="@+id/tv_tab_tip_3"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        style="@style/tabbar_text_tip"
                        />

                </FrameLayout>

                <FrameLayout
                    android:id="@+id/fl_tab_4"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:visibility="gone">
                    <RadioButton
                        android:id="@+id/rb_tab_4"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        style="@style/tabbar_radio"
                        />

                    <TextView
                        android:id="@+id/tv_tab_tip_4"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        style="@style/tabbar_text_tip"
                        />

                </FrameLayout>

                <FrameLayout
                    android:id="@+id/fl_tab_5"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:visibility="visible">
                    <RadioButton
                        android:id="@+id/rb_tab_5"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        style="@style/tabbar_radio"
                        />

                    <TextView
                        android:id="@+id/tv_tab_tip_5"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        style="@style/tabbar_text_tip"
                        />

                </FrameLayout>

            </LinearLayout>

        </RadioGroup>

    </LinearLayout>
</TabHost>

在使用TabHost时，有三个控件的id是不能更改。TabHost设置android:id="@android:id/tabhost"，在Activity中可以通过getHost()方法找到TabHost视图对象；TabWidget设置android:id="@android:id/tabs"，它是选项卡按钮，可以点击该组件切换选项卡；FrameLayout设置android:id="@android:id/tabcontent"，它是装载Activity或者Fragment的容器，也就是Tabbar每个Item对应的页面。如果想要把Tabbar放到页面的下方，需要设置FrameLayout的android:layout_weight="1.0"。

对应的Java代码如下：

public class HomeActivity extends TabActivity implements View.OnClickListener{

    private TabHost mTabHost;
    private FrameLayout tabcontent;
    private TabWidget tabs;
    private RadioGroup main_tab;
    private FrameLayout fl_tab_1;
    private RadioButton rb_tab_1;
    private TextView tv_tab_tip_1;
    private FrameLayout fl_tab_2;
    private RadioButton rb_tab_2;
    private TextView tv_tab_tip_2;
    private FrameLayout fl_tab_3;
    private RadioButton rb_tab_3;
    private TextView tv_tab_tip_3;

    private Intent oneIntent;
    private Intent twoIntent;
    private Intent threeIntent;
    private final static String TAB_TAG_ONE = "tab_tag_one";
    private final static String TAB_TAG_TWO = "tab_tag_two";
    private final static String TAB_TAG_THREE = "tab_tag_three";


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_home);
        initUI();
        initData();
    }

    private void initData() {
        prepareIntent();
        setupIntent();
        rb_tab_1.setChecked(true);
        mTabHost.setCurrentTabByTag(TAB_TAG_ONE);
    }

    private void initUI() {
        tabcontent = (FrameLayout) findViewById(android.R.id.tabcontent);
        tabs = (TabWidget) findViewById(android.R.id.tabs);
        main_tab = (RadioGroup) findViewById(R.id.main_tab);
        fl_tab_1 = (FrameLayout) findViewById(R.id.fl_tab_1);
        rb_tab_1 = (RadioButton) findViewById(R.id.rb_tab_1);
        tv_tab_tip_1 = (TextView) findViewById(R.id.tv_tab_tip_1);
        fl_tab_2 = (FrameLayout) findViewById(R.id.fl_tab_2);
        rb_tab_2 = (RadioButton) findViewById(R.id.rb_tab_2);
        tv_tab_tip_2 = (TextView) findViewById(R.id.tv_tab_tip_2);
        fl_tab_3 = (FrameLayout) findViewById(R.id.fl_tab_3);
        rb_tab_3 = (RadioButton) findViewById(R.id.rb_tab_3);
        tv_tab_tip_3 = (TextView) findViewById(R.id.tv_tab_tip_3);
        rb_tab_1.setOnClickListener(this);
        rb_tab_2.setOnClickListener(this);
        rb_tab_3.setOnClickListener(this);
    }

    private void prepareIntent() {
        oneIntent = new Intent(this, OneActivity.class);
        twoIntent = new Intent(this, TwoActivity.class);
        threeIntent = new Intent(this, ThreeActivity.class);
    }

    private void setupIntent() {
        mTabHost = getTabHost();
        TabHost localTabHost = mTabHost;
        localTabHost.addTab(buildTabSpec(TAB_TAG_ONE, R.string.tab_one, R.drawable.tabbar_button1, oneIntent));
        localTabHost.addTab(buildTabSpec(TAB_TAG_TWO, R.string.tab_two, R.drawable.tabbar_button2, twoIntent));
        localTabHost.addTab(buildTabSpec(TAB_TAG_THREE, R.string.tab_three, R.drawable.tabbar_button3, threeIntent));
    }
    private TabHost.TabSpec buildTabSpec(String tag, int resLabel, int resIcon, final Intent content) {
        return mTabHost.newTabSpec(tag).setIndicator(getString(resLabel), ContextCompat.getDrawable(this,resIcon))
                .setContent(content);
    }

    private void tabChanged(int id) {
        switch (id) {
            case R.id.rb_tab_1:
                mTabHost.setCurrentTabByTag(TAB_TAG_ONE);
                rb_tab_1.setChecked(true);
                rb_tab_2.setChecked(false);
                rb_tab_3.setChecked(false);
                break;
            case R.id.rb_tab_2:
                mTabHost.setCurrentTabByTag(TAB_TAG_TWO);
                rb_tab_1.setChecked(false);
                rb_tab_2.setChecked(true);
                rb_tab_3.setChecked(false);
                break;
            case R.id.rb_tab_3:
                mTabHost.setCurrentTabByTag(TAB_TAG_THREE);
                rb_tab_1.setChecked(false);
                rb_tab_2.setChecked(false);
                rb_tab_3.setChecked(true);
                break;
            default:
                Toast.makeText(this,"该功能暂未开发",Toast.LENGTH_SHORT).show();
                break;
        }
    }

    @Override
    public void onClick(View v) {
        tabChanged(v.getId());
    }

    public static void startHomeActivity(Context context){
        Intent intent = new Intent();
        intent.setClass(context,HomeActivity.class);
        context.startActivity(intent);
    }

布局中的TextView为消息提醒，当后台给你推送一条消息时，会使用到该textView；其中TabActivity是一个Activity的容器，现在大多数的Tabbar都是使用Fragment，但是考虑一些兼容性问题（比如RN的稳定性、兼容android低版本）还是使用Activity。在接下来的文章里会有使用Fragment实现Tabbar.

使用AS编译过的完整代买： http://download.csdn.net/detail/wdmxzf/9668513