Android自定義實(shí)現(xiàn)圖片加文字功能
Android自定義實(shí)現(xiàn)圖片加文字功能
分四步來(lái)寫:
1,組合控件的xml;
2,自定義組合控件的屬性;
3,自定義繼承組合布局的class類,實(shí)現(xiàn)帶兩參數(shù)的構(gòu)造器;
4,在xml中展示組合控件。
具體實(shí)現(xiàn)過(guò)程:
一、組合控件的xml
我接觸的有兩種方式,一種是普通的Activity的xml;一種是父節(jié)點(diǎn)為merge的xml。我項(xiàng)目中用的是第一種,但個(gè)人感覺(jué)第二種好,因?yàn)榈谝环N多了相對(duì)或者絕對(duì)布局層。
我寫的 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>
這里展示一個(gè)merge的例子,有時(shí)間,大家可以自己體會(huì)下。
<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>
這兩個(gè)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.
* 為了測(cè)試自定義組合控件
*/
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)聽器,大家自己去加上;這里值得注意的是一個(gè)加載配置的類TypeArray
4,在xml中展示組合控件
這個(gè)隨便寫到一個(gè)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é)束了。
看下效果截圖

感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
相關(guān)文章
Flutter實(shí)現(xiàn)固定header底部滑動(dòng)頁(yè)效果示例
這篇文章主要為大家介紹了Flutter實(shí)現(xiàn)固定header底部滑動(dòng)頁(yè)效果示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12
Android監(jiān)聽滑動(dòng)控件實(shí)現(xiàn)狀態(tài)欄顏色切換
這篇文章給大家分享一個(gè)平時(shí)在滑動(dòng)頁(yè)面經(jīng)常遇到的效果:滑動(dòng)過(guò)程動(dòng)態(tài)修改狀態(tài)欄顏色,文中有詳細(xì)的示例代碼,對(duì)我們的學(xué)習(xí)或工作有一定的幫助,感興趣的小伙伴自己動(dòng)手試試吧2023-08-08
Flutter沉浸式狀態(tài)欄/AppBar導(dǎo)航欄/仿咸魚底部凸起導(dǎo)航欄效果
這篇文章主要介紹了Flutter沉浸式狀態(tài)欄/AppBar導(dǎo)航欄/仿咸魚底部凸起導(dǎo)航欄效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04
Flutter滾動(dòng)組件之ListView使用方法詳解
這篇文章主要為大家詳細(xì)介紹了Flutter滾動(dòng)組件之ListView的使用方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03
Android通過(guò)多點(diǎn)觸控的方式對(duì)圖片進(jìn)行縮放的實(shí)例代碼
這篇文章主要介紹了Android通過(guò)多點(diǎn)觸控的方式對(duì)圖片進(jìn)行縮放的實(shí)例代碼,完成了點(diǎn)擊圖片就能瀏覽大圖的功能,并且在瀏覽大圖的時(shí)候還可以通過(guò)多點(diǎn)觸控的方式對(duì)圖片進(jìn)行縮放。2018-05-05
Android手機(jī)獲取root權(quán)限并實(shí)現(xiàn)關(guān)機(jī)重啟功能的方法
這篇文章主要介紹了Android手機(jī)獲取root權(quán)限并實(shí)現(xiàn)關(guān)機(jī)重啟功能的方法,是Android程序設(shè)計(jì)中非常重要的技巧,需要的朋友可以參考下2014-08-08
Android應(yīng)用中圖片瀏覽時(shí)實(shí)現(xiàn)自動(dòng)切換功能的方法詳解
這篇文章主要介紹了Android應(yīng)用中圖片瀏覽時(shí)實(shí)現(xiàn)自動(dòng)切換功能的方法,文中還講解了一個(gè)觸摸大圖進(jìn)行圖片切換的深入功能,需要的朋友可以參考下2016-04-04
Android開發(fā)實(shí)現(xiàn)TextView顯示豐富的文本
這篇文章主要介紹了Android開發(fā)實(shí)現(xiàn)TextView顯示豐富的文本,涉及Android中TextView的使用技巧,需要的朋友可以參考下2015-12-12

