devbox
不正经
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Android自定义标题栏ActionBar_android action_bar_title

作者：不正经 | 2024-03-04 00:44:48

赞

踩

android action_bar_title

在日常的工作中，ActionBar使用的频率非常的高，而系统自带的ActionBar捆绑的东西有太多，而上面多数的效果我们都用不到。

如果不用系统的ActionBar，我们该怎样把自定义ActionBar的工作做到最简化呢。

首先我们做一个基本的需求分析。



如上图所示，我们的ActionBar通常包括了：左菜单， 标题， 右菜单 。如果要再细分一下， 菜单 = （图标 + 文本）。


需求确定后，代码就非常简单了。


actionbar_dft.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:id="@+id/lay_transroot"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="wrap_content"
  6.     android:background="@color/primary"
  7.     android:orientation="vertical">
  8.  
  9.     <View
  10.         android:id="@+id/v_statusbar"
  11.         android:layout_width="match_parent"
  12.         android:layout_height="1.0dp" />
  13.  
  14.     <RelativeLayout
  15.         android:layout_width="match_parent"
  16.         android:layout_height="@dimen/actionbar_height"
  17.         android:orientation="vertical">
  18.  
  19.         <RelativeLayout
  20.             android:id="@+id/lay_actionbar_left"
  21.             android:layout_width="100dp"
  22.             android:layout_height="match_parent"
  23.             android:orientation="horizontal">
  24.  
  25.             <ImageView
  26.                 android:id="@+id/iv_actionbar_left"
  27.                 android:layout_width="20dp"
  28.                 android:layout_height="20dp"
  29.                 android:layout_centerVertical="true"
  30.                 android:layout_marginLeft="10dp"
  31.                 android:background="@mipmap/ic_left_light"
  32.                 android:visibility="gone" />
  33.  
  34.             <TextView
  35.                 android:id="@+id/tv_actionbar_left"
  36.                 style="@style/text_white"
  37.                 android:layout_height="match_parent"
  38.                 android:layout_marginLeft="10dp"
  39.                 android:layout_toRightOf="@+id/iv_actionbar_left"
  40.                 android:gravity="center_vertical"
  41.                 android:maxLength="2"
  42.                 android:singleLine="true"
  43.                 android:text="@string/cancel"
  44.                 android:visibility="gone" />
  45.         </RelativeLayout>
  46.  
  47.         <TextView
  48.             android:id="@+id/tv_actionbar_title"
  49.             style="@style/text_white"
  50.             android:layout_centerInParent="true"
  51.             android:maxLength="15"
  52.             android:text="@string/app_name"
  53.             android:textSize="16sp" />
  54.  
  55.         <RelativeLayout
  56.             android:id="@+id/lay_actionbar_right"
  57.             android:layout_width="100dp"
  58.             android:layout_height="match_parent"
  59.             android:layout_alignParentRight="true"
  60.             android:gravity="right"
  61.             android:orientation="horizontal">
  62.  
  63.             <View
  64.                 android:id="@+id/v_actionbar_right"
  65.                 android:layout_width="20dp"
  66.                 android:layout_height="20dp"
  67.                 android:layout_alignParentRight="true"
  68.                 android:layout_centerVertical="true"
  69.                 android:layout_marginRight="10dp"
  70.                 android:visibility="gone" />
  71.  
  72.             <TextView
  73.                 android:id="@+id/tv_actionbar_right"
  74.                 style="@style/text_white"
  75.                 android:layout_height="match_parent"
  76.                 android:layout_marginRight="10dp"
  77.                 android:layout_toLeftOf="@+id/v_actionbar_right"
  78.                 android:gravity="center_vertical|right"
  79.                 android:singleLine="true"
  80.                 android:text="@string/confirm"
  81.                 android:visibility="gone" />
  82.         </RelativeLayout>
  83.  
  84.     </RelativeLayout>
  85. </LinearLayout>


到这里，有的人可能会说，你把标题栏做这么简单，稍微有复杂一点的需求，根本满足不了。对此，我只想表示，我做过的项目类似老外趣聊、英语趣配音、淘wifi，其中不乏千万用户的APP，这样的ActionBar基本上能满足产品需求，而且非常轻便。如果内聚做的好，更可以定制出你想要actionbar样式。

有了 布局文件，我们再结合需求，添加一个点击回调，一般项目中标题是没有点击事件的，所以只要有左菜单、右菜单的点击回调就行。

