Android 创建自定义View 实现TopBar

在Android 应用开发中常常使用到自定义，我想自定义一个TopBar（左右两边分别是一个Button 中间是一个TextView ）定义方法

1.首先增加自定义属性，创建一个 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="titleColor" format="color" />
        <attr name="leftText" format="string" />
        <attr name="leftTextColor" format="color" />
        <attr name="leftBackground" format="reference|color"/>
        <attr name="RightText" format="string" />
        <attr name="RightTextColor" format="color" />
        <attr name="RightBackground" format="reference|color"/>  
    </declare-styleable>
    
</resources>

2.实现一个自定义View 对象TopBar.java 继承ReleativeLayout

package com.test.customview;

import android.annotation.SuppressLint;
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.widget.Button;
import android.widget.RelativeLayout;
import android.widget.TextView;

@SuppressLint("NewApi")
public class TopBar extends RelativeLayout{
	
	/**
	 * 创建的自定义属性
	 */
	private TextView mTitleText;
	private Button mLeftBtn;
	private Button mRightBtn;
	
	private String mTitle;
	private int  mTitleColor;
	private float  mTitleTextSize;
	
	private String mLeftText;
	private Drawable mleftBackgound;
	private int mLeftTextColor;
	
	private String mRightText;
	private Drawable mRightBackgound;
	private int mRightTextColor;
	
	private LayoutParams mLeftParams,mRightParams,mTitleParams;
	private OnclickListener listener;
	
	/**
	 * 定义一个点击事件的回调接口
	 * @author acer
	 *
	 */
	public interface OnclickListener{
		public void leftListener();
		public void rightListener();
	}
	
	/**
	 * 设置点击事件接口回调
	 * @param listener
	 */
	public void setOnclickListener(OnclickListener listener){
		this.listener = listener;
	}

	public TopBar(Context context, AttributeSet attrs) {
		super(context, attrs);
		TypedArray ta = context.obtainStyledAttributes(attrs,R.styleable.Topbar);
		
		//获取在attrs.xml中自定义的属性值
		mTitle = ta.getString(R.styleable.Topbar_title);
		mTitleColor = ta.getColor(R.styleable.Topbar_titleColor, 0);
		mTitleTextSize = ta.getDimension(R.styleable.Topbar_titleTextSize, 0);
		
		mLeftText = ta.getString(R.styleable.Topbar_leftText);
		mLeftTextColor = ta.getColor(R.styleable.Topbar_leftTextColor, 0);
		mleftBackgound = ta.getDrawable(R.styleable.Topbar_leftBackground);
		
		mRightBackgound = ta.getDrawable(R.styleable.Topbar_RightBackground);
		mRightText = ta.getString(R.styleable.Topbar_RightText);
		mRightTextColor = ta.getInt(R.styleable.Topbar_RightTextColor, 0);
		
		ta.recycle();
		
		mTitleText = new TextView(context);
		mLeftBtn = new Button(context);
		mRightBtn = new Button(context);
		
		mTitleText.setText(mTitle);
		mTitleText.setBackgroundColor(mTitleColor);
		mTitleText.setTextSize(mTitleTextSize);
		mTitleText.setGravity(Gravity.CENTER);
		
		mLeftBtn.setBackground(mleftBackgound);
		mLeftBtn.setText(mLeftText);
		mLeftBtn.setTextColor(mLeftTextColor);
		
		mRightBtn.setBackground(mRightBackgound);
		mRightBtn.setText(mRightText);
		mRightBtn.setTextColor(mRightTextColor);
		
		setBackgroundColor(0xFF58543);
		
		//设置控件的参数值
		mLeftParams = new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);
		mLeftParams.addRule(ALIGN_PARENT_LEFT,TRUE);
		mRightParams = new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);
		mRightParams.addRule(ALIGN_PARENT_RIGHT,TRUE);
		mTitleParams = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.FILL_PARENT);
		mTitleParams.addRule(CENTER_IN_PARENT, TRUE);
		//将定义的 控件键加入到ReleativeLayout中
		addView(mLeftBtn, mLeftParams);
		addView(mRightBtn,mRightParams);
		addView(mTitleText,mTitleParams);
		
		mLeftBtn.setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				//回调onclick事件传给显示层处理不同的逻辑
				listener.leftListener();
			}
		});
		
		mRightBtn.setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				listener.rightListener();
			}
		});
	}


}

3.在xml文件中引入定义好的控件

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:custom="http://schemas.android.com/apk/res/com.test.customview"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.test.customview.TopBar
        android:id="@+id/topbar"
        android:layout_width="match_parent"
        android:layout_height="35dp"
        custom:title="标题"
        custom:titleTextSize="10sp"
        custom:titleColor="#FFFFFF"
        custom:leftText="back"
        custom:leftTextColor="#FFFFFF"
        custom:leftBackground="@drawable/ic_launcher"
        custom:RightText="more"
        custom:RightTextColor="#FFFFFF"
        custom:RightBackground="@drawable/ic_launcher"
        >
    </com.test.customview.TopBar>    

</RelativeLayout>

4.在Activity 中加入该布局文件，并处理相关点击事件

package com.test.customview;

import com.test.customview.TopBar.OnclickListener;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;

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);
		//这里处理Button的点击事件
		topBar.setOnclickListener(new OnclickListener() {
			
			@Override
			public void rightListener() {
				Toast.makeText(MainActivity.this, "click left button", Toast.LENGTH_LONG).show();
			}
			
			@Override
			public void leftListener() {
				Toast.makeText(MainActivity.this, "click right button", Toast.LENGTH_LONG).show();

			}
		});
	}


}

自此一个TopBar 的自定义控件完成，在不同的Activity布局中直接使用即可。

Android 创建自定义View 实现TopBar

猜你喜欢