自定义Actionbar的实现（仿qq Actionbar）-CSDN博客

actionbar是常用组建，每个app都会用到。我们今天实现一个自定义actionbar，仿qq的样式。本篇博客先简单实现actionbar，下一篇将结合fragment来显示。

首先上效果图：

源码：源码地址提取码：acvg

1.添加依赖

actionbar是support v7里的组件，所以我们要添加v7的依赖。

dependencies {
    compile 'com.android.support:appcompat-v7:21.0.3'
}

2. 实现actionbar的 xml文件

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:fresco="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/actionbar_background">
    <com.facebook.drawee.view.SimpleDraweeView
        android:id="@+id/user_avatar"
        android:layout_width="44dp"
        android:layout_height="44dp"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:layout_marginLeft="20dp"
        android:visibility="visible"
        fresco:placeholderImage="@drawable/avatar_icon"
        fresco:roundAsCircle="true" />
    <TextView
        android:id="@+id/actionbar_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="标题"
        android:textColor="#ffffff"
        android:textSize="18sp"
        android:visibility="visible" />
    <ImageView
        android:id="@+id/actionbar_image"
        android:layout_width="100dp"
        android:layout_height="30dp"
        android:layout_centerInParent="true"
        android:background="@drawable/actionbar_message"
        android:visibility="visible" />
    <TextView
        android:id="@+id/actionbar_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="20dp"
        android:text="添加"
        android:textColor="#ffffff"
        android:textSize="15sp"
        android:visibility="visible" />
</RelativeLayout>

注意：

1. 总的RelativeLayout，layout_width和layout_height设置为match_parent，而不是具体数值。

2. SimpleDraweeView 是facebook加载图片的一个库，功能强大，这里用来显示图片，

3. 各个子控件的可见性应该设置为gone，但这里为了显示方便，暂时设置为visiable。

4. actionbar在同样的位置不同的页面可能显示不同的内容，比如qq，消息页面：中间是一个消息和电话的可切换的按钮，联系人页面：是联系人textview，在动态页面：是动态 textview。我们写布局时不要管这三个空间是否会重叠，你只要在相应位置把控件放上去即可，具体哪个页面显示哪个控件，这会在代码中设置。

3.实现activity

我们定义一个baseactivity，让别的activity都继承自baseactivity。具体用法看注释。

public class BaseActivity extends ActionBarActivity {

    @Bind(R.id.user_avatar)
    public SimpleDraweeView user_avatar; //用户头像

    @Bind(R.id.actionbar_title)
    public TextView actionbar_title;

    @Bind(R.id.actionbar_image)
    public ImageView actionbar_image;

    @Bind(R.id.actionbar_text)
    public TextView actionbar_text;

    public ActionBar actionBar;
    public Context context;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        context = getApplicationContext();

        setActionBar();
    }

    public void setActionBar() {
        actionBar = getSupportActionBar();

        actionBar.setDisplayShowCustomEnabled(true);//使自定义actionbar在title栏显示
        actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
        actionBar.setDisplayShowTitleEnabled(false); //对应 DISPLAY_SHOW_TITLE
        actionBar.setShowHideAnimationEnabled(false); //actionbar设置为隐藏时，有一个动画，false：不播放动画。

        actionBar.setCustomView(R.layout.actionbar_layout);//设置actionbar的layout

//       actionBar.setDisplayHomeAsUpEnabled(true); // 给左上角图标的左边加上一个返回的图标 。对应ActionBar.DISPLAY_HOME_AS_UP。默认为false。效果图见下方。
//       actionBar.setDisplayShowHomeEnabled(true); //使左上角图标可点击，对应id为android.R.id.home，对应ActionBar.同样，默认为false。DISPLAY_SHOW_HOME

        //使ActionBar横向充满屏幕
        Toolbar parent = (Toolbar) actionBar.getCustomView().getParent();
        parent.setContentInsetsAbsolute(0, 0);

        ButterKnife.bind(this);
    }

    //以下方法对外暴露，供别的页面使用。（控制titlebar要显示的控件）

    public void setUserAvatar() {
        user_avatar.setVisibility(View.VISIBLE);
        //显示用户头像，具体怎么显示网络图片和本地图片，自己实现。
    }

    public void setActionbarImage(int imageId) {
        actionbar_image.setVisibility(View.VISIBLE);
        actionbar_image.setBackgroundResource(imageId);
    }

    public void setActionbarTitle(String actionbarTitle) {
        actionbar_title.setVisibility(View.VISIBLE);
        actionbar_title.setText(actionbarTitle);
    }

    public void setActionbarText(String actionbarText) {
        actionbar_text.setVisibility(View.VISIBLE);
        actionbar_text.setText(actionbarText);
    }
}

actionBar.setDisplayHomeAsUpEnabled(true);

这句加上，效果图如下：

//使ActionBar横向充满屏幕
 Toolbar parent = (Toolbar) actionBar.getCustomView().getParent();
 parent.setContentInsetsAbsolute(0, 0);

如果不加，效果是这样：

对于每个控件，在具体的activity中定义实现点击事件。

注意:因为用到了SimpleDraweeView，要实现Application，同时在AndroidManifest中加入你的Application，具体看源码。

ButterKnife是简化FindViewById的一个开源控件，具体用法见我的博客：

SimpleDraweeView是facebook出的加载图片的库，功能强大，能加载 1.圆角图片 2.宽高固定比例图片 3. gif动图等等。

4. ActionBar的显示和隐藏

actionBar.show();

有时，个别页面不需要显示ActionBar，或者需要重新定义ActionBar，此时可以先隐藏，然后在activity的布局文件中实现就可以了。

actionBar.hide();

到这里，自定义ActionBar就完成了，下章会结合fragment和viewpager一起来显示。

转载于:https://my.oschina.net/u/2421076/blog/653195