Android学习记录（十八）

最新推荐文章于 2022-03-25 19:14:46 发布
最新推荐文章于 2022-03-25 19:14:46 发布
阅读量231 收藏 1
点赞数
分类专栏： Android学习 文章标签： android studio
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46705517/article/details/113178136
版权

文章目录

底部导航栏的扩展

实现步骤

1.新建项目【FragmentTest】

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.添加图片元素

在这里插入图片描述

3.改写相关资源文件

3.1 tab_menu_better.xml

在这里插入图片描述

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@mipmap/tab_better_pressed" android:state_selected="true" />
    <item android:drawable="@mipmap/tab_better_normal" />
</selector>
3.2 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>
3.3 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>
3.4 tab_menu_message.xml

在这里插入图片描述

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

在这里插入图片描述

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@mipmap/tab_my_pressed" android:state_selected="true" />
    <item android:drawable="@mipmap/tab_my_normal" />
</selector>
3.6 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>

4. 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:text="信息"
            android:textColor="@color/text_topbar"
            android:textSize="18sp" />

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

    </RelativeLayout>


    <LinearLayout
        android:id="@+id/ly_tab_menu"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:layout_alignParentBottom="true"
        android:background="@color/bg_white"
        android:orientation="horizontal">

        <LinearLayout
            android:id="@+id/ly_tab_menu_channel"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center">

            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:padding="5dp">

                <TextView
                    android:id="@+id/tab_menu_channel"
                    style="@style/tab_menu_text"
                    android:drawableTop="@drawable/tab_menu_channel"
                    android:text="@string/tab_menu_alert" />

                <TextView
                    android:id="@+id/tab_menu_channel_num"
                    style="@style/tab_menu_bgnum"
                    android:layout_toRightOf="@+id/tab_menu_channel"
                    android:text="99+"
                    android:visibility="gone" />
            </RelativeLayout>
        </LinearLayout>

        <LinearLayout
            android:id="@+id/ly_tab_menu_message"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center">

            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:padding="5dp">

                <TextView
                    android:id="@+id/tab_menu_message"
                    style="@style/tab_menu_text"
                    android:drawableTop="@drawable/tab_menu_message"
                    android:text="@string/tab_menu_profile" />

                <TextView
                    android:id="@+id/tab_menu_message_num"
                    style="@style/tab_menu_bgnum"
                    android:layout_toRightOf="@+id/tab_menu_message"
                    android:text="99+"
                    android:visibility="gone" />
            </RelativeLayout>
        </LinearLayout>


        <LinearLayout
            android:id="@+id/ly_tab_menu_better"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center">

            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:padding="5dp">

                <TextView
                    android:id="@+id/tab_menu_better"
                    style="@style/tab_menu_text"
                    android:drawableTop="@drawable/tab_menu_better"
                    android:text="@string/tab_menu_pay" />

                <TextView
                    android:id="@+id/tab_menu_better_num"
                    style="@style/tab_menu_bgnum"
                    android:layout_toRightOf="@+id/tab_menu_better"
                    android:text="99+"
                    android:visibility="gone" />
            </RelativeLayout>
        </LinearLayout>


        <LinearLayout
            android:id="@+id/ly_tab_menu_setting"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center">

            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:padding="5dp">

                <TextView
                    android:id="@+id/tab_menu_setting"
                    style="@style/tab_menu_text"
                    android:drawableTop="@drawable/tab_menu_setting"
                    android:text="@string/tab_menu_alert" />

                <ImageView
                    android:id="@+id/tab_menu_setting_partner"
                    android:layout_width="12dp"
                    android:layout_height="12dp"
                    android:layout_marginLeft="-5dp"
                    android:layout_toRightOf="@id/tab_menu_setting"
                    android:visibility="gone"
                    android:src="@mipmap/partner_red" />

            </RelativeLayout>
        </LinearLayout>

    </LinearLayout>

    <View
        android:id="@+id/div_tab_bar"
        android:layout_width="match_parent"
        android:layout_height="2px"
        android:layout_above="@id/ly_tab_menu"
        android:background="@color/div_white" />


    <FrameLayout
        android:id="@+id/ly_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/div_tab_bar"
        android:layout_below="@id/ly_top_bar"/>


