Android——自定义TopBar（ActionBar）

来源：互联网发布：淘宝漫画图编辑：程序博客网时间：2024/05/29 17:15

很多时候，我们不止一个Activity用到同样的布局，例如QQ的软件，上面的topbar

这里写图片描述

动态，更多，联系人，添加，还有头像的图片。这个没必要每次都要做布局中再写一

遍，可以把这些做成一个控件，也就是自定义View。

我们来看一下接下来要做的效果：

这里写图片描述

点击后Button的效果：

这里写图片描述

点击事件触发的事件：

这里写图片描述

这些都是可以自己控制的。废话不多说，直接上手。

需要这么几步：

1、先要做values下面创建属性的xml。

这里写图片描述

这里命名成attrs了，看自己。

然后将需要用到的属性都添加到里面。

<?xml version="1.0" encoding="utf-8"?><resources>    <declare-styleable name="TopBar">        <attr name="titleText" format="string" />        <attr name="titleTextColor" format="color" />        <attr name="titleTextSize" format="dimension" />        <attr name="leftText" format="string" />        <attr name="leftTextColor" format="color"/>        <attr name="leftTextbackgroung" format="color|reference"/>        <attr name="leftTextSize" format="dimension"/>        <attr name="rightText" format="string" />        <attr name="rightTextColor" format="color"/>        <attr name="rightTextbackgroung" format="color|reference"/>        <attr name="rightTextSize" format="dimension"/>    </declare-styleable></resources>

很可能没有declare-styleable，里面代码不能自动补全，需要自己手动敲出来，

Android会自动识别。declare-styleable 后面的name是该控件的名字。

attr是里面的属性，起一个name，format是类型。这里background可

以是color，也可以是其他引用（例如图片背景），所有是color或者reference。

2、创建TobBar类，继承RelativeLayout（这里RelativeLayout又方便操作点，可以

自己定。）选择里面带两个参数的构造方法。

！！注意：要创建的类名必须要和declare-styleable中的name相同，否则将无法获得

里面自定义的属性。

package com.example.topbartest;import android.content.Context;import android.content.res.TypedArray;import android.graphics.drawable.Drawable;import android.util.AttributeSet;import android.view.View;import android.widget.Button;import android.widget.RelativeLayout;import android.widget.TextView;public class TopBar extends RelativeLayout {    //获得里面的控件    private Button left,right;    private TextView title;    //给每个控件定义要用的属性    //leftbutton    private String leftText;    private int leftTextColor;    private float leftTextSize;    private Drawable leftBackground;    //rightbutton    private String rightText;    private int rightTextColor;    private float rightTextSize;    private Drawable rightBackground;    //titleTextView    private String titleText;    private int titleColor;    private float titleTextSize;    //LayoutParams用来对控件进行操作，位置等。    private LayoutParams leftparams,rightparams,titleparams;    //类似Button的监听事件 自己定义接口，在setOnTopBarListener（自己定义的）方法中调用接口，new出listener之后需要重写leftonclick和rightonclick。    private TopBarListener listener;    public interface TopBarListener{        void leftOnClick();        void rightOnClick();    }    public void setOnTopBarListener(TopBarListener listener)    {        this.listener=listener;    }    public TopBar(Context context, AttributeSet attrs) {        super(context, attrs);        // TODO Auto-generated constructor stub        //通过TypedArray获得自己xml定义的属性并赋值给上面定义的属性。        TypedArray ta=context.obtainStyledAttributes(attrs, R.styleable.TopBar);        titleText=ta.getString(R.styleable.TopBar_titleText);    // 0是默认    titleColor=ta.getColor(R.styleable.TopBar_titleTextColor, 0);        titleTextSize=ta.getDimension(R.styleable.TopBar_titleTextSize, 0   );        leftText=ta.getString(R.styleable.TopBar_leftText);        leftTextColor=ta.getColor(R.styleable.TopBar_leftTextColor, 0);        leftBackground=ta.getDrawable(R.styleable.TopBar_leftTextbackgroung);        leftTextSize=ta.getDimension(R.styleable.TopBar_leftTextSize, 0);        rightText=ta.getString(R.styleable.TopBar_rightText);        rightTextColor=ta.getColor(R.styleable.TopBar_rightTextColor, 0);        rightBackground=ta.getDrawable(R.styleable.TopBar_rightTextbackgroung);        rightTextSize=ta.getDimension(R.styleable.TopBar_rightTextSize, 0);        //不要忘记给TypedArray回收一下。        ta.recycle();        //创建出3个控件        left=new Button(context);        right=new Button(context);        title=new TextView(context);        //给控件赋予属性        left.setText(leftText);        left.setTextColor(leftTextColor);        left.setTextSize(leftTextSize);        left.setBackground(leftBackground);        right.setText(rightText);        right.setTextColor(rightTextColor);        right.setTextSize(rightTextSize);        right.setBackground(rightBackground);        title.setText(titleText);        title.setTextColor(titleColor);        title.setTextSize(titleTextSize);        //好比xml的width和height的属性        leftparams=new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);    //添加位置属性            leftparams.addRule(RelativeLayout.ALIGN_PARENT_LEFT, TRUE);        //将空间和添加的规则绑定        addView(left,leftparams);        rightparams=new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);        rightparams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, TRUE);        addView(right,rightparams);        titleparams=new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);        titleparams.addRule(RelativeLayout.CENTER_IN_PARENT, TRUE);        addView(title,titleparams);        left.setOnClickListener(new OnClickListener() {            @Override            public void onClick(View v) {                // TODO Auto-generated method stub                listener.leftOnClick();            }        });        right.setOnClickListener(new OnClickListener() {            @Override            public void onClick(View v) {                // TODO Auto-generated method stub                listener.rightOnClick();            }        });    }    //设置左右控件的隐藏    public void setLeftVisibility(boolean is)    {        if(is)        {        left.setVisibility(View.VISIBLE);        }else{            left.setVisibility(View.INVISIBLE);        }    }    public void setrightVisibility(boolean is)    {        if(is)        {        right.setVisibility(View.VISIBLE);        }else{            right.setVisibility(View.INVISIBLE);        }    }}

TopBar创建好了，然后看看怎么使用。

MainActivity的xml布局中：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    xmlns:app="http://schemas.android.com/apk/res/com.example.topbartest"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.example.topbartest.MainActivity" >   <com.example.topbartest.TopBar        android:id="@+id/topbar"       android:layout_width="match_parent"       android:layout_height="wrap_content"        app:titleTextSize="15sp"        app:titleText="中心标题"        app:titleTextColor="#ff0"        app:leftText="返回"        app:leftTextSize="10sp"        app:leftTextColor="#000"        app:leftTextbackgroung="@drawable/button_select"        app:rightText="更多"        app:rightTextSize="10sp"        app:rightTextColor="#000"        app:rightTextbackgroung="@drawable/button_select"        android:background="#00f"       ></com.example.topbartest.TopBar></RelativeLayout>

既然是自定义属性，android：是系统的属性， app是自己定义的，必须要加上xmlns:app=”http://schemas.android.com/apk/res/com.example.topbartest”

，或者说有些是xmlns:app=”http://schemas.android.com/apk/res-auto”

接下来效果就达到了。

0 0