现在的位置: 首页 > 移动开发 > 正文

Android 自定义组合控件

2018年09月24日 移动开发 ⁄ 共 5158字 ⁄ 字号 评论关闭

先上效果图

实现思路:

1、自定义属性

2、映射xml属性;

3、定义控件赋值属性;

4、页面布局ViewGroup;

5、xml中调用该控件;

1自定义属性atts.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="Topbar">
        <attr name="myTitle" format="string" />
        <attr name="myTitleTextSize" format="dimension" />
        <attr name="myTitleTextColor" format="color" />
        <attr name="leftTextColor" format="color" />
        <attr name="leftBackGround" format="reference|color" />
        <attr name="leftText" format="string" />
        <attr name="rightTextColor" format="color" />
        <attr name="rightBackGround" format="reference|color" />
        <attr name="rightText" format="string" />
    </declare-styleable>

</resources>

2、映射xml属性;

3、定义控件赋值属性;

4、页面布局ViewGroup;

package com.example.customview;

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;

public class Topbar extends RelativeLayout {

	private Button leftButton, rightButton;
	private TextView titleTextView;

	private int leftTextColor, rightTextColor;
	private Drawable leftBackground, rightBackground;
	private String leftText, rightText;

	private float titleTextSize;
	private int titleTextColor;
	private String titleText;

	private LayoutParams leftParams, rigthParams, titleParams;

	private topbarOnClickLister lister;

	public interface topbarOnClickLister {
		public void leftClick();

		public void rightClick();
	}

	/**
	 * 接口回调
	 * @param lister
	 */
	public void setTopbarOnClickLister(topbarOnClickLister lister) {
		this.lister = lister;
	}

	public Topbar(Context context, AttributeSet attrs) {
		super(context, attrs);
		leftButton = new Button(context);
		rightButton = new Button(context);
		titleTextView = new TextView(context);
		//映射xml属性
		TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.Topbar);
		getAttrbutes(ta);
		setAttrbutes();
		setLayout();
	}

	/**
	 * 获取xml属性
	 * @param ta
	 */
	private void getAttrbutes(TypedArray ta) {
		leftTextColor = ta.getColor(R.styleable.Topbar_leftTextColor, 0);
		leftBackground = ta.getDrawable(R.styleable.Topbar_leftBackGround);
		leftText = ta.getString(R.styleable.Topbar_leftText);

		rightTextColor = ta.getColor(R.styleable.Topbar_rightTextColor, 0);
		rightBackground = ta.getDrawable(R.styleable.Topbar_rightBackGround);
		rightText = ta.getString(R.styleable.Topbar_rightText);

		titleText = ta.getString(R.styleable.Topbar_myTitle);
		titleTextColor = ta.getColor(R.styleable.Topbar_myTitleTextColor, 0);
		titleTextSize = ta.getDimension(R.styleable.Topbar_myTitleTextSize, 0);

		ta.recycle();
	}

	/**
	 * 设置控件属性
	 */
	private void setAttrbutes() {
		leftButton.setTextColor(leftTextColor);
		leftButton.setBackground(leftBackground);
		leftButton.setText(leftText);

		rightButton.setTextColor(rightTextColor);
		rightButton.setBackground(rightBackground);
		rightButton.setText(rightText);

		titleTextView.setTextSize(titleTextSize);
		titleTextView.setTextColor(titleTextColor);
		titleTextView.setText(titleText);
		titleTextView.setGravity(Gravity.CENTER);

		setBackgroundColor(0xFFB6C1);
	}

	/**
	 * 页面布局
	 */
	private void setLayout() {
		leftParams = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
		leftParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT, RelativeLayout.TRUE);
		addView(leftButton, leftParams);

		rigthParams = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
		rigthParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, RelativeLayout.TRUE);
		addView(rightButton, rigthParams);

		titleParams = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
		titleParams.addRule(RelativeLayout.CENTER_IN_PARENT, RelativeLayout.TRUE);
		addView(titleTextView, titleParams);

		leftButton.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {
				lister.leftClick();
			}
		});

		rightButton.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {
				lister.rightClick();
			}
		});
	}

}

5、xml中调用该控件;

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:topbar="http://schemas.android.com/apk/res/com.example.customview"  //注意这个位置要引用控件能设置控件属性
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="${packageName}.${activityClass}" >

    <com.example.customview.Topbar
        android:id="@+id/topbar"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        topbar:leftText="返回"
        topbar:leftTextColor="#EE2C2C"
        topbar:leftBackGround="#D1EEEE"
        topbar:myTitle="自定义标题"
        topbar:myTitleTextColor="#121212"
        topbar:myTitleTextSize="15sp"
        
        topbar:rightText="更多"
        topbar:rightTextColor="#EE2C2C"
        topbar:rightBackGround="#545454" >
    </com.example.customview.Topbar>

</RelativeLayout>

package com.example.customview;

import com.example.customview.Topbar.topbarOnClickLister;

import android.app.Activity;
import android.app.AlertDialog;
import android.os.Bundle;
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);

		topbar.setTopbarOnClickLister(new topbarOnClickLister() {

			@Override
			public void rightClick() {
				AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
				builder.setTitle("消息").setMessage("触发了右边按钮事件。").show();
			}

			@Override
			public void leftClick() {
				Toast.makeText(MainActivity.this, "左边事件", Toast.LENGTH_SHORT).show();
			}
		});
	}
}

抱歉!评论已关闭.