回调接口：


  1. public interface ActionBarClickListener {
  2.  
  3.     void onLeftClick();
  4.  
  5.     void onRightClick();
  6.  
  7. }


接下来我们就讨论一下，代码中如何集成、封装。


做法一： 代码中使用 <include ... /> 函数。


示例：

  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.  
  7.     <include
  8.         android:id="@+id/actionbar"
  9.         layout="@layout/actionbar_dft"
  10.         android:layout_width="match_parent"
  11.         android:layout_height="wrap_content" />
  12.  
  13.     <TextView
  14.         android:id="@+id/tv_description"
  15.         style="@style/text_black"
  16.         android:padding="20dp" />
  17.  
  18. </LinearLayout>

 做法非常的简单，曾经和一个面试官讨论过这种做法的弊端，面试官认为这种加载方式对性能有影响。这我是不认同的，include不但能提高代码的复用率，使代码更简洁，它还没有增加系统的GPU任务，所以，不会对性能造成影响。

使用的时候，inlude函数里一定要添加id，因为include的布局，layout中的id是不能传递的。


然后就是 Activity 里的实现了。


  1.     protected View layRoot;
  2.     protected View vStatusBar;
  3.     protected View layLeft;
  4.     protected View layRight;
  5.     protected TextView tvTitle;
  6.     protected TextView tvLeft;
  7.     protected TextView tvRight;
  8.     protected View iconLeft;
  9.     protected View iconRight;
  10.  
  11.  
  12.     /**
  13.      * 设置数据
  14.      *
  15.      * @param strTitle
  16.      * @param resIdLeft
  17.      * @param strLeft
  18.      * @param resIdRight
  19.      * @param strRight
  20.      * @param listener
  21.      */
  22.     public void setMyActionBar(String strTitle, int resIdLeft, String strLeft, int resIdRight, String strRight, final ActionBarClickListener listener) {
  23.         View actionBar = findViewById(R.id.actionbar);
  24.         layRoot = actionBar.findViewById(R.id.lay_transroot);
  25.         vStatusBar = actionBar.findViewById(R.id.v_statusbar);
  26.         tvTitle = (TextView) actionBar.findViewById(R.id.tv_actionbar_title);
  27.         tvLeft = (TextView) actionBar.findViewById(R.id.tv_actionbar_left);
  28.         tvRight = (TextView) actionBar.findViewById(R.id.tv_actionbar_right);
  29.         iconLeft = actionBar.findViewById(R.id.iv_actionbar_left);
  30.         iconRight = actionBar.findViewById(R.id.v_actionbar_right);
  31.  
  32.         if (!TextUtils.isEmpty(strTitle)) {
  33.             tvTitle.setText(strTitle);
  34.         } else {
  35.             tvTitle.setVisibility(View.GONE);
  36.         }
  37.         if (!TextUtils.isEmpty(strLeft)) {
  38.             tvLeft.setText(strLeft);
  39.             tvLeft.setVisibility(View.VISIBLE);
  40.         } else {
  41.             tvLeft.setVisibility(View.GONE);
  42.         }
  43.         if (!TextUtils.isEmpty(strRight)) {
  44.             tvRight.setText(strRight);
  45.             tvRight.setVisibility(View.VISIBLE);
  46.         } else {
  47.             tvRight.setVisibility(View.GONE);
  48.         }
  49.  
  50.         if (resIdLeft == 0) {
  51.             iconLeft.setVisibility(View.GONE);
  52.         } else {
  53.             iconLeft.setBackgroundResource(resIdLeft);
  54.             iconLeft.setVisibility(View.VISIBLE);
  55.         }
  56.  
  57.         if (resIdRight == 0) {
  58.             iconRight.setVisibility(View.GONE);
  59.         } else {
  60.             iconRight.setBackgroundResource(resIdRight);
  61.             iconRight.setVisibility(View.VISIBLE);
  62.         }
  63.  
  64.         if (listener != null) {
  65.             layLeft = findViewById(R.id.lay_actionbar_left);
  66.             layRight = findViewById(R.id.lay_actionbar_right);
  67.             layLeft.setOnClickListener(new View.OnClickListener() {
  68.                 @Override
  69.                 public void onClick(View v) {
  70.                     listener.onLeftClick();
  71.                 }
  72.             });
  73.             layRight.setOnClickListener(new View.OnClickListener() {
  74.                 @Override
  75.                 public void onClick(View v) {
  76.                     listener.onRightClick();
  77.                 }
  78.             });
  79.         }
  80.     }


