Android中如何自定义View
2016-10-08 21:24
471 查看
我们在做界面的时候发现界面中很多条条目目很相似,只是内容或背景不同,样式基本是一样的,导致开发者一直在重复写一样的代码,在我们看来完全可以作为一个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
4000
_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);
}
}
效果如下
首先我们需要为自定义的控件写一个模版,并为每个组件设定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
4000
_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);
}
}
效果如下
相关文章推荐
- 如何实现自定义的android WebView错误页
- 在android中如何自定义ViewGroup
- Android View绘制流程,如何自定义View
- Android自定义view---如何使文本居中显示
- 【Android】如何在自定义View中设置自定义的属性
- android 如何自定义view
- android 自定义Dialog如何控制View显示位置
- Android自定义View:如何实现一个模拟时钟?
- Android 自定义view-如何设置TextView drawableLeft 图片大小?
- Android 如何 画 柱状图 -------自定义View
- Android如何不用setCustomView而实现ActionBar的自定义修改
- Android View 如何去自定义View
- Android 如何保存与恢复自定义View的状态?
- android中如何使用自定义view,自定义控件属性,及动态自定义控件
- Android 自定义view(二) 如何实现自定义组件
- Android 自定义View修炼-如何打造Android自定义的下拉列表框控件
- Android如何自定义一个View(一)
- android 桌面小部件(App Widgets)如何显示自定义的view
- Android中如何自定义我们想要的控件(以可以自动获取焦点的TextView为例)
- Android自定义View: 如何实现类钟摆的动画效果?