zoukankan      html  css  js  c++  java
  • Android随笔

    学习底部导航栏制作

    先看看效果图吧:

    接着看看我们的工程的目录结构


    2.实现流程:


    Step 1:写下底部选项的一些资源文件

    我们从图上可以看到,我们底部的每一项点击的时候都有不同的效果是吧! 我们是通过是否selected来判定的!我们要写的资源文件有:首先是图片,然后是文字,接着是背景!

    图片Drawable资源:tab_menu_channel.xml

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:drawable="@mipmap/tab_channel_pressed" android:state_selected="true" />
        <item android:drawable="@mipmap/tab_channel_normal" />
    </selector>

    其他三个照葫芦画瓢!

    文字资源:tab_menu_text.xml

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:color="@color/text_yellow" android:state_selected="true" />
        <item android:color="@color/text_gray" />
    </selector>

    背景资源:tab_menu_bg.xml

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_selected="true">
            <shape>
                <solid android:color="#FFC4C4C4" />
            </shape>
        </item>
        <item>
            <shape>
                <solid android:color="@color/transparent" />
            </shape>
        </item>
    </selector>

    Step 2:编写我们的Activity布局

    activity_main.xml:

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
    
        <RelativeLayout
            android:id="@+id/ly_top_bar"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:background="@color/bg_topbar">
    
            <TextView
                android:id="@+id/txt_topbar"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_centerInParent="true"
                android:gravity="center"
                android:textSize="18sp"
                android:textColor="@color/text_topbar"
                android:text="信息"/>
    
    
            <View
                android:layout_width="match_parent"
                android:layout_height="2px"
                android:background="@color/div_white"
                android:layout_alignParentBottom="true"/>
    
        </RelativeLayout>
    
    
    
        <LinearLayout
            android:id="@+id/ly_tab_bar"
            android:layout_width="match_parent"
            android:layout_height="56dp"
            android:layout_alignParentBottom="true"
            android:background="@color/bg_white"
            android:orientation="horizontal">
    
            <TextView
                android:id="@+id/txt_channel"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@drawable/tab_menu_bg"
                android:drawablePadding="3dp"
                android:drawableTop="@drawable/tab_menu_channel"
                android:gravity="center"
                android:padding="5dp"
                android:text="@string/tab_menu_alert"
                android:textColor="@drawable/tab_menu_text"
                android:textSize="16sp" />
    
            <TextView
                android:id="@+id/txt_message"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@drawable/tab_menu_bg"
                android:drawablePadding="3dp"
                android:drawableTop="@drawable/tab_menu_message"
                android:gravity="center"
                android:padding="5dp"
                android:text="@string/tab_menu_profile"
                android:textColor="@drawable/tab_menu_text"
                android:textSize="16sp" />
    
            <TextView
                android:id="@+id/txt_better"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@drawable/tab_menu_bg"
                android:drawablePadding="3dp"
                android:drawableTop="@drawable/tab_menu_better"
                android:gravity="center"
                android:padding="5dp"
                android:text="@string/tab_menu_pay"
                android:textColor="@drawable/tab_menu_text"
                android:textSize="16sp" />
    
            <TextView
                android:id="@+id/txt_setting"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@drawable/tab_menu_bg"
                android:drawablePadding="3dp"
                android:drawableTop="@drawable/tab_menu_setting"
                android:gravity="center"
                android:padding="5dp"
                android:text="@string/tab_menu_setting"
                android:textColor="@drawable/tab_menu_text"
                android:textSize="16sp"/>
    
        </LinearLayout>
    
        <View
            android:id="@+id/div_tab_bar"
            android:layout_width="match_parent"
            android:layout_height="2px"
            android:background="@color/div_white"
            android:layout_above="@id/ly_tab_bar"/>
    
    
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@id/ly_top_bar"
            android:layout_above="@id/div_tab_bar"
            android:id="@+id/ly_content">
    
        </FrameLayout>
    
    </RelativeLayout>
  • 相关阅读:
    腾讯QQ服务器汇总表 及禁用QQ方法
    C#下一个SQL SERVER数据库操作类
    获取页面运行时间以及数据库查询次数
    GridView导出Excel
    使用FileUpload控件上传图片并自动生成缩略图、带文字和图片的水印图
    JS图片loading及放大查看效果(兼容IE,FF)
    .NET 开发人员十个必备工具
    jsp日期时间格式化输出
    MyEclipse6.5与Perforce的集成
    [转]firefox与IE的nextSibling
  • 原文地址:https://www.cnblogs.com/wrx166/p/14911301.html
Copyright © 2011-2022 走看看