有了上述代码，我们ActionBar的基本功能就可以使用了。但是，如果每个Activity里面都这么写，是不是会很繁琐。所以我们需要简单的封装一下。封装代码如下： 

  1. package com.myactionbar.base;
  2.  
  3. import android.os.Bundle;
  4. import android.support.annotation.Nullable;
  5. import android.support.v7.app.AppCompatActivity;
  6. import android.text.TextUtils;
  7. import android.view.View;
  8. import android.widget.TextView;
  9.  
  10. import com.myactionbar.R;
  11. import com.myactionbar.impl.ActionBarClickListener;
  12.  
  13. /**
  14.  * Created by 晖仔(Milo) on 2017-03-21.
  15.  * email:303767416@qq.com
  16.  */
  17.  
  18. public abstract class FirstBaseActivity extends AppCompatActivity {
  19.  
  20.     protected View layRoot;
  21.     protected View vStatusBar;
  22.     protected View layLeft;
  23.     protected View layRight;
  24.     protected TextView tvTitle;
  25.     protected TextView tvLeft;
  26.     protected TextView tvRight;
  27.     protected View iconLeft;
  28.     protected View iconRight;
  29.  
  30.     protected abstract int getContentViewId();
  31.  
  32.     protected abstract void init();
  33.  
  34.     @Override
  35.     protected void onCreate(@Nullable Bundle savedInstanceState) {
  36.         super.onCreate(savedInstanceState);
  37.         setContentView(getContentViewId());
  38.         init();
  39.     }
  40.  
  41.     /**
  42.      * 设置数据
  43.      *
  44.      * @param strTitle
  45.      * @param resIdLeft
  46.      * @param strLeft
  47.      * @param resIdRight
  48.      * @param strRight
  49.      * @param listener
  50.      */
  51.     public void setMyActionBar(String strTitle, int resIdLeft, String strLeft, int resIdRight, String strRight, final ActionBarClickListener listener) {
  52.         View actionBar = findViewById(R.id.actionbar);
  53.         layRoot = actionBar.findViewById(R.id.lay_transroot);
  54.         vStatusBar = actionBar.findViewById(R.id.v_statusbar);
  55.         tvTitle = (TextView) actionBar.findViewById(R.id.tv_actionbar_title);
  56.         tvLeft = (TextView) actionBar.findViewById(R.id.tv_actionbar_left);
  57.         tvRight = (TextView) actionBar.findViewById(R.id.tv_actionbar_right);
  58.         iconLeft = actionBar.findViewById(R.id.iv_actionbar_left);
  59.         iconRight = actionBar.findViewById(R.id.v_actionbar_right);
  60.  
  61.         if (!TextUtils.isEmpty(strTitle)) {
  62.             tvTitle.setText(strTitle);
  63.         } else {
  64.             tvTitle.setVisibility(View.GONE);
  65.         }
  66.         if (!TextUtils.isEmpty(strLeft)) {
  67.             tvLeft.setText(strLeft);
  68.             tvLeft.setVisibility(View.VISIBLE);
  69.         } else {
  70.             tvLeft.setVisibility(View.GONE);
  71.         }
  72.         if (!TextUtils.isEmpty(strRight)) {
  73.             tvRight.setText(strRight);
  74.             tvRight.setVisibility(View.VISIBLE);
  75.         } else {
  76.             tvRight.setVisibility(View.GONE);
  77.         }
  78.  
  79.         if (resIdLeft == 0) {
  80.             iconLeft.setVisibility(View.GONE);
  81.         } else {
  82.             iconLeft.setBackgroundResource(resIdLeft);
  83.             iconLeft.setVisibility(View.VISIBLE);
  84.         }
  85.  
  86.         if (resIdRight == 0) {
  87.             iconRight.setVisibility(View.GONE);
  88.         } else {
  89.             iconRight.setBackgroundResource(resIdRight);
  90.             iconRight.setVisibility(View.VISIBLE);
  91.         }
  92.  
  93.         if (listener != null) {
  94.             layLeft = findViewById(R.id.lay_actionbar_left);
  95.             layRight = findViewById(R.id.lay_actionbar_right);
  96.             layLeft.setOnClickListener(new View.OnClickListener() {
  97.                 @Override
  98.                 public void onClick(View v) {
  99.                     listener.onLeftClick();
  100.                 }
  101.             });
  102.             layRight.setOnClickListener(new View.OnClickListener() {
  103.                 @Override
  104.                 public void onClick(View v) {
  105.                     listener.onRightClick();
  106.                 }
  107.             });
  108.         }
  109.     }
  110.  
  111. }

