小言_互联网的博客

连Action Bar都不会 你能说你学过 Android?

463人阅读  评论(0)

Action bar是一个标识应用程序和用户位置的窗口功能,并且给用户提供操作和导航模式。在大多数的情况下,当你需要突出展现用户行为或全局导航的activity中使用action bar,因为action bar能够使应用程序给用户提供一致的界面,并且系统能够很好根据不同的屏幕配置来适应操作栏的外观。

 

零、前言

 

什么是Action Bar,说白了就是手机APP最上方的一块标题区域,如下图所示:

 

一、显示 / 隐藏  Action Bar

 

1. XML实现

修改res/value/style.xml中的parent属性,具体代码如下,请注意第二行代码的区别。

显示:


  
  1. <resources>
  2. <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
  3. <!-- Customize your theme here. -->
  4. <item name="colorPrimary">@color/colorPrimary </item>
  5. <item name="colorPrimaryDark">@color/colorPrimaryDark </item>
  6. <item name="colorAccent">@color/colorAccent </item>
  7. </style>
  8. </resources>

隐藏:


  
  1. <resources>
  2. <!-- Base application theme. -->
  3. <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
  4. <!-- Customize your theme here. -->
  5. <item name="colorPrimary">@color/colorPrimary </item>
  6. <item name="colorPrimaryDark">@color/colorPrimaryDark </item>
  7. <item name="colorAccent">@color/colorAccent </item>
  8. </style>
  9. </resources>

因为在AndroidManifest.xml中,需要引用这个数据(第七行代码)


  
  1. <application
  2. android:allowBackup= "true"
  3. android:icon= "@mipmap/ic_launcher"
  4. android:label= "@string/app_name"
  5. android:roundIcon= "@mipmap/ic_launcher_round"
  6. android:supportsRtl= "true"
  7. android:theme= "@style/AppTheme">
  8. <activity android:name=".MainActivity">
  9. <intent-filter>
  10. <action android:name="android.intent.action.MAIN" />
  11. <category android:name="android.intent.category.LAUNCHER" />
  12. </intent-filter>
  13. </activity>
  14. </application>

2.通过Java代码实现

首先在XML文件设置两个按钮,一个负责显示Action Bar,一个隐藏Action Bar,代码如下所示:


  
  1. <Button
  2. android:id= "@+id/actionBar_show"
  3. android:layout_width= "wrap_content"
  4. android:layout_height= "wrap_content"
  5. android:text= "显示ActionBar"
  6. android:textAllCaps= "false" />
  7. <Button
  8. android:id= "@+id/actionBar_hide"
  9. android:layout_width= "wrap_content"
  10. android:layout_height= "wrap_content"
  11. android:text= "隐藏ActionBar"
  12. android:textAllCaps= "false" />

接着,需要用到如下 头文件


  
  1. import android.app.ActionBar;
  2. import android.support.v7.app.AppCompatActivity;
  3. import android.os.Bundle;
  4. import android.view.View;
  5. import android.widget.Button;

定义两个按钮,和Action Bar的全局变量:


  
  1. Button action_show, action_hide; //定义显示与隐藏按钮
  2. android.support.v7.app.ActionBar actionBar; //定义V7包下的ActionBar

接着,编写按钮的单击事件相应函数:


  
  1. View.OnClickListener l = new View.OnClickListener() { //创建一个新的监听事件l
  2. @Override
  3. public void onClick(View v) {
  4. switch (v.getId()) { //根据选择按钮的id判断
  5. case R.id.actionBar_show:
  6. actionBar.show(); //显示ActionBar动作栏
  7. break;
  8. case R.id.actionBar_hide:
  9. actionBar.hide(); //隐藏ActionBar动作栏
  10. break;
  11. }
  12. }
  13. };

最后,补全Java代码,赋予按钮刚刚写的单击事件。


  
  1. @Override
  2. protected void onCreate(Bundle savedInstanceState) {
  3. super.onCreate(savedInstanceState);
  4. setContentView(R.layout.activity_main);
  5. actionBar = getSupportActionBar(); //获取ActionBar动作栏
  6. action_show = (Button) findViewById(R.id.actionBar_show); //获取显示按钮
  7. action_hide = (Button) findViewById(R.id.actionBar_hide); //获取隐藏按钮
  8. action_show.setOnClickListener(l); //为显示按钮设置监听事件
  9. action_hide.setOnClickListener(l); //为隐藏按钮设置监听事件
  10. }

 

二、添加 Action Bar 的 Item 子项

 

首先,需要以下两个头文件:


  
  1. import android.view.Menu;
  2. import android.view.MenuInflater;

添加菜单代码:

我们需要重写 onCreateOptionsMenu 方法

