On the first day of novice notes, customize View (Composite Control)

Keywords: Android xml encoding Attribute

~~~~ The new year has begun. Everyone has made his own life plan and opened a new voyage. In retrospect, I find that I have been a programmer for four or five years, but ask myself, I have not evolved from a rookie into a bull. So when I was young, I decided to change my current life. I hope I can make myself strong by writing articles, as Hong Shen said.
Did you find that many of the technical points we use are very 6, but we always encounter strange bug s or problems. If the interviewer asks you to talk during the interview, it is very likely that the interview will be finished in two or three minutes, and the answer is not ideal. The fundamental reason is that we don't get it completely. If you study it again, you will surely get unexpected results.
After such a long chatter, we begin to get to the point.

Android Custom View mainly includes three implementations: Composite Control, Drawing Control and Inheritance Control.
So today I'm going to talk about composite controls.~

The first step, of course, is to draw layout pages.
<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/ds_30"
    android:paddingRight="@dimen/ds_30"
    android:layout_marginBottom="@dimen/ds_3"
    android:gravity="center_vertical"
    android:orientation="horizontal"
    android:background="#fff">

    <ImageView
        android:id="@+id/mine_item_img"
        android:layout_width="@dimen/ds_81"
        android:layout_height="@dimen/ds_81"
        android:background="@mipmap/ic_launcher"
        android:layout_centerVertical="true" />

    <TextView
        android:id="@+id/mine_item_title"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:layout_centerVertical="true"
        android:layout_marginLeft="@dimen/ds_30"
        android:layout_toRightOf="@+id/mine_item_img"
        android:text="Title"
        android:textColor="#333"
        android:textSize="@dimen/fs_45" />
    <TextView
        android:id="@+id/mine_item_count"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginLeft="@dimen/ds_30"
        android:layout_toRightOf="@+id/mine_item_img"
        android:text="1"
        android:textColor="#999"
        android:textSize="@dimen/fs_42" />

    <ImageView
        android:id="@+id/mine_item_next"
        android:layout_width="@dimen/ds_42"
        android:layout_height="@dimen/ds_42"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:background="@mipmap/icon_more" />

</LinearLayout>
Four elements are arranged horizontally, namely menu icon, title, label and entry icon.

The second step is to create a attribute file attrs.xml in the values directory and add custom attributes to the tags. Here I customize the menu icon, title and number. Of course, we can also customize the size, color and so on.
    <declare-styleable name="MineItemView">
        <attr name="leftImg" format="reference"/>
        <attr name="title" format="string"/>
        <attr name="count" format="string"/>
    </declare-styleable>
The third step is to create a class MineItemView.class, inherit the parent layout type of the layout, take values from a custom property file and assign values to the control:
public class MineItemView extends LinearLayout {

    private TextView countView;
    //Construction method
    public MineItemView(Context context) {
        super(context);
    }

    public MineItemView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView(context, attrs);
    }

    public MineItemView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView(context, attrs);
    }
    //Initialize View
    private void initView(Context context, AttributeSet attrs) {
        LayoutInflater inflater = (LayoutInflater) context
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View view = inflater.inflate(R.layout.widget_mine_item, this, true);
        ImageView leftImg = (ImageView) view.findViewById(R.id.mine_item_img);
        TextView titleView = (TextView) view.findViewById(R.id.mine_item_title);
        countView = (TextView) view.findViewById(R.id.mine_item_count);
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.MineItemView);
        Drawable leftDrawable = typedArray.getDrawable(R.styleable.MineItemView_leftImg);
        String title = typedArray.getString(R.styleable.MineItemView_title);
        String count = typedArray.getString(R.styleable.MineItemView_count);
        typedArray.recycle();
        if(leftDrawable == null){
            leftDrawable = ContextCompat.getDrawable(context, R.mipmap.ic_launcher);
        }
        leftImg.setBackground(leftDrawable);
        if(TextUtils.isEmpty(title)){
            title = "";
        }
        titleView.setText(title);
        if(TextUtils.isEmpty(count)){
            count = "";
        }
        countView.setText(count);
    }
The fourth step is to introduce custom attributes into our home page layout, add custom controls and assign values to custom attributes:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout          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"
    android:orientation="vertical"
    <com.bryan.app.MineItemView
        android:layout_width="match_parent"
        android:layout_height="@dimen/ds_144"
        app:leftImg="@mipmap/ic_launcher"
        app:count="8"
        app:title="My news" />
<LinearLayout />

Note: App in xmlns:app= "http://schemas.android.com/apk/res-auto" can be named at will, just by corresponding in the control. When the code is typed here, let's have a cup of coffee to see how it works.

It was easy and enjoyable to complete a practical customized View. Of course, we can do some more complex Views in the same way. Let's call it a day.~

* New arrival, dedicated to learning, if there are problems, please correct. *

Posted by sing2trees on Wed, 27 Mar 2019 07:18:28 -0700