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


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











评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值