Android继承自定义标题栏BaseTitleBarActivity

上一次讲了，封装标题栏，后来想想，那样封装还是很麻烦，因为，每个页面都需要添加标题栏的布局，如果一个类不需要，但是后来又需要了，那么，导致整个页面都要手动调整。

今天，我把标题栏封装到一个activity中，这个activity作为一个基类，只要继承这个类，就可以拥有设置标题栏属性的功能，如果不需要，只需要一句代码就可以去掉。

上次我们说到，一个标题栏无非有这些东西:

左侧返回箭头和文本、中间标题、右侧图标和文字

那么，我们将这些东西全都封装到一个页面中:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/rl_title_bar_layout"
android:paddingTop="8dp"
android:paddingLeft="15dp"
android:layout_width="match_parent"
android:gravity="center_vertical"
android:layout_height="60dp"
android:background="@color/btn_blue" >

<ImageView
android:layout_marginTop="15dp"
android:src="@mipmap/ic_back_white"
android:id="@+id/iv_title_left_icon"
android:layout_alignParentLeft="true"
android:layout_width="11dp"
android:scaleType="centerCrop"
android:layout_height="22dp" />

<TextView
android:id="@+id/tv_title_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:ellipsize="marquee"
android:gravity="center"
android:singleLine="true"
android:textColor="@color/white"
android:textSize="18sp" />

<TextView
android:id="@+id/tv_left_icon"
android:layout_toRightOf="@+id/iv_title_left_icon"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:textColor="@color/white"
android:textSize="18sp"
/>

<TextView
android:layout_marginRight="6dp"
android:layout_alignParentRight="true"
android:layout_toLeftOf="@+id/iv_right_icon"
android:id="@+id/tv_right_title"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:textColor="@color/white"
android:textSize="18sp" />

<ImageView
android:layout_marginRight="5dp"
android:layout_marginTop="15dp"
android:id="@+id/iv_right_icon"
android:layout_alignParentRight="true"
android:layout_width="32dp"
android:layout_height="32dp" />

</RelativeLayout>

然后我们在activity的布局中将标题栏添加进来:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<!-- Title -->

<include layout="@layout/include_self_title_bar_layout" />

<FrameLayout
android:id="@+id/fl_content_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/bg" >
</FrameLayout>

</LinearLayout>

上面是标题栏，下面是帧布局，用来显示其他内容。

然后就是activity中的代码了:

我们要让其他页面的内容都放在这个帧布局中，这样，每个子类就都拥有这个标题栏了,我们需要重写父类的setContentView方法，在这个方法内，我们将获取到的布局，添加到帧布局中，那么，只要继承了这个activity的页面，他们的布局都会添加到这个帧布局中:

//取出FrameLayout并调用父类removeAllViews()方法
@Override
public void setContentView(int layoutResID) {
fl_content_layout.removeAllViews();
View.inflate(this, layoutResID, fl_content_layout);
onContentChanged();
}

@Override
public void setContentView(View view) {
fl_content_layout.removeAllViews();
fl_content_layout.addView(view);
onContentChanged();
}

@Override
public void setContentView(View view, ViewGroup.LayoutParams params) {
fl_content_layout.removeAllViews();
fl_content_layout.addView(view, params);
onContentChanged();
}

这里我们重写父类的三种设置布局的方法，其实只用到了一种，也就是第一种，那么，这个基类的布局是怎么添加的呢:

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setupViews();
}

private void setupViews() {
super.setContentView(R.layout.activity_base_title);
tv_title_text = (TextView) findViewById(R.id.tv_title_text);
fl_content_layout = (FrameLayout) findViewById(R.id.fl_content_layout);
rl_title_bar_layout = (RelativeLayout) findViewById(R.id.rl_title_bar_layout);
tv_left_icon = (TextView) findViewById(R.id.tv_left_icon);
tv_right_title = (TextView) findViewById(R.id.tv_right_title);
iv_right_icon = (ImageView) findViewById(R.id.iv_right_icon);
iv_title_left_icon = (ImageView) findViewById(R.id.iv_title_left_icon);

iv_right_icon.setOnClickListener(this);
iv_title_left_icon.setOnClickListener(this);
tv_right_title.setOnClickListener(this);
tv_left_icon.setOnClickListener(this);

uiAdapter();
}

调用父类的方法，因为，咱们的类才是让其他类继承的基类，如果调用已经重写的setContentview方法的话，就会报错了，因为帧布局还没有初始化，根本无法添加。

剩下的，就是设置标题栏上控件的值了：

/**
* 是否显示返回按钮
*
* @param backwardResId  文字
*
* @param show  true则显示
*/
public void showBackwardView(int backwardResId, boolean show) {
if (tv_left_icon != null) {
if (show) {
tv_left_icon.setText(backwardResId);
tv_left_icon.setVisibility(View.VISIBLE);
} else {
tv_left_icon.setVisibility(View.GONE);
}
}
}

