android : custom view

    xiaoxiao2021-03-25  170

    创建一个自定义view一般需要四步; 1.自定义view的属性 2.在View的构造方法中获得我们自定义的属性,重写父类的方法,及自定义方法 3.在Layout中调用 4.在activity中处理

    1. 自定义view

    1.1 自定义view属性 在res/values/下建立attrs.xml, 在里面定义view的属性和声明

    <?xml version="1.0" encoding="utf-8"?> <resources> <attr name="titleText" format="string" /> <attr name="titleTextColor" format="color" /> <attr name="titleTextSize" format="dimension" /> <declare-styleable name="CompassView"> <attr name="titleText" /> <attr name="titleTextColor" /> <attr name="titleTextSize" /> </declare-styleable> </resources>

    1.2 在View的构造方法中获得我们自定义的属性,重写父类的方法,及自定义方法 onMeasure方法 新的视图将会计算出它在一系列给定的边界条件下占据的高度和宽度。

    @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { //int height = View.MeasureSpec.getSize(heightMeasureSpec); int width = View.MeasureSpec.getSize(widthMeasureSpec); setMeasuredDimension(width,width); }

    onDraw方法 在绘制完Canvas对象时 调用invalidate或者postInvalidate方法自动调用onDraw。

    @Override protected void onDraw(Canvas canvas) { int centre = getWidth() / 2; // 获取圆心的x坐 WindowManager wm = (WindowManager)getContext().getSystemService(Context.WINDOW_SERVICE); @SuppressWarnings("deprecation") int width = wm.getDefaultDisplay().getWidth(); int radius = (int)(width * 0.309);// 半径 mPaint.setStrokeWidth(25); // 设置圆环的宽度 mPaint.setAntiAlias(true); // 消除锯齿 mPaint.setARGB(255, 230, 96, 100); mPaint.setStyle(Paint.Style.STROKE); // 设置空心 canvas.drawCircle(width / 2, width / 2, radius, mPaint); }

    1.3 layout中调用 在layout中调用要注意命名空间的声明: XML Namespace (xmlns) 属性 XML 命名空间属性被放置于元素的开始标签之中,并使用以下的语法: xmlns:namespace-prefix=”namespaceURI” 例如: xmlns:akuarius=”http://schemas.android.com/apk/com.akuarius.CompassView”

    在接下来自定义属性的赋值时,要指定命名空间:

    <com.akuarius.CompassView android:layout_width="120dp" android:layout_height="120dp" android:layout_alignParentTop="true" android:layout_marginTop="20dp" android:layout_centerHorizontal="true" akuarius:titleTextSize="15dp" akuarius:titleTextColor="#D4F668 akuarius:titleText="20"/>

    onDraw方法 用于在画布上进行绘图。

    处理用户交互事件 onKeyUp, onKeyDown, onTrackballEvent, onTouchEvent

    响应点击事件(自定义button) 通过添加OnclickListener接口来响应点击事件

    public class CustomView extends View implements OnClickListener { public CustomView(Context context, AttributeSet attrs) { super(context, attrs); setOnClickListener(this); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); } @Override public void onClick(View v) { doSomething(); } }

    2. 组合view

    最常见的组合控件便是标题栏了,通常左边一个返回案件,中间是title,右边一个设置按键。那么它是如何实现了呢?

    在上面的自定义view中,空间UI的实现是通过画布来实现的,没有调用布局,但自定义控件也是可以调用布局的。 Title.xml

    <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="50dp" android:background="#ffcb05" > <Button android:id="@+id/button_left" android:layout_width="60dp" android:layout_height="40dp" android:layout_centerVertical="true" android:layout_marginLeft="5dp" android:background="@drawable/back_button" android:text="Back" android:textColor="#fff" /> <TextView android:id="@+id/title_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="This is Title" android:textColor="#fff" android:textSize="20sp" /> </RelativeLayout>

    然后是title_view的构造:

    public class TitleView extends FrameLayout { private Button Button; private TextView titleText; public TitleView(Context context, AttributeSet attrs) { super(context, attrs); LayoutInflater.from(context).inflate(R.layout.title, this); titleText = (TextView) findViewById(R.id.title_text); Button = (Button) findViewById(R.id.button_left); Button.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { ((Activity) getContext()).finish(); } }); } public void setTitleText(String text) { titleText.setText(text); } public void setButtonText(String text) { Button.setText(text); } public void setButtonListener(OnClickListener l) { Button.setOnClickListener(l); } }

    这里面使用了LayoutInflater来加载布局。

    3. 继承view

    转载请注明原文地址: https://ju.6miu.com/read-1541.html

    最新回复(0)