TabActivity自定义底部导航栏_逍遥-无忌的博客-程序员宅基地

技术标签: 导航  UI界面  

TabActivity本身继承自ActivityGroup,主要功能是实现多个activity或者view之间的切换和显示,要使用该类必须新建一个类来继承TabActivity,并且该类的xml配置文件中必须包含、、三个视图(View),其中后面两个标签是前面一个标签的子标签,表示tab页的选项卡,相当于菜单页,表示显示内容的区域。

1.自定义底部导航栏布局

由于TabWidget不方便自定义布局,因此在布局中将其隐藏,然后自己写布局代替TabWidget效果。
注意TabHost TabWidget FrameLayout的id必须是固定的,不能自己定义Id

<?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="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:visibility="gone" />

        <LinearLayout
            android:id="@+id/bottom"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_alignParentBottom="true"
            android:background="#ffffff"
            android:orientation="horizontal">

            <LinearLayout
                android:id="@+id/tab_nearby"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_weight="1"
                android:gravity="center"
                android:orientation="vertical">

                <ImageView
                    android:id="@+id/iv_nearby"
                    android:layout_width="25dp"
                    android:layout_height="20dp"
                    android:background="@drawable/nearby_select"
                    android:clickable="false" />

                <TextView
                    android:id="@+id/tv_nearby"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="2dp"
                    android:text="附近"
                    android:textColor="@color/text30"
                    android:textSize="12sp" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/tab_message"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_weight="1"
                android:gravity="center"
                android:orientation="vertical">

                <ImageView
                    android:id="@+id/iv_message"
                    android:layout_width="25dp"
                    android:layout_height="20dp"
                    android:background="@drawable/message_no"
                    android:clickable="false" />

                <TextView
                    android:id="@+id/tv_message"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="2dp"
                    android:text="消息"
                    android:textColor="@color/text30"
                    android:textSize="12sp" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/tab_home"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_weight="1"
                android:gravity="center"
                android:orientation="vertical">

                <ImageView
                    android:id="@+id/iv_home"
                    android:layout_width="25dp"
                    android:layout_height="20dp"
                    android:background="@drawable/home_no"
                    android:clickable="false" />

                <TextView
                    android:id="@+id/tv_home"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="2dp"
                    android:text="首页"
                    android:textColor="@color/text30"
                    android:textSize="12sp" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/tab_find"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_weight="1"
                android:gravity="center"
                android:orientation="vertical">

                <ImageView
                    android:id="@+id/iv_find"
                    android:layout_width="25dp"
                    android:layout_height="20dp"
                    android:background="@drawable/find_no"
                    android:clickable="false" />

                <TextView
                    android:id="@+id/tv_find"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="2dp"
                    android:text="发现"
                    android:textColor="@color/text30"
                    android:textSize="12sp" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/tab_user"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_weight="1"
                android:gravity="center"
                android:orientation="vertical">

                <ImageView
                    android:id="@+id/iv_user"
                    android:layout_width="25dp"
                    android:layout_height="20dp"
                    android:background="@drawable/user_no"
                    android:clickable="false" />

                <TextView
                    android:id="@+id/tv_user"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="2dp"
                    android:text="我的"
                    android:textColor="@color/text30"
                    android:textSize="12sp" />
            </LinearLayout>
        </LinearLayout>
    </RelativeLayout>
</TabHost>

2.TabActivity使用