/**
* 提供是否显示提交按钮
* @param forwardResId  文字
* @param show  true则显示
*/
public void showForwardView(int forwardResId, boolean show) {
if (tv_right_title != null) {
if (show) {
tv_right_title.setVisibility(View.VISIBLE);
tv_right_title.setText(forwardResId);
} else {
tv_right_title.setVisibility(View.GONE);
}
}
}

/**
* 设置左侧图标
* @param resId 图片资源id
*/
public void setLeftIcon(int resId){
iv_title_left_icon.setImageResource(resId);
}

/**
* 设置右侧图标
* @param redId 图片资源id
*/
public void setRightIcon(int redId){
iv_right_icon.setVisibility(View.VISIBLE);
iv_right_icon.setImageResource(redId);
}

/**
* 右侧图标是否显示
* @param flag true显示
*/
public void setRightIconShow(boolean flag){
if(flag){
iv_right_icon.setVisibility(View.VISIBLE);
}else{
iv_right_icon.setVisibility(View.GONE);
}
}

/**
* 设置标题栏背景色
*/
public  void setTitleBgColor(){
rl_title_bar_layout.setBackgroundColor(getResources().getColor(R.color.bg_color));
}

/**
* 设置是否显示标题栏
* @param flag true显示
*/
public void showTitleBar(boolean flag){
if(flag){
rl_title_bar_layout.setVisibility(View.VISIBLE);
}else{
rl_title_bar_layout.setVisibility(View.GONE);
}
}

/**
* 返回按钮点击后触发
* @param backwardView 点击的view
*/
public void onBackward(View backwardView) {
finish();
}

/**
* 提交按钮点击后触发
* @param forwardView 点击的view
*/
public abstract void onForward(View forwardView);

//设置标题内容
@Override
public void setTitle(int titleId) {
tv_title_text.setText(titleId);
}

//设置标题内容
@Override
public void setTitle(CharSequence title) {
tv_title_text.setText(title);
}

//设置标题文字颜色
@Override
public void setTitleColor(int textColor) {
tv_title_text.setTextColor(getResources().getColor(R.color.btn_blue));
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.tv_left_icon:
onBackward(v);
break;
case R.id.tv_right_title:
onForward(v);
break;
case R.id.iv_right_icon:
onForward(v);
break;
case R.id.iv_title_left_icon:
onBackward(v);
break;
default:
break;
}
}

我们把右侧图标/文字的点击事件设置成了抽象方法，因为这个图标的事件响应是不一定的，每个类都有不同的需求，这样的话，其他的类，就可以在这个抽象方法中，实现自己的东西了。

来看一下完整的基类:

package com.telehot.quan.base;

import android.content.pm.ActivityInfo;
import android.graphics.Color;
import android.os.Build;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;
import android.widget.Toast;

import com.telehot.fk.thuikitlib.base.multiresolution.Resolution;
import com.telehot.fk.thuikitlib.base.multiresolution.ResolutionAdapter;
import com.telehot.fk.thuikitlib.base.ui.*;
import com.telehot.fk.thuikitlib.base.ui.BaseActivity;
import com.telehot.fk.thuikitlib.enums.ViewScaleType;
import com.telehot.quan.R;
/**
* @class：BaseTitleBarActivity
* @brief：基本标题栏 .
*
* Copyright:Copyright (c) 2016
* Company:天好电子商务股份有限公司.
*
* @author：yanxiaosa
* @email：yanxiaosa@tele-hot.com
* @date：2017-4-6
*/
public abstract class BaseTitleBarActivity extends BaseActivity implements View.OnClickListener{

/**
* 页面布局
*/
private FrameLayout fl_content_layout;

/**
* 标题栏跟布局
*/
private RelativeLayout rl_title_bar_layout;

/**
* 标题栏右侧图标
*/
private ImageView iv_right_icon;

/**
* 标题栏左侧图标
*/
private ImageView iv_title_left_icon;

/**
* 标题栏标题
*/
private TextView tv_title_text;

/**
* 标题栏左边返回箭头
*/
private TextView tv_left_icon;

/**
* 标题栏右边选项
*/
private TextView tv_right_title;

/**
* 页面适配
*/
public ResolutionAdapter mResolutionAdapter;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setupViews();
}

private void setupViews() {
super.setContentView(R.layout.activity_base_title);
tv_title_text = (TextView) findViewById(R.id.tv_title_text);
fl_content_layout = (FrameLayout) findViewById(R.id.fl_content_layout);
rl_title_bar_layout = (RelativeLayout) findViewById(R.id.rl_title_bar_layout);
tv_left_icon = (TextView) findViewById(R.id.tv_left_icon);
tv_right_title = (TextView) findViewById(R.id.tv_right_title);
iv_right_icon = (ImageView) findViewById(R.id.iv_right_icon);
iv_title_left_icon = (ImageView) findViewById(R.id.iv_title_left_icon);

iv_right_icon.setOnClickListener(this);
iv_title_left_icon.setOnClickListener(this);
tv_right_title.setOnClickListener(this);
tv_left_icon.setOnClickListener(this);

uiAdapter();
}