</RelativeLayout>

5. style.xml

在这里插入图片描述

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
    </style>


    <style name="tab_menu_text">
        <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:textColor">@drawable/tab_menu_text</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>
    
    
</resources>

6.基于模板创建MyFragment.java

在这里插入图片描述
在这里插入图片描述

6.1 fg_content.xml

在这里插入图片描述

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="5dp">

    <Button
        android:id="@+id/btn_one"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="第一个显示信息"/>

    <Button
        android:id="@+id/btn_two"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="第二个显示信息"/>

    <Button
        android:id="@+id/btn_three"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="第三个显示信息"/>

    <Button
        android:id="@+id/btn_four"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="第四个显示信息"/>

</LinearLayout>
6.2 MyFragment

在这里插入图片描述

package net.nell.fragmenttest;

import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;

import androidx.fragment.app.Fragment;

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() {

    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fg_content,container,false);
        //UI Object
        btn_one = (Button) 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 tab_menu_channel_num = (TextView) getActivity ().findViewById(R.id.tab_menu_channel_num);
                tab_menu_channel_num.setText("11");
                tab_menu_channel_num.setVisibility(View.VISIBLE);
                break;
            case R.id.btn_two:
                TextView tab_menu_message_num = (TextView) getActivity ().findViewById(R.id.tab_menu_message_num);
                tab_menu_message_num.setText("20");
                tab_menu_message_num.setVisibility(View.VISIBLE);
                break;
            case R.id.btn_three:
                TextView tab_menu_better_num = (TextView) getActivity ().findViewById(R.id.tab_menu_better_num);
                tab_menu_better_num.setText("99+");
                tab_menu_better_num.setVisibility(View.VISIBLE);
                break;
            case R.id.btn_four:
                ImageView tab_menu_setting_partner = (ImageView) getActivity ().findViewById(R.id.tab_menu_setting_partner);
                tab_menu_setting_partner.setVisibility(View.VISIBLE);
                break;
        }
    }
}

7.MainActivity

在这里插入图片描述

package net.nell.fragmenttest;

import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    //Activity UI Object
    private LinearLayout ly_tab_menu_channel;
    private TextView tab_menu_channel;
    private TextView tab_menu_channel_num;
    private LinearLayout ly_tab_menu_message;
    private TextView tab_menu_message;
    private TextView tab_menu_message_num;
    private LinearLayout ly_tab_menu_better;
    private TextView tab_menu_better;
    private TextView tab_menu_better_num;
    private LinearLayout ly_tab_menu_setting;
    private TextView tab_menu_setting;
    private ImageView tab_menu_setting_partner;
    private FragmentManager fManager;
    private FragmentTransaction fTransaction;
    private MyFragment fg1;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        bindViews();
        ly_tab_menu_channel.performClick();
        fg1 = new MyFragment();
        fManager = getSupportFragmentManager();
        fTransaction = fManager.beginTransaction();
        fTransaction.add(R.id.ly_content, fg1).commit();

    }

    private void bindViews() {
        ly_tab_menu_channel = (LinearLayout) findViewById(R.id.ly_tab_menu_channel);
        tab_menu_channel = (TextView) findViewById(R.id.tab_menu_channel);
        tab_menu_channel_num = (TextView) findViewById(R.id.tab_menu_channel_num);
        ly_tab_menu_message = (LinearLayout) findViewById(R.id.ly_tab_menu_message);
        tab_menu_message = (TextView) findViewById(R.id.tab_menu_message);
        tab_menu_message_num = (TextView) findViewById(R.id.tab_menu_message_num);
        ly_tab_menu_better = (LinearLayout) findViewById(R.id.ly_tab_menu_better);
        tab_menu_better = (TextView) findViewById(R.id.tab_menu_better);
        tab_menu_better_num = (TextView) findViewById(R.id.tab_menu_better_num);
        ly_tab_menu_setting = (LinearLayout) findViewById(R.id.ly_tab_menu_setting);
        tab_menu_setting = (TextView) findViewById(R.id.tab_menu_setting);
        tab_menu_setting_partner = (ImageView) findViewById(R.id.tab_menu_setting_partner);

        ly_tab_menu_channel.setOnClickListener(this);
        ly_tab_menu_message.setOnClickListener(this);
        ly_tab_menu_better.setOnClickListener(this);
        ly_tab_menu_setting.setOnClickListener(this);

    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.ly_tab_menu_channel:
                setSelected();
                tab_menu_channel.setSelected(true);
                tab_menu_channel_num.setVisibility(View.INVISIBLE);
                break;
            case R.id.ly_tab_menu_message:
                setSelected();
                tab_menu_message.setSelected(true);
                tab_menu_message_num.setVisibility(View.INVISIBLE);
                break;
            case R.id.ly_tab_menu_better:
                setSelected();
                tab_menu_better.setSelected(true);
                tab_menu_better_num.setVisibility(View.INVISIBLE);
                break;
            case R.id.ly_tab_menu_setting:
                setSelected();
                tab_menu_setting.setSelected(true);
                tab_menu_setting_partner.setVisibility(View.INVISIBLE);
                break;
        }
    }

    //重置所有文本的选中状态
    private void setSelected() {
        tab_menu_channel.setSelected(false);
        tab_menu_message.setSelected(false);
        tab_menu_better.setSelected(false);
        tab_menu_setting.setSelected(false);
    }


}

