textview實現(xiàn)底部欄圖文效果
以前寫底部欄的總是習慣用textview+imageview這種寫法實現(xiàn)，發(fā)現(xiàn)每次寫代碼麻煩，還需要在最外面添加一層布局嵌套，當然這樣一嵌套層級增加，布局就影響到了性能。我可不想因為這小小的地方造成代碼的冗余和apk的內存增加太多。然后在網上搜索了一番，在掘金上發(fā)現(xiàn)一個類似的，但是運行后不是自己想要的結果。
先聲明我用的Hyman大神的auto適配庫,所以代碼都會和auto庫結合，當然也有不用這個庫的代碼編寫，如果你還不知道auto庫，那么戳（戳戳戳戳戳戳）這里吧！！！
效果如下圖，很丑
這里寫圖片描述
后來經過其他的幫助，修改出了適合自己項目用的效果代碼。廢話少說，代碼來了。
- attrs.xml文件
<declare-styleable name="itb">
<attr name="img" format="reference" />
<attr name="text" format="string|reference"></attr>
<attr name="text_size" format="integer|reference"></attr>
<attr name="img_width" format="dimension|reference"></attr>
<attr name="img_height" format="dimension|reference"></attr>
<attr name="margin_top" format="dimension|reference"></attr>
<attr name="text_margin_bottom" format="dimension|reference"></attr>
<attr name="text_color" format="color|reference"></attr>
<attr name="margin_bottom" format="dimension|reference"></attr>
</declare-styleable>
屬性定義，這個就不用說了
2.自定義代碼
package com.hangzhou.bijianhuzhu.customView;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.Matrix;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import com.hangzhou.bijianhuzhu.bjhz.R;
import com.hangzhou.bijianhuzhu.tools.ImageUtil;
import com.zhy.autolayout.AutoLinearLayout;
import com.zhy.autolayout.utils.AutoUtils;
/**
* 設置TextView drawable圖片大小 圖片距離文字的大小
* Created by chunfu on 2016/11/9.
*/
public class RichText extends AutoLinearLayout {
private Context context;
private View mRoot = null;
private ImageView mImgView = null;
private TextView mTextView = null;
private Drawable mImg;//圖片資源
private String mText;//文字內容
private float mTextSize;
private float width;
private float height;
private int mImgWidth;
private int mImgHeigh;
private float marginTop;
private float textMarginbottom;
private float marginBottom;
private static int TEXT_MARGIN_BOTTOM = 5;
private static int MARGIN_TOP = 8;
private static int MARGIN_BOTTOM = 3;
private static int IMAGE_WIDTH = 18;
private static int IMAGE_HEIGHT = 18;// px像素值
private static int TEXT_SIZE = 15;
int textColor;
public RichText(Context context, AttributeSet attrs) {
super(context, attrs);
this.context = context;
TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.itb);
mImg = ta.getDrawable(R.styleable.itb_img);
mText = ta.getString(R.styleable.itb_text);
// resetSize();
mTextSize = ta.getFloat(R.styleable.itb_text_size, TEXT_SIZE);
width = ta.getDimension(R.styleable.itb_img_width, IMAGE_WIDTH);
height = ta.getDimension(R.styleable.itb_img_height, IMAGE_HEIGHT);
marginTop = ta.getDimension(R.styleable.itb_margin_top, MARGIN_TOP);
textMarginbottom = ta.getDimension(R.styleable.itb_text_margin_bottom,
TEXT_MARGIN_BOTTOM);
marginBottom = ta.getDimension(R.styleable.itb_margin_bottom, MARGIN_BOTTOM);
textColor = ta.getColor(R.styleable.itb_text_color, 0xff333333);
// TODO: 2016/11/9 實現(xiàn)效果適配需要放開下面的代碼
// width = AutoUtils.getPercentWidthSize((int) width);
// height = AutoUtils.getPercentWidthSize((int) height);
// marginTop= AutoUtils.getPercentWidthSize((int)marginTop);
if (width == IMAGE_WIDTH) {
resetSize();
}
initView();
// 及時回收資源（一定需要,防止OOM）
ta.recycle();
}
/**
* 重新設置大小
*
*/
private void resetSize() {
width = dip2px(context, width);
height = dip2px(context, height);
marginTop = dip2px(context, marginTop);
textMarginbottom = dip2px(context, textMarginbottom);
marginBottom = dip2px(context, marginBottom);
}
/**
* 初始化控件
*
*/
private void initView() {
LayoutInflater inflater = (LayoutInflater) context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
mRoot = inflater.inflate(R.layout.view_imagetext, this, true);
mImgView = (ImageView) mRoot.findViewById(R.id.img);
mTextView = (TextView) mRoot.findViewById(R.id.txt);
if (textMarginbottom != TEXT_MARGIN_BOTTOM) {
LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT,
LayoutParams.WRAP_CONTENT);
params.setMargins(0, 0, 0, (int) textMarginbottom);
mTextView.setLayoutParams(params);
}
setImageSize();
mTextView.setText(mText);
mTextView.setTextSize(mTextSize);
mTextView.setTextColor(textColor);
}
/**
* 設置圖片size大小
*
*/
private void setImageSize() {
mImgWidth = mImg.getIntrinsicWidth();
mImgHeigh = mImg.getIntrinsicHeight();
if (width * mImgHeigh > height * mImgWidth) {
LayoutParams params = new LayoutParams(
(int) (mImgWidth * height / mImgHeigh), (int) (mImgHeigh
* height / mImgHeigh));
params.setMargins(0, (int) marginTop, 0, (int) marginBottom);
mImgView.setLayoutParams(params);
} else {
LayoutParams params = new LayoutParams(
(int) (mImgWidth * width / mImgWidth), (int) (mImgHeigh
* width / mImgWidth));
params.setMargins(0, (int) marginTop, 0, (int) marginBottom);
mImgView.setLayoutParams(params);
}
ImageUtil.setBackgroundInDrawable(mImgView, mImg);
}
/**
* 設置背景圖片
*
* @param resId
* @param text
*/
public void setImageViewBackground(int resId, String text) {
mImg = context.getResources().getDrawable(resId);
setImageSize();
mTextView.setText(text);
}
/**
* @param context 上下文
* @param dpValue 手機分辨率
* @return
* @Title: dip2px
* @Description: 根據手機的分辨率從 dp 的單位 轉成為 px(像素)
* @author Linlj
*/
private int dip2px(Context context, float dpValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (dpValue * scale + 0.5f);
}
}
代碼也不很難，相信各位都能看懂，此段代碼使用了線性布局加載imageview和textview，說白了還是用了倆個控件。需要注意的就是我之前說的如果用的是auto這個庫，則放開如下代碼：
width = AutoUtils.getPercentWidthSize((int) width);
height = AutoUtils.getPercentWidthSize((int) height);
marginTop= AutoUtils.getPercentWidthSize((int)marginTop);
另外需要將繼承的類改為普通的布局
public class RichText extends LinearLayout
2.1 R.layout.view_imagetext 布局代碼
mRoot = inflater.inflate(R.layout.view_imagetext, this, true);
<?xml version="1.0" encoding="utf-8"?>
<com.zhy.autolayout.AutoLinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/rootView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:src="@drawable/ic_launcher"
android:id="@+id/img"
android:layout_width="40px"
android:layout_height="40px"
android:layout_gravity="center"
android:layout_marginBottom="3px"
android:layout_marginTop="8px" />
<TextView
android:layout_marginTop="5px"
android:id="@+id/txt"
android:text="11111111"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="5px"
android:gravity="center" />
</com.zhy.autolayout.AutoLinearLayout>
imageview和textview之間的間距通過android:layout_marginBottom和android:layout_marginTop的屬性來控制，其他的屬性照舊
3.引用代碼
上面我們將代碼寫完了，現(xiàn)在就可以開始引用了（textview原有的屬性可以繼續(xù)使用）
切記一定要先引用auto屬性
xmlns:app="http://schemas.android.com/apk/res-auto"
<com.hangzhou.bijianhuzhu.customView.RichText
android:id="@+id/rt_index"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
app:img="@drawable/ic_launcher"
app:img_height="80px" //設置高度
app:img_width="80px" //設置寬度
app:text="@string/indexpager" //文字
app:text_size="14" /> //文字大小
全部代碼到此為止就結束了。使用這個的好處就是不需要每次寫倆個控件了，減少了層級布局，apk性能得到部分優(yōu)化。其他的屬性可以參考attrs文件進行使用。
如果你有更好的解決辦法或者是方案，歡迎一起探討交流！