完成以上代码，我们只需要在具体的Activity中实现方法 

 public void setMyActionBar(String strTitle, int resIdLeft, String strLeft, int resIdRight, String strRight, final ActionBarClickListener listener)

就行了。


但是，不知道心细的同学发现没有。这样写代码有一个非常大的弊端，就是BaseActivity里多出了好多代码（我们知道BaseActivity肯定还有非常多的其他代码，所以，尽量让我们的BaseActivity越简单越好）。那有什么办法减少BaseActivity里的代码量呢，同时也提高我们自身代码的内聚（让actionBar只为actionBar而用）呢。

那这里我们就要用到做法二。


做法二：自定义名为MyActionBar 的 widget。

大致思想就是自定义View，选一个layout布局填充，layout里面包括ActionBar的所有内容（左菜单、标题、右菜单）。

代码如下：

  1. package com.myactionbar.widget;
  2.  
  3. import android.content.Context;
  4. import android.support.v4.graphics.ColorUtils;
  5. import android.text.TextUtils;
  6. import android.util.AttributeSet;
  7. import android.view.View;
  8. import android.view.ViewGroup;
  9. import android.widget.LinearLayout;
  10. import android.widget.TextView;
  11.  
  12. import com.myactionbar.R;
  13. import com.myactionbar.impl.ActionBarClickListener;
  14.  
  15.  
  16. /**
  17.  * 支持渐变的 actionBar
  18.  * Created by 晖仔(Milo) on 2016/12/28.
  19.  * email:303767416@qq.com
  20.  */
  21.  
  22. public final class MyActionBar extends LinearLayout {
  23.  
  24.     private View layRoot;
  25.     private View vStatusBar;
  26.     private View layLeft;
  27.     private View layRight;
  28.     private TextView tvTitle;
  29.     private TextView tvLeft;
  30.     private TextView tvRight;
  31.     private View iconLeft;
  32.     private View iconRight;
  33.  
  34.     public MyActionBar(Context context) {
  35.         this(context, null);
  36.     }
  37.  
  38.     public MyActionBar(Context context, AttributeSet attrs) {
  39.         super(context, attrs);
  40.         init();
  41.     }
  42.  
  43.     public MyActionBar(Context context, AttributeSet attrs, int defStyleAttr) {
  44.         super(context, attrs, defStyleAttr);
  45.     }
  46.  
  47.     private void init() {
  48.         setOrientation(HORIZONTAL);
  49.         View contentView = inflate(getContext(), R.layout.actionbar_dft, this);
  50.         layRoot = contentView.findViewById(R.id.lay_transroot);
  51.         vStatusBar = contentView.findViewById(R.id.v_statusbar);
  52.         tvTitle = (TextView) contentView.findViewById(R.id.tv_actionbar_title);
  53.         tvLeft = (TextView) contentView.findViewById(R.id.tv_actionbar_left);
  54.         tvRight = (TextView) contentView.findViewById(R.id.tv_actionbar_right);
  55.         iconLeft = contentView.findViewById(R.id.iv_actionbar_left);
  56.         iconRight = contentView.findViewById(R.id.v_actionbar_right);
  57.     }
  58.  
  59.     /**
  60.      * 设置状态栏高度
  61.      *
  62.      * @param statusBarHeight
  63.      */
  64.     public void setStatusBarHeight(int statusBarHeight) {
  65.         ViewGroup.LayoutParams params = vStatusBar.getLayoutParams();
  66.         params.height = statusBarHeight;
  67.         vStatusBar.setLayoutParams(params);
  68.     }
  69.  
  70.     /**
  71.      * 设置是否需要渐变
  72.      *
  73.      * @param translucent
  74.      */
  75.     public void setNeedTranslucent(boolean translucent) {
  76.         if (translucent) {
  77.             layRoot.setBackgroundDrawable(null);
  78.         }
  79.     }
  80.  
  81.     /**
  82.      * 设置标题
  83.      *
  84.      * @param strTitle
  85.      */
  86.     public void setTitle(String strTitle) {
  87.         if (!TextUtils.isEmpty(strTitle)) {
  88.             tvTitle.setText(strTitle);
  89.             tvTitle.setVisibility(View.VISIBLE);
  90.         } else {
  91.             tvTitle.setVisibility(View.GONE);
  92.         }
  93.     }
  94.  
  95.     /**
  96.      * 设置透明度
  97.      *
  98.      * @param transAlpha 0-255 之间
  99.      */
  100.     public void setTranslucent(int transAlpha) {
  101.         layRoot.setBackgroundColor(ColorUtils.setAlphaComponent(getResources().getColor(R.color.primary), transAlpha));
  102.         tvTitle.setAlpha(transAlpha);
  103.         tvLeft.setAlpha(transAlpha);
  104.         tvRight.setAlpha(transAlpha);
  105.         iconLeft.setAlpha(transAlpha);
  106.         iconRight.setAlpha(transAlpha);
  107.     }
  108.  
  109.  
  110.     /**
  111.      * 设置数据
  112.      *
  113.      * @param strTitle
  114.      * @param resIdLeft
  115.      * @param strLeft
  116.      * @param resIdRight
  117.      * @param strRight
  118.      * @param listener
  119.      */
  120.     public void setData(String strTitle, int resIdLeft, String strLeft, int resIdRight, String strRight, final ActionBarClickListener listener) {
  121.         if (!TextUtils.isEmpty(strTitle)) {
  122.             tvTitle.setText(strTitle);
  123.         } else {
  124.             tvTitle.setVisibility(View.GONE);
  125.         }
  126.         if (!TextUtils.isEmpty(strLeft)) {
  127.             tvLeft.setText(strLeft);
  128.             tvLeft.setVisibility(View.VISIBLE);
  129.         } else {
  130.             tvLeft.setVisibility(View.GONE);
  131.         }
  132.         if (!TextUtils.isEmpty(strRight)) {
  133.             tvRight.setText(strRight);
  134.             tvRight.setVisibility(View.VISIBLE);
  135.         } else {
  136.             tvRight.setVisibility(View.GONE);
  137.         }
  138.  
  139.         if (resIdLeft == 0) {
  140.             iconLeft.setVisibility(View.GONE);
  141.         } else {
  142.             iconLeft.setBackgroundResource(resIdLeft);
  143.             iconLeft.setVisibility(View.VISIBLE);
  144.         }
  145.  
  146.         if (resIdRight == 0) {
  147.             iconRight.setVisibility(View.GONE);
  148.         } else {
  149.             iconRight.setBackgroundResource(resIdRight);
  150.             iconRight.setVisibility(View.VISIBLE);
  151.         }
  152.  
  153.         if (listener != null) {
  154.             layLeft = findViewById(R.id.lay_actionbar_left);
  155.             layRight = findViewById(R.id.lay_actionbar_right);
  156.             layLeft.setOnClickListener(new OnClickListener() {
  157.                 @Override
  158.                 public void onClick(View v) {
  159.                     listener.onLeftClick();
  160.                 }
  161.             });
  162.             layRight.setOnClickListener(new OnClickListener() {
  163.                 @Override
  164.                 public void onClick(View v) {
  165.                     listener.onRightClick();
  166.                 }
  167.             });
  168.         }
  169.     }
  170.  
  171. }