8.运行效果

在这里插入图片描述
最近几天我都在研究底部导航栏的写法以及样式，可能会觉得有一点千篇一律了。但是我觉得底部导航栏还是一个很重要的东西，明天我将为大家介绍页面的滑动样式。

NELL_TURBO
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
lui2mi-EmptyStateListView:空状态ListView为Android
05-01
lui2mi-EmptyStateListView 空状态ListView为Android 安装 对于Gradle allprojects { repositories { ... maven { url 'https://jitpack.io' } } } 和 dependencies { implementation 'com.github.luimi:lui2mi-EmptyStateListView:1.2.1' } 执行 默认列表是GridView，但它会自动更改为ExpandableListView或自定义列表（如RecyclerView或您想要的任何内容） XML文件 xmlns:app="http://schemas.android.com/apk/res-auto" <com.lui2mi.emptystate.EmptyStateList
Android学习笔记--state list
yuzhouxiang的专栏
09-27 799
在用户进行操作的时候总是会提示出不同的状态，比如当我们按下button时,光标移动到button上并没有按下以及当前状态不在该button时总会显示不同的状态，在Android系统中提供给我们一种方便与实现这种功能的方法即：state list drawable。
Android资源知识（六）之控件状态State List
严富坤-昆明移动互联网
11-24 1097
State List资源是定义在XML中，用来指定控件在不同状态时更换不同的背景图片，从而提高用户体验。例如，Button控件的以下几种状态：pressed, focused, neither。我们可以用State List为Button的每一种状态提供不同的背景图片。 文件路径：res/drawable/filename.xml 引用方式： In Java: R.drawable.file
Android提示为空,android-当ListFragment为空时,不会显示SetEmptyTe...
weixin_36125921的博客
05-27 98
我正在使用ListFragments ..当列表为空时,我想使用setEmptyText(),但它没有显示它继续显示进度,它一直显示进度栏,我不知道确切的位置包含此列表的布局这是我的代码@Overridepublic void onActivityCreated(Bundle savedInstanceState) {// TODO Auto-generated method stubsuper....
[Android]代码实现ColorStateList及StateListDrawable
zhuhai__yizhi的专栏
08-25 812
优点：灵活，减少xml的编写。应用在TextView的文字时，亦避免使用了OnTouchListener。 用途：动态设置TextView、Button、ImageView等组件在不同状态下的背景/前景显示效果。 参考： [AndroidOpenSource]\frameworks\base\core\java\android\view\view.xml [
Android学习笔记.pdf
11-17
Android学习笔记.pdf
Android学习笔记整理.pdf
最新发布
11-17
Android学习笔记整理.pdf
android学习笔记.zip
04-12
《Android学习笔记》 在移动应用开发领域，Android操作系统占据着重要的地位，为开发者提供了丰富的API和工具，使得创建各种应用程序变得可能。本压缩包文件包含了一位学习者从第一天到第五天，以及一个特定项目...
Android学习笔记
02-23
Android学习笔记
Android 中的 StateListDrawable
ansondroider的博客
03-25 4857
前言-关于StateListDrawable Android里面经常会在开发中在res/drawable目录下, 使用shape或者selector编写XML文件, 来定制一些View的背景, 而这些XML最终会转换为StateListDrawable *注: 并非所有的XML都是StateListDrawable* 对于StateListDrawable文档中如此描述: 允许您将多个图形图像分配给单个 Drawable，并通过字符串 ID 值替换可见项。它可以在带有 元素的 XML 文件中定义
Android状态列表StateListDrawable的使用
水月洞天
05-09 953
时常我们需要为我们的控件在用户不同操作时显示不同的样式，比如选中和取消的样式，按钮点击和松开的样式，Android为我们提供了状态列表的方法显示不同的样式满足我们的需求。在drawable中我们定义如下文件： <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item andr...
vant list加载 empty空状态
lily1324193的博客
07-22 4474
data(){ return{ pageSize: 8, // 默认每次显示8条数据，还有的数据根据滚动加载 }} // 获取所有数据 getList(current, size, params) { getComList( Object.assign( { current: this.currentPage, size: this.pageSize }, params ) ).then(res => { this.pageSize += 8; this.list = res.data....
Android高级资源 StateListDrawable 资源
Black_Cat_33的博客
09-04 330
介绍 StateListDrawable 资源是定义在 XML 文件中的 Drawable 对象，能根据状态来呈现不同的图像。例如，一个 Button 组件存在多种不同的状态（pressed、enabled 或 focused 等），使用 StateListDrawable资源可以为按钮的每个状态提供不同的按钮图片。StateListDrawable资源在实际开发中用处很多，例如，今日头条中选择登录方式的按钮，效果如图 13.10 所示。 常用XML属性 状态属性 描述 ...
Android UI之stateListDrawable stateListAnimator ripple背景的综合运用
crazyZhangxl的博客
09-12 1087
1、简介 作为一个优雅的Android程序员，那么使用的控件的话应该是有交互的，像我们使用的微信，每一次点击事件用户都有所反应，用户都能准确的知道自己执行了那些操作，是的，这很重要。而反应这些好的用户体验的好多都是使用的背景。本文将介绍我们常用的ripple水波纹背景,stateListDrawable状态背景选择，stateListAniamtor 状态动画以及图层等背景效果。 2、背景的常...
Fragment实例精讲——底部导航栏的实现(3)
一直在路上的JunGle
03-28 652
转自：http://www.runoob.com/w3cnote/android-tutorial-fragment-demo3.html 本节引言 前面我们已经跟大家讲解了实现底部导航栏的两种方案，但是这两种方案只适合普通的情况，如果是像新浪微博那样的，想在底部导航栏上的item带有一个红色的小点，然后加上一个消息数目这样，前面两种方案就显得无力了，我们来看看别人的APP是怎么做的，
Android学习记录（十七）
weixin_46705517的博客
01-25 1192
文章目录Fragment实现下拉列表使用RadioGroup + RadioButton1.实现步骤1.1 新建项目【FragmentDemo】1.2 添加所需图片素材1.3 编写所需资源文件1.3.1 tab_menu_channel.xml1.3.2 tab_menu_message.xml1.3.3 tab_menu_better.xml1.3.4 tab_menu_setting.xml1.3.5 tab_menu_text.xml1.3.6 tab_menu_bg.xml1.4 activity_
android 自定义底部导航栏
Anthonybuer的博客
12-29 1859
1.编写布局 &lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/ll_bottom_menu_item" android:layout_width=&quot
底部导航栏的几种实现方式
热门推荐
小工匠
03-16 3万+
概述Android底部导航栏实现方式真的是太多了~在这里仅介绍几种实现方式~建议使用TabLayout +ViewPager ，TabLayout是Android Material Design中的控件，布局文件简介。LinearLayout + TextView方式效果图分析 根据效果图，我们可以看出在选中的时候，文字 图片 和背景都会发生改变，我们可以通过是否selected来判断。 首先来说下
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值