Android学习之自定义view——TopBar

来源：互联网发布：ubuntu trusty xenial 编辑：程序博客网时间：2024/05/16 19:06

每个软件都有属于自的TopBar，比如QQ，微信。。。。。
今天我们就来简单讲解一下自定义的TopBar的做法。
首先先来一张效果图：
这里写图片描述
一般的TopBar都有三个属性，一个左Button、右Button，还有就是中间的标题。
然后每个文字都会有各自的属性，字体大小，字体颜色，背景等等。。。
所以这次，我们先把最基础的属性将他配置上
先在value文件下新建attrs.xml文件

<declare-styleable name="TopBar">        <!-- 标题属性 -->        <attr name="titleText" format="string"/>        <attr name="titleTextSize" format="dimension"/>        <attr name="titleTextColor" format="color"/>        <attr name="titleBackground" format="reference|color"/>        <!-- 左按钮属性 -->        <attr name="leftText" format="string"/>        <attr name="leftBackground" format="reference|color"/>        <attr name="leftTextCloor" format="color"/>        <!-- 右按钮属性 -->        <attr name="rightText" format="string"/>        <attr name="rightBackground" format="reference|color"/>        <attr name="rightTextColor" format="color"/>    </declare-styleable>

format是值该属性的取值类型,一共有：
string,color,demension,integer,enum,reference,float,boolean,fraction,flag;
基础的属性弄好之后，想想一般的button还是需要点击事件的处理，所以下面的代码已经做了处理，对外暴露出左右按钮的点击事件：

package com.jp.view;import android.content.Context;import android.content.res.TypedArray;import android.graphics.Color;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.jp.activity.R;/** * Created by Administrator on 2015/9/3. */public class TopBar extends RelativeLayout{    /**     * torbar的左右两个按钮     */    private Button leftButton;    private Button rightButton;    /**     * torbar的标题     */    private TextView title;    /**     * torbar的左按钮的字体颜色     */    private int leftTextColor;    /**     * torbar的左按钮的背景     */    private Drawable leftDrawable;    /**     * torbar的左按钮的标题     */    private String leftText;    /**     * torbar的右按钮的字体颜色     */    private int rightTextColor;    /**     * torbar的右按钮的背景     */    private Drawable rightDrawable;    /**     * torbar的右按钮的标题     */    private String rightText;    /**     * torbar的标题字体大小     */    private float titleTextSize;    /**     * torbar的标题字体贪色     */    private int titleTextColor;    /**     * torbar的标题     */    private String titleText;    private Drawable titleBrackgroud;    private RelativeLayout.LayoutParams leftParams, rightParams, titleParams;    private TopBarClickListener listener;    //点击事件监听器接口    public interface TopBarClickListener    {        public void leftclick();        public void rightclick();    }    public TopBar(Context context, AttributeSet attrs)    {        super(context, attrs);        //获取自定义属性和值的映射集合        TypedArray td = context.obtainStyledAttributes(attrs, R.styleable.TopBar);        //取出自定义属性 - 左侧        leftTextColor = td.getColor(R.styleable.TopBar_leftTextCloor, Color.WHITE);        leftDrawable = td.getDrawable(R.styleable.TopBar_leftBackground);        leftText = td.getString(R.styleable.TopBar_leftText);        //取出自定义属性 - 右侧        rightTextColor = td.getColor(R.styleable.TopBar_rightTextColor, Color.BLACK);        rightDrawable = td.getDrawable(R.styleable.TopBar_rightBackground);        rightText = td.getString(R.styleable.TopBar_rightText);        //取出自定义属性 - 标题        titleTextSize = td.getDimension(R.styleable.TopBar_titleTextSize, 12);        titleText = td.getString(R.styleable.TopBar_titleText);        titleTextColor = td.getColor(R.styleable.TopBar_titleTextColor, Color.BLACK);        titleBrackgroud = td.getDrawable(R.styleable.TopBar_titleBackground);        //回收TypedArray（避免浪费资源，避免因为缓存导致的错误）        td.recycle();        leftButton = new Button(context);        rightButton = new Button(context);        title = new Button(context);        //设置属性 - 左侧        leftButton.setText(leftText);        leftButton.setTextColor(leftTextColor);        leftButton.setBackground(leftDrawable);//设置属性 - 右侧        rightButton.setText(rightText);        rightButton.setTextColor(rightTextColor);        rightButton.setBackground(rightDrawable);//设置属性 - 标题        title.setText(titleText);        title.setTextColor(titleTextColor);        title.setTextSize(titleTextSize);        title.setBackground(titleBrackgroud);        title.setGravity(Gravity.CENTER);//设置整体背景颜色        setBackgroundColor(0xffeb933e);//设置布局 - 左        leftParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);        leftParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT, TRUE);        leftParams.addRule(RelativeLayout.CENTER_VERTICAL, TRUE);        addView(leftButton, leftParams);        //设置布局 - 右        rightParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);        rightParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, TRUE);        rightParams.addRule(RelativeLayout.CENTER_VERTICAL, TRUE);        addView(rightButton, rightParams);        //设置布局 - 标题        titleParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT);        titleParams.addRule(RelativeLayout.CENTER_IN_PARENT, TRUE);        addView(title, titleParams);//设置监听器        leftButton.setOnClickListener(new OnClickListener()        {            @Override            public void onClick(View v)            {                listener.leftclick();            }        });        rightButton.setOnClickListener(new OnClickListener()        {            @Override            public void onClick(View v)            {                listener.rightclick();            }        });    }    //是否显示左右按钮    public void setLeftIsVisible(boolean visible)    {        if (visible) {            leftButton.setVisibility(View.VISIBLE);        } else {            leftButton.setVisibility(View.GONE);        }    }    public void setRightIsVisible(boolean visible)    {        if (visible) {            rightButton.setVisibility(View.VISIBLE);        } else {            rightButton.setVisibility(View.GONE);        }    }}

接下来看布局文件，这里有一点是要提一下
android studio一定要引入
xmlns:custom=”http://schemas.android.com/apk/res-auto”
而ecplice一定要引入
xmlns:custom=”http://schemas.android.com/apk/res/com.example.customview01”我们的命名空间，后面的包路径指的是项目的package

<RelativeLayout             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:layout_width="match_parent"android:layout_height="match_parent"android:background="#ffffff"tools:context=".MainActivity">    <com.jp.view.TopBar        android:background="#eb933e"        android:id="@+id/topbar_title"        android:layout_width="match_parent"        android:layout_height="40dp"        custom:leftText="左菜单"        custom:leftBackground="#eb933e"        custom:rightBackground="#00eb933e"        custom:leftTextCloor="#ffffff"        custom:rightText="右菜单"        custom:rightTextColor="#ffffff"        custom:titleText="我是自定义的"        custom:titleTextColor="#000000"        custom:titleTextSize="10sp"        />        </RelativeLayout>

最后在MainActivity中使用的方法：

public class MainActivity extends Activity {    @Override    protected void onCreate(Bundle savedInstanceState){        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        TopBar topBar = (TopBar) findViewById(R.id.topbar);/*      topBar.setLeftIsVisible(false);        topBar.setRightIsVisible(false);*/        topBar.setOnTopBarClickListener(new TopBarClickListener() {            @Override            public void rightclick(){                Toast.makeText(MainActivity.this, "Right Clicked", Toast.LENGTH_SHORT).show();            }            @Override            public void leftclick(){                Toast.makeText(MainActivity.this, "Left Clicked", Toast.LENGTH_SHORT).show();            }        });    }}

0 0