自定义顶部导航栏-样式1

一般项目中经常会用到这样的导航栏，中间显示文字，左右显示图标，今天就来把代码理一理，实现这个功能。以后直接拿来用就好了。

它的好处是，中间的标题和左右两边的图标在不同的Activity中可以完全实现定制，十分灵活。

效果图如下:

1.定制activity_actionbar.xml文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:id="@+id/actionbar"
                android:layout_height="50dip"
                android:gravity="center_vertical"
                android:background="#6EB9F4">
    <ImageButton
        android:id="@+id/left_imbt"
        android:layout_width="wrap_content"
        android:layout_height="50dip"
        android:layout_alignParentLeft="true"
        android:layout_centerHorizontal="true"
        android:contentDescription="@null"
        android:paddingLeft="20dp"
        android:paddingRight="20dp"
        android:visibility="gone"
        android:background="@drawable/selector_button"
        android:src="@null" />

    <TextView
        android:id="@+id/actionbar_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerInParent="true"
        android:textColor="#FFFFFF"
        android:textSize="20sp"
        android:text="" />
    <!-- actionbar 右边按钮 -->
    <ImageButton
        android:id="@+id/right_imbt"
        android:layout_width="wrap_content"
        android:layout_height="50dip"
        android:layout_alignParentRight="true"
        android:layout_centerHorizontal="true"
        android:background="@drawable/selector_button"
        android:contentDescription="@null"
        android:paddingLeft="20dp"
        android:paddingRight="20dp"
        android:visibility="gone"
        android:src="@null" />
</RelativeLayout>

如果遇到显示不正常，可以修改ImageButton的background属性.

2.在activity_main.xml中引入该导航栏布局。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipToPadding="true"
    android:fitsSystemWindows="true"
    tools:context="com.example.actionbardemo.MainActivity">

    <include
        layout="@layout/activity_actionbar"
        android:layout_width="match_parent"
        android:layout_height="50dip"/>
</LinearLayout>

3.在MainActivity中初始化该导航栏

package com.example.actionbardemo;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.Window;
import android.widget.ImageView;

import com.example.actionbardemo.util.AndroidUtil;

/**
 * 顶部导航栏demo
 */
public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ImageView leftBtn = (ImageView) findViewById(R.id.left_imbt);
        ImageView rightBtn = (ImageView) findViewById(R.id.right_imbt);
        //设置标题以及左右按钮的图片资源
        AndroidUtil.setWindowTitle(this, getString(R.string.app_name));
        AndroidUtil.setImageViewSource(this, R.id.left_imbt, R.drawable.actionbar_back);
        AndroidUtil.setImageViewSource(this, R.id.right_imbt, R.drawable.actionbar_add);

        if (leftBtn != null) {
            leftBtn.setOnClickListener(this);
        }
        if (rightBtn != null) {
            rightBtn.setOnClickListener(this);
        }
    }

    @Override
    public void onClick(View v) {
        AndroidUtil.onShowToast(this, "click");
    }
}

其中以上代码中用到的AndroidUtil工具类中的方法代码如下:

package com.mytest;

import android.app.Activity;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

import com.qhcloud.filetransfer.R;

/**
 * Function:工具类
 * Created by XZY on 2017/6/11 17:49
 * Email：hgncxzy@qq.com
 */
public class AndroidUtil {
    /**
     * 设置标题文字
     *
     * @param activity
     * @param text
     */
    public static void setWindowTitle(Activity activity, String text) {
        setTextViewText(activity, R.id.actionbar_title, text, true);
    }

    /**
     * 设置TEXTVIEW内容
     *
     * @param activity
     * @param resId    控件id
     * @param text
     * @param isShow
     */
    public static void setTextViewText(Activity activity, int resId,
                                       String text, boolean isShow) {
        TextView textView = (TextView) activity.findViewById(resId);
        if (textView != null) {
            textView.setText(text);
            textView.setVisibility(isShow ? View.VISIBLE : View.GONE);
        }
    }

    /**
     * 设置IMAGEVIEW图片
     *
     * @param activity
     * @param resId    控件id
     * @param imageId  图片id
     */
    public static void setImageViewSource(Activity activity, int resId,
                                          int imageId) {
        ImageView imageView = (ImageView) activity.findViewById(resId);
        if (imageView != null) {
            imageView.setImageResource(imageId);
            imageView.setVisibility(View.VISIBLE);
        }
    }
}

大功告成。其中涉及到一些资源文件的使用，请下载demo查看。

源码地址:https://yunpan.cn/cRC6QAQzHk6bj  访问密码 0f07