GridView的用法、自定义控件入门写法和界面切换动画

原创 2016年08月30日 11:10:49

控件GridView的使用:

GridView是让item以数据表格的形式来显示布局。如果是单列表形式就使用Listview,如果是多行多列网格形式优先是使用GridView,一般用于显示图片,图片等内容,比如实现九宫格图,用GridView是首选,也是最简单的。

常用的xml属性:

android:columnWidth   --设置列的宽度,也就是item的宽度

android:verticalSpacing="10dp"----------垂直边距,就是行间距,九宫格就是指上下格之间的间隙距离

android:horizontalSpacing="10dp"-------水平边距,就是列间距,九宫格就是指左右格之间的间隙距离

android:numColumns=”auto_fit”   列数设置为自动 

android:numColumns=”3” 可以可接受一个 正整数的列数 ,设置只有3列

android:stackFromBottom="true" //设置为true时,你做好的列表就会显示你列表的最下面

用法跟listview是一样的,设置数据适配器,写出item的布局文件。看下面例子:

定义的item的xml文件:

<span style="font-size:24px;"><?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:orientation="vertical" >
    <ImageView 
        android:id="@+id/iv_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/ic_launcher"
        />
    
    <TextView 
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:textColor="#FFB5C5"
        android:text="模板标题"/>

</LinearLayout></span>
主界面布局.xml

<span style="font-size:24px;"><?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="vertical" >

    <!-- 将对应属性抽取到样式中 -->

    <TextView
        style="@style/TitleStyle"
        android:text="功能列表" />

<TextView 
        android:text="啊   五环  你比四环多一环   啊   五环  你比六环少一环  终于有一天    你会修到七环
修到七环怎么办   你比五环多两环"
	android:textColor="#000"
	android:singleLine="true"
	android:padding="5dp"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:ellipsize="marquee"
	android:focusable="true"
	android:marqueeRepeatLimit="marquee_forever"
	android:focusableInTouchMode="true"/>
    

   <!--  <com.itheima.mobilesafe74.view.FocusTextView
        android:text="啊  五环  你比四环多一环   啊  五环  你比六环少一环  终于有一天 你会修到七环
修到七环怎么办   你比五环多两环"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ellipsize="marquee"
        android:focusableInTouchMode="true"
        android:marqueeRepeatLimit="marquee_forever"
        android:padding="5dp"
        android:singleLine="true"
        android:textColor="#000" >
    </com.itheima.mobilesafe74.view.FocusTextView> -->
    <!-- verticalSpacingz.指定垂直方法格与格间距 -->
    <GridView
        android:id="@+id/gv_home"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:numColumns="3"
        android:stackFromBottom="true"
        android:verticalSpacing="10dp">
        
    </GridView>

</LinearLayout></span>
主界面java:以黑马的手机卫士的主界面的九宫格为例

<span style="font-size:24px;">package com.itheima.mobilesafe74.activity;

import com.itheima.mobilesafe74.R;
import com.itheima.mobilesafe74.utils.ConstantVaule;
import com.itheima.mobilesafe74.utils.Md5Util;
import com.itheima.mobilesafe74.utils.SpUtil;
import com.itheima.mobilesafe74.utils.ToastUtil;

import android.app.Activity;
import android.app.AlertDialog;
import android.app.AlertDialog.Builder;
import android.content.Intent;
import android.os.Bundle;
import android.text.TextUtils;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.BaseAdapter;
import android.widget.Button;
import android.widget.EditText;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.TextView;

