`

ViewStub的使用

阅读更多

ViewStub经常用在ListView中,用来隐藏一些操作,使用起来也很简单,主要就是在ListView的Item中通过一个ViewStub来引用被隐藏的布局文件。监听用户点击Item,判断下当前是可见还是不可见,实时进行状态的转换即可。

效果图如下:

 

 

 

下面看代码:

MainActivity.java: 设置数据源

 

public class MainActivity extends Activity {

	private ListView lvList;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		lvList = (ListView)findViewById(R.id.lv_list);
		List<Map<String, String>> data = new ArrayList<Map<String, String>>();
		Map<String, String> map;
		for(int i = 0; i < 20; i++){
			
			map = new HashMap<String, String>();
			map.put("1234", "1234");
			data.add(map);
		}
		
		MainAdapter mainAdapter = new MainAdapter(this, data);
		lvList.setAdapter(mainAdapter);
	}

}
 

MainAdapter.java:

自定义Adapter,在getView中实现我们的效果:

 

public class MainAdapter extends BaseAdapter {

//	private Context context;
	private List<Map<String, String>> data;
	private LayoutInflater layoutInflater;

	public MainAdapter(Context context, List<Map<String, String>> data) {

//		this.context = context;
		this.data = data;
		layoutInflater = (LayoutInflater) context
				.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
		
	}

	class ViewHolder {
		RelativeLayout rlListItem;// 点击展开或收起ViewStub

		View vsOperations;// 点击后显示的更多的操作
		ImageButton ibCompelete;// 打钩按钮
		ImageButton ibImportant;// 感叹号按钮
		ImageButton ibNotify;// 提醒按钮
		ImageButton ibLove;// 爱心按钮
		ImageButton ibShare;// 分享按钮
	}

	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		final ViewHolder viewHolder;
		if (convertView == null) {

			convertView = layoutInflater.inflate(R.layout.list_item_main_task,
					null);
			viewHolder = new ViewHolder();
			viewHolder.rlListItem = (RelativeLayout) convertView
					.findViewById(R.id.rl_list_item);
			viewHolder.vsOperations = (ViewStub) convertView
					.findViewById(R.id.vs_detail_operations);

			convertView.setTag(viewHolder);
		} else {

			viewHolder = (ViewHolder) convertView.getTag();
			viewHolder.vsOperations.setVisibility(View.GONE);
		}

		viewHolder.rlListItem.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				if (viewHolder.vsOperations.getVisibility() == View.GONE) {
					
					if(viewHolder.vsOperations instanceof ViewStub){
						//关键!
						viewHolder.vsOperations = ((ViewStub)viewHolder.vsOperations).inflate();
					}
					viewHolder.vsOperations.setVisibility(View.VISIBLE);
					
				} else {

					viewHolder.vsOperations.setVisibility(View.GONE);
				}
			}
		});

		Log.e("111", "getView");
		
		return convertView;
	}

	@Override
	public int getCount() {
		// TODO Auto-generated method stub
		return data.size();
	}

	@Override
	public Object getItem(int position) {
		// TODO Auto-generated method stub
		return data.get(position);
	}

	@Override
	public long getItemId(int position) {
		// TODO Auto-generated method stub
		return position;
	}

}

 

activity_main.xml:主界面布局就一个ListView

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <ListView
        android:id="@+id/lv_list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
         />

</RelativeLayout>

 

list_item_main_task.xml: ListView中的每个Item,注意里面的ViewStub,通过它来引用一个布局文件,即隐藏的操作按钮。

<?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:orientation="vertical" >

    <!-- 每个ListItem除了ViewStub,都在这个标签里面 -->

    <RelativeLayout
        android:id="@+id/rl_list_item"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/bg_list_item_task"
        android:gravity="center" >

        <!-- android:descendantFocusability="blocksDescendants" 当ListView setOnItemClickListener点击没有效果的时候,加上这个 -->


        <!-- 任务的名称和超期时间 -->

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:gravity="center_vertical"
            android:orientation="vertical" >

            <TextView
                android:id="@+id/tv_task_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="任务1"
                android:textColor="#404040"
                android:textSize="22dp" />

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center_vertical"
                android:orientation="horizontal" >

                <TextView
                    android:id="@+id/tv_over_date"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="超期2天"
                    android:textColor="#ff0000"
                    android:textSize="15dp" />

                <TextView
                    android:id="@+id/tv_name"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="5dip"
                    android:text="张小三"
                    android:textColor="#333333"
                    android:textSize="15dp" />
            </LinearLayout>
        </LinearLayout>
    </RelativeLayout>

    <ViewStub
        android:id="@+id/vs_detail_operations"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout="@layout/view_stub_tool_bar" />

</LinearLayout>
 

view_stub_tool_bar.xml: 被隐藏的操作按钮

<?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:orientation="horizontal"
    android:gravity="center_vertical"
    android:paddingTop="8dip"
    android:background="@drawable/bg_list_item_task_view_stub" >

    <ImageButton
        android:id="@+id/btn_compelete"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:minHeight="55dp"
        android:background="@null"
        android:src="@drawable/ico_complete_selector" />

    <ImageButton
        android:id="@+id/btn_important"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:minHeight="55dp"
        android:background="@null"
        android:src="@drawable/ico_important_selector" />

    <ImageButton
        android:id="@+id/btn_"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:minHeight="55dp"
        android:background="@null"
        android:src="@drawable/ico_notify_selector" />

    <ImageButton
        android:id="@+id/btn_"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:minHeight="55dp"
        android:background="@null"
        android:src="@drawable/ico_love_selector" />

    <ImageButton
        android:id="@+id/btn_"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:minHeight="55dp"
        android:background="@null"
        android:src="@drawable/ico_share_selector" />

</LinearLayout>

 

一些资源文件这里就不贴出来了,有兴趣的同学可以下载demo来看看。

使用ViewStub的好处是,它并没有实例化这个View对象,而是在用户点击的时候才进行实例化,这样可以提高效率。特别是当你的listItem比较复杂的时候,效果很明显。

 

项目地址:https://github.com/michaelye/ViewStubDemo.git

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  • 大小: 967.6 KB
分享到:
评论

相关推荐

    Android下使用ViewStub控件加载

    在"ViewStubDemo"这个压缩包文件中,很可能包含了演示ViewStub使用的一个简单示例项目,可能包括了XML布局文件和对应的Java代码,开发者可以通过查看和运行这个示例来更好地理解ViewStub的工作原理和用法。...

    Android UI优化之ViewStub标签的使用

    本篇文章将详细探讨ViewStub的使用方法及其在UI优化中的作用。 **一、ViewStub的基本概念** ViewStub是一个不可见且不占用屏幕空间的视图,它主要用于在运行时动态地加载其他布局。由于它在初始化时不进行任何布局...

    第三章 Android开发 使用ViewStub延迟展开视图.docx

    以下是对ViewStub使用方法的详细说明: 1. **定义ViewStub** 在XML布局文件中,通过以下方式定义一个ViewStub: ```xml &lt;ViewStub android:id="@+id/stub_import" android:inflatedId="@+id/panel_import" ...

    DataBinding中ViewStub例子

    在DataBinding中结合使用ViewStub,可以实现更灵活的视图管理。 **DataBinding库的介绍** DataBinding库通过在XML布局文件中定义绑定表达式,将数据自动绑定到对应的UI组件上,从而避免了手动设置视图的值。它引入...

    ListView之ViewStub的使用

    在ListView中巧妙地使用ViewStub,可以实现一些动态加载或优化性能的需求。本文将深入探讨如何在ListView中应用ViewStub。 1. **ViewStub基本概念** - ViewStub是一个特殊的轻量级视图,初始状态是不可见的,不...

    ViewStub的使用简单示例

    使用ViewStub可以提高应用的性能,因为它允许你只在需要时才加载和初始化额外的视图,减少了内存消耗和UI渲染时间。 5. **注意点**: - ViewStub加载的布局不能包含根节点,否则会导致运行时错误。 - ViewStub的...

    ViewStub的简单使用

    - **错误提示**:在数据加载失败时,使用ViewStub加载错误提示界面,避免一开始就占用屏幕空间。 - **广告条**:在用户滚动到页面底部时才加载广告,减少对用户体验的影响。 - **动态加载视图**:根据用户权限或其他...

    ViewStub利用ViewStub显示和隐藏布局

    在Android开发中,ViewStub是一个轻量级的组件,它在初始加载时占用的资源非常少,主要用于延迟加载和动态插入布局。ViewStub在XML布局文件中定义,但默认情况下它是不可见的,不会占据任何空间,直到被显式地设置为...

    ViewStub 使用及源码解析

    我们知道布局优化有三个标签,include 、merge 和 ViewStub。 我们可以把公共的布局抽取到一个 xml 中,然后使用 include 来引用; 布局会分层次,如果里层和上一层是同样的容器,则可以使用 merge,但记住一点,...

    Android布局优化之ViewStub控件

    当ViewStub使用在布局文件中时,当程序inflate布局文件时,ViewStub本身也会被解析,且占据内存控件,但是与其他控件相比,主要区别体现在以下几点: 1.当布局文件inflate时,ViewStub控件虽然也占据内存,但是相...

    Android在layout xml中使用ViewStub完成动态加载问题

    Android 在 layout xml 中使用 ViewStub 完成动态加载问题 Android 中的动态加载问题是指在应用程序中根据不同的条件来决定显示哪个 View 或某个布局的问题。在 Android 中,通常的做法是把可能用到的 View 都写在...

    ViewStub的简单Demo

    在本文中,我们将深入理解`ViewStub`的工作原理,以及如何在实际项目中使用它。 **一、ViewStub的基本概念** `ViewStub` 是Android SDK提供的一种特殊的视图类,它的主要特点是在布局文件加载时不会占据任何空间,...

    惰性控件ViewStub实现布局东动态加载

    一、ViewStub的基本使用 1. **声明ViewStub**:在XML布局文件中,我们可以像声明其他View一样声明一个ViewStub,但需要注意的是,它默认是不可见的(`android:visibility="gone"`)。 ```xml &lt;ViewStub android:...

    Android ViewStub 页面状态动态切换

    2. **使用数据绑定和LiveData** 结合MVVM架构,我们可以利用数据绑定库和LiveData来自动更新页面状态。当LiveData的值变化时,自动触发对应的视图加载或隐藏。 3. **避免内存泄漏** 注意在适当的时候释放ViewStub...

    动态添加控件和ViewStub的使用例子

    在Android开发中,动态添加控件和使用ViewStub是两种非常实用的技术,它们极大地提高了界面的灵活性和可扩展性。动态添加控件允许开发者在运行时根据需要创建和添加组件,而ViewStub则是一种轻量级的视图,用于延迟...

    Android代码-RxJava封装的ViewStub。使用方式与RxBinding相似。

    But the ViewStub is an invisible and zero-sized view that can be used to lazy loading on demand. Similarly, with reduce memory usage, use ViewStub can also speed up rendering by loading the views ...

    android 用ViewStub实现Tab选项卡效果

    这时,ViewStub就派上用场了,我们可以将每个Tab的详细内容放入一个单独的布局文件,然后在用户切换到对应Tab时才使用ViewStub加载。 步骤如下: 1. 创建XML布局文件:首先,为每个Tab创建一个XML布局文件,例如`...

    Android中使用ViewStub实现布局优化

    通过使用ViewStub,我们可以只在用户点击展开按钮时才加载子话题的视图,这样就有效地减少了不必要的资源消耗。 接下来,我们了解一下如何在代码中使用ViewStub。在XML布局文件中,你可以像添加其他View一样添加...

    Android组件ViewStub基本使用方法详解

    当你调用`setVisibility(View.VISIBLE)`或`inflate()`方法时,`next.xml`布局会被加载,并替换掉ViewStub,同时被加载的视图会被添加到ViewStub的父视图中,使用ViewStub的布局参数。 总的来说,ViewStub是Android...

    ViewStub demo

    这个“ViewStub demo”压缩包文件很可能是为了演示如何在实际项目中使用ViewStub。下面我们将深入探讨ViewStub的相关知识点。 首先,了解ViewStub的基本属性: 1. **layout**:这是ViewStub最重要的属性,用于指定...

Global site tag (gtag.js) - Google Analytics