Custom View for Android Development

Keywords: Android Attribute REST xml

stay Custom View for Android Development (1) The most complex custom View is explained in, and the rest two are finished this time ~ ~ ~ go,go,go

Inherit the original control and modify it based on the original control, such as TextView, which is common and simple. This is explained by implementing a TextView example that displays bold text.

1. Custom attribute

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="BoldTextView">
        <attr name="textIsBlod" format="boolean" />
    </declare-styleable>

</resources>

2. Create a class that inherits from TextView. It's very simple. The contents are all mentioned above

public class BoldTextView extends TextView
{

    private TextPaint paint;

    public BoldTextView(Context context, AttributeSet attrs)
    {
        super(context, attrs);

        TypedArray params = context.obtainStyledAttributes(attrs,
                R.styleable.BoldTextView);
        // Gets the property value of the custom control.
        boolean textIsBlod = params.getBoolean(
                R.styleable.BoldTextView_textIsBlod, false);
        setTextblod(textIsBlod);

        params.recycle();
    }

    // To set bold is to thicken the brush
    public void setTextblod(boolean textblod)
    {
        if (textblod)
        {
            paint = super.getPaint();
            paint.setFakeBoldText(true);
        }
    }
}

3, layout

<com.example.diyview.BoldTextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Can you see the bold type?"
        android:textSize="30sp"
        app:textIsBlod="true" />

4. Operation test

Customize View4.png
Reassembly is also common. To achieve a picture text button example to explain.

1. Custom attribute

 <declare-styleable name="ImgBtn">
        <attr name="imgbtn_title" format="string" />
        <attr name="imgbtn_icon" format="reference" />
 </declare-styleable>

2. Layout of combined control

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    android:padding="@dimen/activity_vertical_margin" >

    <ImageView
        android:id="@+id/icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

3. Create a class to inherit from LinearLayout

public class ImgBtn extends LinearLayout
{
    private TextView title;
    private ImageView icon;

    public ImgBtn(Context context)
    {
        super(context);

    }

    public ImgBtn(Context context, AttributeSet attrs)
    {
        super(context, attrs);

        // Loading layout
        LayoutInflater.from(context).inflate(R.layout.diy_view, this, true);

        // Find controls
        title = (TextView) findViewById(R.id.title);
        icon = (ImageView) findViewById(R.id.icon);

        // set a property
        TypedArray params = context.obtainStyledAttributes(attrs,
                R.styleable.ImgBtn);

        int resId = params.getResourceId(R.styleable.ImgBtn_imgbtn_icon,
                R.drawable.ic_launcher);
        // Set chart
        setIcon(resId);
        String title = params.getString(R.styleable.ImgBtn_imgbtn_title);
        // Set text
        setTitle(title);

        params.recycle();
    }

    public void setIcon(int resId)
    {
        icon.setImageResource(resId);

    }

    public void setTitle(String text)
    {

        title.setText(text);
    }

}


3. Activity layout

<com.example.diyview.ImgBtn
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:imgbtn_icon="@drawable/icon_set"
        app:imgbtn_title="Set up" />

4. Operation test

Customize View5.png

Posted by dcampbell18 on Sat, 07 Dec 2019 22:59:19 -0800