Android 打造突出的导航栏

作者: Yasin27878 | 来源:发表于2017-04-05 16:55 被阅读393次

    本文由CSDN 迁移至此
    原文


    打造突出的导航栏

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

    正文:

    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>
    

    感谢:
    农民伯伯:
    http://www.cnblogs.com/over140/p/3508335.html

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

    相关文章

      网友评论

        本文标题:Android 打造突出的导航栏

        本文链接:https://www.haomeiwen.com/subject/ybkxattx.html