ios 使用自定义view 如何自定义view

转载

mob6454cc6dac54 2023-11-24 00:22:24

文章标签 ios 使用自定义view android 界面 xml 自定义控件 文章分类 iOS 移动开发

我们在做界面的时候发现界面中很多条条目目很相似，只是内容或背景不同，样式基本是一样的，导致开发者一直在重复写一样的代码，在我们看来完全可以作为一个View来使用，但是Android中又没有这样的View。当然我们可以使用ListView，但是它也并非条目数量太多，一般也不需要变动，而且别的界面也需要，我们更倾向于像使用普通View一样的使用方法，所以使用自定义控件比较方便。

首先我们需要为自定义的控件写一个模版，并为每个组件设定id。

然后我们需要在项目的res/values文件夹中新建一个资源文件，名字只能叫attrs.xml，在其中为需要设置的控件进行声明（使用id标注），确定它们的类型为引用或字符串。

最后我们需要为自定义控件建立一个用来引用的类，当然这个类需要继承自自定义控件最外层的布局，首先通过inflate()方法找到布局，接着找出控件，然后通过TypeArray类为自定义控件中的控件填充需要的数据。

完成后就可以在自己的界面布局文件中使用了，首先需要在最外层布局的属性中声明自定义类的全包名（等于号前面的字符就是使用自定义控件时前面写的关键字，作用同“android”），使用时也要引用全包名，这里使用的属性名即是在attrs文件中填入的id。

以下做一个简单的实现，自定义模版文件如下

<?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:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    android:background="#ffffff"
    android:gravity="center_vertical" >

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:gravity="center_vertical"
        android:orientation="horizontal" >
		<!-- 自定义控件中的控件需要有引用类型或字符串类型的属性，在使用时这里的值会被覆盖 -->
        <ImageView
            android:id="@+id/image_daohang1"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_marginLeft="15dp"
            android:src="@drawable/yule" />

        <TextView
            android:id="@+id/text_daohang1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="40dp"
            android:text="娱乐"
            android:textSize="18dp" />
    </LinearLayout>

    <View
        android:id="@+id/view"
        android:layout_width="0.5dp"
        android:layout_height="40dp"
        android:layout_centerInParent="true"
        android:background="#eeeeee" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentRight="true"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        android:layout_toRightOf="@id/view">

        <ImageView
            android:id="@+id/image_daohang2"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_marginLeft="15dp"
            android:src="@drawable/fengyunbang" />

        <TextView
            android:id="@+id/text_daohang2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="40dp"
            android:text="风云榜"
            android:textSize="18dp" />
    </LinearLayout>

</RelativeLayout>

attrs.xml文件如下

<?xml version="1.0" encoding="utf-8"?>
<resources>
    
    <declare-styleable name="myViewii">
        <attr name="image_daohang1" format="reference"></attr>
        <attr name="text_daohang1" format="string"></attr>
        <attr name="image_daohang2" format="reference"></attr>
        <attr name="text_daohang2" format="string"></attr>
    </declare-styleable>

</resources>

自定义类文件如下

import android.annotation.SuppressLint;
import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.view.View;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;

public class MyViewII extends RelativeLayout{
	private ImageView image_daohang1,image_daohang2;
	private TextView text_daohang1,text_daohang2;
	@SuppressLint("Recycle")
	public MyViewII(Context context, AttributeSet attrs) {
		super(context, attrs);
		initviewii(context);
		//资源文件和布局文件的匹配
		TypedArray type = context.obtainStyledAttributes(attrs, R.styleable.myViewii);
		//通过TypeArray获取内容并赋值
		image_daohang1.setImageDrawable(type.getDrawable(R.styleable.myViewii_image_daohang1));
		text_daohang1.setText(type.getString(R.styleable.myViewii_text_daohang1));
		image_daohang2.setImageDrawable(type.getDrawable(R.styleable.myViewii_image_daohang2));
		text_daohang2.setText(type.getString(R.styleable.myViewii_text_daohang2));
		
	}
	public void initviewii(Context context){
		//获取布局和控件
		View view = View.inflate(context, R.layout.myviewii, this);
		image_daohang1 = (ImageView) view.findViewById(R.id.image_daohang1);
		text_daohang1 = (TextView) view.findViewById(R.id.text_daohang1);
		image_daohang2 = (ImageView) view.findViewById(R.id.image_daohang2);
		text_daohang2 = (TextView) view.findViewById(R.id.text_daohang2);
	}
}

布局文件如下

<!--
 必须在最外层属性中声明xmlns，briup为自定义的关键词，
“http://schemas.android.com/apk/res/”这段是必须要写的，
“com.briup.qiyapp”全包名
-->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:briup="http://schemas.android.com/apk/res/com.briup.qiyapp"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ececec" >

    <RelativeLayout
        android:id="@+id/qiy_rl_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#000000"
        android:paddingBottom="5dp"
        android:paddingTop="5dp" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="导航"
            android:textColor="#ffffff"
            android:textSize="20sp" />

        <ImageView
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:src="@drawable/fangdajing" />
    </RelativeLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/qiy_rl_title"
        android:layout_marginTop="10dp"
        android:orientation="vertical" >
		<!-- 自定义控件的使用方式：全包名+类名，带briup的即为自定义属性 -->
        <com.briup.qiyapp.MyViewII
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            briup:image_daohang1="@drawable/yule"
            briup:image_daohang2="@drawable/fengyunbang"
            briup:text_daohang1="娱乐"
            briup:text_daohang2="风云榜" />

        <com.briup.qiyapp.MyViewII
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            briup:image_daohang1="@drawable/tiyu"
            briup:image_daohang2="@drawable/zhibozhongxin"
            briup:text_daohang1="体育"
            briup:text_daohang2="直播中心" />

        <com.briup.qiyapp.MyViewII
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            briup:image_daohang1="@drawable/zixun"
            briup:image_daohang2="@drawable/quanwangyingshi"
            briup:text_daohang1="咨询"
            briup:text_daohang2="全网影视" />

        <com.briup.qiyapp.MyViewII
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            briup:image_daohang1="@drawable/dianying"
            briup:image_daohang2="@drawable/dianshiju"
            briup:text_daohang1="电影"
            briup:text_daohang2="电视剧" />

        <com.briup.qiyapp.MyViewII
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            briup:image_daohang1="@drawable/pianhua"
            briup:image_daohang2="@drawable/zongyi"
            briup:text_daohang1="片花"
            briup:text_daohang2="综艺" />

        <com.briup.qiyapp.MyViewII
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            briup:image_daohang1="@drawable/weidianying"
            briup:image_daohang2="@drawable/tuokouxiu"
            briup:text_daohang1="微电影"
            briup:text_daohang2="脱口秀" />

        <com.briup.qiyapp.MyViewII
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            briup:image_daohang1="@drawable/gongkaike"
            briup:image_daohang2="@drawable/guanggao"
            briup:text_daohang1="公开课"
            briup:text_daohang2="广告" />
    </LinearLayout>

</RelativeLayout>

Activity类文件如下

import android.app.Activity;
import android.os.Bundle;
import android.view.Window;
import android.widget.ImageButton;

public class MainActivity extends Activity {
	ImageButton ibLixian,ibTuijian,ibwode,ibdaohang,ibfaxian;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.activity_main);
	}
}

效果如下

ios 使用自定义view 如何自定义view_自定义控件