public class HomeActivity extends Activity {
	private GridView gv_home;
	private String[] mTitleStrs;
	private int[] mDrawableIDs;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_home);

		initUI();
		// 初始化数据
		initDate();
	}

	private void initDate() {
		mTitleStrs = new String[] { "手机防盗", "通信卫士", "软件管理", "进程管理",</span>
<span style="font-size:24px;"> <span style="white-space:pre">			</span>"流量统计", "手机杀毒", "缓冲清理", "高级工具", "设置中心" };
		mDrawableIDs = new int[] { R.drawable.home_safe, R.drawable.home_callmsgsafe,</span>
<span style="font-size:24px;"><span style="white-space:pre">				</span> R.drawable.home_apps,R.drawable.home_taskmanager,</span>
<span style="font-size:24px;"><span style="white-space:pre">				</span> R.drawable.home_netmanager, R.drawable.home_trojan,
				R.drawable.home_sysoptimize, R.drawable.home_tools, </span>
<span style="font-size:24px;"><span style="white-space:pre">				</span>R.drawable.home_settings };
		// 九宫格控件设置数据适配器
		gv_home.setAdapter(new MyAdapter());
		// 注册九宫格的单个点击事件
		gv_home.setOnItemClickListener(new OnItemClickListener() {

			@Override
			// position点中条目的索引
			public void onItemClick(AdapterView<?> parent, View view, </span>
<span style="font-size:24px;"><span style="white-space:pre">			</span>int position, long id) {
				switch (position) {
				case 0:
					// 开启对话框
					showDialog();
					break;
				case 8:
		Intent intent = new Intent(getApplicationContext(), SettingActivity.class);
		startActivity(intent);
		break;

				}
			}

		});
	}

	

	class MyAdapter extends BaseAdapter {

		@Override
		public int getCount() {
			// 条目的总数 ,为九宫格格数
			return 9;
		}

		@Override
		public Object getItem(int position) {
			return mTitleStrs[position];
		}

		@Override
		public long getItemId(int position) {
			return position;
		}

		@Override
		public View getView(int position, View convertView, ViewGroup parent) {
			View view = View.inflate(getApplicationContext(),</span>
<span style="font-size:24px;"><span style="white-space:pre">			</span> R.layout.gridview_item, null);
			TextView tv_title = (TextView) view.findViewById(R.id.tv_title);
			ImageView iv_icon = (ImageView) view.findViewById(R.id.iv_icon);

			tv_title.setText(mTitleStrs[position]);
			iv_icon.setBackgroundResource(mDrawableIDs[position]);

			return view;
		}

	}

	private void initUI() {
		gv_home = (GridView) findViewById(R.id.gv_home);

	}
}</span>

效果图:


设置了适配器,跟listview用法上没有什么区别。


自定义控件入门

对于产品在android标准控件库中没有满足要求的,或者要根据一些判断来显示的控件,某些布局会被重复的利用,同一个布局的XML代码块会被重复的复制黏贴多次,则需要自己去自定义一个。

自定义控件的步骤:

0,在工程目录res/values目录下,创建一个arrts.xml文件,自定义属性

1,写一个自定义控件类,这个类就是你的自定义控件的实现:

2,复写其构造方法

3,在布局文件中定义出 引用自定义控件的方法

4,实现自定义的逻辑和需求


例子:

第0步:在工程目录res/values目录下,创建一个arrts.xml文件,自定义属性

styleable name 为要继承于控件的类名

<span style="font-size:24px;"><?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="com.itheima.mobilesafe74.view.SettingItemView">
        <attr name="destitle" format="string" />
        <attr name="desoff" format="string" />
        <attr name="deson" format="string" />
         <attr name="data" format="string" />
    </declare-styleable>

</resources></span>
1步、第2步,第4步一起:

先:定义好了属性集了,接下来我们就需要定义一个Java类,来渲染这段布局,解析这个属性集,并且对象提供修改控件状态的方法,已达到复用的效果。

再:继承RelativeLayout(或者其他ViewGroup子类),复写其构造方法,在构造方法中先渲染布局的视图,然后读取属性集的属性,将默认显示的属性显示到布局上的子控件上即可。

加上:自己要实现的逻辑和需求


<span style="font-size:24px;">package com.itheima.mobilesafe74.view;

import com.itheima.mobilesafe74.R;

import android.content.Context;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.widget.CheckBox;
import android.widget.RelativeLayout;
import android.widget.TextView;
import android.widget.Toast;

public class SettingItemView extends RelativeLayout {
	private CheckBox cb_box;
	private TextView tv_des;
	private String namespace = "http://schemas.android.com/apk/res/com.itheima.mobilesafe74";
	private String namespace2;
	private String mDestitle;
	private String mDesoff;
	private String mDeson;
	private TextView tv_title;

	public SettingItemView(Context context, AttributeSet attrs) {
		this(context,attrs,0);
	}

	public SettingItemView(Context context) {
		this(context, null);
	}


	public SettingItemView(Context context, AttributeSet attrs, int defStyleAttr) {
		super(context, attrs, defStyleAttr);
		//xml转为view对象,将设置的条目转换成view对象
		//this 指SettingItemView对象 直接添加到当前SettingItemView对应view上再放到SettingActivity上面
		View.inflate(context, R.layout.setting_item_view, this);
		
		tv_title = (TextView) findViewById(R.id.tv_title);
		tv_des = (TextView) findViewById(R.id.tv_des);
		cb_box = (CheckBox) findViewById(R.id.cb_box);
		
		//获取自定义以及原生属性的操作,写在此处 AttributeSet attrs中获取
		initAttrs(attrs);
		//获取布局文件中定义的字符串,赋值给自定义组合控件的标题
		tv_title.setText(mDestitle);
	}
	
