Android自定义View(三)

墨蓝 2022-09-22 11:57 161阅读 0赞

本文讲的是自定义View的第二种方式-----创建复合控件

创建复合（组合）可以很好的创建出具有重用功能的控件集合。这种方式通常需要继承一个ViewGroup,再给它添加指定功能的控件，从而组合成新的复合控件。通过这种方式创建的控件，我们一般会给它指定一些可配置的属性，让它具有更强的扩展性。本文参考《Android群英传》中的例子，算是笔记吧。通过这个例子，熟悉了自定义属性的配置以及接口回调的方式。

有时程序为了风格的统一，很多应用程序都有一些共同的UI界面，比如常见的标题TopBar，一般左上角为返回按钮，中间为文字说明，右上角为其他功能（或没有）。

通常情况下，这些界面都会被抽象出来，形成一个共通的UI组件。所有需要添加标题的界面都会引用这样的一个TopBar,而不是每个界面都在布局文件中写这样一个TopBar.同时设计者还可以给TopBar增加相应的接口，让调用者能够更加灵活地控制TopBar,这样可以提高界面的复用率，更能在需要修改UI时，做到快速修改，而不用对每个页面的标题去进行修改。

1.设置自定义的属性

为一个View提供可自定义的属性很简单，在res/values文件下，新建一个atts.xml文件，并在文件中通过代码来定义属性即可。

atts.xml

<?xml version="1.0" encoding="utf-8"?>
    <resources>
        <declare-styleable name="Topbar">
            <attr name="MyTitle" format="string"/>
            <attr name="titleTextSize" format="dimension"/>
            <attr name="titleTextColor" 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>

其中<declare-styleable>标签声明了使用自定义属性，并通过name属性来确定引用的名称。最后通过<attr>标签来声明具体的自定义的属性，比如在这里定义了标题文字的字体、大小、颜色，左边按钮和右边按钮的文字颜色、背景、字体等属性，通过format属性来指定属性的类型。这里需要注意的是，有些属性可以是颜色属性，也可以是引用属性。比如按钮的背景，可以把它指定为具体的颜色，也可以把它指定为图片，所以可以用“|”来分割不同的属性，“reference|color”，reference表示引用。

在确定好属性后，就可以创建一个自定义控件----TopBar，并让它继承自ViewGroup，从而组合一些需要的控件。这里为了简单，我们继承RelativeLayout。在构造方法中，通过如下所示的代码来获取在xml布局文件中自定义的那些属性，即与我们使用系统提供的那些属性一样。

TypedArray ta = context.obtainStyledAttributes(attrs,R.styleable.Topbar);

其中R.styleble.Topbar中的Topbar即为atts文件中声明的名字。系统提供了TypedArray这样的数据结构来获取自定义属性集，通过一系列的get方法，就可以获取这些自定义的属性值，代码如下所示：

在构造方法中去获取属性

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.view.ViewGroup;
    import android.widget.Button;
    import android.widget.RelativeLayout;
    import android.widget.TextView;
    import android.widget.Toast;
    
    public class TopBar extends RelativeLayout {
    
    	private int leftTextColor;
    	private Drawable leftBackground;
    	private String leftText;
    
    	private int rightTextColor;
    	private Drawable rightBackground;
    	private String rightText;
    
    	private float titleTextSize;
    	private int titleTextColor;
    	private String MyTitle;
    
    	
    	public TopBar(final Context context, AttributeSet attrs) {
    		super(context, attrs);
    
    		TypedArray ta = context.obtainStyledAttributes(attrs,
    				R.styleable.Topbar);
    		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);
    
    		titleTextSize = ta.getDimension(R.styleable.Topbar_titleTextSize, 0);
    		titleTextColor = ta.getColor(R.styleable.Topbar_titleTextColor, 0);
    		MyTitle = ta.getString(R.styleable.Topbar_MyTitle);
    
    		ta.recycle();}
    }

我们在两个参数的构造方法中去获取这些自定义的属性，接下来是初始化和组合这些控件。

2.组合控件 整个TopBar实际上由3个控件组成，左边点击的按钮leftButton,rightButton，中间的标题栏tvTitle。通过动态添加控件的方式，使用addView()方法将这3个控件假如到定义的TopBar模版中，并给它们设置我们前面获取到的具体的属性值。这些同样是写在先前的构造函数中。

