Android开发中带有消息的底部导航栏的实现（记录一下）

其他 2018-07-03 17:24:41 阅读次数: 0

效果图如下：

三个重要文件，activity_main.xml主布局文件，MainActivity.java，自定义Fragment类MyFragment.java。

1、activity_main.xml的代码如下：

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

    <RelativeLayout
        android:id="@+id/main_rLayoutTitle"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_alignParentTop="true"
        android:background="@color/bg_topbar">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="信息"
            android:textSize="18dp"
            android:gravity="center"
            android:layout_centerInParent="true"/>

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@color/div_white"
            android:layout_alignParentBottom="true"></View>

    </RelativeLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/div_white"
        android:layout_above="@+id/main_lLayoutTabMenu"></View>

    <LinearLayout
        android:id="@+id/main_lLayoutTabMenu"
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:orientation="horizontal"
        android:layout_alignParentBottom="true">

        <RelativeLayout
            android:id="@+id/main_rLayoutTabMenuItemChannel"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1">

            <TextView
                android:id="@+id/main_tvTabMenuItemChannel"
                style="@style/TabMenuItem"
                android:text="提示"
                android:layout_centerInParent="true"
                android:drawableTop="@drawable/tab_menu_channel"
                />

            <TextView
                android:id="@+id/main_tvTabMenuItemChannelNum"
                style="@style/tab_menu_bgnum"
                android:layout_toRightOf="@+id/main_tvTabMenuItemChannel"
                android:text="99+"
                android:visibility="gone"/>

        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/main_rLayoutTabMenuItemMessage"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1">

            <TextView
                android:id="@+id/main_tvTabMenuItemMessage"
                style="@style/TabMenuItem"
                android:text="信息"
                android:layout_centerInParent="true"
                android:drawableTop="@drawable/tab_menu_message"
                />

            <TextView
                android:id="@+id/main_tvTabMenuItemMessageNum"
                style="@style/tab_menu_bgnum"
                android:layout_toRightOf="@+id/main_tvTabMenuItemMessage"
                android:text="99+"
                android:visibility="gone"/>

        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/main_rLayoutTabMenuItemBetter"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1">

            <TextView
                android:id="@+id/main_tvTabMenuItemBetter"
                style="@style/TabMenuItem"
                android:text="更多"
                android:layout_centerInParent="true"
                android:drawableTop="@drawable/tab_menu_better"
                />

            <TextView
                android:id="@+id/main_tvTabMenuItemBetterNum"
                style="@style/tab_menu_bgnum"
                android:layout_toRightOf="@+id/main_tvTabMenuItemBetter"
                android:text="99+"
                android:visibility="gone"/>

        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/main_rLayoutTabMenuItemMy"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1">

            <TextView
                android:id="@+id/main_tvTabMenuItemMy"
                style="@style/TabMenuItem"
                android:text="我的"
                android:layout_centerInParent="true"
                android:drawableTop="@drawable/tab_menu_my"
                />

            <TextView
                android:id="@+id/main_tvTabMenuItemMyNum"
                style="@style/tab_menu_bgnum"
                android:layout_toRightOf="@+id/main_tvTabMenuItemMy"
                android:text="99+"
                android:visibility="gone"/>

        </RelativeLayout>

    </LinearLayout>

    <FrameLayout
        android:id="@+id/main_fLayoutContent"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/main_lLayoutTabMenu"
        android:layout_below="@id/main_rLayoutTitle"/>

</RelativeLayout>

其中的，styles.xml文件代码如下：

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="tab_menu_bgnum">
        <item name="android:layout_width">20dp</item>
        <item name="android:layout_height">20dp</item>
        <item name="android:background">@mipmap/bg_num</item>
        <item name="android:layout_marginLeft">-10dp</item>
        <item name="android:textSize">12sp</item>
        <item name="android:gravity">center</item>
        <item name="android:textColor">@color/text_white</item>
    </style>

    <style name="TabMenuItem">
        <item name="android:layout_marginTop">5dp</item>
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">48dp</item>
        <item name="android:layout_centerInParent">true</item>
        <item name="android:gravity">center_horizontal</item>
        <item name="android:textColor">@drawable/tab_menu_text</item>
    </style>

</resources>

2、MainActivity.java的代码如下：

