您的位置:首页技术文章
文章详情页

android自定义View之复合控件

【字号: 日期:2022-09-18 10:06:55浏览:18作者:猪猪

复合控件可以很好地创建出具有重用功能的控件集合。

很多的APP都有一些共通的UI界面,为了统一应用程序的风格,下面我们就以一个Topbar为实例讲解复合控件。实现效果如图:

android自定义View之复合控件

第一步:定义属性

在res资源目录的values目录下创建一个attrs.xml属性定义文件,为一个View提供可自定义的属性。代码中,通过标签声明了自定义属性,并通过name属性来确定引用的名称。

<?xml version='1.0' encoding='utf-8'?> <resources> <declare-styleable name='TopBar'><attr name='titleText' format='string'/><attr name='titleSize' format='dimension'/><attr name='titleTextColor2' 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>

第二步:创建自定义控件—-创建类CompositControlDemo01,并让其继承RelativeLayout

package com.wjc.customwidget_0502;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;/** * Created by admin on 2016/5/2. */public class CompositControlDemo01 extends RelativeLayout { //定义与attrs.xml中的自定义属性对应的属性 private int mLeftTextColor; private String mLeftText; private Drawable mLeftBackground; private int mRightTextColor; private String mRightText; private Drawable mRightBackgound; private String mTitle; private float mTitleTextSize; private int mTitleTextColor; //布局参数 private LayoutParams mLeftParame; private LayoutParams mRightParame; private LayoutParams mTitleParame; //定义显示的布局 private Button mLeftButton; private Button mRightButton; private TextView mTitleView; //定义一个公共接口 private topbarClickListener mListener; //构造函数,attrs就是布局文件传过来的对应的属性 public CompositControlDemo01(Context context, AttributeSet attrs) {super(context, attrs);initAttrs(context, attrs);initView(context); } //将attrs.xml中定义的属性值存入typedArray中 public void initAttrs(Context context, AttributeSet attrs) {TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.TopBar);mLeftTextColor = ta.getColor(R.styleable.TopBar_leftTextColor, 0);mLeftText = ta.getString(R.styleable.TopBar_leftText);mLeftBackground = ta.getDrawable(R.styleable.TopBar_leftBackground);mRightTextColor = ta.getColor(R.styleable.TopBar_rightTextColor, 0);mRightText = ta.getString(R.styleable.TopBar_rightText);mRightBackgound = ta.getDrawable(R.styleable.TopBar_rightBackground);mTitle = ta.getString(R.styleable.TopBar_titleText);mTitleTextSize = ta.getDimension(R.styleable.TopBar_titleSize, 10);mTitleTextColor = ta.getColor(R.styleable.TopBar_titleTextColor2, 0);ta.recycle();//避免重新创建时的错误 } //组合控件,并将属性分配给他们,并设置监听事件 public void initView(Context context) {mLeftButton = new Button(context);mRightButton = new Button(context);mTitleView = new TextView(context);mLeftButton.setTextColor(mLeftTextColor);mLeftButton.setText(mLeftText);mLeftButton.setBackground(mLeftBackground);mRightButton.setTextColor(mRightTextColor);mRightButton.setText(mRightText);mRightButton.setBackground(mRightBackgound);mTitleView.setTextColor(mTitleTextColor);mTitleView.setText(mTitle);mTitleView.setTextSize(mTitleTextSize);mTitleView.setGravity(Gravity.CENTER);//为元素设定相应的布局参数mLeftParame = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT);mLeftParame.addRule(RelativeLayout.ALIGN_PARENT_LEFT, TRUE);addView(mLeftButton, mLeftParame);mRightParame = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT);mRightParame.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, TRUE);addView(mRightButton, mRightParame);mTitleParame = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT);mTitleParame.addRule(RelativeLayout.CENTER_IN_PARENT, TRUE);addView(mTitleView, mTitleParame);//按钮的点击事件,不需要具体的实现//只需调用者接口的方法,回调的时候,会有具体的实现mLeftButton.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) {mListener.leftClick(); }});mRightButton.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) {mListener.rightClick(); }}); } //定义接口 //接口对象,实现回调机制,在回调方法中,通过映射的接口对象调用接口的方法 //而不用去考虑如何实现,具体的实现由调用者去创建 public interface topbarClickListener {void leftClick();void rightClick(); } //暴露一个方法给调用者来注册接口回调 //通过接口来获取回调者对接口方法的实现 public void setOnTopbarClickListener(topbarClickListener mListener) {this.mListener = mListener; } /** * 设置按钮的显示与否通过id区分按钮,flag区分是否显示 * * @param id id * @param flag is Visable? */ public void setButtonVisable(int id, boolean flag) {if (flag) { if (id == 0) {mLeftButton.setVisibility(View.VISIBLE); } else {mRightButton.setVisibility(View.VISIBLE); }} else { if (id == 0) {mLeftButton.setVisibility(View.GONE); } else {mRightButton.setVisibility(View.GONE); }} }}

第三步:引用UI模板—创建topbar.xml文件

<?xml version='1.0' encoding='utf-8'?> <com.wjc.customwidget_0502.CompositControlDemo01 xmlns:android='http://schemas.android.com/apk/res/android' xmlns:custom='http://schemas.android.com/apk/res-auto' android:android:layout_width='wrap_content' android:layout_height='50dp' android:padding='5dp' android:background='#3F7EA4' custom:leftBackground='@drawable/chevron_left' custom:leftTextColor='#ff00' custom:leftText='返回'custom:rightText='更多'custom:rightTextColor='#ff00'custom:rightBackground='#ffccff'custom:titleText='自定义标题'custom:titleTextColor2='#555555'custom:titleSize='10sp' ></com.wjc.customwidget_0502.CompositControlDemo01>

注:代码中

xmlns:android=http://schemas.android.com/apk/res/android

表示:引用android系统的属性,而

xmlns:custom=http://schemas.android.com/apk/res-auto

表示:引用第三方控件的属性,即引用自定义的属性

通过如上的代码,我们就可以在其他的布局文件中,直接带调用标签来引用这个UI模板View,代码如下

<include layout='@layout/topbar'/>

第四步:实现接口回调——即写一个activity引用此布局

package com.wjc.customwidget_0502;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.widget.Toast;public class MainActivity extends AppCompatActivity { CompositControlDemo01 mTopbar; @Override protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);mTopbar=(CompositControlDemo01)findViewById(R.id.topBar);//初始化组合控件//为topBar中的按钮注册监听事件 mTopbar.setOnTopbarClickListener(new CompositControlDemo01.topbarClickListener() { @Override public void leftClick() {Toast.makeText(MainActivity.this, 'back', Toast.LENGTH_SHORT).show(); } @Override public void rightClick() {Toast.makeText(MainActivity.this,'more',Toast.LENGTH_LONG).show(); }});/* //是否显示相应的按钮mTopbar.setButtonVisable(0,true);//只显示左边按钮*/ }}

这是本人的第一篇博客,如有错漏,请留言指教!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持好吧啦网。

标签: Android
相关文章: