前言
Android App開發過程中,經常會遇到系統框架中提供的控件無法滿足我們產品的設計需求,這時候就必須自定義view了,有時候爲了方便,也可以選擇自定義view。
在我看來,android自定義view的實現方式可以分成三種:繼承控件,組合控件和自繪控件。其中,最簡單的就是繼承控件和組合控件。這次分享的便是繼承控件和組合控件的實現方式,下篇文章將會介紹自繪控件的實現方式。
繼承控件
繼承控件不需要我們重新去實現一個控件,只需要去繼承一個現有的控件,然後在這個控件的基礎上增加一些我們需要的新的功能,對外提供調用的接口,就可以形成一個自定義控件了。這種自定義控件的特點就是不僅能夠按照我們的需求加入相應的功能,還可以保留原生控件的所有功能。
比如下面這個自定義view:
package com.eebbk.textplayer;
import android.animation.ObjectAnimator;
import android.content.Context;
import android.util.AttributeSet;
import android.widget.Button;
import com.eebbk.contentview.R;
/**
* Created by zhangshao on 2016/7/26.
*/
public class AudioButton extends Button{
/**
* 按鈕的播放圖片資源
*/
private static final int[] AUDIO_RES_DRAWABLE_IDS = new int[] {
R.drawable.ptr_audio_btn_0,R.drawable.ptr_audio_btn_1,R.drawable.ptr_audio_btn_2
};
public AudioButton(Context context) {
super(context);
}
public AudioButton(Context context, AttributeSet attrs) {
super(context, attrs);
}
public AudioButton(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
/**
* 開始動畫
*/
public void startAudioAnim(){
stopAudioAnim();
ObjectAnimator objectAnimator = ObjectAnimator.ofInt(this, "Anim", 0, AUDIO_RES_DRAWABLE_IDS.length-1);
objectAnimator.setDuration(300);
objectAnimator.setRepeatCount(-1);
objectAnimator.start();
this.setTag(objectAnimator);
}
/**
* 結束動畫
*/
public void stopAudioAnim(){
ObjectAnimator objectAnimator = (ObjectAnimator) this.getTag();
if(objectAnimator != null){
objectAnimator.cancel();
}
}
public void setAnim(int position){
if(position < 0 || position >= AUDIO_RES_DRAWABLE_IDS.length){
return;
}
this.setBackgroundResource(AUDIO_RES_DRAWABLE_IDS[position]);
}
}
使用方法同Button一樣,可以使用:
AudioButton audioBtn = new AudioButton(this);
//其他button的配置
也可以在佈局裏使用,如:
<com.eebbk.textplayer.AudioButton
android:id="@+id/audio_button_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
在需要開始播放動畫的地方調用:audioBtn.startAudioAnim();
在需要結束播放動畫的地方調用:audioBtn.stopAudioAnim();
AudioButton 繼承Button,在原有Button的基礎上,增加按鈕播放動畫和結束動畫,使得AudioButton既可以使用Button的setText()之類原有的方法,也可以使用新增的startAudioAnim()和stopAudioAnim()方法。
萬變不離其宗,TextView、ImageView…等等view都可以繼承,甚至RelativeLayout等ViewGroup也可以繼承,實現最簡單的自定義view。
組合控件
組合控件的用法和繼承控件的用法差不多。定義一個類,繼承LinearLayout或者RelativeLayout等其他ViewGroup,然後增加我們想要的功能。
舉個例子,這裏我就不貼完整代碼了,如ExpandView:
佈局文件layout_english_point_read_expand_view.xml:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="@+id/tv_expand_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/english_bg_expand_no_arrow"
android:clickable="false"
android:gravity="left|top"
android:lineSpacingExtra="@dimen/english_point_read_expand_textview_lineSpacingExtra"
android:textColor="@color/black"
android:textSize="15sp" />
<RelativeLayout
android:id="@+id/iv_show_head_icon_layout_id"
android:layout_width="@dimen/point_read_show_head_icon_width"
android:layout_height="@dimen/point_read_show_head_icon_height"
android:background="@drawable/english_bg_show_head_icon_user"
android:contentDescription="@null"
android:visibility="invisible" >
<com.eebbk.englishpointread.expandview.CircleImageView
android:id="@+id/iv_show_head_icon_user_id"
android:layout_width="@dimen/point_read_show_head_icon_user_width"
android:layout_height="@dimen/point_read_show_head_icon_user_height"
android:layout_marginLeft="@dimen/point_read_show_head_icon_padding_left"
android:layout_marginTop="@dimen/point_read_show_head_icon_padding_top"
android:contentDescription="@null"
android:src="@drawable/english_bg_show_head_icon_empty"
app:border_color="#ffffff"
app:border_width="0dp" />
</RelativeLayout>
<ImageView
android:id="@+id/finger_id"
android:layout_width="@dimen/english_point_read_finger_width"
android:layout_height="@dimen/english_point_read_finger_height"
android:background="@drawable/expand_txt_long_press_finger_anim"
android:visibility="gone" />
<ImageView
android:id="@+id/drag_id"
android:layout_width="@dimen/english_point_read_drag_width"
android:layout_height="@dimen/english_point_read_drag_height"
android:background="@drawable/english_point_read_drag_selector"
android:visibility="visible" />
</FrameLayout>
ExpandView 的實現:
public class ExpandView extends FrameLayout {
public static final String CLICK_SHOW_GUIDE = "click_show_guide";
public static final String NORMAL = "normal";
private Context mContext = null;
private View mRootView = null;
private TextView mExpandContentTv = null;
private RelativeLayout mShowHeadIconLayout = null;
private CircleImageView mShowHeadIconIv = null;
private ImageView mFingerIv = null;
private ImageView mDragIv = null;
private int orderOfClick;
private int pageIndex;
private String chin;
private String eng;
private boolean isExpand = false;
private ExpandTextClickListener mExpandTextClickListener = null;
private ExplainListener mExplainListener = null;
public ExpandView(Context context) {
super(context);
mContext = context;
initView();
}
public ExpandView(Context context, AttributeSet attrs) {
super(context, attrs);
mContext = context;
initView();
}
public void setIsExpand(boolean isExpand) {
this.isExpand = isExpand;
}
@SuppressWarnings("deprecation")
private void initView() {
LayoutInflater inflater = LayoutInflater.from(mContext);
mRootView = inflater.inflate(R.layout.layout_english_point_read_expand_view, this);
mExpandContentTv = (TextView) mRootView.findViewById(R.id.tv_expand_id);
mShowHeadIconLayout = (RelativeLayout) mRootView.findViewById(R.id.iv_show_head_icon_layout_id);
mShowHeadIconIv = (CircleImageView) mRootView.findViewById(R.id.iv_show_head_icon_user_id);
mFingerIv = (ImageView) mRootView.findViewById(R.id.finger_id);
mDragIv = (ImageView) mRootView.findViewById(R.id.drag_id);
}
public void expandText(ClickAreaType mClickAreaType, ManagerIntent mMIInfo) {
//實現放大的操作
}
public void showFingerIv(int rId) {
mFingerIv.setVisibility(View.VISIBLE);
mFingerIv.setBackgroundResource(rId);
AnimationDrawable animDrawable = (AnimationDrawable) mFingerIv.getBackground();
if (animDrawable != null) {
animDrawable.start();
}
}
public void hideFinger() {
AnimationDrawable animDrawable = (AnimationDrawable) mFingerIv.getBackground();
if (animDrawable != null) {
animDrawable.stop();
}
mFingerIv.setVisibility(View.GONE);
}
public void setExplainListener(ExplainListener explainListener) {
this.mExplainListener = explainListener;
/**
* 有些內部類我沒有貼出來,主要是組合控件內,子控件的處理,以及變量的處理
*/
}
ExpandView主要是實現點擊放大等。
具體步驟:
- 新建一個佈局文件xml(你需要的佈局);
- 新建一個類,繼承佈局文件根節點的ViewGroup,如ExpandView佈局文件的根佈局節點是FrameLayout,所以ExpandView繼承了FrameLayout;
- 動態載入佈局文件,然後獲取佈局文件裏的子控件,通過佈局.findViewById()獲取,如ExpandView通過
mRootView.findViewById(),原理和Activity.findViewById()相同; - 實現子控件的相關方法,如點擊事件等;
- 增加你所需要的方法;
然後在activity的佈局裏使用:
<com.eebbk.englishpointread.expandview.ExpandView
android:id="@+id/expand_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true" />
總結
繼承控件和組合控件相比於自繪控件會顯得簡單點,但是自由度不高。很多時候繼承控件,組合控件以及自繪控件都是綜合使用,組合控件裏的子控件也可以使用繼承控件的自定義view。爲了更好的自定義view ,繼承控件和組合控件會採用自繪控件的實現,如重新繪製view的大小和位置等等。