textview實現底部欄圖文效果

textview實現底部欄圖文效果

之前寫底部欄的老是習慣用textview+imageview這種寫法實現，發現每次寫代碼麻煩，還須要在最外面添加一層佈局嵌套，固然這樣一嵌套層級增長，佈局就影響到了性能。我可不想由於這小小的地方形成代碼的冗餘和apk的內存增長太多。而後在網上搜索了一番，在掘金上發現一個相似的，可是運行後不是本身想要的結果。 先聲明我用的Hyman大神的auto適配庫,因此代碼都會和auto庫結合，固然也有不用這個庫的代碼編寫，若是你還不知道auto庫，那麼戳（戳戳戳戳戳戳）這裏吧！！！

效果以下圖，很醜

後來通過其餘的幫助，修改出了適合本身項目用的效果代碼。廢話少說，代碼來了。

1. 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  實現效果適配須要放開下面的代碼 
//        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.引用代碼 上面咱們將代碼寫完了，如今就能夠開始引用了（textview原有的屬性能夠繼續使用）

切記必定要先引用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性能獲得部分優化。其餘的屬性能夠參考attrs文件進行使用。 若是你有更好的解決辦法或者是方案，歡迎一塊兒探討交流！