Android自定義實(shí)現(xiàn)圖片加文字功能
分四步來寫：
1，組合控件的xml;
2，自定義組合控件的屬性;
3，自定義繼承組合布局的class類，實(shí)現(xiàn)帶兩參數(shù)的構(gòu)造器;
4，在xml中展示組合控件。
具體實(shí)現(xiàn)過程：
一、組合控件的xml
我接觸的有兩種方式，一種是普通的Activity的xml；一種是父節(jié)點(diǎn)為merge的xml。我項目中用的是第一種，但個人感覺第二種好，因?yàn)榈谝环N多了相對或者絕對布局層。
我寫的 custom_pictext.xml
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content"> <ImageView android:id="@+id/custom_pic_iv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@mipmap/a" /> <TextView android:id="@+id/custom_date_tv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignBottom="@id/custom_pic_iv" android:layout_marginBottom="5dp" android:layout_marginLeft="8dp" android:text="2017" /> <TextView android:id="@+id/custom_text_tv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/custom_pic_iv" android:layout_marginLeft="4dp" android:layout_marginTop="4dp" android:text="題目" /></RelativeLayout>
這里展示一個merge的例子，有時間，大家可以自己體會下。
<merge xmlns:android="http://schemas.android.com/apk/res/android"> <Button android:id="@+id/title_bar_left" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_centerVertical="true" android:layout_marginLeft="5dp" android:background="@null" android:minHeight="45dp" android:minWidth="45dp" android:textSize="14sp" /> <TextView android:id="@+id/title_bar_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:singleLine="true" android:textSize="17sp" /> <Button android:id="@+id/title_bar_right" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:layout_marginRight="7dp" android:background="@null" android:minHeight="45dp" android:minWidth="45dp" android:textSize="14sp" /></merge>
這兩個xml，都是寫在layout中的。
二、自定義組合控件的屬性
這步是我們自定義的重要部分之一，自定義組件的私有特性全顯示在這。
首先在values中創(chuàng)建attrs.xml
然后定義屬性，如下代碼
<?xml version="1.0" encoding="UTF-8" ?><resources> <declare-styleable name="CustomPicText"> <attr name="pic_backgroud" format="reference"/> <attr name="pic_backgroud_width" format="dimension"/> <attr name="pic_backgroud_height" format="dimension"/> <attr name="pic_text" format="string"/> <attr name="pic_text_color" format="color"/> <attr name="pic_text_size" format="integer"/> <attr name="pic_date" format="string"/> <attr name="pic_date_color" format="color"/> <attr name="pic_date_size" format="integer"/> </declare-styleable></resources>
這里有幾點(diǎn)需要注意的，第一：屬性名為name，第二：屬性單位為fromat。這單位包含的值可以查看這里。
三、自定義繼承組合布局的class類，實(shí)現(xiàn)帶兩參數(shù)的構(gòu)造器
我實(shí)現(xiàn)的CustomPicText.Java
/** * Created by Hman on 2017/5/4. * 為了測試自定義組合控件 */public class CustomPicText extends RelativeLayout { private ImageView customPicIv; private TextView customDateTv; private TextView customTextTv; public CustomPicText(Context context, AttributeSet attrs) { super(context, attrs); // 加載layout View view = LayoutInflater.from(context).inflate(R.layout.custom_pictext,this); customPicIv = (ImageView) view.findViewById(R.id.custom_pic_iv); customDateTv = (TextView) view.findViewById(R.id.custom_date_tv); customTextTv = (TextView) view.findViewById(R.id.custom_text_tv); // 加載自定義屬性配置 TypedArray typedArray = context.obtainStyledAttributes(attrs,R.styleable.CustomPicText); // 為自定義屬性添加特性 if (typedArray != null) { // 為圖片添加特性 int picBackgroud = typedArray.getResourceId(R.styleable.CustomPicText_pic_backgroud, 0); float picWidth = typedArray.getDimension(R.styleable.CustomPicText_pic_backgroud_width,25); float picHeight = typedArray.getDimension(R.styleable.CustomPicText_pic_backgroud_height,25); customPicIv.setBackgroundResource(picBackgroud);// customPicIv.setMinimumWidth(picWidth); // 為標(biāo)題設(shè)置屬性 String picText = typedArray.getString(R.styleable.CustomPicText_pic_text); int picTextColor = typedArray.getColor(R.styleable.CustomPicText_pic_text_color,16); int picTextSize = typedArray.getResourceId(R.styleable.CustomPicText_pic_date_size, 16); customTextTv.setText(picText); customTextTv.setTextColor(picTextColor); customTextTv.setTextSize(picTextSize); // 為日期設(shè)置屬性 String picDate = typedArray.getString(R.styleable.CustomPicText_pic_date); int picDateColor = typedArray.getColor(R.styleable.CustomPicText_pic_date_color, 0); int picDateSize = typedArray.getResourceId(R.styleable.CustomPicText_pic_date_size, 12); customDateTv.setText(picDate); customDateTv.setTextColor(picDateColor); customDateTv.setTextSize(picDateSize); typedArray.recycle(); } }}在這里，我們也可以給控件添加一些監(jiān)聽器，大家自己去加上；這里值得注意的是一個加載配置的類TypeArray
4，在xml中展示組合控件
這個隨便寫到一個xml中去就行
代碼如下
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:hman="http://schemas.android.com/apk/res-auto" android:layout_width="wrap_content" android:layout_height="wrap_content"> <com.eastsun.widget.CustomPicText android:id="@+id/first" android:layout_width="wrap_content" android:layout_height="wrap_content" hman:pic_backgroud="@mipmap/b" hman:pic_date="2017/5/6" hman:pic_date_color="@color/white" hman:pic_text="第一張圖片" hman:pic_text_color="@color/red" hman:pic_text_size="18"></com.eastsun.widget.CustomPicText></LinearLayout>
這里有一點(diǎn)別忘記，添加xmlns:hman=”http://schemas.Android.com/apk/res-auto”
總結(jié)
程序基本上到這就結(jié)束了。
看下效果截圖
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
