Android custom combination View step by step

Android custom combination View step by step
Android custom View combination View

Android custom View combination View pre-order design drawing UI effect implementation idea implement inheritance LinearLayout implement external profile definition various required attributes initialize View add some necessary interface methods custom View complete custom view reference implementation

Preface

Recently, I was busy developing an e-commerce B-side APP. Now the latest version is coming online. Just at the end of the year, I had time to stop and sort out what I had written. By the way, I would like to share some of the information with you.

Design Drawing UI Effect

Here we will introduce the implementation of the UI effect in the next three parts. We can see that these parts are similar, but if you want to write them out one by one with layout, it will not only work a lot, but also cause code redundancy and bloated files in XML files. Obviously, we can implement the effect of a block through custom View, and then include it in the desired place, and the code is concise and nice.

Implementation

The layout of the outermost layer uses LinearLayout. You can use android: layout_weight to control the display ratio of the image part and the text part at the bottom. You can also use LinearLayout to deploy the text. Set android: gravity = "center", and the TextView in it will not be described in detail.

Inherit LinearLayout to implement external Contour

First, write the XML layout file to adjust the effect. The following is the XML code:

Create a new Java code file RecommendedItem. java inherits LinearLayout and loads the preceding layout file using LayoutInflater.

public class RecommendedItem extends LinearLayout {    public static final String TAG = RecommendedItem .class.getSimpleName();    private Context mContext;    private boolean isDataSet = false;    private float titleTextSize, newPriceTextSize, oldPriceTextSize;    private RemoteImageView mItemCover;    private TextView mItemTitle, mItemNewPrice, mItemOldPrice;    private LinearLayout mPriceLayout, mRootLayout;    public RecommendedItem (Context context) {        super(context);        init(context, null);    }    public RecommendedItem (Context context, AttributeSet attrs) {        super(context, attrs);        init(context, attrs);    }    @SuppressLint(NewApi)    public RecommendedItem (Context context, AttributeSet attrs,            int defStyle) {        super(context, attrs, defStyle);        init(context, attrs);    }    private void init(Context context, AttributeSet attrs) {        mContext = context;   LayoutInflater.from(context).inflate(R.layout.v2_recommended_item, this, true);    }}

Define various required attributes

Create the attrs. xml file in the values folder and add the View attributes we need.

Then we can reference these attributes in the XML file. In the init method of the RecommendedItem class, we can get the values of these attributes written in the XML file.

TypedArray array = context. obtainStyledAttributes (attrs, R. styleable. recommendedItem); this. titleTextSize = array. getDimension (R. styleable. recommendedItem_title_textsize, 15); this. newPriceTextSize = array. getDimension (R. styleable. recommendedItem_newPrice_textsize, 15); this. oldPriceTextSize = array. getDimension (R. styleable. recommendedItem_oldPrice_textsize, 12); array. recycle (); // It must be called. Otherwise, this setting will affect Log usage. d (TAG, this. titleTextSize = + this. titleTextSize); Log. d (TAG, this. newPriceTextSize = + this. newPriceTextSize); Log. d (TAG, this. oldPriceTextSize = + this. oldPriceTextSize );

Initialize View

@Overrideprotected void onFinishInflate() {    super.onFinishInflate();    this.mItemCover = (RemoteImageView) this.findViewById(R.id.recommended_item_front_cover);    this.mItemTitle = (TextView) this.findViewById(R.id.recommended_item_title);    this.mItemNewPrice = (TextView) this.findViewById(R.id.recommended_item_newprice);    this.mItemOldPrice = (TextView) this.findViewById(R.id.recommended_item_oldprice);    this.mPriceLayout = (LinearLayout) this.findViewById(R.id.recommended_item_price_layout);    this.mRootLayout = (LinearLayout) this.findViewById(R.id.recommended_item_root);    this.mItemTitle.setTextSize(this.titleTextSize);    this.mItemNewPrice.setTextSize(this.newPriceTextSize);    this.mItemOldPrice.setTextSize(this.oldPriceTextSize);}

Add some necessary interface methods

A custom View provides an interface for external users to dynamically modify its attributes to achieve the desired display effect.

// Set the Click Event listener public void setOnClickListener (OnClickListener listener) {if (listener! = Null) {this. mRootLayout. setOnClickListener (listener) ;}} public void setItemCover (int resId) {this. mItemCover. setImageResource (resId);} public void setItemCover (String url) {this. mItemCover. setImageUrl (url);} public void setItemCover (Bitmap bitmap, boolean need2Recycle) {this. mItemCover. setImageBitmap (bitmap); if (need2Recycle) {if (bitmap! = Null) {bitmap = null; System. gc () ;}} public void loadItemCover (String remoteUrl) {UILManager. displayImage (remoteUrl, this. mItemCover, UILManager. optionsPicsPreview);} public void setItemTitle (String title) {this. mItemTitle. setText (title);} public String getItemTitle () {if (! TextUtils. isEmpty (this. mItemTitle. getText () {return this. mItemTitle. getText (). toString ();} return null;} public void setItemNewPrice (String newPrice) {this. mItemNewPrice. setText (String. format (mContext. getString (R. string. recommended_item_price_format), newPrice);} public void setItemOldPrice (String oldPrice) {this. mItemOldPrice. setText (String. format (mContext. getString (R. string. recommended_item _ Price_format), oldPrice); this. mItemOldPrice. getPaint (). setFlags (Paint. STRIKE_THRU_TEXT_FLAG);} public void setPriceLayoutVisible (boolean visible) {if (! Visible) {this. mPriceLayout. setVisibility (View. GONE);} else {this. mPriceLayout. setVisibility (View. VISIBLE) ;}} public boolean isDataSet () {return isDataSet;} public void setDataSet (boolean isDataSet) {this. isDataSet = isDataSet; if (isDataSet & this. mPriceLayout. getVisibility () = View. GONE) this. mPriceLayout. setVisibility (View. VISIBLE);} public void clearView () {this. mItemCover. setImageResource (R. drawable. default_loading); this. mItemTitle. setText (null); this. mPriceLayout. setVisibility (View. GONE );}

Custom View completed

So far, the custom View implemented based on the UI design drawing is complete and can be conveniently used in any other layout file.

Reference of custom View

Implementation