在开发中很多用到自定义控件,其中大部分是有几个控件组合到一起使用,这里就联系到组合控件,我对自定义控件也不是太熟悉,昨天看写资料,自己写了个小demo,先从简单的来,组合控件,复杂的学会了在分享给大家,话不多说了,上代码吧
我们先举个例子,比如我们需要一个控件,左边一个文本,右边一个文本,下面一个横线,
下面附上demo地址
https://github.com/wudongze/WidgetDemo
来上代码
首先要把那块的布局实现出来
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/root"
android:layout_width="match_parent"
android:layout_height="45dp">
<TextView
android:id="@+id/tv_left"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:padding="5dp" />
<TextView
android:id="@+id/tv_right"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:gravity="center"
android:padding="5dp" />
<TextView
android:id="@+id/line"
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:layout_alignParentBottom="true"/>
</RelativeLayout>
然后定义自己需要的属性在attrs.xml文件中
<declare-styleable name="MyTextLayout">
<attr name="left_text" format="string"/><!--左文本-->
<attr name="right_text" format="string"/><!--右文本-->
<attr name="line_color" format="color"/><!--线的颜色-->
<attr name="left_text_size" format="dimension"/><!--左边文字的大小-->
<attr name="right_text_size" format="dimension"/><!--右边文字的大小-->
<attr name="left_text_color" format="color"/><!--左边文字的颜色-->
<attr name="right_text_color" format="color"/><!--右边文字的颜色-->
<attr name="is_show_line" format="boolean"/><!--是否显示横线-->
</declare-styleable>
这里name是属性名字 ,format是属性的类型,具体有什么类型会提示出来,根据自己的业务区选择
下面开始写代码了
public class MyTextLayout extends RelativeLayout {
private TextView tvLeft, tvRight;
private TextView line;
private RelativeLayout relativeLayout;
//这个构造函数用于代码中设置,也就是动态使用控件
public MyTextLayout(Context context) {
super(context);
}
//这个构造函数用于在布局文件中设置控件的属性
public MyTextLayout(Context context, AttributeSet attrs) {
super(context, attrs);
//获取view
inflate(getContext(), R.layout.text_layout, this);
tvLeft = (TextView) findViewById(R.id.tv_left);
tvRight = (TextView) findViewById(R.id.tv_right);
line = (TextView) findViewById(R.id.line);
relativeLayout = (RelativeLayout) findViewById(R.id.root);
//获取TypedArray,这里面有我们定义的各种属性,如下
TypedArray obtainStyledAttributes = context.obtainStyledAttributes(attrs, R.styleable.MyTextLayout);
String leftText = obtainStyledAttributes.getString(R.styleable.MyTextLayout_left_text);
String rightText = obtainStyledAttributes.getString(R.styleable.MyTextLayout_right_text);
int lineColor = obtainStyledAttributes.getColor(R.styleable.MyTextLayout_line_color, Color.parseColor("#ffffff"));
float leftTextSize = obtainStyledAttributes.getDimension(R.styleable.MyTextLayout_left_text_size,15.0f);
float rightTextSize = obtainStyledAttributes.getDimension(R.styleable.MyTextLayout_right_text_size,15.0f);
int leftTextColor = obtainStyledAttributes.getColor(R.styleable.MyTextLayout_left_text_color,Color.parseColor("#000000"));
int rightTextColor = obtainStyledAttributes.getColor(R.styleable.MyTextLayout_right_text_color,Color.parseColor("#000000"));
boolean isShowLine = obtainStyledAttributes.getBoolean(R.styleable.MyTextLayout_is_show_line,true);
//为view中的控件赋值
tvLeft.setText(leftText);
tvRight.setText(rightText);
tvLeft.setTextSize(leftTextSize);
tvRight.setTextSize(rightTextSize);
tvLeft.setTextColor(leftTextColor);
tvRight.setTextColor(rightTextColor);
line.setBackgroundColor(lineColor);
if (isShowLine) line.setVisibility(isShowLine ? VISIBLE : GONE);
}
//这个构造函数用于设置默认样式的控件
public MyTextLayout(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
//下面是自己定义的一些方法,根据业务来 1、设置左边文本 2、获取左边的文本内容 3、设置右边的文本
//4、获取右边的文本 5、设置横线的显示和隐藏 6、设置点击监听
public void setLeftText(String leftText) {
tvLeft.setText(leftText);
}
public String getLeftText() {
return tvLeft.getText().toString();
}
public void setRightText(String rightText) {
tvRight.setText(rightText);
}
public String getRightText() {
return tvRight.getText().toString();
}
public void isShowLine(boolean flag) {
line.setVisibility(flag ? VISIBLE : GONE);
}
public void setOnClickLintener(OnClickListener onClickLintener) {
relativeLayout.setOnClickListener(onClickLintener);
}
}
在使用的时候和正常的控件一样
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.example.wudz.widgetdemo.MyTextLayout
android:id="@+id/my_text"
android:layout_width="match_parent"
android:layout_height="50dp"
app:is_show_line="false"
app:left_text="商品价格"
app:line_color="#000000"
app:right_text="20元"></com.example.wudz.widgetdemo.MyTextLayout>
</RelativeLayout>
在这里就能使用我们定义的属性了,一定要注意,在使用自定义控件一定要加上
xmlns:app="http://schemas.android.com/apk/res-auto"
这个是命名空间
在代码中设置
myTextLayout = (MyTextLayout) findViewById(R.id.my_text);
myTextLayout.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this,"点击了控件",Toast.LENGTH_SHORT).show();
myTextLayout.setLeftText("商品价格2");
myTextLayout.setRightText("40元");
myTextLayout.isShowLine(true);
}
});
我们先举个例子,比如我们需要一个控件,左边一个文本,右边一个文本,下面一个横线,
下面附上demo地址
https://github.com/wudongze/WidgetDemo
来上代码
首先要把那块的布局实现出来
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/root"
android:layout_width="match_parent"
android:layout_height="45dp">
<TextView
android:id="@+id/tv_left"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:padding="5dp" />
<TextView
android:id="@+id/tv_right"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:gravity="center"
android:padding="5dp" />
<TextView
android:id="@+id/line"
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:layout_alignParentBottom="true"/>
</RelativeLayout>
然后定义自己需要的属性在attrs.xml文件中
<declare-styleable name="MyTextLayout">
<attr name="left_text" format="string"/><!--左文本-->
<attr name="right_text" format="string"/><!--右文本-->
<attr name="line_color" format="color"/><!--线的颜色-->
<attr name="left_text_size" format="dimension"/><!--左边文字的大小-->
<attr name="right_text_size" format="dimension"/><!--右边文字的大小-->
<attr name="left_text_color" format="color"/><!--左边文字的颜色-->
<attr name="right_text_color" format="color"/><!--右边文字的颜色-->
<attr name="is_show_line" format="boolean"/><!--是否显示横线-->
</declare-styleable>
这里name是属性名字 ,format是属性的类型,具体有什么类型会提示出来,根据自己的业务区选择
下面开始写代码了
public class MyTextLayout extends RelativeLayout {
private TextView tvLeft, tvRight;
private TextView line;
private RelativeLayout relativeLayout;
//这个构造函数用于代码中设置,也就是动态使用控件
public MyTextLayout(Context context) {
super(context);
}
//这个构造函数用于在布局文件中设置控件的属性
public MyTextLayout(Context context, AttributeSet attrs) {
super(context, attrs);
//获取view
inflate(getContext(), R.layout.text_layout, this);
tvLeft = (TextView) findViewById(R.id.tv_left);
tvRight = (TextView) findViewById(R.id.tv_right);
line = (TextView) findViewById(R.id.line);
relativeLayout = (RelativeLayout) findViewById(R.id.root);
//获取TypedArray,这里面有我们定义的各种属性,如下
TypedArray obtainStyledAttributes = context.obtainStyledAttributes(attrs, R.styleable.MyTextLayout);
String leftText = obtainStyledAttributes.getString(R.styleable.MyTextLayout_left_text);
String rightText = obtainStyledAttributes.getString(R.styleable.MyTextLayout_right_text);
int lineColor = obtainStyledAttributes.getColor(R.styleable.MyTextLayout_line_color, Color.parseColor("#ffffff"));
float leftTextSize = obtainStyledAttributes.getDimension(R.styleable.MyTextLayout_left_text_size,15.0f);
float rightTextSize = obtainStyledAttributes.getDimension(R.styleable.MyTextLayout_right_text_size,15.0f);
int leftTextColor = obtainStyledAttributes.getColor(R.styleable.MyTextLayout_left_text_color,Color.parseColor("#000000"));
int rightTextColor = obtainStyledAttributes.getColor(R.styleable.MyTextLayout_right_text_color,Color.parseColor("#000000"));
boolean isShowLine = obtainStyledAttributes.getBoolean(R.styleable.MyTextLayout_is_show_line,true);
//为view中的控件赋值
tvLeft.setText(leftText);
tvRight.setText(rightText);
tvLeft.setTextSize(leftTextSize);
tvRight.setTextSize(rightTextSize);
tvLeft.setTextColor(leftTextColor);
tvRight.setTextColor(rightTextColor);
line.setBackgroundColor(lineColor);
if (isShowLine) line.setVisibility(isShowLine ? VISIBLE : GONE);
}
//这个构造函数用于设置默认样式的控件
public MyTextLayout(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
//下面是自己定义的一些方法,根据业务来 1、设置左边文本 2、获取左边的文本内容 3、设置右边的文本
//4、获取右边的文本 5、设置横线的显示和隐藏 6、设置点击监听
public void setLeftText(String leftText) {
tvLeft.setText(leftText);
}
public String getLeftText() {
return tvLeft.getText().toString();
}
public void setRightText(String rightText) {
tvRight.setText(rightText);
}
public String getRightText() {
return tvRight.getText().toString();
}
public void isShowLine(boolean flag) {
line.setVisibility(flag ? VISIBLE : GONE);
}
public void setOnClickLintener(OnClickListener onClickLintener) {
relativeLayout.setOnClickListener(onClickLintener);
}
}
在使用的时候和正常的控件一样
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.example.wudz.widgetdemo.MyTextLayout
android:id="@+id/my_text"
android:layout_width="match_parent"
android:layout_height="50dp"
app:is_show_line="false"
app:left_text="商品价格"
app:line_color="#000000"
app:right_text="20元"></com.example.wudz.widgetdemo.MyTextLayout>
</RelativeLayout>
在这里就能使用我们定义的属性了,一定要注意,在使用自定义控件一定要加上
xmlns:app="http://schemas.android.com/apk/res-auto"
这个是命名空间
在代码中设置
myTextLayout = (MyTextLayout) findViewById(R.id.my_text);
myTextLayout.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this,"点击了控件",Toast.LENGTH_SHORT).show();
myTextLayout.setLeftText("商品价格2");
myTextLayout.setRightText("40元");
myTextLayout.isShowLine(true);
}
});