leftButton = new Button(context);
    		rightButton = new Button(context);
    		tvTitle = new TextView(context);
    
    		leftButton.setTextColor(leftTextColor);
    		leftButton.setBackground(leftBackground);
    		leftButton.setText(leftText);
    
    		rightButton.setTextColor(rightTextColor);
    		rightButton.setBackground(rightBackground);
    		rightButton.setText(rightText);
    
    		tvTitle.setText(MyTitle);
    		tvTitle.setTextColor(titleTextColor);
    		tvTitle.setTextSize(titleTextSize);
    		tvTitle.setGravity(Gravity.CENTER);
    
    		setBackgroundColor(0xFFF59563);
    
    		leftParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
    				ViewGroup.LayoutParams.WRAP_CONTENT);
    		leftParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT, TRUE);
    		addView(leftButton, leftParams);
    
    		rightParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
    				ViewGroup.LayoutParams.WRAP_CONTENT);
    		rightParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, TRUE);
    		addView(rightButton, rightParams);
    
    		titleParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
    				ViewGroup.LayoutParams.MATCH_PARENT);
    		titleParams.addRule(RelativeLayout.CENTER_IN_PARENT, TRUE);
    		addView(tvTitle, titleParams);

既然是模版，怎么样给左右的按钮设置点击事件呢？因为每个调用者所处的环境不同，不可能直接在UI模版中添加具体的实现逻辑，这里就要用到的就是接口回调的思想了，将具体的实现逻辑交给调用者。关于接口回调，可以参考我以前写的文章： [java笔记----什么是接口回调，怎么用][java_----]  
（1）首先定义接口

//使用了接口的回调机制，这样具体的实现逻辑，交给调用者
    	public interface TopBarClickListener {
    		public void leftClick();
    
    		public void rightClick();
    	}

（2）暴露接口给调用者

在模版方法中，为左右按钮增加点击事件，但不去实现具体的逻辑，而是调用接口中响应的点击方法，相应代码如下：

leftButton.setOnClickListener(new OnClickListener() {
    
    			@Override
    			public void onClick(View v) {
    				
    				// Toast.makeText(context, "左边bt", 0).show();
    				topBarClickListener.leftClick();
    			}
    		});
    		rightButton.setOnClickListener(new OnClickListener() {
    
    			@Override
    			public void onClick(View v) {
    		
    				// Toast.makeText(context, "右边bt", 0).show();
    				topBarClickListener.rightClick();
    			}
    		});

暴露调用的接口方法

//暴露一个方法给其他地方调用
    	public void setTopBarClickListener(TopBarClickListener listener) {
    		this.topBarClickListener = listener;
    
    	}

（3）实现接口的回调

TopBar topBar = (TopBar) findViewById(R.id.topbar);
    		topBar.setTopBarClickListener(new TopBarClickListener() {
    
    			@Override
    			public void rightClick() {
    				// TODO 自动生成的方法存根
    				Toast.makeText(MainActivity.this, "获取更多", 0).show();
    			}
    
    			@Override
    			public void leftClick() {
    				// TODO 自动生成的方法存根
    
    				Toast.makeText(MainActivity.this, "点击取消", 0).show();
    			}
    		});
    		
    	}

当然，可以使用公共方法来动态地修改UI模版中的UI，这样就进一步的提高了模版的可扩展性。实现如下：

//当然可以设置更多控件的属性      这里是以方法的形式设置控件的属性
         public void setLeftButtonVisible(boolean b) {
    		if (b) {
    			leftButton.setVisibility(View.VISIBLE);
    		}else {
    			leftButton.setVisibility(View.GONE);
    		}
    	}

调用的时候

topBar.setLeftButtonVisible(false);通过方法可以设置更多自定义属性

3.引用UI模版  
在需要使用的地方引用UI模版，在引用前，需要指定引用第三方控件的名字空间。在布局文件中，要添加如下一行代码：

xmlns:custom="http://schemas.android.com/apk/res/com.example.myview"

如果你使用的是Android Studio的IDE,后面不用详细的写清楚包名，可以写成 ......apk/res/res-auto

上面的代码指定了引用的名字xmlns(xml name space)。这里指定了名字的空间为custom，这个名字你可以随便取，后面在引用控件的地方会用到这个名字。

通过如上代码，可以直接通过<include>标签来引用这个UI模版View。

整体效果如下：

![Center][]  
  
  
  
  
完整源码如下：

atts.xml文件上面有，就不贴了  
MainActivity.java

