Android Studio App开发中工具栏Toolbar、溢出菜单OverflowMenu、标签布局TabLayout的讲解及实战(实现京东App的标签导航栏,附源码)

简介: Android Studio App开发中工具栏Toolbar、溢出菜单OverflowMenu、标签布局TabLayout的讲解及实战(实现京东App的标签导航栏,附源码)

需要全部源码请点赞关注收藏后评论区留言~~~

一、工具栏Toolbar

主流App除了底部有一排标签栏之外,通常顶部还有一排导航栏,它之前用的是ActionBar这个控件,但是它不太灵活,于是又推出了Toolbar工具栏,用于取代它

为了兼容之前的系统版本,ActionBar依然保留,所以使用Toolbar的时候要先关闭ActionBar才可以

Toolbar之所以比ActionBar灵活,是因为它提供了多个属性

运行效果如下

代码如下

Java类

package com.example.chapter12;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
public class ToolbarActivity extends AppCompatActivity {
    private final static String TAG = "ToolbarActivity";
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_toolbar);
        Toolbar tl_head = findViewById(R.id.tl_head); // 从布局文件中获取名叫tl_head的工具栏
        tl_head.setTitle("工具栏页面"); // 设置工具栏的标题文本
        setSupportActionBar(tl_head); // 使用tl_head替换系统自带的ActionBar
        tl_head.setTitleTextColor(Color.RED); // 设置工具栏的标题文字颜色
        tl_head.setLogo(R.drawable.ic_app); // 设置工具栏的标志图片
        tl_head.setSubtitle("Toolbar"); // 设置工具栏的副标题文本
        tl_head.setSubtitleTextColor(Color.YELLOW); // 设置工具栏的副标题文字颜色
        tl_head.setBackgroundResource(R.color.blue_light); // 设置工具栏的背景
        tl_head.setNavigationIcon(R.drawable.ic_back); // 设置工具栏左边的导航图标
        // 给tl_head设置导航图标的点击监听器
        // setNavigationOnClickListener必须放到setSupportActionBar之后,不然不起作用
        tl_head.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                finish(); // 结束当前页面
            }
        });
    }
}

XML文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <androidx.appcompat.widget.Toolbar
        android:id="@+id/tl_head"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="vertical"
        android:padding="5dp">
        <TextView
            android:id="@+id/tv_desc"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/black"
            android:textSize="17sp"
            android:text="该页面演示工具栏功能" />
    </LinearLayout>
</LinearLayout>

二、溢出菜单OverflowMenu

导航栏右边往往有个3点图标,点击后会在界面右上角弹出菜单。意思是导航栏不够放,溢出来了不过溢出菜单多了个app:showAsAction属性 展示位置属性如下

1:always 总是在导航栏上显示菜单图标

2:ifRoom 如果导航栏右边有控件,该项就显示在导航栏上 不再放入溢出菜单

3:never 从不在导航栏上直接显示 总是放在溢出菜单列表里面

4:withText 如果能在导航栏上显示 除了显示图标 还要显示该菜单项的文字说明

效果如下

代码如下

Java类

package com.example.chapter12;
import android.annotation.SuppressLint;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.TextView;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import com.example.chapter12.util.DateUtil;
@SuppressLint("SetTextI18n")
public class OverflowMenuActivity extends AppCompatActivity {
    private TextView tv_desc;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_overflow_menu);
        Toolbar tl_head = findViewById(R.id.tl_head); // 从布局文件中获取名叫tl_head的工具栏
        tl_head.setTitle("溢出菜单页面"); // 设置工具栏的标题文字
        setSupportActionBar(tl_head); // 使用tl_head替换系统自带的ActionBar
        tv_desc = findViewById(R.id.tv_desc);
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // 从menu_overflow.xml中构建菜单界面布局
        getMenuInflater().inflate(R.menu.menu_overflow, menu);
        return true;
    }
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int id = item.getItemId(); // 获取菜单项的编号
        if (id == android.R.id.home) { // 点击了工具栏左边的返回箭头
            finish(); // 结束当前页面
        } else if (id == R.id.menu_refresh) { // 点击了刷新图标
            tv_desc.setText("当前刷新时间: " + DateUtil.getNowTime());
        } else if (id == R.id.menu_about) { // 点击了关于菜单项
            Toast.makeText(this, "这个是工具栏的演示demo", Toast.LENGTH_LONG).show();
        } else if (id == R.id.menu_quit) { // 点击了退出菜单项
            finish(); // 结束当前页面
        }
        return super.onOptionsItemSelected(item);
    }
}

