自定義帶文字的返回按鈕

開發的項目中用到一個帶標題的返回按鈕,其實不難實現,一個ImageView和一個TextView足矣搞定,但是我們每個xml文件都這麼寫,就會有很多重複的代碼,所以我們爲了減少代碼冗餘,就自己自定義一個小控件。

思路:

新建一個類繼承RelativeLayout,然後引入圖片和文字的佈局,在構造兩個方法,設置圖片的值和文字的值,以及點擊事件即可。下面我們就看代碼吧。

xml佈局文件

<RelativeLayout 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:gravity="center_vertical" 
android:background="@null"> 

<RelativeLayout 
android:id="@+id/rl_backview" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:layout_centerVertical="true"> 

<!--圖片--> 
<ImageView 
android:id="@+id/iv_arrows" 
android:layout_width="65dp" 
android:layout_height="50dp" 
android:layout_centerVertical="true" 

/> 

<!-- 文字--> 
<TextView 
android:id="@+id/tv_column" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:layout_centerVertical="true" 
android:layout_toRightOf="@+id/iv_arrows" 
android:textColor="@color/white" 
android:textSize="18sp" 
android:gravity="center_vertical" /> 
<!--android:layout_marginLeft="@dimen/news_lefttext_mleft"--> 
</RelativeLayout> 

</RelativeLayout>



新建的BackView的類:

package com.enlink.newsreader.view;

import android.app.Activity;
import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;

import com.enlink.newsreader.R;


/**
 * 回退按鈕
 * 相當於按回退鍵
 */
public class BackView extends RelativeLayout {

    private Context mContext;
    private RelativeLayout rl_backview;
    private TextView tv_column;
    private ImageView iv_arrows;

    public BackView(Context context) {
        super(context);
        if (!isInEditMode()) {
            initView(context);
        }
    }

    public BackView(Context context, AttributeSet attrs) {
        super(context, attrs);
        if (!isInEditMode()) {
            initView(context);
        }
    }

    public BackView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        if (!isInEditMode()) {
            initView(context);
        }
    }

    private void initView(Context context) {
        mContext = context;
        View backView = View.inflate(mContext, R.layout.backview, null);
        rl_backview = (RelativeLayout) backView.findViewById(R.id.rl_backview);
        iv_arrows = (ImageView) backView.findViewById(R.id.iv_arrows);
        tv_column = (TextView) backView.findViewById(R.id.tv_column);
        this.addView(backView);
        if (mContext instanceof Activity) {
            TitleOnClick titleOnClick = new TitleOnClick();
            titleOnClick.setActivity((Activity) mContext);
            rl_backview.setOnClickListener(titleOnClick);
        }

    }

    public void setTextValue(String articleColumn) {
        tv_column.setText(articleColumn);
    }

    public void setImageSource(int id) {
        iv_arrows.setImageResource(id);
    }

    private class TitleOnClick implements OnClickListener {
        private Activity activity;

        private void setActivity(Activity activity) {
            this.activity = activity;
        }

        @Override
        public void onClick(View view) {
            this.activity.finish();
        }
    }

}
最後是使用:
只要我們在我們想用到這個佈局的地方用這個類即可,如下
<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/top_title_height"
        android:background="@color/Azure">

        <com.autochina.view.BackView
            android:id="@+id/forget_pwd_backView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true">
        </com.autochina.view.BackView>

    </RelativeLayout>

然後在Activity中的onCreate方法中加上
BackView backView = (BackView) findViewById(R.id.backView);
        backView.setImageSource(R.drawable.user_center_back);//set icon
        backView.setTextValue("登入");//set title

他還可以變成別的功能的控件,只要把佈局改一改,然後在BackView類中監聽的方法改改,在構造一些新的功能的方法就可以了。


這種方法一定不是最簡單的方法,所以大家不喜勿噴。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章