/**
* 页面适配
*/
private void uiAdapter() {
try {
mResolutionAdapter = ResolutionAdapter.getInstance();
mResolutionAdapter.setDesignResolution(this,new Resolution(750, 1334, 1.0f, 160, ActivityInfo.SCREEN_ORIENTATION_PORTRAIT));
} catch (Exception e) {
e.printStackTrace();
}

mResolutionAdapter.setTextSize(tv_left_icon,18);
mResolutionAdapter.setTextSize(tv_right_title,18);
mResolutionAdapter.setup(iv_title_left_icon,22,44, ViewScaleType.AS_HEIGHT_EDGES_SCALE);
mResolutionAdapter.setup(iv_right_icon,32,32, ViewScaleType.AS_TWO_EDGES_SCALE);
}

/**
* 透明状态栏,透明导航栏
* 使用了SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION,表示会让应用的主体内容占用
* 系统导航栏的空间
* 然后又调用了setNavigationBarColor()方法将导航栏设置成透明色
*/
public void setStatus(){
if (Build.VERSION.SDK_INT >= 21) {
View decorView = getWindow().getDecorView();
int option = View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
| View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
| View.SYSTEM_UI_FLAG_LAYOUT_STABLE;
decorView.setSystemUiVisibility(option);
//设置状态栏和导航栏的颜色
getWindow().setNavigationBarColor(Color.TRANSPARENT);
getWindow().setStatusBarColor(Color.TRANSPARENT);
}
}

/**
* 是否显示返回按钮
*
* @param backwardResId  文字
*
* @param show  true则显示
*/
public void showBackwardView(int backwardResId, boolean show) {
if (tv_left_icon != null) {
if (show) {
tv_left_icon.setText(backwardResId);
tv_left_icon.setVisibility(View.VISIBLE);
} else {
tv_left_icon.setVisibility(View.GONE);
}
}
}

/**
* 提供是否显示提交按钮
* @param forwardResId  文字
* @param show  true则显示
*/
public void showForwardView(int forwardResId, boolean show) {
if (tv_right_title != null) {
if (show) {
tv_right_title.setVisibility(View.VISIBLE);
tv_right_title.setText(forwardResId);
} else {
tv_right_title.setVisibility(View.GONE);
}
}
}

/**
* 设置左侧图标
* @param resId 图片资源id
*/
public void setLeftIcon(int resId){
iv_title_left_icon.setImageResource(resId);
}

/**
* 设置右侧图标
* @param redId 图片资源id
*/
public void setRightIcon(int redId){
iv_right_icon.setVisibility(View.VISIBLE);
iv_right_icon.setImageResource(redId);
}

/**
* 右侧图标是否显示
* @param flag true显示
*/
public void setRightIconShow(boolean flag){
if(flag){
iv_right_icon.setVisibility(View.VISIBLE);
}else{
iv_right_icon.setVisibility(View.GONE);
}
}

/**
* 设置标题栏背景色
*/
public  void setTitleBgColor(){
rl_title_bar_layout.setBackgroundColor(getResources().getColor(R.color.bg_color));
}

/**
* 设置是否显示标题栏
* @param flag true显示
*/
public void showTitleBar(boolean flag){
if(flag){
rl_title_bar_layout.setVisibility(View.VISIBLE);
}else{
rl_title_bar_layout.setVisibility(View.GONE);
}
}

/**
* 返回按钮点击后触发
* @param backwardView 点击的view
*/
public void onBackward(View backwardView) {
finish();
}

/**
* 提交按钮点击后触发
* @param forwardView 点击的view
*/
public abstract void onForward(View forwardView);

//设置标题内容
@Override
public void setTitle(int titleId) {
tv_title_text.setText(titleId);
}

//设置标题内容
@Override
public void setTitle(CharSequence title) {
tv_title_text.setText(title);
}

//设置标题文字颜色
@Override
public void setTitleColor(int textColor) {
tv_title_text.setTextColor(getResources().getColor(R.color.btn_blue));
}

//取出FrameLayout并调用父类removeAllViews()方法
@Override
public void setContentView(int layoutResID) {
fl_content_layout.removeAllViews();
View.inflate(this, layoutResID, fl_content_layout);
onContentChanged();
}

@Override
public void setContentView(View view) {
fl_content_layout.removeAllViews();
fl_content_layout.addView(view);
onContentChanged();
}

@Override
public void setContentView(View view, ViewGroup.LayoutParams params) {
fl_content_layout.removeAllViews();
fl_content_layout.addView(view, params);
onContentChanged();
}

@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.tv_left_icon:
onBackward(v);
break;
case R.id.tv_right_title:
onForward(v);
break;
case R.id.iv_right_icon:
onForward(v);
break;
case R.id.iv_title_left_icon:
onBackward(v);
break;
default:
break;
}
}

}

这样就完成了，一个标题栏的布局，一个页面的布局，一个Activity,看一下使用吧:

//添加左侧图标，
setLeftIcon(R.mipmap.ic_back_white);
//是否显示右侧文字
showForwardView(R.string.comm_null,false);
//是否显示左侧文字
showBackwardView(R.string.comm_null,false);
//设置标题
setTitle("设置");

其他的方法，看下activity就一清二楚了，这里不多说!