最近写项目,有二三十个布局,都具有相同风格的标题栏,如果每一个界面都反复写一个布局,重复的工作太多,代码重复也多,于是自定义一个ViewGroup作为通用的Topbar,通过设置标签属性达到风格一致,细节不同的效果,大量缩减代码量和布局的复杂度,切能让app风格高度一致;
主要实现功能:
1、可自由设置布局背景、图标
2、自由控制Topbar中button的显示和隐藏
3、可为不同的Button添加点击监听事件
先上效果图:
实现步骤
1、在values文件夹中新建一个attrs.xml ,声明需求属性,代码如下:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="Topbar">
<attr name="title" format="string"/>
<attr name="titleTextSize" format="dimension"/>
<attr name="titleTextColor" format="color"/>
<attr name="leftButtonTextColor" format="color"/>
<attr name="leftButtonBackground" format="reference|color"/>
<attr name="leftButtonText" format="string"/>
<attr name="rightButtonTextColor" format="color"/>
<attr name="rightButtonBackground" format="reference|color"/>
<attr name="rightButtonText" format="string"/>
</declare-styleable>
</resources>
布局左侧一个Button 中间一个显示标题的TextView 右侧一个Button
2、新建一个类,继承自RelativeLayout,在此类中实现资源属性的获取和赋值,和内部控件的布局,自定义监听接口,实现不同按钮的点击效果,添加方法,实现控件的显示和隐藏,代码如下:
package com.dz.qiangwan.view;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.RelativeLayout;
import android.widget.TextView;
import com.dz.qiangwan.qwtest.R;
/**
* Created by Administrator on 2016/11/9.
*/
public class Topbar extends RelativeLayout {
private Button leftButton,rightButton;//左侧和右侧按钮
private TextView titleTextView; //标题TV
private int leftTextColor; //左侧按钮的属性
private String leftText;
private Drawable leftBackground;
private int rightTextColor;//右侧按钮的属性
private String rightText;
private Drawable rightBackground;
private String titleText; //标题相关的属性
private float titleTextSize;
private int titleTextColor;
LayoutParams leftParams,rightParams,titleParams;
private OnTopbarClickListener mTopbarClickListener;
//定义点击Topbar监听接口
public interface OnTopbarClickListener{
void onLeftClick();
void onRightClick();
}
public void setOnTopbarClickListener(OnTopbarClickListener onTopbarClickListener){
this.mTopbarClickListener = onTopbarClickListener;
}
public Topbar(Context context, AttributeSet attrs) {
super(context, attrs);
TypedArray typedArray = context.obtainStyledAttributes(attrs,R.styleable.Topbar);
//获取左侧button定义的属性
leftTextColor=typedArray.getColor(R.styleable.Topbar_leftButtonTextColor,0);
leftText=typedArray.getString(R.styleable.Topbar_leftButtonText);
leftBackground=typedArray.getDrawable(R.styleable.Topbar_leftButtonBackground);
//获取右侧button定义的属性
rightTextColor=typedArray.getColor(R.styleable.Topbar_rightButtonTextColor,0);
rightText=typedArray.getString(R.styleable.Topbar_rightButtonText);
rightBackground=typedArray.getDrawable(R.styleable.Topbar_rightButtonBackground);
//获取标题定义的属性
titleText=typedArray.getString(R.styleable.Topbar_title);
titleTextSize = typedArray.getDimension(R.styleable.Topbar_titleTextSize,12);
titleTextColor = typedArray.getColor(R.styleable.Topbar_titleTextColor,0);
//释放资源
typedArray.recycle();
//为按钮和标题设置属性
leftButton = new Button(context);
rightButton = new Button(context);
titleTextView = new TextView(context);
leftButton.setText(leftText);
leftButton.setTextColor(leftTextColor);
leftButton.setBackground(leftBackground);
rightButton.setText(rightText);
rightButton.setTextColor(rightTextColor);
rightButton.setBackground(rightBackground);
titleTextView.setText(titleText);
titleTextView.setTextColor(titleTextColor);
titleTextView.setTextSize(titleTextSize);
titleTextView.setGravity(Gravity.CENTER);
this.setBackgroundColor(getResources().getColor(R.color.colorTheme));
//将控件以对应的参数添加到RelativeLayout中
leftParams = new LayoutParams(65,65);
leftParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT,TRUE);
leftParams.addRule(RelativeLayout.CENTER_VERTICAL);
addView(leftButton,leftParams);
rightParams = new LayoutParams(65,65);
rightParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);
rightParams.addRule(RelativeLayout.CENTER_VERTICAL);
addView(rightButton,rightParams);
titleParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.MATCH_PARENT);
titleParams.addRule(RelativeLayout.CENTER_IN_PARENT);
addView(titleTextView,titleParams);
leftButton.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View view) {
if(mTopbarClickListener!=null){
mTopbarClickListener.onLeftClick();
}
}
});
rightButton.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View view) {
if(mTopbarClickListener!=null){
mTopbarClickListener.onRightClick();
}
}
});
}
public void setLeftButtonInvisible(){
leftButton.setVisibility(View.INVISIBLE);
}
public void setRightButtonInVisible(){
rightButton.setVisibility(View.INVISIBLE);
}
}
3、自定义布局的使用:
<com.dz.qiangwan.view.Topbar
android:paddingLeft="5dp"
android:layout_width="match_parent"
android:layout_height="45dp"
custom:rightButtonBackground="@mipmap/setting"
custom:title="个人中心"
custom:titleTextSize="6dp"
custom:titleTextColor="#ffffff"
android:paddingRight="5dp"
/>
注意根布局中要声明此行代码:
xmlns:custom="http://schemas.android.com/apk/res-auto"
4、控件在代码中的使用
private void initView() {
topbar = (Topbar) findViewById(R.id.topbar);
}
private void setListener(){
topbar.setOnTopbarClickListener(new Topbar.OnTopbarClickListener() {
@Override
public void onLeftClick() {
Toast.makeText(MainActivity.this, "左侧按钮被点击了", Toast.LENGTH_SHORT).show();
}
@Override
public void onRightClick() {
Toast.makeText(MainActivity.this, "右侧按钮被点击了", Toast.LENGTH_SHORT).show();
}
});
}
使用起来简单方便,最重要的是复用度高,大大减少布局代码和布局复杂度,使app风格完全统一。以上供各位参考指教。