注意这是固定写法,不要乱改!


  
  1. @Override
  2. protected void onCreate(Bundle savedInstanceState) {
  3. super.onCreate(savedInstanceState);
  4. setContentView(R.layout.activity_main);
  5. //隐藏ActionBar中显示的标题
  6. getSupportActionBar().setDisplayShowTitleEnabled( false);
  7. }
  8. @Override
  9. public boolean onCreateOptionsMenu(Menu menu) {
  10. MenuInflater inflater=getMenuInflater(); //实例化一个MenuInflater对象
  11. inflater.inflate(R.menu.menu,menu); //解析菜单文件
  12. return super.onCreateOptionsMenu(menu);
  13. }

接着,我们就创建这个menu文件

在res 目录下新建一个 menu 文件夹,在该文件夹下新建一个 menu.xml 文件,该文件用来定义菜单选项


  
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <menu xmlns:android="http://schemas.android.com/apk/res/android"
  3. xmlns:app= "http://schemas.android.com/apk/res-auto">
  4. <item
  5. android:id= "@+id/search1"
  6. android:icon= "@drawable/search"
  7. android:title= "search"
  8. app:showAsAction= "always"> </item>
  9. //----此处省略更多item
  10. </menu>

注意1:app:showAsAction

app:showAsAction="always"

app:showAsAction属性用来控制是否在 Action Bar 上显示

如果是 always ,则默认显示

如果是 ifRoomAction Bar上有空则显示

如果是 never,则默认隐藏到三个点区域里面;

显示效果如下图:

隐藏Item,点击三个点图标后,可以显示,如下图:

注意2:android:title 和 android:icon


  
  1. android:icon= "@drawable/bell"
  2. android:title= "消 息"

android:title属性是被隐藏后显示的文字;

android:icon是没被隐藏时显示的图标

如果只有android:title,但没有android:icon,被强制显示,Action Bar会显示文字,如下图所示:

如果只有android:icon,但没有android:title,被强制隐藏,Action Bar会显示空白,如下图所示:

注意3:app:actionViewClass


  
  1. <item
  2. android:id= "@+id/search2"
  3. android:title= "search"
  4. app:actionViewClass= "android.support.v7.widget.SearchView"
  5. app:showAsAction= "always">
  6. </item>

在 Action Bar 上添加组件,如搜索框,

单击后,会显示搜索栏:

注意4:app:actionLayout

指的是通过Layout文件,添加 Action Bar Item项

如XML文件定义一个图片


  
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:layout_width= "match_parent"
  4. android:layout_height= "match_parent"
  5. android:orientation= "vertical">
  6. <ImageView
  7. android:layout_width= "wrap_content"
  8. android:layout_height= "wrap_content"
  9. android:layout_marginTop= "14dp"
  10. android:src= "@drawable/add" />
  11. </LinearLayout>

引用


  
  1. <item
  2. android:id= "@+id/img2"
  3. android:title= "添加"
  4. app:actionLayout= "@layout/img_add"
  5. app:showAsAction= "always"> </item>

效果如下图所示:

模版代码


  
  1. <item
  2. android:id= "@+id/search1"
  3. android:icon= "@drawable/search"
  4. android:title= "search"
  5. app:showAsAction= "never"> </item>
  6. <item
  7. android:id= "@+id/bell"
  8. android:icon= "@drawable/bell"
  9. android:title= "消 息"
  10. app:showAsAction= "never"> </item>
  11. <item
  12. android:id= "@+id/settings"
  13. android:title= "设 置"
  14. app:showAsAction= "ifRoom"> </item>
  15. <item
  16. android:id= "@+id/about"
  17. android:title= "关 于"
  18. app:showAsAction= "never"> </item>
  19. <item
  20. android:id= "@+id/search2"
  21. android:title= "search"
  22. app:actionViewClass= "android.support.v7.widget.SearchView"
  23. app:showAsAction= "always"
  24. > </item>
  25. <item
  26. android:id= "@+id/img1"
  27. android:title= "通讯录"
  28. app:actionLayout= "@layout/img_message"
  29. app:showAsAction= "never"> </item>
  30. <item
  31. android:id= "@+id/img2"
  32. android:title= "添加"
  33. app:actionLayout= "@layout/img_add"
  34. app:showAsAction= "ifRoom"> </item>

三、顶部 Tab 导航

效果:

实现:

1.先创建若干子界面的fragment.xml文件,每个子页面放一张背景图片即可。


  
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:layout_width= "match_parent"
  4. android:layout_height= "match_parent"
  5. android:orientation= "vertical">
  6. <ImageView
  7. android:layout_width= "match_parent"
  8. android:layout_height= "match_parent"
  9. android:scaleType= "fitXY"
  10. android:src= "@drawable/fragment_5"
  11. />
  12. </LinearLayout>

