上一次讲了,封装标题栏,后来想想,那样封装还是很麻烦,因为,每个页面都需要添加标题栏的布局,如果一个类不需要,但是后来又需要了,那么,导致整个页面都要手动调整。
今天,我把标题栏封装到一个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就一清二楚了,这里不多说!