完成上述代码后，BaseActivity相应的封装就变得非常简单，只要简单的几行就能完成。

  1.     /**
  2.      * 设置ActionBar
  3.      *
  4.      * @param strTitle
  5.      * @param resIdLeft
  6.      * @param strLeft
  7.      * @param resIdRight
  8.      * @param strRight
  9.      * @param listener
  10.      */
  11.     protected void setMyActionBar(String strTitle, int resIdLeft, String strLeft, int resIdRight, String strRight, final ActionBarClickListener listener) {
  12.         actionBar = (MyActionBar) findViewById(R.id.actionbar);
  13.         actionBar.setData(strTitle, resIdLeft, strLeft, resIdRight, strRight, listener);
  14.     }
  15.  
  16.     /**
  17.      * 获取actionBar
  18.      *
  19.      * @return
  20.      */
  21.     protected MyActionBar getMyActionBar() {
  22.         return actionBar;
  23.     }

是不是非常简单。

而它的用法和做法一种是一致的，只需要在具体Activity中实现：

protected void setMyActionBar(String strTitle, int resIdLeft, String strLeft, int resIdRight, String strRight, final ActionBarClickListener listener)
即可。


至此，自定义ActionBar大部分内容都已经讲完，下面提供一下DEMO下载地址，免积分的。

CSDN：http://download.csdn.net/detail/yanjunhui2011/9788974

GitHub: https://github.com/yanjunhui2014/MyActionbar




声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/186031
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号