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 --中间突出的底部导航栏布局简单实现

中间突出的底部导航栏,根据点击的具体Tab显示不同的内容

Android 底部导航栏按钮突出

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

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

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

Android TabBar 导航栏

  • 2015-10-21 21:13
  • 1.99MB
  • 下载

Android自定义View——实现字母导航栏

实现字母导航栏 思路分析: 1、自定义View实现字母导航栏 2、ListView实现联系人列表 3、字母导航栏滑动事件处理 4、字母导航栏与中间字母的联动 5、字母导航栏与...

Android个性化导航栏

  • 2016-07-25 15:12
  • 1.13MB
  • 下载

android顶部和底部导航栏

  • 2013-01-03 19:28
  • 95KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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