XML文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <androidx.appcompat.widget.Toolbar
        android:id="@+id/tl_head"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/blue_light"
        app:navigationIcon="@drawable/ic_back" />
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="vertical"
        android:padding="5dp">
        <TextView
            android:id="@+id/tv_desc"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/black"
            android:textSize="17sp"
            android:text="该页面演示溢出菜单功能" />
    </LinearLayout>
</LinearLayout>

三、标签布局TabLayout

TabLayout的展现形式类似于PagerTabStrip,同样是文字标签带下划线,不同的前者可以允许定制更丰富的样式 它新增的样式主要有以下六种

1:tabBackground 指定背景

2:tabIndicatorColor 指定颜色

3:tabIndicatorHeight 指定高度

4:tabTextColor 指定文字颜色

5:tabTextAppearance 指定文字风格

6:tabSelectedTextColor 指定选中文字颜色

效果如下

实现了京东App的标签导航栏,点击详情可以切换到商品的详情页面

代码如下

Java类

package com.example.chapter12;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import androidx.viewpager.widget.ViewPager;
import androidx.viewpager.widget.ViewPager.SimpleOnPageChangeListener;
import com.example.chapter12.adapter.GoodsPagerAdapter;
import com.example.chapter12.util.DateUtil;
import com.google.android.material.tabs.TabLayout;
import com.google.android.material.tabs.TabLayout.OnTabSelectedListener;
import com.google.android.material.tabs.TabLayout.Tab;
import com.google.android.material.tabs.TabLayout.ViewPagerOnTabSelectedListener;
public class TabLayoutActivity extends AppCompatActivity implements OnTabSelectedListener {
    private final static String TAG = "TabLayoutActivity";
    private ViewPager vp_content; // 声明一个翻页视图对象
    private TabLayout tab_title; // 声明一个标签布局对象
    private String[] mTitleArray = {"商品", "详情"}; // 标题文字数组
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tab_layout);
        Toolbar tl_head = findViewById(R.id.tl_head); // 从布局文件中获取名叫tl_head的工具栏
        tl_head.setTitle(""); // 设置工具栏的标题文本
        setSupportActionBar(tl_head); // 使用tl_head替换系统自带的ActionBar
        tab_title = findViewById(R.id.tab_title); // 从布局文件中获取名叫tab_title的标签布局
        vp_content = findViewById(R.id.vp_content); // 从布局文件中获取名叫vp_content的翻页视图
        initTabLayout(); // 初始化标签布局
        initTabViewPager(); // 初始化标签翻页
    }
    // 初始化标签布局
    private void initTabLayout() {
        // 给标签布局添加一个文字标签
        tab_title.addTab(tab_title.newTab().setText(mTitleArray[0]));
        // 给标签布局添加一个文字标签
        tab_title.addTab(tab_title.newTab().setText(mTitleArray[1]));
        tab_title.addOnTabSelectedListener(this); // 给标签布局添加标签选中监听器
        // 监听器ViewPagerOnTabSelectedListener允许直接关联某个翻页视图
        //tab_title.addOnTabSelectedListener(new ViewPagerOnTabSelectedListener(vp_content));
    }
    // 初始化标签翻页
    private void initTabViewPager() {
        // 构建一个商品信息的翻页适配器
        GoodsPagerAdapter adapter = new GoodsPagerAdapter(
                getSupportFragmentManager(), mTitleArray);
        vp_content.setAdapter(adapter); // 设置翻页视图的适配器
        // 给vp_content添加页面变更监听器
        vp_content.addOnPageChangeListener(new SimpleOnPageChangeListener() {
            @Override
            public void onPageSelected(int position) {
                tab_title.getTabAt(position).select(); // 选中指定位置的标签
            }
        });
    }
    // 在标签被重复选中时触发
    public void onTabReselected(Tab tab) {}
    // 在标签选中时触发
    public void onTabSelected(Tab tab) {
        vp_content.setCurrentItem(tab.getPosition()); // 设置翻页视图显示第几页
    }
    // 在标签取消选中时触发
    public void onTabUnselected(Tab tab) {}
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // 从menu_overflow.xml中构建菜单界面布局
        getMenuInflater().inflate(R.menu.menu_overflow, menu);
        return true;
    }
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int id = item.getItemId();
        if (id == android.R.id.home) { // 点击了工具栏左边的返回箭头
            finish(); // 结束当前页面
        } else if (id == R.id.menu_refresh) { // 点击了刷新图标
            Toast.makeText(this, "当前刷新时间: " + DateUtil.getNowDateTime("yyyy-MM-dd HH:mm:ss")
                    , Toast.LENGTH_LONG).show();
            return true;
        } else if (id == R.id.menu_about) { // 点击了关于菜单项
            Toast.makeText(this, "这个是标签布局的演示demo", Toast.LENGTH_LONG).show();
            return true;
        } else if (id == R.id.menu_quit) { // 点击了退出菜单项
            finish(); // 结束当前页面
        }
        return super.onOptionsItemSelected(item);
    }
}

