[android进阶]自定义View之TopBar

大家可能都用过QQ、微博，所谓的TopBar就是如图中的：

这里以上面的UI为例，记述一下怎么自定义View：

• 步骤一：新建一个attrs文件，定义视图属性
• 步骤二：继承一个View，或ViewGroup的子类，并可使用这些自定义的属性
• 步骤三：在资源文件或java代码中使用自己的View

自定义属性

在values文件夹下新建一个资源文件attrs.xml，整个项目的目录结构如下图所示：

由于整个Topbar由左右两个Button和中间一个TextView构成,所以设置的属性如下：

    <declare-styleable name="TopBar" >        <!-- TextView的属性-->        <attr name="titleText" format="string"/>        <attr name="titleTextSize" format="dimension"/>        <attr name="titleTextColor" format="color"/>        <!-- LeftButton的属性-->        <attr name="leftText" format="string" />        <attr name="leftColor" format="color" />        <attr name="leftBackground" format="reference|color" />        <!-- RightButton的属性-->        <attr name="rightText" format="string" />        <attr name="rightColor" format="color" />        <attr name="rightBackground" format="reference|color" />    </declare-styleable>

自定义View

自定义一个View，继承一个View，或ViewGroup的子类，并可使用这些自定义的属性。我这里的TopBar继承的是RelativeLayout，下面直接贴出TopBar的代码，在代码里讲述实现的过程：

public class TopBar extends RelativeLayout{    //定义TopBar的组成控件    private Button leftButton,rightButton;    private TextView tvTitle;    //定义要获取的自定义属性    private String titleText,leftText,rightText;    private int leftTextColor,rightTextColor,titleTextColor;    private Drawable leftTextBackground,rightTextBackground;    private float titleTextSize;    //定义组成控件的布局    private RelativeLayout.LayoutParams leftParams,rightParams,titleParams;    private OnClickTopBarListener listener;    //接口回调，真正做到模版UI    public interface OnClickTopBarListener{        public void onLeftClickListener();        public  void onRightClickListener();    }    //设置TopBar的左右Button点击事件    public void SetOnClickTopBarListener(OnClickTopBarListener listener){        this.listener=listener;    }    //由于自定义了属性值，所以选用带有AttributeSet参数的这个构造函数    public TopBar(Context context, AttributeSet attrs) {        super(context, attrs);        //.获取自定义属性的值/键值对        TypedArray ta=context.obtainStyledAttributes(attrs,R.styleable.TopBar);        //获取TypedArray里面的单个值，提取自定义属性        titleText=ta.getString(R.styleable.TopBar_titleText);        leftText =ta.getString(R.styleable.TopBar_leftText);        rightText=ta.getString(R.styleable.TopBar_rightText);        leftTextColor=ta.getColor(R.styleable.TopBar_leftColor,0);        rightTextColor=ta.getColor(R.styleable.TopBar_rightColor,0);        titleTextColor=ta.getColor(R.styleable.TopBar_titleTextColor,0);        leftTextBackground=ta.getDrawable(R.styleable.TopBar_leftBackground);        rightTextBackground=ta.getDrawable(R.styleable.TopBar_rightBackground);        titleTextSize=ta.getDimension(R.styleable.TopBar_titleTextSize,0);        //调用recycle()方法，对其进行回收        ta.recycle();        //设置Topbar的控件        leftButton=new Button(context);        rightButton=new Button(context);        tvTitle=new TextView(context);        //为控件绑定自定义的属性        leftButton.setText(leftText);        leftButton.setTextColor(leftTextColor);        leftButton.setBackground(leftTextBackground);        rightButton.setText(rightText);        rightButton.setTextColor(rightTextColor);        rightButton.setBackground(rightTextBackground);        tvTitle.setText(titleText);        tvTitle.setTextSize(titleTextSize);        tvTitle.setTextColor(titleTextColor);        tvTitle.setGravity(Gravity.CENTER);        //设置TopBar的背景色        setBackgroundColor(0xFFF59536);        //将leftButton添加到布局里，并设置宽高        leftParams=new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,ViewGroup.LayoutParams.WRAP_CONTENT);        leftParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT,TRUE);        addView(leftButton,leftParams);        //将rightButton添加到布局里，并设置宽高        rightParams=new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,ViewGroup.LayoutParams.WRAP_CONTENT);        rightParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT,TRUE);        addView(rightButton,rightParams);        //将tvTitle添加到布局里，并设置宽高        titleParams=new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);        titleParams.addRule(RelativeLayout.CENTER_IN_PARENT,TRUE);        addView(tvTitle,titleParams);        //通过接口回调机制设置左右Button的点击事件，使自定义View成为一个更好的模版UI，方便使用        leftButton.setOnClickListener(new OnClickListener() {            @Override            public void onClick(View v) {                listener.onLeftClickListener();            }        });        rightButton.setOnClickListener(new OnClickListener() {            @Override            public void onClick(View v) {                listener.onRightClickListener();            }        });    }}

使用自定义的View

• 在布局文件中使用：
  androidstudio里在布局中使用第三方控件时，修改命名空间：
  xmlns:custom="http://schemas.android.com/apk/res-auto"
  其中custom可以自定义。
  布局文件activity_main.xml的代码如下：

<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:paddingLeft="@dimen/activity_horizontal_margin"    android:paddingRight="@dimen/activity_horizontal_margin"    android:paddingTop="@dimen/activity_vertical_margin"    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">    <com.example.young.myapplication.TopBar        android:layout_height="40dp"        android:layout_width="match_parent"        android:id="@+id/topBar"        custom:titleText="自定义标题"        custom:titleTextColor="#123412"        custom:titleTextSize="10sp"        custom:leftText="back"        custom:leftColor="#FFFFFF"        custom:rightText="more"        custom:rightColor="#FFFFFF">    </com.example.young.myapplication.TopBar></RelativeLayout>

• 在代码中使用自定义View
  MainActivity.java的代码如下：

 public class MainActivity extends ActionBarActivity {    private TopBar myTopBar;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        myTopBar=(TopBar)this.findViewById(R.id.topBar);        myTopBar.SetOnClickTopBarListener(new TopBar.OnClickTopBarListener() {            @Override            public void onLeftClickListener() {                Toast.makeText(getApplicationContext(),"这是back",Toast.LENGTH_SHORT).show();            }            @Override            public void onRightClickListener() {                Toast.makeText(getApplicationContext(),"这是more",Toast.LENGTH_SHORT).show();            }        });    }}

效果图

下面看一下效果图：

源码下载