public class MainActivity extends TabActivity implements OnClickListener {
    private TabHost tabhost;
    public static final String TAB_NEAR = "tabNearby";
    public static final String TAB_MESSAGE = "tabMessage";
    public static final String TAB_HOME = "tabHome";
    public static final String TAB_FIND = "tabFind";
    public static final String TAB_USER = "tabUser";
    private LinearLayout li_tab_nearby, li_tab_message, li_tab_home,
            li_tab_find, li_tab_user;
    private ImageView img_nearby, img_message, img_home, img_find, img_user;
    private TextView tv_nearby, tv_message, tv_home, tv_find, tv_user;
    private Activity ac;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ac = this;
        initView();
        initEvent();
        //重置底部导航拦
        resetTab();
        //默认选中第一个选项卡
        selectTab(1);
    }

    @Override
    protected void onResume() {
        // TODO Auto-generated method stub
        super.onResume();
    }

    /**
     * 重置底部导航栏,由于每次点击效果都要改变,先重置成默认的,然后把点击的特殊处理
     */
    private void resetTab() {
        // TODO Auto-generated method stub
        img_nearby.setBackgroundResource(R.drawable.nearby_no);
        img_message.setBackgroundResource(R.drawable.message_no);
        img_home.setBackgroundResource(R.drawable.home_no);
        img_find.setBackgroundResource(R.drawable.find_no);
        img_user.setBackgroundResource(R.drawable.user_no);

        tv_nearby.setTextColor(getResources().getColor(R.color.text30));
        tv_message.setTextColor(getResources().getColor(R.color.text30));
        tv_home.setTextColor(getResources().getColor(R.color.text30));
        tv_find.setTextColor(getResources().getColor(R.color.text30));
        tv_user.setTextColor(getResources().getColor(R.color.text30));

    }

    private void initEvent() {
        // TODO Auto-generated method stub
        li_tab_nearby.setOnClickListener(this);
        li_tab_message.setOnClickListener(this);
        li_tab_home.setOnClickListener(this);
        li_tab_find.setOnClickListener(this);
        li_tab_user.setOnClickListener(this);
    }

    private void initView() {
        // TODO Auto-generated method stub
        li_tab_nearby = (LinearLayout) findViewById(R.id.tab_nearby);
        li_tab_message = (LinearLayout) findViewById(R.id.tab_message);
        li_tab_home = (LinearLayout) findViewById(R.id.tab_home);
        li_tab_find = (LinearLayout) findViewById(R.id.tab_find);
        li_tab_user = (LinearLayout) findViewById(R.id.tab_user);

        img_nearby = (ImageView) findViewById(R.id.iv_nearby);
        img_message = (ImageView) findViewById(R.id.iv_message);
        img_home = (ImageView) findViewById(R.id.iv_home);
        img_find = (ImageView) findViewById(R.id.iv_find);
        img_user = (ImageView) findViewById(R.id.iv_user);

        tv_nearby = (TextView) findViewById(R.id.tv_nearby);
        tv_message = (TextView) findViewById(R.id.tv_message);
        tv_home = (TextView) findViewById(R.id.tv_home);
        tv_find = (TextView) findViewById(R.id.tv_find);
        tv_user = (TextView) findViewById(R.id.tv_user);

        tabhost = getTabHost();
        tabhost.addTab(tabhost.newTabSpec(TAB_NEAR).setIndicator(TAB_NEAR)
                .setContent(new Intent(this, NearbyActivity.class)));
        tabhost.addTab(tabhost.newTabSpec(TAB_MESSAGE)
                .setIndicator(TAB_MESSAGE)
                .setContent(new Intent(this, MessageActivity.class)));
        tabhost.addTab(tabhost.newTabSpec(TAB_HOME).setIndicator(TAB_HOME)
                .setContent(new Intent(this, HomeActivity.class)));
        tabhost.addTab(tabhost.newTabSpec(TAB_FIND).setIndicator(TAB_FIND)
                .setContent(new Intent(this, FindActivity.class)));
        tabhost.addTab(tabhost.newTabSpec(TAB_USER).setIndicator(TAB_USER)
                .setContent(new Intent(this, UserActivity.class)));
    }

    /**
     * 选项卡的选择,同时把选中的选项卡对应的导航栏做特殊处理
     */
    private void selectTab(int i) {
        switch (i) {
            case 1:
                resetTab();
                tabhost.setCurrentTabByTag(TAB_NEAR);
                img_nearby.setBackgroundResource(R.drawable.nearby_select);
                tv_nearby
                        .setTextColor(getResources().getColor(R.color.user_heart1));
                break;
            case 2:
                resetTab();
                tabhost.setCurrentTabByTag(TAB_MESSAGE);
                img_message.setBackgroundResource(R.drawable.message_select);
                tv_message.setTextColor(getResources()
                        .getColor(R.color.user_heart1));
                break;
            case 3:
                resetTab();
                tabhost.setCurrentTabByTag(TAB_HOME);
                img_home.setBackgroundResource(R.drawable.home_select);
                tv_home.setTextColor(getResources().getColor(R.color.user_heart1));
                break;
            case 4:
                resetTab();
                tabhost.setCurrentTabByTag(TAB_FIND);
                img_find.setBackgroundResource(R.drawable.find_select);
                tv_find.setTextColor(getResources().getColor(R.color.user_heart1));
                break;
            case 5:
                resetTab();
                tabhost.setCurrentTabByTag(TAB_USER);
                img_user.setBackgroundResource(R.drawable.user_select);
                tv_user.setTextColor(getResources().getColor(R.color.user_heart1));
                break;
            default:
                break;
        }
    }

    @Override
    public void onClick(View v) {
        // TODO Auto-generated method stub
        switch (v.getId()) {
            case R.id.tab_nearby:
                selectTab(1);
                break;
            case R.id.tab_message:
                selectTab(2);
                break;
            case R.id.tab_home:
                selectTab(3);
                break;
            case R.id.tab_find:
                selectTab(4);
                break;
            case R.id.tab_user:
                selectTab(5);
                break;
        }
    }

}
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/yy471101598/article/details/53334893

智能推荐

Unicode UTF-8 UTF-16 UTF-32的关系_strongerHuang的博客-程序员宅基地

关注、星标公众号,不错过精彩内容素材来源:网络编辑整理:strongerHuangUnicode,又称统一码、万国码、单一码,是计算机科学领域里的一项业界标准,包括字符集、编码方案等。一...