XML文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <androidx.appcompat.widget.Toolbar
        android:id="@+id/tl_head"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        app:navigationIcon="@drawable/ic_back">
        <!-- 注意TabLayout节点需要使用完整路径 -->
        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tab_title"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_centerInParent="true"
            app:tabIndicatorColor="@color/red"
            app:tabIndicatorHeight="2dp"
            app:tabSelectedTextColor="@color/red"
            app:tabTextColor="@color/grey"
            app:tabTextAppearance="@style/TabText" />
    </androidx.appcompat.widget.Toolbar>
    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/grey" />
    <androidx.viewpager.widget.ViewPager
        android:id="@+id/vp_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

创作不易 觉得有帮助请点赞关注收藏~~~

目录
打赏
0
0
0
0
145
分享
相关文章
【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
81 13
【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
70 8
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
61 7
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【错误记录】Android Studio 编译报错 ( VirtualApp 编译 NDK 报错 | Error:A problem occurred configuring project ‘: )(一)
【错误记录】Android Studio 编译报错 ( VirtualApp 编译 NDK 报错 | Error:A problem occurred configuring project ‘: )(一)
898 0
【错误记录】Android Studio 编译报错 ( VirtualApp 编译 NDK 报错 | Error:A problem occurred configuring project ‘: )(一)
【错误记录】Android Studio 编译报错 ( Installed Build Tools revision 31.0.0 is corrupted )
【错误记录】Android Studio 编译报错 ( Installed Build Tools revision 31.0.0 is corrupted )
1033 0
【错误记录】Android Studio 编译报错 ( Installed Build Tools revision 31.0.0 is corrupted )
【错误记录】Android Studio 向 GitHub 提交代码报错 ( Push failed: Failed with error: Could not read | 使用命令行提交代码 )
【错误记录】Android Studio 向 GitHub 提交代码报错 ( Push failed: Failed with error: Could not read | 使用命令行提交代码 )
339 0
【错误记录】Android Studio 向 GitHub 提交代码报错 ( Push failed: Failed with error: Could not read | 使用命令行提交代码 )
【错误记录】Android Studio 编译报错 ( Error:Connection timed out: connect | 更新配置依赖仓库方式 )
【错误记录】Android Studio 编译报错 ( Error:Connection timed out: connect | 更新配置依赖仓库方式 )
1009 0
【错误记录】Android Studio 编译报错 ( Error:Connection timed out: connect | 更新配置依赖仓库方式 )
解决Android Studio报错:Compilation is not supported for following modules
本文主要解决和"Compilation is not supported for following modules"有关的报错。
1978 0
解决Android Studio报错:Compilation is not supported for following modules
android studio 重新将module中的代码加入到自己项目中,报错找不到SO文件。
android studio 重新将module中的代码加入到自己项目中,报错找不到SO文件。
【错误记录】Android Studio 配置 GitHub 报错 ( Can‘t login using given credentials: Request response: 401 Una )
【错误记录】Android Studio 配置 GitHub 报错 ( Can‘t login using given credentials: Request response: 401 Una )
434 0
【错误记录】Android Studio 配置 GitHub 报错 ( Can‘t login using given credentials: Request response: 401 Una )

热门文章

最新文章