Android 打造突出的导航栏

原创 2016年05月31日 19:22:07

前言:

前几天写新项目,要求导航是在底部的,并且有个导航按钮要突出底部导航栏,在网上找了半天都没找到可以直接用的,好不容易找到一个差不多的还不可以用.

感谢:

农民伯伯:

http://www.cnblogs.com/over140/p/3508335.html

正文:

1.效果图

这边的实现方式避免了viewpager在切换的过程中覆盖突出的那部分导航栏图标


主布局:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent">

   <android.support.v4.view.ViewPager
      android:id="@+id/tab_content"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:layout_marginBottom="56dp"/>

   <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="16dip"
      android:background="#00000000">

   </LinearLayout>

   <LinearLayout
      android:layout_width="match_parent"
      android:layout_alignParentBottom="true"
      android:background="#00000000"
      android:clipChildren="false"
      android:layout_gravity="bottom"
      android:layout_height="72dp">


      <LinearLayout
         android:id="@+id/ll_tabb"
         android:layout_width="match_parent"
         android:layout_height="56dp"
         android:layout_gravity="bottom"
         android:background="@color/background"
         android:clipChildren="false"
         android:orientation="horizontal">

         <LinearLayout
            android:id="@+id/ll_new_order"
            android:layout_width="0dp"
            android:layout_height="56dp"
            android:layout_weight="1"
            android:orientation="vertical">

            <ImageView
               android:layout_width="match_parent"
               android:layout_height="40dp"
               android:src="@drawable/tab_menu1_selector"/>

            <TextView
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:layout_marginTop="2dp"
               android:gravity="center"
               android:text="接单"
               android:textColor="@drawable/tab_text_selector"/>

         </LinearLayout>

         <LinearLayout
            android:id="@+id/ll_order"
            android:layout_width="0dp"
            android:layout_height="72dp"
            android:layout_gravity="bottom"
            android:layout_weight="1"
            android:orientation="vertical">

            <ImageView
               android:layout_width="match_parent"
               android:layout_height="match_parent"
               android:src="@mipmap/ic_menu2_select"/>
         </LinearLayout>

         <LinearLayout
            android:id="@+id/ll_user"
            android:layout_width="0dp"
            android:layout_height="56dp"
            android:layout_weight="1"
            android:orientation="vertical">

            <ImageView
               android:layout_width="match_parent"
               android:layout_height="40dp"
               android:src="@drawable/tab_menu3_selector"/>

            <TextView
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:layout_marginTop="2dp"
               android:gravity="center"
               android:text="我的"
               android:textColor="@drawable/tab_text_selector"/>
         </LinearLayout>

      </LinearLayout>
   </LinearLayout>
</RelativeLayout>
Image selector:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@mipmap/ic_menu1_select" android:state_selected="true" />
    <item android:drawable="@mipmap/ic_menu1_select" android:state_pressed="true" />
    <item android:drawable="@mipmap/ic_menu1_select" android:state_checked="true" />
    <item android:drawable="@mipmap/ic_menu1_unselect" />

</selector>
Textselector:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

   <item android:color="@color/tab_text_selected" android:state_selected="true"/>
   <item android:color="@color/tab_text_normal" android:state_selected="false"/>

</selector>

第一次发表博客,如有错误欢迎指正

版权声明:本文为博主原创文章,未经博主允许不得转载。

Android 底部导航栏按钮突出

主要是使用了clipChildren属性,设置子控件是否可以超出父控件范围显示,默认true(不可以)、false(可以),此属性一般用在爷爷级控件上效果比较明显,例如上面效果 layout_grav...
  • u013776057
  • u013776057
  • 2016年12月27日 11:51
  • 719

Android --中间突出的底部导航栏布局简单实现

中间突出的底部导航栏,根据点击的具体Tab显示不同的内容
  • baidu_33424803
  • baidu_33424803
  • 2016年05月16日 20:40
  • 370

底部导航栏中间凸起的菜单键实现

先看图: 下面看代码代码组成部分Activity+Fragment的实现方式,考虑到可能加载数据过多导致第一次比较卡的情况,代码实现以默认初始化加载前两个Fragment的数据,以后逐次添加。首先创...
  • gxq20101966
  • gxq20101966
  • 2016年03月16日 14:53
  • 8957

Android 底部导航栏中间凸起、动态配置替换底部导航栏Tab图标(按钮、标签)的实现方案

类似 京东 淘宝 等app,在一些节假日的时候,首页UI 一般都是配置的节日气息很浓重,这类的实现一般是不需要发版,思路是 由后台直接配置,第一次开启App后台下载,在下次打开时 直接展示下载的图标。...
  • u011733020
  • u011733020
  • 2017年03月02日 18:44
  • 4470

实现底部导航栏中间凸起

【Android】神奇的android:clipChildren属性 转载于:博客园:http://www.cnblogs.com/      农民伯伯: http://www.cnblogs....
  • u010015108
  • u010015108
  • 2016年11月02日 10:30
  • 1888

android 打造炫酷导航栏(仿UC头条)

年后开始上班甚是清闲,所以想捣鼓一些东西。在翻阅大神杰作Android 教你打造炫酷的ViewPagerIndicator 不仅仅是高仿MIUI 的时候看到下面有一条评论说,如果导航栏能滑动就更好了。...
  • qq_16064871
  • qq_16064871
  • 2016年02月17日 20:33
  • 4795

Android--RadioGroup和Tablayout两种实现底部导航的方式详解

自从Android3.0引入Fargment之后,在Activity中使用底部导航进行Fragment的切换已经越来越普遍,或者可以说已经成为了移动应用的标配,而本篇文章我总结了项目中常用的四种实现导...
  • HuoHao_Blogs
  • HuoHao_Blogs
  • 2017年05月23日 11:43
  • 1471

Android底部导航栏的四种实现

现在大多数App都会用到底部导航栏,比如常见的聊天工具QQ、微信,购物App等等,有了底部导航栏,用户可以随时切换界面,查看不同的内容。它的实现方式也很多,以前大多使用TabHost来实现,但是现在我...
  • jxq1994
  • jxq1994
  • 2016年09月18日 13:10
  • 50437

Android 动态隐藏显示导航栏,状态栏

Talk is cheap, show me the code. --Linus Torvalds Okay, here: private void hideNavigationBar() { ...
  • zhoumushui
  • zhoumushui
  • 2016年06月30日 18:35
  • 5850

Android (争取做到)最全的底部导航栏实现方法

本文(争取做到)Android 最全的底部导航栏实现方法.
  • alcoholdi
  • alcoholdi
  • 2016年06月06日 11:08
  • 30752
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android 打造突出的导航栏
举报原因:
原因补充:

(最多只允许输入30个字)