package com.deepreality.fragmentcasetwodemo;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.FrameLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private RelativeLayout rLayoutTabMenuChannel, rLayoutTabMenuMessage, rLayoutTabMenuBetter, rLayoutTabMenuMy;
    private FrameLayout fLayoutContent;
    private TextView tvTabMenuChannel, tvTabMenuChannelNum, tvTabMenuMessage, tvTabMenuMessageNum, tvTabMenuBetter,
            tvTabMenuBetterNum, tvTabMenuMy, tvTabMenuMyNum;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        bindView();
        getFragmentManager().beginTransaction().add(R.id.main_fLayoutContent, new MyFragment()).commit();
    }

    private void bindView() {
        rLayoutTabMenuChannel = findViewById(R.id.main_rLayoutTabMenuItemChannel);
        rLayoutTabMenuMessage = findViewById(R.id.main_rLayoutTabMenuItemMessage);
        rLayoutTabMenuBetter = findViewById(R.id.main_rLayoutTabMenuItemBetter);
        rLayoutTabMenuMy = findViewById(R.id.main_rLayoutTabMenuItemMy);
        fLayoutContent = findViewById(R.id.main_fLayoutContent);
        tvTabMenuChannel = findViewById(R.id.main_tvTabMenuItemChannel);
        tvTabMenuChannelNum = findViewById(R.id.main_tvTabMenuItemChannelNum);
        tvTabMenuMessage = findViewById(R.id.main_tvTabMenuItemMessage);
        tvTabMenuMessageNum = findViewById(R.id.main_tvTabMenuItemMessageNum);
        tvTabMenuBetter = findViewById(R.id.main_tvTabMenuItemBetter);
        tvTabMenuBetterNum = findViewById(R.id.main_tvTabMenuItemBetterNum);
        tvTabMenuMy = findViewById(R.id.main_tvTabMenuItemMy);
        tvTabMenuMyNum = findViewById(R.id.main_tvTabMenuItemMyNum);

        rLayoutTabMenuChannel.setOnClickListener(this);
        rLayoutTabMenuMessage.setOnClickListener(this);
        rLayoutTabMenuBetter.setOnClickListener(this);
        rLayoutTabMenuMy.setOnClickListener(this);
    }

    private void resetSelected() {
        tvTabMenuChannel.setSelected(false);
        tvTabMenuMessage.setSelected(false);
        tvTabMenuBetter.setSelected(false);
        tvTabMenuMy.setSelected(false);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.main_rLayoutTabMenuItemChannel:{
                resetSelected();
                tvTabMenuChannel.setSelected(true);
                Toast.makeText(MainActivity.this, tvTabMenuChannelNum.getText(), Toast.LENGTH_SHORT).show();
                tvTabMenuChannelNum.setVisibility(View.GONE);
                tvTabMenuChannelNum.setText("0");
                break;
            }
            case R.id.main_rLayoutTabMenuItemMessage:{
                resetSelected();
                tvTabMenuMessage.setSelected(true);
                Toast.makeText(MainActivity.this, tvTabMenuMessageNum.getText(), Toast.LENGTH_SHORT).show();
                tvTabMenuMessageNum.setVisibility(View.GONE);
                tvTabMenuMessageNum.setText("0");
                break;
            }
            case R.id.main_rLayoutTabMenuItemBetter:{
                resetSelected();
                tvTabMenuBetter.setSelected(true);
                Toast.makeText(MainActivity.this, tvTabMenuBetterNum.getText(), Toast.LENGTH_SHORT).show();
                tvTabMenuBetterNum.setVisibility(View.GONE);
                tvTabMenuBetterNum.setText("0");
                break;
            }
            case R.id.main_rLayoutTabMenuItemMy:{
                resetSelected();
                tvTabMenuMy.setSelected(true);
                Toast.makeText(MainActivity.this, tvTabMenuMyNum.getText(), Toast.LENGTH_SHORT).show();
                tvTabMenuMyNum.setVisibility(View.GONE);
                tvTabMenuMyNum.setText("0");
                break;
            }
            default:break;
        }
    }
}

3、MyFragment.java的代码如下：

package com.deepreality.fragmentcasetwodemo;

import android.app.Fragment;
import android.content.Context;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.TextView;

public class MyFragment extends Fragment implements View.OnClickListener {

    private Context mContext;
    private Button btn_one;
    private Button btn_two;
    private Button btn_three;
    private Button btn_four;

    public MyFragment() {

    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fg_my, container, false);
        btn_one = view.findViewById(R.id.btn_one);
        btn_two = (Button) view.findViewById(R.id.btn_two);
        btn_three = (Button) view.findViewById(R.id.btn_three);
        btn_four = (Button) view.findViewById(R.id.btn_four);
        //Bind Event
        btn_one.setOnClickListener(this);
        btn_two.setOnClickListener(this);
        btn_three.setOnClickListener(this);
        btn_four.setOnClickListener(this);
        return view;
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.btn_one:{
                TextView textView = getActivity().findViewById(R.id.main_tvTabMenuItemChannelNum);
                textView.setText("11");
                textView.setVisibility(View.VISIBLE);
                break;
            }
            case R.id.btn_two:{
                TextView textView = getActivity().findViewById(R.id.main_tvTabMenuItemMessageNum);
                textView.setText("22");
                textView.setVisibility(View.VISIBLE);
                break;
            }
            case R.id.btn_three:{
                TextView textView = getActivity().findViewById(R.id.main_tvTabMenuItemBetterNum);
                textView.setText("33");
                textView.setVisibility(View.VISIBLE);
                break;
            }
            case R.id.btn_four:{
                TextView textView = getActivity().findViewById(R.id.main_tvTabMenuItemMyNum);
                textView.setText("55");
                textView.setVisibility(View.VISIBLE);
                break;
            }
            default:break;
        }
    }
}
完整demo地址： https://download.csdn.net/download/lpcrazyboy/10514101

猜你喜欢

转载自blog.csdn.net/lpcrazyboy/article/details/80886487
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
curl的POST请求，封装方法
8.1.1. Integer Types
Java基础 Day05(个人复习整理)
Python - Django - 中间件 process_exception
小L的试卷
【Shell编程】 （函数）判断用户是否存在
python(css样式)
spring ant path 匹配原则 - 【笔记】
《JavaScript与JScript从入门到精通》(美)James.Jaworski.中译本.扫描版.pdf
Eclipse运行带参数的java程序
每日归档
更多
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022