自定义控件Topbar、自定义属性attrs

Mr_Leixiansheng

已于 2023-06-29 16:45:40 修改

阅读量984

点赞数

分类专栏：自定义控件小项目开发文章标签： android java

于 2017-04-11 15:54:35 首次发布

本文链接：https://blog.csdn.net/Mr_Leixiansheng/article/details/70054221

版权

小项目开发同时被 2 个专栏收录

18 篇文章 1 订阅

订阅专栏

自定义控件

17 篇文章 1 订阅

订阅专栏

转载请注明出处：自定义控件Topbar、自定义属性attrs_网页topbar_Mr_Leixiansheng的博客-CSDN博客

相关文章：自定义控件Topbar 升级版

作用：相同或者类似的UI高度封装，以后直接修改模版即可使用，解决代码复用

步骤：

（最先需要想好自己要构建什么样的控件及其属性有什么）

1、res / values 下添加 attrs 文件设置自定义的属性和其输入格式

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--
    自定义属性：
    1、选好要定义的 属性
    2、为属性设置好 格式
    （标题、左按钮、右按钮：字体大小、颜色；背景；是否可见）
    -->
   <declare-styleable name="TopBar">
       <attr name="title" format="string"/>
   </declare-styleable>
</resources>

2、新建类继承 RelativeLayout

1）构造函数中将定义在 xml 中的属性属性取出

TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.TopBar);

 //2、获取自定义的属性
        title = typedArray.getString(R.styleable.TopBar_title);

2）回收TypedArray

  typedArray.recycle();

3）拼合（并没有创建新的组件，只是拼合在一起）

 	tvTitle = new TextView(context);
        leftBtn = new Button(context);
        rightBtn = new Button(context);	tvTitle = new TextView(context);
        leftBtn = new Button(context);
        rightBtn = new Button(context);

4) 将获取的自定义属性赋值给控件

tvTitle.setText(title);

5) 设置控件宽度和位置,并添加到view中

	titleParas = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT);
        titleParas.addRule(RelativeLayout.CENTER_IN_PARENT);
        addView(tvTitle, titleParas);titleParas = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT);
        titleParas.addRule(RelativeLayout.CENTER_IN_PARENT);
        addView(tvTitle, titleParas);

6）自定义监听

3、主布局中添加自定义View, 并添加以下代码，否则无法引入自定义属性。自由设置自定义View

xmlns:custom="http://schemas.android.com/apk/res-auto"

4、主程序添加找到自定义控件，实现监听

代码如下：

1、res / values 下添加 attrs 文件设置自定义的属性和其输入格式

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--
    自定义属性：
    1、选好要定义的 属性
    2、为属性设置好 格式
    （标题、左按钮、右按钮：字体大小、颜色；背景；是否可见）
    -->
   <declare-styleable name="TopBar">
       <attr name="title" format="string"/>
       <attr name="titleSize" format="dimension"/>
       <attr name="titleColor" format="color"/>
       <attr name="titleVisiable" format="boolean"/>

       <attr name="leftText" format="string"/>
       <attr name="leftTextColor" format="color"/>
       <attr name="leftBackground" format="reference|color"/>
       <attr name="leftTextVisiable" format="boolean"/>

       <attr name="rightText" format="string"/>
       <attr name="rightTextColor" format="color"/>
       <attr name="rightBackground" format="reference|color"/>
       <attr name="rightTextVisiable" format="boolean"/>
       
       <attr name="topbarBackground" format="color"/>
   </declare-styleable>
</resources>

2、新建类继承 RelativeLayout

package com.example.leixiansheng.topbar;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.drawable.Drawable;
import android.os.Build;
import android.support.annotation.RequiresApi;
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 android.widget.Toast;

/**
 * Created by Leixiansheng on 2017/4/11.
 */

public class TopBar extends RelativeLayout {

    /**
     * 定义属性元素（为了把自定义的属性都取出来，方便赋值给控件）
     */
    private Button leftBtn,rightBtn;
    private TextView tvTitle;

    //title属性
    private String title;
    private int titleColor;
    private float titleSize;
    private boolean titleVisiable;
    //leftBtn属性
    private String leftText;
    private int leftTextColor;
    private Drawable leftBackground;
    private boolean leftTextVisiable;
    //rightBtn属性
    private String rightText;
    private int rightTextColor;
    private Drawable rightBackground;
    private boolean rightTextVisiable;

    private int topbarBackground;

    private LayoutParams leftParams,rightParas,titleParas;
    private topbarClickListener listener;



    public interface topbarClickListener{
        void leftClick();
        void rightClick();
    }

    public void setOnTopBarClickListener(topbarClickListener listener) {
        this.listener = listener;
    }

    @RequiresApi(api = Build.VERSION_CODES.JELLY_BEAN)
    public TopBar(final Context context, AttributeSet attrs) {
        super(context, attrs);

        //1、存储 xml获取的自定义属性
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.TopBar);

        //2、获取自定义的属性
        title = typedArray.getString(R.styleable.TopBar_title);
        titleColor = typedArray.getColor(R.styleable.TopBar_titleColor,0xFFFFFFFF);  //第二位默认 颜色
        titleSize = typedArray.getDimension(R.styleable.TopBar_titleSize, 15f);   //第二位默认 大小
        titleVisiable = typedArray.getBoolean(R.styleable.TopBar_titleVisiable, true);    //第二位默认 可见

        leftText = typedArray.getString(R.styleable.TopBar_leftText);
        leftTextColor = typedArray.getColor(R.styleable.TopBar_leftTextColor, 0xffffffff);
        leftBackground = typedArray.getDrawable(R.styleable.TopBar_leftBackground);
        leftTextVisiable = typedArray.getBoolean(R.styleable.TopBar_leftTextVisiable, true);

        rightText = typedArray.getString(R.styleable.TopBar_rightText);
        rightTextColor = typedArray.getColor(R.styleable.TopBar_rightTextColor, 0xffffffff);
        rightBackground = typedArray.getDrawable(R.styleable.TopBar_rightBackground);
        rightTextVisiable = typedArray.getBoolean(R.styleable.TopBar_rightTextVisiable, true);

        topbarBackground = typedArray.getColor(R.styleable.TopBar_topbarBackground,0xFFF59563);

        //3、记得回收TypedArray
        typedArray.recycle();

        //4、拼合（并没有创建新的组件，只是拼合在一起）
        tvTitle = new TextView(context);
        leftBtn = new Button(context);
        rightBtn = new Button(context);

        //5、将获取的自定义属性赋值给控件
        tvTitle.setText(title);
        tvTitle.setTextColor(titleColor);
        tvTitle.setTextSize(titleSize);
        tvTitle.setGravity(Gravity.CENTER);
        if (!titleVisiable) {
            tvTitle.setVisibility(View.GONE);
        }

        leftBtn.setText(leftText);
        leftBtn.setTextColor(leftTextColor);
        leftBtn.setBackground(leftBackground);
        if (!leftTextVisiable) {
            leftBtn.setVisibility(View.GONE);
        }
         
        rightBtn.setText(rightText);
        rightBtn.setTextColor(rightTextColor);
        rightBtn.setBackground(rightBackground);
        if (!rightTextVisiable) {
            rightBtn.setVisibility(View.GONE);
        }

        setBackgroundColor(topbarBackground);

        //6、设置控件宽度和位置,并添加到view中
        titleParas = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT);
        titleParas.addRule(RelativeLayout.CENTER_IN_PARENT);
        addView(tvTitle, titleParas);

        leftParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        leftParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT, TRUE);
        addView(leftBtn, leftParams);

        rightParas = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        rightParas.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, TRUE);
        addView(rightBtn, rightParas);


        //7、自定义监听
        leftBtn.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                listener.leftClick();
            }
        });
        rightBtn.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                listener.rightClick();
            }
        });
    }


    /**
     *  选择控件可见
     */
//    public void setTvTitleisVisable(boolean flag) {
//        if (flag) {
//            tvTitle.setVisibility(View.VISIBLE);
//        } else {
//            tvTitle.setVisibility(View.GONE);
//        }
//    }
//
//    public void setLeftBtnisVisable(boolean flag) {
//        if (flag) {
//            leftBtn.setVisibility(View.VISIBLE);
//        } else {
//            leftBtn.setVisibility(View.GONE);
//        }
//    }
//
//    public void setRightBtnisVisable(boolean flag) {
//        if (flag) {
//            rightBtn.setVisibility(View.VISIBLE);
//        } else {
//            rightBtn.setVisibility(View.GONE);
//        }
//    }
}