Qt TCP通信_youandme520的博客-程序员宅基地

TCP通信 TCP是一种被大多数Internet网络协议用于数据传输的低级网络协议,它是可靠,面向流,面向连接的传输协议,特别适合用于连接数据传输。 TCP通信必须先建立TCP连接,通信端分为客户断喝服务器端。QT提供QTcpSocket类和QTcpServer类用于建立Tcp通信应用程序。服务器端程序必须使用QTcpServer用于建立连接后使用(Socket)进行通信。 QTcpServer是从QObject继承的类,它主要用户服务器端建立网络监听,...

Unix系统Shell和简单指令_(๑•̀ㅂ•́)و✧~的博客-程序员宅基地

Shell(命令解释器)打开终端看到提示logon表示本机名称~表示主目录(当前用户的目录)student表示当前用户名$表示Shell已经准备好接受命令了简单指令ls  显示当前目录的内容(文件和目录)ls 可以加一些参数或选项,如:ls -a 打印当前目录中的所有内容(包括隐藏的文件和目录,隐藏的文件或目录名字以"."开头)ls -l 查

针对有几万的数据,要求每500条批量更新一批数据或者状态_zhengTornado的博客-程序员宅基地

1.针对有几万的数据,要求每500条批量更新一批数据或者状态实现方式 /** * 测试:造45条假的测试数据 * @return */ public List&amp;lt;String&amp;gt; findList(){ //制造45条数据源,放到数组中 String [] str=new String[45]; for(int i=0;i&amp;lt;45;i++){ s...

快来加入阿里云大学【云学院】班级助理—机会稍纵即逝,错过遥遥无期_开发者社区小百科的博客-程序员宅基地

如果你对云计算、大数据、云安全、人工智能领域感兴趣~如果你想从事与此相关的工作~~如果你又喜欢边交流边学习的方式~那么,加入我们吧!我们将为你提供一个广阔的平台,让你接触到云计算、大数据、云安全、人工智能领域打大牛~~为你提供一份当下最热门行业的入门机会~~ 我们希望你:    1. 了解阿里云大学;    2. 有强烈的客户服务意识和责任心,能够及时响应;  ...

荣耀6手机apk清单_jiankangshiye的博客-程序员宅基地

荣耀6手机apk清单apk名字 package名字 功能描述 AGPSProvider.apk com.android.providers.apgs GPS定位 不可禁用 AirSharing.apk com.huawei.android.airsharing ...

随便推点

eclipse 配置Tomcat服务器Server Locations_zgyzgyzgy3338759的博客-程序员宅基地

现象:如果我们在eclipse中通过插件配置Tomcat服务器,并Modify the resources that are configured on the server也就是部署了应用,Server Locations会置灰,应用则默认部署到.metadata\.plugins\org.eclipse.wst.server.core\tmp0下 解决方式:Server Locatio

Docker 安装mysql5.7_wind520的博客-程序员宅基地

[[email protected] ~]# docker pull docker.io/mysqlUsing default tag: latestTrying to pull repository docker.io/library/mysql ... latest: Pulling from docker.io/library/mysqlf49cf87b

java 实现日历_夏芷雨涵梦的博客-程序员宅基地

题目:java 日历时间:2019.3.8介绍:做一个窗体显示日历,最上边是两个按钮切换上下月,中间是日期展示,最下方显示当前的年月。注:所有代码在Eclipse下调试运行。代码:窗体布局: Frame.javapackage calendar;import java.awt.BorderLayout;import java.awt.GridLayout;impor...

QC七工具之因果图_普通网友的博客-程序员宅基地

说起质量改善,很多人往往马上想起“六西格玛”的方法论。诚然,这是一整套当今世界最先进的质量管理的理念与工具集。但是从国内众多企业实施六西格玛项目的成败得失来看,实施六西格玛是需要一定前提条件的:比如是否具有较充足的前期投入预算,企业的信息化建设是否已初具规模,高层领导是否充分重视和授权,参与项目的员工素质是否较高,等等。哪怕是相对成功的企业,仔细审阅一下他们的成功项目,...

【TensorFlow】 TensorFlow-Slim图像分类模型库_代码款款的博客-程序员宅基地

https://github.com/tensorflow/models/blob/master/research/slim/README.mdTensorFlow-Slim image classification model libraryTF-slim is a new lightweight high-level API of TensorFlow (tensorflow.contrib....

Oracle 并行查询_松门一枝花的博客-程序员宅基地_oracle并发查询

所谓并行执行,是指能够将一个大型串行任务(任何DML,一般的DDL)物理的划分为叫多个小的部分,这些较小的部分可以同时得到处理。何时使用并行执行:1、必须有一个非常大的任务2、必须有充足的资源(CPU,I/O,MEMORY)并行查询并行查询允许将一个SQL SELECT 语句划分为多个较小的查询,每个查询并发的运行。最后将每个较小查询得到的结果组合起来,得到

推荐文章

热门文章

相关标签