package com.example.myview;
    
    import com.example.myview.TopBar.TopBarClickListener;
    
    import android.app.Activity;
    import android.os.Bundle;
    import android.view.Menu;
    import android.view.MenuItem;
    import android.view.View;
    import android.view.View.OnClickListener;
    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.setTopBarClickListener(new TopBarClickListener() {
    
    			@Override
    			public void rightClick() {
    				// TODO 自动生成的方法存根
    				Toast.makeText(MainActivity.this, "获取更多", 0).show();
    			}
    
    			@Override
    			public void leftClick() {
    				// TODO 自动生成的方法存根
    
    				Toast.makeText(MainActivity.this, "点击取消", 0).show();
    			}
    		});
    		//topBar.setLeftButtonVisible(false);通过方法可以设置更多自定义属性
    	}
    		
    }

TopBar.java

package com.example.myview;
    
    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.view.ViewGroup;
    import android.widget.Button;
    import android.widget.RelativeLayout;
    import android.widget.TextView;
    import android.widget.Toast;
    
    /**
     * Created by Administrator on 2015/12/28.
     */
    public class TopBar extends RelativeLayout {
    
    	private Button leftButton, rightButton;
    	private TextView tvTitle;
    
    	private int leftTextColor;
    	private Drawable leftBackground;
    	private String leftText;
    
    	private int rightTextColor;
    	private Drawable rightBackground;
    	private String rightText;
    
    	private float titleTextSize;
    	private int titleTextColor;
    	private String MyTitle;
    
    	private LayoutParams leftParams, rightParams, titleParams;
    
    	TopBarClickListener topBarClickListener;
    
    	public TopBar(final Context context, AttributeSet attrs) {
    		super(context, attrs);
    
    		TypedArray ta = context.obtainStyledAttributes(attrs,
    				R.styleable.Topbar);
    		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);
    
    		titleTextSize = ta.getDimension(R.styleable.Topbar_titleTextSize, 0);
    		titleTextColor = ta.getColor(R.styleable.Topbar_titleTextColor, 0);
    		MyTitle = ta.getString(R.styleable.Topbar_MyTitle);
    
    		ta.recycle();
    
    		leftButton = new Button(context);
    		rightButton = new Button(context);
    		tvTitle = new TextView(context);
    
    		leftButton.setTextColor(leftTextColor);
    		leftButton.setBackground(leftBackground);
    		leftButton.setText(leftText);
    
    		rightButton.setTextColor(rightTextColor);
    		rightButton.setBackground(rightBackground);
    		rightButton.setText(rightText);
    
    		tvTitle.setText(MyTitle);
    		tvTitle.setTextColor(titleTextColor);
    		tvTitle.setTextSize(titleTextSize);
    		tvTitle.setGravity(Gravity.CENTER);
    
    		setBackgroundColor(0xFFF59563);
    
    		leftParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
    				ViewGroup.LayoutParams.WRAP_CONTENT);
    		leftParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT, TRUE);
    		addView(leftButton, leftParams);
    
    		rightParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
    				ViewGroup.LayoutParams.WRAP_CONTENT);
    		rightParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, TRUE);
    		addView(rightButton, rightParams);
    
    		titleParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
    				ViewGroup.LayoutParams.MATCH_PARENT);
    		titleParams.addRule(RelativeLayout.CENTER_IN_PARENT, TRUE);
    		addView(tvTitle, titleParams);
    
    		leftButton.setOnClickListener(new OnClickListener() {
    
    			@Override
    			public void onClick(View v) {
    				
    				// Toast.makeText(context, "左边bt", 0).show();
    				topBarClickListener.leftClick();
    			}
    		});
    		rightButton.setOnClickListener(new OnClickListener() {
    
    			@Override
    			public void onClick(View v) {
    		
    				// Toast.makeText(context, "右边bt", 0).show();
    				topBarClickListener.rightClick();
    			}
    		});
    
    	}
    
    	//使用了接口的回调机制
    	public interface TopBarClickListener {
    		public void leftClick();
    
    		public void rightClick();
    	}
    
    	//暴露一个方法给其他地方调用
    	public void setTopBarClickListener(TopBarClickListener listener) {
    		this.topBarClickListener = listener;
    
    	}
    	
    	//当然可以设置更多控件的属性      这里是以方法的形式设置控件的属性
         public void setLeftButtonVisible(boolean b) {
    		if (b) {
    			leftButton.setVisibility(View.VISIBLE);
    		}else {
    			leftButton.setVisibility(View.GONE);
    		}
    	}
    }

本文参考《Android群英传》

对上面如有疑问，欢迎交流指出，共同进步

[java_----]: http://blog.csdn.net/android_cmos/article/details/50734107
[Center]: /images/20220721/b2909a1edc3c42fea403dd6c052b1ad4.png