2.创建子界面的Java文件,和XML文件相对应。


  
  1. import android.os.Bundle;
  2. import android.support.annotation.Nullable;
  3. import android.support.v4.app.Fragment;
  4. import android.view.LayoutInflater;
  5. import android.view.View;
  6. import android.view.ViewGroup;
  7. public class Fragment5 extends Fragment {
  8. @Nullable
  9. @Override
  10. public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
  11. return inflater.inflate(R.layout.fragment_5, null); //加载布局页面
  12. }
  13. }

3.接着创建MyTabListener.java文件,用于统一管理Tab页面


  
  1. import android.app.Activity;
  2. import android.support.v4.app.Fragment;
  3. import android.support.v4.app.FragmentTransaction;
  4. import android.support.v7.app.ActionBar;
  5. public class MyTabListener implements ActionBar.TabListener {
  6. private Fragment fragment; //定义Fragment
  7. private final Activity activity; //定义Activity
  8. private final Class aClass; //定义Class
  9. public MyTabListener(Activity activity, Class aClass) { //添加构造函数
  10. this.activity = activity;
  11. this.aClass = aClass;
  12. }
  13. @Override
  14. public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {
  15. //判断碎片是否初始化
  16. if (fragment == null) { //如果没有初始化,将其初始化
  17. fragment = Fragment.instantiate(activity, aClass.getName());
  18. ft.add(android.R.id.content, fragment, null);
  19. }
  20. ft.attach(fragment); //显示新画面
  21. }
  22. @Override
  23. public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction ft) {
  24. if (fragment != null) {
  25. ft.detach(fragment); //删除旧画面
  26. }
  27. }
  28. @Override
  29. public void onTabReselected(ActionBar.Tab tab, FragmentTransaction ft) {
  30. }
  31. }

4.接着在MainActivity.java中放入子页面(其中MainActivity对应的XML文件不需要修改)


  
  1. import android.support.v7.app.AppCompatActivity;
  2. import android.support.v4.app.Fragment;
  3. import android.support.v7.app.ActionBar;
  4. import android.os.Bundle;
  5. public class MainActivity extends AppCompatActivity {
  6. @Override
  7. protected void onCreate(Bundle savedInstanceState) {
  8. super.onCreate(savedInstanceState);
  9. setContentView(R.layout.activity_main);
  10. ActionBar actionBar=getSupportActionBar(); //获取ActionBar
  11. actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS); //设置ActionBar为选项卡模式
  12. actionBar.setDisplayOptions( 0, ActionBar.DISPLAY_SHOW_TITLE); //隐藏标题栏
  13. actionBar.addTab(actionBar.newTab().setText( "词典"). //将标签页添加ActionBar中
  14. setTabListener( new MyTabListener( this, Fragment1.class)));
  15. actionBar.addTab(actionBar.newTab().setText( "百科"). //将标签页添加ActionBar中
  16. setTabListener( new MyTabListener( this, Fragment2.class)));
  17. actionBar.addTab(actionBar.newTab().setText( "翻译"). ////将标签页添加ActionBar中
  18. setTabListener( new MyTabListener( this, Fragment3.class)));
  19. actionBar.addTab(actionBar.newTab().setText( "发现"). //将标签页添加ActionBar中
  20. setTabListener( new MyTabListener( this, Fragment4.class)));
  21. actionBar.addTab(actionBar.newTab().setText( "我的"). //将标签页添加ActionBar中
  22. setTabListener( new MyTabListener( this, Fragment5.class)));
  23. }
  24. }

 

四、实现界面返回按钮

效果:

首先给第一个界面的按钮添加单击事件相应,使其跳转到第二个界面


  
  1. @Override
  2. public void onClick(View v) {
  3. Intent intent= new Intent(MainActivity. this,friends.class);
  4. startActivity(intent);
  5. }

接着要在第二个界面中判断第二个界面的父界面是否为空,如果不为空,则显示返回按钮。


  
  1. if (NavUtils.getParentActivityName(friends. this) != null) {
  2. getSupportActionBar().setDisplayHomeAsUpEnabled( true);
  3. }

最后要在AndroidManifest.xml中,定义第二个界面的父界面是第一个界面


  
  1. <activity android:name=".friends"
  2. android:label= "@string/friend">
  3. <meta-data
  4. android:name= "android.support.PARENT_ACTIVITY"
  5. android:value= ".MainActivity" />
  6. </activity>

其中可以修改一下 AndroidManifest.xml中 ,android:theme 属性,即 Action Bar 背景颜色

android:theme="@style/Theme.AppCompat.Light.DarkActionBar"

改完之后,颜色就变黑了


本次主要总结了Android开发中Action Bar的基础使用。

当然现在已经不会去开发原生安卓了,而会使用uni-app来顺带开发Android,但我个人觉得基础还是要打扎实。


转载:https://blog.csdn.net/qq_41464123/article/details/106605555
查看评论
* 以上用户言论只代表其个人观点,不代表本网站的观点或立场