您的位置：首页 > 移动开发 > Android开发

Android 打造突出的导航栏

2016-05-31 19:22 288 查看

前言:

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

感谢:

农民伯伯:
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 布局导航 viewpager

相关文章推荐

新的分享

章节导航