	/**
	 * 返回属性集合中定义属性属性值
	 * @param attrs  构造方法中维护好的属性集合
	 */
	private void initAttrs(AttributeSet attrs) {
		int attributeCount = attrs.getAttributeCount();
		namespace2 = "http://schemas.android.com/apk/res/com.itheima.mobilesafe74";
		mDestitle = attrs.getAttributeValue(namespace2, "destitle");
		mDesoff = attrs.getAttributeValue(namespace2, "desoff");
		mDeson = attrs.getAttributeValue(namespace2, "deson");
	}

	/**
	 * @return 
	 * 返回当前SettingItemView 是否选择状态 true开启
	 */
	public  boolean isCheck(){
		return cb_box.isChecked();
	}
	
	/**
	 * @param isCheck  是否作为开启的变量,有点击事件确定
	 */
	public void setCheck(boolean isCheck) {
		//当前条目选择的过程中,cb_box的状态也跟随isCheck 变化
		cb_box.setChecked(isCheck);
		if(isCheck){
			//开启,
			tv_des.setText(mDeson);
		}else{
			//关闭
			tv_des.setText(mDesoff);
		}
	}

	
}</span><span style="font-size:18px;">
</span>
必须:一定要在Activity的布局文件中定义出来这个自定义组合控件。布局节点上必须要加上命名空间

xmlns:mobilesafe="http://schemas.android.com/apk/res/com.itheima.mobilesafe74"

<span style="font-size:24px;"><?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:mobilesafe="http://schemas.android.com/apk/res/com.itheima.mobilesafe74"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    
    <TextView 
        style="@style/TitleStyle"
        android:text="设置中心"/>
    
   <!--  <RelativeLayout 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >
        <TextView 
            android:id="@+id/tv_title"
            android:text="自动更新设置"
            android:textColor="#000"
            android:textSize="18sp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
        <TextView 
            android:id="@+id/tv_des"
            android:text="自动更新关闭"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="18sp"
            android:textColor="#000"
            android:layout_below="@id/tv_title"/>

        <CheckBox
            android:id="@+id/cb_box"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true" />
        <View
            android:background="#000"
            android:layout_below="@id/tv_des" 
            android:layout_width="match_parent"
            android:layout_height="1dp"
            />

    </RelativeLayout> -->
    
    <com.itheima.mobilesafe74.view.SettingItemView
        android:id="@+id/siv_update"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        mobilesafe:destitle="自动更新设置"
        mobilesafe:desoff="自动更新关闭"
        mobilesafe:deson="自动更新开启">
    </com.itheima.mobilesafe74.view.SettingItemView>
    <!--SettingView需要在构建布局的时间知道titile和des字符串内容  -->
    <!--自定义属性  相比上面和下面的代码量  -->

</LinearLayout></span>


实现的效果:




根据点击事件来更新布局,和逻辑要求!



界面切换动画:当界面跳转的时候,界面之间的切换动画效果。例子:动画平移的效果

动画平移要先了解平移的原理,平移其实可以看成界面原点的移动。看下图:

这时 上一页进来的动画效果:


下面是   下一页动画效果图:


所以在界面的移动过程中,平移动画的坐标变化如下:

上一页移入动画 (-屏幕宽度,y)------>(0,y)

上一页移出动画 (0,y)-------------->(屏幕宽度,y)

下一页移入动画 (屏幕宽度,y)-------------->(0,y)

下一页移出动画 (0,y)-------------->(-屏幕宽度,y)


例子:

动画效果是要在res文件中创建一个anim的文件,在该文件中写动画效果的xml:

next_in_anim  这是:下一页新界面进来的时候动画:

<span style="font-size:24px;"><?xml version="1.0" encoding="utf-8"?>
<!-- 100%p  屏幕的宽度大小值 -->
<translate
    xmlns:android="http://schemas.android.com/apk/res/android"
     android:fromXDelta="100%p"
     android:toXDelta="0"
     android:duration="500"
     >

</translate></span>


next_out_anim 这是: 下一页旧的界面消失的动画:

<span style="font-size:24px;"><?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
     android:fromXDelta="0"
     android:toXDelta="-100%p"
     android:duration="500"
     >
</translate></span><span style="font-size:18px;">
</span>


pre_in_anim  这是:上一页新的界面进来的动画
<span style="font-size:24px;"><?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
     android:fromXDelta="-100%p"
     android:toXDelta="0"
     android:duration="500"
     >