3、主布局中添加自定义View, 并添加以下代码，否则无法引入自定义属性。自由设置自定义View

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:custom="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingTop="10dp"
    android:paddingRight="5dp"
    android:paddingLeft="5dp"
    android:orientation="vertical"
    tools:context="com.example.leixiansheng.topbar.MainActivity">

    <com.example.leixiansheng.topbar.TopBar
        android:id="@+id/topbar1"
        android:layout_width="match_parent"
        android:layout_height="40dp"

        custom:title="自定义标题"
        custom:titleSize="15dp"
        custom:titleColor="#ffffffff"

        custom:leftBackground="@color/colorPrimary"
        custom:leftText="返回"
        custom:leftTextColor="#ffffffff"

        custom:rightBackground="@color/colorPrimary"
        custom:rightText="菜单"
        custom:rightTextColor="#ffffffff">
    </com.example.leixiansheng.topbar.TopBar>

    <com.example.leixiansheng.topbar.TopBar
        android:id="@+id/topbar2"
        android:layout_marginTop="15dp"
        android:layout_width="match_parent"
        android:layout_height="40dp"

        custom:topbarBackground="#000000"

        custom:title="联系人"
        custom:titleSize="10dp"
        custom:titleColor="#ffffffff"

        custom:leftBackground="#000000"
        custom:leftText="返回"
        custom:leftTextColor="#ffffffff"

        custom:rightBackground="#000000"
        custom:rightText="联系人"
        custom:rightTextColor="#ffffffff">
    </com.example.leixiansheng.topbar.TopBar>

    <com.example.leixiansheng.topbar.TopBar
        android:id="@+id/topbar3"
        android:layout_marginTop="15dp"
        android:layout_width="match_parent"
        android:layout_height="40dp"

        custom:topbarBackground="#000000"

        custom:title="动态"
        custom:titleSize="10dp"
        custom:titleColor="#ffffffff"

        custom:leftBackground="@mipmap/ic_launcher"

        custom:leftTextColor="#ffffffff"

        custom:rightBackground="#000000"
        custom:rightText="更多"
        custom:rightTextColor="#ffffffff">
    </com.example.leixiansheng.topbar.TopBar>

    <com.example.leixiansheng.topbar.TopBar
        android:id="@+id/topbar4"
        android:layout_marginTop="15dp"
        android:layout_width="match_parent"
        android:layout_height="40dp"

        custom:topbarBackground="@color/colorAccent"

        custom:title="自由发挥"
        custom:titleSize="10dp"
        custom:titleColor="#ffffffff"

        custom:leftText="自由发挥"
        custom:leftTextColor="#ffffffff"

        custom:rightText="自由发挥"
        custom:rightTextColor="#ffffffff">
    </com.example.leixiansheng.topbar.TopBar>

</LinearLayout>

4、主程序添加找到自定义控件，实现监听

package com.example.leixiansheng.topbar;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity implements TopBar.topbarClickListener{

    private TopBar topBar1,topBar2,topBar3,topBar4;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        topBar1 = (TopBar) findViewById(R.id.topbar1);
        topBar2 = (TopBar) findViewById(R.id.topbar2);
        topBar3 = (TopBar) findViewById(R.id.topbar3);
        topBar4 = (TopBar) findViewById(R.id.topbar4);

        topBar1.setOnTopBarClickListener(this);
        topBar2.setOnTopBarClickListener(this);
        topBar3.setOnTopBarClickListener(this);
        topBar4.setOnTopBarClickListener(this);

        topBar1.setOnTopBarClickListener(new TopBar.topbarClickListener() {
            @Override
            public void leftClick() {
                Toast.makeText(MainActivity.this, "默认", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void rightClick() {
                Toast.makeText(MainActivity.this, "默认", Toast.LENGTH_SHORT).show();
            }
        });

        topBar4.setOnTopBarClickListener(new TopBar.topbarClickListener() {
            @Override
            public void leftClick() {
                Toast.makeText(MainActivity.this, "自由发挥", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void rightClick() {
                Toast.makeText(MainActivity.this, "自由发挥", Toast.LENGTH_SHORT).show();
            }
        });
    }

    //另一种监听，可根据需求自行选择
    @Override
    public void leftClick() {
        Toast.makeText(MainActivity.this, "返回", Toast.LENGTH_SHORT).show();
    }

    @Override
    public void rightClick() {
        Toast.makeText(MainActivity.this, "菜单", Toast.LENGTH_SHORT).show();
    }
}