图片加文字的自定义控件

最近在项目中要用到类似于这样的按钮，自己嫌麻烦在网上找了一下，发现很少就自己写了一个。

现在分享给大家.

先上代码：

public class IceAndTextEqualButtonView extends LinearLayout {

private Context context;
private int layout;
private int position = 1; // 图片和文字的相对位置
private TextView itb_tv; //文字控件
private ImageView itb_img; //图片控件
private int fontSize; //字体大小
private int fontSpace = 15; //2个控件的间隔,默认为15个DP
private int imgSize = 25; //设置图片大小，默认为25dp

public IceAndTextEqualButtonView(Context context) {
super(context);
this.context = context;
}

public IceAndTextEqualButtonView(Context context, AttributeSet attrs) {
super(context, attrs);
this.context = context;

int resourceId = -1;
TypedArray typedArray = context.obtainStyledAttributes(attrs,
R.styleable.IceAndTextEqualButtonView);
itb_img = new ImageView(context);
itb_tv = new TextView(context);
int N = typedArray.getIndexCount();
for (int i = 0; i < N; i++) {
int attr = typedArray.getIndex(i);
switch (attr) {
//总布局是垂直还是水平
case R.styleable.IceAndTextEqualButtonView_orientation:
layout = resourceId = typedArray.getInt(
R.styleable.IceAndTextEqualButtonView_orientation, 0);
this.setOrientation(resourceId == 1 ? LinearLayout.HORIZONTAL
: LinearLayout.VERTICAL);
break;
//文字获取
case R.styleable.IceAndTextEqualButtonView_text:
resourceId = typedArray.getResourceId(
R.styleable.IceAndTextEqualButtonView_text, 0);
itb_tv.setText(resourceId > 0 ?
typedArray.getResources().getText(resourceId)
: typedArray.getString(R.styleable.IceAndTextEqualButtonView_text));
break;
//按钮图片
case R.styleable.IceAndTextEqualButtonView_imgSrc:
resourceId = typedArray.getResourceId(
R.styleable.IceAndTextEqualButtonView_imgSrc, 0);
itb_img.setImageResource(resourceId > 0 ? resourceId : R.mipmap.ic_launcher);
break;
//2个控件的相对位置
case R.styleable.IceAndTextEqualButtonView_position:
position = typedArray.getInt(R.styleable.IceAndTextEqualButtonView_position, 0);
break;
//字体的大小
case R.styleable.IceAndTextEqualButtonView_textSize:
fontSize = typedArray.getInt(R.styleable.IceAndTextEqualButtonView_textSize, 0);
break;
//2个控件的间隔
case R.styleable.IceAndTextEqualButtonView_textSpace:
fontSpace = typedArray.getInt(R.styleable.IceAndTextEqualButtonView_textSpace, 0);
break;
case R.styleable.IceAndTextEqualButtonView_imgSize:
imgSize = typedArray.getInt(R.styleable.IceAndTextEqualButtonView_imgSize, 0);
break;
}
}

setItb_img();
setItb_tv();

//设置图片和文字2个控件的相对位置
if (position == 0) {
addView(itb_img);
addView(itb_tv);
} else if (position == 1) {
addView(itb_tv);
addView(itb_img);
}

typedArray.recycle();
}

//在代码内部写text的样式不暴露给外部
private void setItb_tv() {
itb_tv.setTextSize(fontSize);
}

//在代码内部写图片的样式不暴露给外部
private void setItb_img() {
LayoutParams layoutParams = new LayoutParams(imgSize, imgSize);
itb_img.setLayoutParams(layoutParams);
setSpace(fontSpace);
}
//外部设置图片宽高
public void setImgSize(int wide,int height){
LayoutParams layoutParams = new LayoutParams(wide, height);
itb_img.setLayoutParams(layoutParams);
setSpace(fontSpace);
}

//设置图片
public void setItb_imgSrc(int resId) {
itb_img.setImageResource(resId);
}

//设置文字padding
public void setItb_tvPadding(int left, int top, int right, int bottom) {
itb_tv.setPadding(left, top, right, bottom);
}

//设置图片padding
public void setItb_imgPadding(int left, int top, int right, int bottom) {
itb_img.setPadding(left, top, right, bottom);
}
//图片显示或隐藏
public void setItb_imgVisibility(int visibility){
itb_img.setVisibility(visibility);
}

public void setItb_imgID(int id){
itb_img.setId(id);
}

public void setItb_tvText(String text){
itb_tv.setText(text);
}

public void setItb_tvTextSize(float size){
itb_tv.setTextSize(size);
}

public void setSpace(int space){
//2个控件的距离调整
if (layout == 1) {
if (position == 0) {
itb_tv.setPadding(space, 0, 0, 0);
} else if (position == 1) {
itb_tv.setPadding(0, 0, space, 0);
}
} else if (layout == 0) {
if (position == 0) {
itb_tv.setPadding(0, space, 0, 0);
} else if (position == 1) {
itb_tv.setPadding(0, 0, 0, space);
}
}
}
public TextView getTextView(){
return itb_tv;
}
public ImageView getImageView(){
return itb_img;
}
}

这个控件主要是继承LinearLayout，再在里面用代码写一个Imageview和一个TextView，然后用代码控制这2个控件.先上面我写了很多让外部调用的方法.

想使用时只要把代码粘贴到你的项目中，然后在布局中调用。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
xmlns:wind="http://schemas.android.com/apk/res/com.example.wind.iceandtextequalbutton">
<com.example.wind.iceandtextequalbutton.IceAndTextEqualButtonView
android:id="@+id/myImageView1"
android:layout_width="100dp"
android:layout_height="100dp"
wind:imgSrc="@mipmap/ben_normal"
wind:text="支付"
wind:orientation="Horizontal"
wind:position="imgTop"
android:layout_marginTop="50dp"
wind:textSize="25"
wind:textSpace="15"
android:gravity="center"
android:background="@drawable/btn_background"
wind:imgSize="50"
>

</com.example.wind.iceandtextequalbutton.IceAndTextEqualButtonView>
</LinearLayout>

我自定了很多自己的控件属性，为了方便在布局中控制，为了能用自己的属性，要在values下写.

<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="IceAndTextEqualButtonView">

<attr name="text" format="reference|string"></attr>

<attr name="orientation" >
<enum name="Horizontal" value="1"></enum>
<enum name="Vertical" value="0"></enum>
</attr>

<attr name="position">
<enum name="imgTop" value="0"></enum>
<enum name="textTop" value="1"></enum>
</attr>

<attr name="imgSrc" format="reference|integer"></attr>

<attr name="textSize" format="reference|integer"></attr>

<attr name="textSpace" format="reference|integer"></attr>

<attr name="imgSize" format="reference|integer"></attr>
</declare-styleable>
</resources>

最后我们就可以用了。

public class MainActivity extends Activity {
IceAndTextEqualButtonView iceAndTextEqualButtonView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
iceAndTextEqualButtonView = (IceAndTextEqualButtonView) findViewById(R.id.myImageView1);
TextView tv = iceAndTextEqualButtonView.getTextView(); //拿到控件中的TextView
tv.setTextSize(100); //在外面修改内部TextView，像我们平时用的 //所有textview的方法都可以用，也可以用我暴露出来的方法，如下

iceAndTextEqualButtonView.setItb_tvTextSize(50);
iceAndTextEqualButtonView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {

}
});
}
}

这样子整个自定义控件就完成了。

分享，请写出处，谢谢

图片加文字的自定义控件

猜你喜欢