</translate></span>


pre_out_anim  这是:上一页旧的界面消失的动画

<span style="font-size:24px;"><?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
     android:fromXDelta="0"
     android:toXDelta="100%p"
     android:duration="500"
     >
</translate></span><span style="font-size:18px;">
</span>
注:android:duration="500" 是动画的效果时间 (毫秒)


写完动画后,在程序的调整界面是加上动画:

跳转到上一页

public void prePage(View v) {
		Intent intent = new Intent(getApplicationContext(), Setup1Activity.class);
		startActivity(intent);
		finish();
		overridePendingTransition(R.anim.pre_in_anim, R.anim.pre_out_anim);
	}
跳转到下一页
public void nextPage(View v) {
		
		Intent intent = new Intent(getApplicationContext(), Setup3Activity.class);
		startActivity(intent);
		finish();
		
		overridePendingTransition(R.anim.next_in_anim, R.anim.next_out_anim);
	}

也有的效果是直接跳转的,取消了动画效果,系统自动的也消除了。

跳转到上一页

<span style="font-size:18px;">public void prePage(View v) {
		Intent intent = new Intent(getApplicationContext(), Setup1Activity.class);
		startActivity(intent);
		finish();
		overridePendingTransition(0,0);
	}</span>
跳转到下一页
public void nextPage(View v) {
		
		Intent intent = new Intent(getApplicationContext(), Setup3Activity.class);
		startActivity(intent);
		finish();
		
		overridePendingTransition(0, 0);
	}










版权声明:本文为博主原创文章,未经博主允许不得转载。

自定义GridView控件 代码

  • 2017年08月09日 09:05
  • 9KB
  • 下载

Android GridView控件自定义

虽然Android已自带了GridView,但是,却不够灵活,同时也不能自由添加控件,因此,本人通过需要进一步封装,来实现Android自定义GridView控件,达到自己需要的效果。 我们看一...
  • jdsjlzx
  • jdsjlzx
  • 2012年05月01日 14:48
  • 13223

GridView的用法、自定义控件入门写法和界面切换动画

控件GridView的使用: GridView是让item以数据表格的形式来显示布局。如果是单列表形式就使用Listview,如果是多行多列网格形式优先是使用GridView,一般用于显示图片,...
  • It_BeeCoder
  • It_BeeCoder
  • 2017年07月25日 11:23
  • 215

Android 自定义GridView,解决嵌套Grideview的显示不完全的问题

解决嵌套Grideview的显示不完全的问题,在这里自定义一个GridView组件继承于原来的GridView,重写onMeasure方法重绘组件,然后替换布局文件中GridView布局即可。pack...
  • qq_20785431
  • qq_20785431
  • 2016年04月02日 14:18
  • 2413

安卓:自定义适配器实现GridView图文混排

安卓:自定义适配器实现GridView图文混排
  • wangyi201212
  • wangyi201212
  • 2015年02月06日 16:18
  • 3214

自定义类似Gridview 不同行列数不同 的显示控件

显示不同行不同列的数据,使用的适配器必须与 自己的显示控件对应,适配器也需要重新定义, 控件如下 import java.util.LinkedList; import java.util.Que...
  • qiuhaipeng1
  • qiuhaipeng1
  • 2015年08月26日 10:34
  • 1341

GridView控件详解

GridView是ASP.NET 1.x的DataGrid控件的后继者。它提供了相同的基本功能集,同时增加了大量扩展和改进。如前所述,DataGrid(ASP.NET 2.0仍然完全支持)是一个功能非...
  • yangmingxing980
  • yangmingxing980
  • 2014年04月17日 15:57
  • 3454

Android 自定义九宫格控件Gridview用法以及属性

九宫格控件Gridview让人熟悉又陌生,它适配器跟listview差不多,常用都是继承baseAdapt 就能快速完成一个适配器,适配器里面的item也可以根据具体情况来写。那在本博客主要是了解Gr...
  • qq_16064871
  • qq_16064871
  • 2015年09月19日 07:56
  • 1783

安卓GridView(自定义适配器)

先贴布局:就放了一个GridView
  • summer_ck
  • summer_ck
  • 2016年03月25日 17:56
  • 4194

GridView控件的简单使用

如果是多行单列,使用listview; 如果是多行多列,使用gridview;activity_main.xml
  • CL18652469346
  • CL18652469346
  • 2016年11月29日 16:08
  • 1256
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:GridView的用法、自定义控件入门写法和界面切换动画
举报原因:
原因补充:

(最多只允许输入30个字)