Custom properties for android custom controls

  • 2020-05-07 20:23:36
  • OfStack

Custom controls are everywhere in android, and custom controls give us a lot of convenience. For example, a view is a combination of imageview, imagebutton,textview and many other controls, which are used in many places. We cannot write a combination of three at a time, which is a waste of time and inefficient. In this case, we can customize 1 view to replace them, which not only improves the efficiency but also is quite beautiful to use in xml.
1. Control custom properties introduced
In the following example, the code is defined in values/ attrs.xml, and the attributes are freely named.
1. reference: refer to ID.
Example:
[java]
 
<declare-styleable name = " The name of the "> 
<attr name = "background" format = "reference" /> 
<attr name = "src" format = "reference" /> 
</declare-styleable> 

2. color: color value.
Example:
[java]
 
<declare-styleable name = " The name of the "> 
<attr name = "textColor" format = "color" /> 
</declare-styleable> 

3. boolean: Boolean value.
Example:
[java]
 
<declare-styleable name = " The name of the "> 
<attr name = "focusable" format = "boolean" /> 
</declare-styleable> 

4. dimension: dimensions.
Example:
[java]
 
<declare-styleable name = " The name of the "> 
<attr name = "layout_width" format = "dimension" /> 
</declare-styleable> 

float: floating point value.
Example:
[java]
 
<declare-styleable name = " The name of the "> 
<attr name = "fromAlpha" format = "float" /> 
<attr name = "toAlpha" format = "float" /> 
</declare-styleable> 

6. integer: integer value.
Example:
[java]
 
<declare-styleable name = " The name of the "> 
<attr name = "frameDuration" format="integer" /> 
<attr name = "framesCount" format="integer" /> 
</declare-styleable> 

7. string: string.
Example:
[java]
 
<declare-styleable name = " The name of the "> 
<attr name = "text" format = "string" /> 
</declare-styleable> 

8. fraction: percentage.
Example:
[java]
 
<declare-styleable name=" The name of the "> 
<attr name = "pivotX" format = "fraction" /> 
<attr name = "pivotY" format = "fraction" /> 
</declare-styleable> 

9. enum: enumerated values.
Example:
[java]
 
<declare-styleable name=" The name of the "> 
<attr name="orientation"> 
<enum name="horizontal" value="0" /> 
<enum name="vertical" value="1" /> 
</attr> 
</declare-styleable> 

10. flag: bit or operation.
Example:
[java]
 
<declare-styleable name=" The name of the "> 
<attr name="windowSoftInputMode"> 
<flag name = "stateUnspecified" value = "0" /> 
<flag name = "stateUnchanged" value = "1" /> 
<flag name = "stateHidden" value = "2" /> 
<flag name = "stateAlwaysHidden" value = "3" /> 
</attr> 
</declare-styleable> 

11. Multi-type.
Example:
[java]
 
<declare-styleable name = " The name of the "> 
<attr name = "background" format = "reference|color" /> 
</declare-styleable> 

-------------------------------------------------------------------------------------------
2. Use of properties and implementation of custom controls
1. Conceive the component elements of the control and think about the required custom attributes.
I'll make one < Shaded button with text right below the button > (similar to 9 palace button)
New values/attrs xml
[java]
 
<?xml version="1.0" encoding="utf-8"?> 
<resources> 
<declare-styleable name="custom_view"> 
<attr name="custom_id" format="integer" /> 
<attr name="src" format="reference" /> 
<attr name="background" format="reference" /> 
<attr name="text" format="string" /> 
<attr name="textColor" format="color" /> 
<attr name="textSize" format="dimension" /> 
</declare-styleable> 
</resources> 

Above, custom_view, custom_id is the button id, src is the button, background is the shaded background, text is the button description, textColor is the font color, textSize is the font size.
2. How to customize the control and how to use these properties? Without further elaboration, please look at the code, CustomView:
 
