需要全部源码请点赞关注收藏后评论区留言~~~
一、工具栏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>
创作不易 觉得有帮助请点赞关注收藏~~~
