自定义ViewGroup之Topbar----布局代码的缩减,实现app风格的高度一致

来源:互联网 发布:教师资格考试软件下载 编辑:程序博客网 时间:2024/06/04 19:42


最近写项目,有二三十个布局,都具有相同风格的标题栏,如果每一个界面都反复写一个布局,重复的工作太多,代码重复也多,于是自定义一个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风格完全统一。以上供各位参考指教。











2 0
原创粉丝点击