package com.nanlus.custom; 
import com.nanlus.custom.R; 
import android.content.Context; 
import android.content.res.TypedArray; 
import android.graphics.Color; 
import android.graphics.drawable.Drawable; 
import android.util.AttributeSet; 
import android.view.Gravity; 
import android.view.View; 
import android.view.View.OnClickListener; 
import android.widget.FrameLayout; 
import android.widget.ImageButton; 
import android.widget.ImageView; 
import android.widget.TextView; 
public class CustomView extends FrameLayout implements OnClickListener { 
private CustomListener customListener = null; 
private Drawable mSrc = null, mBackground = null; 
private String mText = ""; 
private int mTextColor = 0; 
private float mTextSize = 20; 
private int mCustomId = 0; 
private ImageView mBackgroundView = null; 
private ImageButton mButtonView = null; 
private TextView mTextView = null; 
private LayoutParams mParams = null; 
public CustomView(Context context) { 
super(context); 
} 
public CustomView(Context context, AttributeSet attrs) { 
super(context, attrs); 
TypedArray a = context.obtainStyledAttributes(attrs, 
R.styleable.custom_view); 
mSrc = a.getDrawable(R.styleable.custom_view_src); 
mBackground = a.getDrawable(R.styleable.custom_view_background); 
mText = a.getString(R.styleable.custom_view_text); 
mTextColor = a.getColor(R.styleable.custom_view_textColor, 
Color.WHITE); 
mTextSize = a.getDimension(R.styleable.custom_view_textSize, 20); 
mCustomId = a.getInt(R.styleable.custom_view_custom_id, 0); 
mTextView = new TextView(context); 
mTextView.setTextSize(mTextSize); 
mTextView.setTextColor(mTextColor); 
mTextView.setText(mText); 
mTextView.setGravity(Gravity.CENTER); 
mTextView.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, 
LayoutParams.WRAP_CONTENT)); 
mButtonView = new ImageButton(context); 
mButtonView.setImageDrawable(mSrc); 
mButtonView.setBackgroundDrawable(null); 
mButtonView.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, 
LayoutParams.WRAP_CONTENT)); 
mButtonView.setOnClickListener(this); 
mBackgroundView = new ImageView(context); 
mBackgroundView.setImageDrawable(mBackground); 
mBackgroundView.setLayoutParams(new LayoutParams( 
LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT)); 
addView(mBackgroundView); 
addView(mButtonView); 
addView(mTextView); 
this.setOnClickListener(this); 
a.recycle(); 
} 
@Override 
protected void onAttachedToWindow() { 
super.onAttachedToWindow(); 
mParams = (LayoutParams) mButtonView.getLayoutParams(); 
if (mParams != null) { 
mParams.gravity = Gravity.CENTER_HORIZONTAL | Gravity.TOP; 
mButtonView.setLayoutParams(mParams); 
} 
mParams = (LayoutParams) mBackgroundView.getLayoutParams(); 
if (mParams != null) { 
mParams.gravity = Gravity.CENTER_HORIZONTAL | Gravity.TOP; 
mBackgroundView.setLayoutParams(mParams); 
} 
mParams = (LayoutParams) mTextView.getLayoutParams(); 
if (mParams != null) { 
mParams.gravity = Gravity.CENTER_HORIZONTAL | Gravity.BOTTOM; 
mTextView.setLayoutParams(mParams); 
} 
} 
public void setCustomListener(CustomListener l) { 
customListener = l; 
} 
@Override 
public void onClick(View v) { 
if (customListener != null) { 
customListener.onCuscomClick(v, mCustomId); 
} 
} 
public interface CustomListener { 
void onCuscomClick(View v, int custom_id); 
} 
} 

The code is very simple. Without further explanation, let's take a look at how our CustomView works.
3. Use of custom controls
Without further details, please look at the code, main.xml:
[java]
 
<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:nanlus="http://schemas.android.com/apk/res/com.nanlus.custom" 
android:layout_width="fill_parent" 
android:layout_height="fill_parent" > 
<LinearLayout 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:layout_centerHorizontal="true" 
android:layout_centerVertical="true" 
android:orientation="horizontal" > 
<com.nanlus.custom.CustomView 
android:id="@+id/custom1" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:layout_weight="1" 
nanlus:background="@drawable/background" 
nanlus:custom_id="1" 
nanlus:src="@drawable/style_button" 
nanlus:text=" button 1" > 
</com.nanlus.custom.CustomView> 
</LinearLayout> 
</RelativeLayout> 

I need to explain 1 here,
xmlns:nanlus="http://schemas.android.com/apk/res/com.nanlus.custom"
nanlus is the prefix in xml, com.nanlus.custom is the package name
4. In Activity, directly write the code
[java]
 
package com.nanlus.custom; 
import android.os.Bundle; 
import android.view.View; 
import android.widget.ImageButton; 
import android.widget.ImageView; 
import android.widget.TextView; 
import android.widget.Toast; 
import com.nanlus.BaseActivity; 
import com.nanlus.custom.R; 
import com.nanlus.custom.CustomView.CustomListener; 
public class CustomActivity extends BaseActivity implements CustomListener { 
@Override 
protected void onCreate(Bundle savedInstanceState) { 
super.onCreate(savedInstanceState); 
setContentView(R.layout.main); 
((CustomView) this.findViewById(R.id.custom1)).setCustomListener(this); 
} 
@Override 
public void onCuscomClick(View v, int custom_id) { 
switch (custom_id) { 
case 1: 
Toast.makeText(this, "hello !!!", Toast.LENGTH_LONG).show(); 
break; 
default: 
break; 
} 
} 
} 

Related articles: