Android_自定義View的三種實現方式
阿新 • • 發佈：2019-01-25
自定義控制元件的實現有三種方式，分別是：組合控制元件、繼承控制元件和自繪控制元件
一:組合控制元件
1:新建一個Android專案，建立自定義的佈局檔案add_delete.xml
<?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:orientation="horizontal">
<Button
android:id="@+id/del"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="-" />
<EditText
android:id="@+id/ed_number"
android:layout_width="0dp"
android:layout_weight="1"
android:gravity="center"
android:layout_height="wrap_content" />
<Button
android:id="@+id/add"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="+" />
</LinearLayout> 2:建立AddDelete類,繼承RelativeLayout
本頁面中主要是為自定義的標題欄載入了佈局,為按鈕新增事件監聽方法,獲取與修改EditText的方法
public class AddDelete extends RelativeLayout{ private OnAddDeleteClickListener listener; private EditText ed_number; //對外提供一個點選的回撥介面 interface OnAddDeleteClickListener{ void onAddClick(View v); void onDelClick(View v); } public void setOnAddDeleteClick(OnAddDeleteClickListener listener){ this.listener = listener; } public AddDelete(Context context) { this(context,null); } public AddDelete(Context context, AttributeSet attrs) { this(context, attrs,0); } public AddDelete(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); intiView(context, attrs, defStyleAttr); } private void intiView(Context context, AttributeSet attrs, int defStyleAttr) { View.inflate(context,R.layout.adddelete,this); TextView add = (TextView)findViewById(R.id.add); TextView del = (TextView)findViewById(R.id.del); ed_number = (EditText) findViewById(R.id.ed_number); add.setOnClickListener(new OnClickListener() { @Override public void onClick(View view) { listener.onAddClick(view); } }); del.setOnClickListener(new OnClickListener() { @Override public void onClick(View view) { listener.onDelClick(view); } }); } //對外提供設定EditText值的方法 public void setNumber(int number){ //若果設定的值小於0則不設定 if (number > 0) { ed_number.setText(number + ""); } } //得到控制元件原來的值,並轉成int型別 public int getNumber(){ int number = 0; try { //把值強轉成int型別 number = Integer.valueOf(ed_number.getText().toString().trim()); }catch (Exception e){ number = 0; } return number; } }
3:在activity_main.xml中引入自定義的佈局
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="activity.example.com.view.MainActivity"> <activity.example.com.view.AddDelete android:id="@+id/ad" android:layout_width="wrap_content" android:layout_height="wrap_content"></activity.example.com.view.AddDelete> </RelativeLayout>
4:MainActivity類
public class MainActivity extends AppCompatActivity {
private AddDelete ad;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//獲取id
ad = (AddDelete)findViewById(R.id.ad);
//兩個按鈕的點選事件
ad.setOnAddDeleteClick(new AddDelete.OnAddDeleteClickListener() {
//增加EditText的值
@Override
public void onAddClick(View v) {
int number = ad.getNumber();
number++;
ad.setNumber(number);
}
//減少EditText的值
@Override
public void onDelClick(View v) {
int number = ad.getNumber();
number--;
ad.setNumber(number);
}
});
}
}二:繼承控制元件
1:main_activity佈局檔案中寫
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" tools:context="activity.example.com.view.MainActivity">
<activity.example.com.view.MButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="自定義的button"" />
</RelativeLayout>
2:建立MButton類,繼承Button
public class MButton extends Button{
public MButton(Context context) {
this(context,null);
}
public MButton(Context context, AttributeSet attrs) {
this(context, attrs,0);
}
public MButton(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initView();
}
private void initView() {
//為button設定背景顏色
setBackgroundColor(Color.parseColor("#FF0000"));
}
}
3:自繪控制元件自繪控制元件的內容都是自己繪製出來的，在View的onDraw方法中完成繪製
1:main_activity佈局檔案中寫
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" tools:context="activity.example.com.view.MainActivity">
<activity.example.com.view.MyView
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@color/colorAccent"/>
</RelativeLayout>
2:建立MyView類,繼承Viewpublic class MyView extends View{
public MyView(Context context) {
super(context);
}
public MyView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
}
public MyView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
//自繪控制元件的內容都是自己繪製出來的，在View的onDraw方法中完成繪製,是最重要的方法
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int width = getWidth();
int height = getHeight();
// 繪圖範圍
int react = Math.min(width, height);
// 半徑
int radius = react / 2;
// 繪製最外層的大圓
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setColor(Color.BLACK);
paint.setAntiAlias(true);//消除鋸齒
paint.setStyle(Paint.Style.STROKE);
canvas.drawCircle(radius, radius, radius, paint);
// 畫扇形
paint.reset();
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(20);
paint.setColor(Color.GREEN);
RectF rectF = new RectF();
paint.setAntiAlias(true);//消除鋸齒
rectF.set(10, 10, react-10, react-10);
canvas.drawArc(rectF, -90, progress*360/100, true, paint);
// 畫內層的小圓
paint.reset();
paint.setColor(Color.WHITE);
paint.setAntiAlias(true);//消除鋸齒
paint.setStyle(Paint.Style.FILL_AND_STROKE);
canvas.drawCircle(radius, radius, radius-20, paint);
// 畫進度文字
paint.reset();
paint.setColor(Color.BLUE);
paint.setTextSize(40);
Rect rect = new Rect();
paint.getTextBounds(progress + "", 0, String.valueOf(progress).length(),
rect);
int textWidth = rect.width();
int textHeight = rect.height();
canvas.drawText(progress + "", radius-textWidth/2, radius-textHeight/2, paint);
}
}四:設定自定義view的屬性
1:首先在values資料夾下建立attrs.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="Style">
<attr name="left" format="string"></attr>
<attr name="middle" format="string"></attr>
<attr name="right" format="string"></attr>
<attr name="color" format="color"></attr>
</declare-styleable>
</resources>2:建立的類中
//R.styleable.上面declare-styleable標籤的name
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.Style);
String left = typedArray.getString(R.styleable.Style_left);
String middle = typedArray.getString(R.styleable.Style_middle);
String right = typedArray.getString(R.styleable.Style_right);
int color = typedArray.getColor(R.styleable.Style_color, Color.RED);
控制元件id.setText(left);
控制元件id.setText(middle);
控制元件id.setText(right);
控制元件id.setTextColor(color);
//回收
typedArray.recycle();3:main_activity佈局檔案中寫
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"<!-- 不能少 -->
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" tools:context="activity.example.com.view.MainActivity">
<activity.example.com.view.AddDelete
android:id="@+id/ad"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:left="減"
app:middle="2"
app:right="加"
app:color="#0000FF"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"></activity.example.com.view.AddDelete>
</RelativeLayout>